Перейти к основному содержимому

Виджет Системы быстрых платежей

Виджет платежной формы нужен для проведения оплаты через СБП.

Вы добавляете виджет на страницу, показываете пользователю, и дальше пользователь взаимодействует с виджетом — проходит все шаги оплаты от начала до конца, и в конце видит сообщение об успешном платеже (или об ошибке, если что-то не получилось).

Вам нужно создать платежную сессию, а остальное сделает виджет (отправит запрос на оплату, перенаправит пользователя на нужный адрес, покажет экран с результатом операции).

Как провести платеж через СБП

Как выглядит виджет​

Виджет платежной формы

Пример кода страницы с виджетом​

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>СБП оплата</title>

    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="format-detection" content="telephone=no" />

    <!-- Подключение скрипта и стилей виджета. -->
    <link href="https://widget-demo.bank131.ru/sbp-payment.css" rel="stylesheet" />
    <script src="https://widget-demo.bank131.ru/sbp-payment.js" defer></script>
  </head>

  <body>
    <div id="bank131-sbp-payment"></div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        if (!window.Bank131SBPPayment) {
          return;
        }

        const widget = new Bank131SBPPayment('public_token');

        widget.onReady = function () {
          console.log('SBPPayment is ready.');
        };

        widget.onSBPStart = function () {
          console.log('SBPPayment was started.');
        };
        widget.onSBPFail = function (error) {
          console.log('SBPPayment was failed with an error', error);
        };
        widget.onSBPSuccess = function () {
          console.log('SBPPayment was succeed.');
        };

        widget.render();
      });
    </script>
  </body>
</html>

Как добавить виджет на страницу​

1. Подключите скрипты и стили​

<!-- На тестовой среде -->
<link href="https://widget-demo.bank131.ru/sbp-payment.css" rel="stylesheet" />
<script src="https://widget-demo.bank131.ru/sbp-payment.js" defer></script>
<!-- Для реальных платежей -->
<link href="https://widget.bank131.ru/sbp-payment.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/sbp-payment.js" defer></script>

2. Добавьте контейнер с виджетом​

<div id="bank131-sbp-payment"></div>

3. Создайте экземпляр виджета​

После подключения скрипта к странице в глобальной области видимости появится класс Bank131SBPPayment. Для создания платежной формы передайте в конструктор публичный токен, полученный для работы с этим виджетом.

const widget = new Bank131SBPPayment('public token');

Для отображения платежной формы вызовите метод render():

widget.render();

API виджета​

Bank131SBPPayment​

Конструктор класса виджета.

const widget = new Bank131SBPPayment(publicToken[, options])
ПараметрТипОписание
publicTokenstringОбязательный. Публичный токен
optionsobjectОбъект дополнительных настроек
options.containerHTMLElementКонтейнер, в который будет вставлена форма.
Значение по умолчанию:
<div id="bank131-sbp-payment"></div>

Метод widget.render()​

Метод отображает форму на странице, в контейнере, определенном параметром options.container.

widget.render([options])
ПараметрТипОписание
optionsobjectОбъект дополнительных настроек.
options.containerHTMLElementКонтейнер, в который будет вставлена форма.
Значение по умолчанию:
<div id="bank131-sbp-payment"></div>

Обработчик события widget.onReady​

Обработчик события готовности формы к работе.

widget.onReady = function () { /* обработчик */ }

Обработчик события widget.onSBPStart​

Обработчик события, возникающего при старте процесса оплаты.

widget.onSBPStart = function () { /* обработчик */ }

Обработчик события widget.onSBPSuccess​

Обработчик события, возникающего при успешном завершении процесса оплаты.

widget.onSBPSuccess = function () {
  /* обработчик */
};

Обработчик события widget.onSBPFail​

Обработчик события, возникающего при неуспешном завершении процесса оплаты.

widget.onSBPFail = function (error) { /* обработчик */ }

Кастомизация виджета​

Внешний вид​

Вы можете подключить собственные стили после стилей библиотеки и переопределить их:

/* custom-styles.css */

.bank131-Field__label {
  color: green;
}