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

Виджет оплаты через SberPay

Виджет оплаты через SberPay нужен, чтобы принимать платежи без ввода данных карты.

Внешний вид виджета​

Пример кода страницы с виджетом
<!DOCTYPE html>

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

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

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

  <body>
    <main>
      <div id="bank131-sber-pay-payment"></div>
    </main>

    <script>
      const publicToken = 'publicToken'; // публичный токен из запроса token

      document.addEventListener('DOMContentLoaded', function () {
        if (!window.Bank131SberPayPayment) {
          return;
        }

        const widget = new Bank131SberPayPayment(publicToken);

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

        widget.onSberPayStart = function () {
          console.log('SberPayPayment was started.');
        };
        widget.onSberPayFail = function (error) {
          console.log('SberPayPayment was failed with an error', error);
        };
        widget.onSberPaySuccess = function () {
          console.log('SberPayPayment was succeed.');
        };

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

Принцип работы виджета​

Вы встраиваете виджет на сайт. Виджет открывает окно SberPay, в котором пользователь проходит авторизацию и подтверждает платеж. После этого виджет отображает статус и результат операции.

Инициализация виджета​

Шаг 1. Получите публичный токен​

Отправьте запрос Банку 131 на создание токена (token), передав в нем тип виджета sber_pay_widget. В ответе вы получите публичный токен.

Шаг 2. Подключите скрипт и стили​

Подключите скрипт (JS) и стили (CSS) виджета:

<!-- Для операций с реальными данными -->
<link href="https://widget.bank131.ru/sber-pay-payment.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/sber-pay-payment.js" defer></script>

После подключения скрипта в глобальной области видимости появится класс Bank131SberPayPayment.

Шаг 3. Добавьте контейнер​

Добавьте контейнер с уникальным идентификатором для размещения виджета на странице:

<div id="bank131-sber-pay-payment"></div>

Шаг 4. Создайте экземпляр класса​

В конструктор класса Bank131SberPayPayment передайте публичный токен:

const widget = new Bank131SberPayPayment('publicToken');

Шаг 5. Отобразите виджет​

Вызовите метод render():

widget.render();

API виджета​

Конструктор Bank131SberPayPayment​

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

const widget = new Bank131SberPayPayment(publicToken)
ПараметрТипОписание
publicTokenstringПубличный токен. Обязательный параметр

Метод widget.render()​

Отображает виджет внутри контейнера, указанного в id="bank131-sber-pay-payment":

widget.render();

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

Вызывается, когда виджет готов к работе:

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

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

Вызывается при старте процесса оплаты через SberPay:

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

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

Вызывается при успешном завершении оплаты:

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

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

Вызывается при неуспешном завершении оплаты:

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

Как принять платеж через SberPay >