Интеграция ЕО в конструкторы сайтов

Единое Окно – виджет оплаты прямо на лендинге или сайте, не уводит клиента на внешнюю страницу. В виджете мы максимально сократили лишние действия, чтобы облегчить оплату.

👉 Видеообзор о том, как работает виджет

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

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

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

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

- Сбербанк

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

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

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

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

ВАЖНО!

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

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

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

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

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

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

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

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

Примечание: Теги <body></body> уже присутствуют на страницы, специалисту Школы нужно найти, где закрывается данный тег </body> и перед ним поставить код, который приведен ниже, с поправкой на данные Школы.

Пример вызова виджета для кнопки 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> от сервиса оплаты
order_sum – сумма заказа (в примере выше имеет значение 100)
currency – валюта заказа (в примере выше имеет значение "rub”). Значение данного атрибута может быть пустым – в этом случае система определить валюту, как рубли. Варианты значений данного атрибута:
rub – валюта Рубли;
usd – валюта Доллары;
eur – валюта Евро;
kzt – валюта Тенге.

ВАЖНО!

Школа также может передать почту клиента и телефон, добавив атрибуты customer_email и customer_phone в вызов функции payformInit.

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

const UNIQ_IDButton = document.querySelector("#UNIQ_ID")

UNIQ_IDButton?.addEventListener("click", () => {

payformInit("XXX.payform.ru", { order_sum: 100,

currency: "rub",

customer_email: "test@mail.ru",

customer_phone: "+79994478937",

})

</script>

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

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

ВАЖНО!

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

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

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

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

{ 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>

Информация носит исключительно справочный характер и не является офертой. С актуальной редакцией оферты и тарифами Вы можете ознакомиться в разделе "Документы".

PreviousИнтеграции со сторонними сервисами NextКак подключить виджет Prodamus к сайту на Taplink

Last updated 8 months ago