Виджет платежной формы
Виджет платежной формы нужен для проведения оплаты, если у вас нет PCI DSS.
Вы добавляете виджет на страницу, показываете пользователю, и дальше пользователь взаимодействует с виджетом — проходит все шаги оплаты от начала до конца. Сначала безопасно вводит данные карты, в конце видит сообщение об успешном платеже (или об ошибке, если что-то не получилось).
Вам нужно создать платежную сессию, а остальное сделает виджет (отправит запрос на оплату, перенаправит пользователя на на нужный адрес, покажет экран с результатом операции).
Как провести платеж через форму оплаты
Как выглядит виджет
Пример кода страницы с виджетом
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Виджет платежной формы</title>
<link href="https://widget.bank131.ru/payment-form.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/payment-form.js" defer></script>
</head>
<body>
<div id="bank131-payment-form"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (!window.Bank131PaymentForm) {
return;
}
const paymentForm = new Bank131PaymentForm('public token');
paymentForm.render();
});
</script>
</body>
</html>
Как добавить виджет на страницу
1. Подключите скрипты и стили
<!-- На тестовой среде -->
<link href="https://widget-demo.bank131.ru/payment-form.css" rel="stylesheet" />
<script src="https://widget-demo.bank131.ru/payment-form.js" defer></script>
<!-- Для реальных платежей -->
<link href="https://widget.bank131.ru/payment-form.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/payment-form.js" defer></script>
2. Добавьте контейнер с виджетом
<div id="bank131-payment-form"></div>
3. Создайте экземпляр виджета
После подключения скрипта к странице в глобальной области видимости появится класс
Bank131PaymentForm. Для создания платежной формы передайте в конструктор
публичный токен, полученный для работы с этим виджетом.
const paymentForm = new Bank131PaymentForm('public token');
Для отображения платежной формы вызовите метод render():
paymentForm.render();
API виджета
Bank131PaymentForm
Конструктор класса платежной формы.
const paymentForm = new Bank131PaymentForm(publicToken[, options])
| Параметр | Тип | Описание |
|---|---|---|
| publicToken | String | Обязательный. Публичный токен |
| options | Object | Объект дополнительных настроек |
| options.container | HTMLElement | Контейнер, в который будет вставлена форма. Значение по умолчанию: <div id="bank131-payment-form"></div> |
Метод paymentForm.render()
Метод отображает форму на странице, в контейнере, определенном параметром options.container.
paymentForm.render([options])
| Параметр | Тип | Описание |
|---|---|---|
| options | Object | Объект дополнительных настроек. |
| options.container | HTMLElement | Контейнер, в который будет вставлена форма. Значение по умолчанию: <div id="bank131-payment-form"></div> |
Обработчик события paymentForm.onReady
Обработчик события готовности формы к работе.
paymentForm.onReady = function () { /* обработчик */ }
Обработчик события paymentForm.onPaymentStart
Обработчик события, возникающего при старте процесса оплаты.
paymentForm.onPaymentStart = function () { /* обработчик */ }
Обработчик события paymentForm.onPaymentSuccess
Обработчик события, возникающего при успешном завершении процесса оплаты.
paymentForm.onPaymentSuccess = function () {
/* обработчик */
};
Обработчик события paymentForm.onPaymentFail
Обработчик события, возникающего при неуспешном завершении процесса оплаты.
paymentForm.onPaymentFail = function (error) { /* обработчик */ }
Кастомизация виджета
Внешний вид
Вы можете подключить собственные стили после стилей библиотеки и переопределить их. Например, так:
<link href="https://widget.bank131.ru/payment-form.css" rel="stylesheet" />
<link href="custom-styles.css" rel="stylesheet" />
Или так:
/* custom-styles.css */
.bank131-Field__label {
color: green;
}
Настроить внешний вид значений, которые вводятся в форму внутри iframe, пока нельзя. Позже такая возможность появится.