Documentation

Documentation

  • API Банка 131
  • Languages iconРусский
    • English

›Виджеты

Документация

  • Возможности API
  • С чего начать

Работа с API

  • Формат работы
  • Библиотеки
  • Тестирование
  • История изменений

Массовые выплаты

  • Возможности
  • Как всё работает
  • Сценарии выплат
  • Возвраты выплат
  • Самозанятые

    • Выплаты самозанятым
    • Привязка самозанятого
    • Фискализация без выплаты

    Способы получения выплат

    • На российскую банковскую карту
    • На иностранную карту
    • На счет в российском банке
    • В кошелек QIWI
    • В кошелек ЮMoney (Яндекс.Деньги)
    • В налоговую
    • Через СБП по номеру телефона

    Выплаты по шагам

    • Выплата на карту с виджетом
    • Выплата одним запросом
    • Выплата на карту с PCI DSS
    • Выплата самозанятому с фискализацией

Прием платежей

  • Возможности
  • Процесс платежа
  • Платеж банковской картой
  • Платежи с холдированием
  • Возвраты
  • Рекуррентные платежи
  • Интеграция с Google Pay™
  • Платежи через Telegram
  • Платежи через СБП по QR-коду
  • Сплит-платежи

    • Варианты и возможности
    • Сплит-платежи без доработок
    • Сплит-платежи по API

    Платежи по шагам

    • Оплата через платежную форму
    • Оплата с PCI DSS
    • Платеж одним запросом
    • Google Pay™

Виджеты

  • Виджет для токенизации карты
  • Виджет платежной формы
  • Виджет для привязки самозанятого

Проверка паспорта

  • Возможности
  • Взаимодействие
  • Методы

    • Проверка паспорта
    • Статус проверки
  • Ответы и ошибки

Акты и реестры

  • Реестр выплат
  • Реестр платежей
  • Акт

Справочник API

  • Объекты
  • Методы
  • Вебхуки
  • Коды ошибок

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

Виджет платежной формы нужен для проведения оплаты, если у вас нет 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])
ПараметрТипОписание
publicTokenStringОбязательный. Публичный токен
optionsObjectОбъект дополнительных настроек
options.containerHTMLElementКонтейнер, в который будет вставлена форма.
Значение по умолчанию:
<div id="bank131-payment-form"></div>

Метод paymentForm.render()

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

paymentForm.render([options])
ПараметрТипОписание
optionsObjectОбъект дополнительных настроек.
options.containerHTMLElementКонтейнер, в который будет вставлена форма.
Значение по умолчанию:
<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, пока нельзя. Позже такая возможность появится.

← Виджет для токенизации картыВиджет для привязки самозанятого →
  • Как выглядит виджет
  • Пример кода страницы с виджетом
  • Как добавить виджет на страницу
  • API виджета
    • Bank131PaymentForm
    • Метод paymentForm.render()
    • Обработчик события paymentForm.onReady
    • Обработчик события paymentForm.onPaymentStart
    • Обработчик события paymentForm.onPaymentSuccess
    • Обработчик события paymentForm.onPaymentFail
  • Кастомизация виджета
    • Внешний вид
Documentation
Документация
Массовые выплатыПрием платежейСправочник API
Сценарии по шагам
Выплата на карту с токеномВыплата на карту с PCI DSSВыплата самозанятомуОплата через платежную форму
Напишите нам
Предложения и идеи — partners@131.ruПресса — press@131.ru
© 2022 Банк 131