Интеграция ЕО в конструкторы сайтов
Единое Окно – виджет оплаты прямо на лендинге или сайте, не уводит клиента на внешнюю страницу. В виджете мы максимально сократили лишние действия, чтобы облегчить оплату.
Единое окно поддерживает:
- Быстрый платеж
- Оплату зарубежными и РФ картами
- Система Быстрых Платежей
- Сбербанк
- Кредиты и рассрочки от Тинькофф, Всегда.Да и Частями от Продамус.
Цель Единого Окна - максимальные конверсии в оплату. Для этого мы убрали лишние шаги, переработали дизайн.
Виджет умеет отправлять информацию о статусе оплаты обратно на сайт или в 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.
<script>
const UNIQ_IDButton = document.querySelector("#UNIQ_ID")
UNIQ_IDButton?.addEventListener("click", () => {
payformInit("XXX.payform.ru", {
order_sum: 100,
currency: "rub",
customer_email: "[email protected]",
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>
Информация носит исключительно справочный характер и не является офертой. С актуальной редакцией оферты и тарифами Вы можете ознакомиться в разделе "Документы".