# Описание

<figure><img src="https://4061190562-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5pHt5axogA0zyX7V6_%2Fuploads%2FznF5IlltS5yEiOlNL4zJ%2Fimage1.png?alt=media&#x26;token=918c4e97-87a1-4da9-9178-5bb19d8eb214" alt=""><figcaption></figcaption></figure>

👉 [Видеообзор о том, как работает виджет](https://disk.yandex.ru/i/zfHbT-fcgAgKZQ)

**Единое окно оплат поддерживает:**

\- Быстрый платеж

\- Оплату зарубежными и РФ картами

\- Система Быстрых Платежей

\- Сбербанк

\- Кредиты и рассрочки от Тинькофф, Всегда.Да и Частями от Продамус.

Цель Единого Окна - максимальные конверсии в оплату. Для этого мы убрали лишние шаги, переработали дизайн.

Виджет умеет отправлять информацию о статусе оплаты обратно на сайт или в CRM, что бы своевременно получали информацию.&#x20;

### Алгоритм подключения

{% hint style="success" %}
**ВАЖНО!**

Зеленым выделены атрибуты, которые нужно заменить на параметры Школы
{% endhint %}

Для того, чтобы интегрировать платежный виджет в сайт школы, нужно сделать следующие шаги:

1\. Школа должна иметь платежную страницу (иметь ссылку вида \<domenName>.payform.ru), а также должны быть включены методы оплаты в ЛК Payform. Если вы не зарегистрированы перейдите на страницу <https://prodamus.ru/>, оставьте заявку и с вами свяжутся менеджеры для подключения.

2\. В код сайта Школы между блоками \<head>\</head> нужно вставить код для интеграции платежного виджета

```
<script defer src="https://widget.dev.prodamus.ru/src/init.js"></script>
<link rel="stylesheet" href="https://widget.dev.prodamus.ru/src/init.css">
```

&#x20; 3\. Далее нужно для кнопки «оплатить»/«купить курс» (на сайте Школы):

* добавить уникальный Id (***Пример:*** *`<button id="`<mark style="color:green;background-color:green;">`UNIQ_ID`</mark>`">Купить</button>`*)
* прописать вызов метода payformInit по событию клика на данную кнопку (Пример кода ниже)

Код ниже нужно вставить на странице, где у вас отображается кнопка «оплатить»/«купить курс», внутри тегов `<body></body>`

{% hint style="info" %}
**Примечание:** *Теги \<body>\</body> уже присутствуют на страницы, специалисту Школы нужно найти, где закрывается данный тег \</body> и перед ним поставить код, который приведен ниже, с поправкой на данные Школы*.
{% endhint %}

*Пример вызова виджета для кнопки UNIQ\_ID*

```
<script>
   // если у вас несколько кнопок, то для каждой из кнопок нужно продублировать код ниже, со своим уникальным идентификатором кнопки.
    // UNIQ_IDButton -  техническое название кнопки (должно быть уникальным)
    // UNIQ_ID - уникальный идентификатор кнопки, который
    const UNIQ_IDButton = document.querySelector("#UNIQ_ID")
    // например, если у Вашей кнопки UNIQ_ID это englishCourse, то вместо UNIQ_IDButton следует написать englishCourseButton
    // UNIQ_IDButton - название вашей кнопки
    UNIQ_IDButton?.addEventListener("click", () => {
        payformInit("XXX.payform.ru", { // где, XXX.payform.ru - ссылка на вашу пейформу, без указания https://
            order_sum: 100, // Стоимость заказа в валюте заказа
            currency: "rub", // Валюта заказа. Не обязательный параметр (можно прсото удалить всю строчку)
        })
</script>
```

*Описание параметров метода*, приведенного в примере выше, где:

* “ХХХ.payform.ru” - платежная страница Школы в формате \<domenName>.payform.ru, где ХХХ – ваш \<domenName> **от сервиса оплаты в Prodamus**
* order\_sum – сумма заказа (в примере выше имеет значение 100)
* currency  – валюта заказа (в примере выше имеет значение *"*&#x72;u&#x62;*”*).\
  &#x20;Значение данного атрибута может быть пустым – в этом случае система определить валюту, как рубли.\
  &#x20;Варианты значений данного атрибута:
* rub – валюта Рубли;
* usd – валюта Доллары;
* eur – валюта Евро;
* kzt – валюта Тенге.

{% hint style="warning" %}
**ВАЖНО!**

Школа также может передать почту клиента и телефон, добавив атрибуты customer\_email и customer\_phone в вызов функции payformInit.&#x20;
{% endhint %}

<details>

<summary>Пример, как тогда будет выглядеть вызов</summary>

\<script>

&#x20;    const <mark style="color:green;background-color:green;">UNIQ\_ID</mark>Button = document.querySelector("#<mark style="background-color:green;">UNIQ\_ID</mark>")

&#x20;   <mark style="background-color:green;">UNIQ\_ID</mark>Button?.addEventListener("click", () => {

&#x20;       payformInit("<mark style="background-color:green;">XXX</mark>.payform.ru", {\
&#x20;            order\_sum: <mark style="background-color:green;">100</mark>,

&#x20;           currency: "<mark style="background-color:green;">rub</mark>",

customer\_email: "<mark style="background-color:green;"><test@mail.ru></mark>",

customer\_phone: "<mark style="background-color:green;">+79994478937</mark>",

&#x20;       })

\</script>

</details>

**НО! Если Школа этого не сделает и не передаст значения телефона и почты Клиента, виджет самостоятельно проверит и запросит эти данные у клиента.**

4\. После оплаты, Школа может (опционально) обрабатывать событие оплаты, которые виджет шлет посредством postMessages на сайт Школы. Данный функционал не обязателен и используется, если Школа хочет отобразить что-то для клиента в зависимости от его оплаты, или перенаправить его на другую страницу и т.д.

{% hint style="warning" %}
**ВАЖНО!**

Отправка postMessages (обратная связь о результате оплаты для Школы) доступна для следующих методов оплаты:

* Банковские карты, выпущенные в РФ;
* Быстрые платежи$
* Сбербанк-онлайн.

По всем остальным методам оплаты/платежным агрегаторам доступна обратная связь об успешной оплате посредством call-back. Данный функционал доступен для обычной интеграции payform. Подробнее о его настройке - <https://help.prodamus.ru/payform.ru-onlain-oplaty/uvedomleniya?q=call-back> &#x20;
{% endhint %}

**Пример того, что может быть прислано со стороны виджета:**

`{ status: "close" | "waiting" | "error" | "success" , message: "",}`

**Примечание:** символ | в примере – обозначает “или”, т.е. в атрибуте status будет отправлено только одно из представленных значений.

Описание значений для status

* close – (технический статус) клиент просто закрыл виджет или виджет закрылся после успешной оплаты
* waiting - началась (или идет) обработка платежа
* error - ошибка оплаты. Тут будет еще передаваться message (для sbrf (Банковская карта, выпущенная в РФ) НЕ ПЕРЕДАЕТСЯ - проработать)
* success - оплата прошла успешно

**Варианты обработки результата оплаты, передаваемый виджетом**

Ниже приведен код с пояснениями, что именно нужно скорректировать Школе, и какой будет результат, в зависимости от статуса оплаты клиента. Если Школа желает, чтобы результат оплаты, передаваемый виджетом, как-то обрабатывался, то данный код также нужно вставить на страницу с кнопкой «купить курс»/ «оплатить», перед закрывающим тегом \</body>, который уже есть в коде страницы.

```
<script>
window.addEventListener("message", event => {
        if (event.data.status === "close") {
            // Данный код выполнится, если клиент закрыл виджет (или он закрылся сам после оплаты)
            console.log("current status is close")
        }
        if (event.data.status === "waiting") {
            // Данный код выполнится, если идет обработка платежа
            console.log("current status is waiting")
        }
        if (event.data.status === "success") {
            // Данный код выполнится, если оплата прошла успешно
            window.location.href = "https://XXXX.XX/thanks.html"
            //, где https://XXXX.XX/thanks.html - ссылка на страницу, на которую будет отправлен пользоватль, в случае успещной оплаты
            console.log("current status is success")
        }
        if (event.data.status === "error") {
            // Данный код выполнится, если оплата по какой-то причине не прошла
            window.location.href = "https://XXXX.XX/error.html"
            //, где https://XXXX.XX/error.html - ссылка на страницу, на которую будет отправлен пользоватль, в случае не успещной оплаты
            console.log("current status is error")
            console.log("error is:")
            console.log(event.data.status)
            // где event.data.status - сообщение об ошибке (может отсутвовать)
        }
    });
</script>
```

{% hint style="info" %}
Информация носит исключительно справочный характер и не является офертой. С актуальной редакцией оферты и тарифами Вы можете ознакомиться в разделе "[Документы](https://prodamus.ru/documents)".
{% endhint %}
