Виджет платежной формы
Виджет платежной формы нужен для проведения оплаты.
Вы добавляете виджет на страницу, показываете пользователю, и дальше пользователь взаимодействует с виджетом — проходит все шаги оплаты от начала до конца. Сначала безопасно вводит данные карты, в конце видит сообщение об успешном платеже (или об ошибке, если что-то не получилось).
Вам нужно создать платежную сессию, а остальное сделает виджет (отправит запрос на оплату, перенаправит пользователя на нужный адрес, покажет экран с результатом операции).
Как провести платеж через форму оплаты
Как выглядит виджет
Обычный виджет
С чекбоксом для проведения рекуррентных платежей
Пример кода страницы с виджетом
<!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('publicToken', {
isCvcMasked: true,
customerInteractionRedirect: {
target: "_blank",
}});
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>