Виджет токенизации банковского счета

Используйте виджет, чтобы хранить данные банковских счетов в Банке 131.

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

Пример кода

<!DOCTYPE html>
<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/bank-account-tokenizer.css" rel="stylesheet" />
    <script src="https://widget-demo.bank131.ru/bank-account-tokenizer.js" defer></script>
  </head>
  <body>
    <main>
      <div id="bank131-bank-account-tokenizer"></div>
    </main>

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

        const bankAccountTokenizer = new Bank131BankAccountTokenizer(
          publicToken,
          {
            /*
            // Пример настройки текстов виджета
            texts: {
              // Лейбл поля для ввода номера счета. По умолчанию "Номер счета".
              bankAccountLabel: '',
              // Лейбл поля для ввода БИК. По умолчанию "БИК".
              bikLabel: '',
              // Кнопка привязки счета. По умолчанию "Привязать счет".
              submitButtonLabel: '',
              validationErrors: {
                invalidBankAccount: '',
                invalidBankAccountLength: '',
                invalidBikLength: '',
                isRequired: ''
               },
            },
            styles: {
              bankAccountTokenizer: {
                // Стили для строчного контейнера поля ввода.
                inputContainer: { background: 'cornsilk' },
                // Стили для поля ввода.
                inputField: { background: 'cornsilk' },
                // Стили для поля ввода при фокусе.
                inputFieldIsFocused: { background: 'white' },
                // Стили для поля ввода при ошибке.
                inputFieldIsInvalid: { background: 'red' },
                // Стили для плейсхолдера поля ввода.
                inputFieldPlaceholder: { color: 'blue' },
              },
            }
            */
          }
        );

        bankAccountTokenizer.onReady = function () {
          console.log('Bank account tokenizer is ready.');
        };

        bankAccountTokenizer.onTokenizationStart = function () {
          console.log('The tokenization process was started.');
        };
        bankAccountTokenizer.onTokenizationFail = function () {
          console.log(
            'The tokenization process was finished with an error',
            error
          );
        };
        bankAccountTokenizer.onTokenizationSuccess = function (result) {
          console.log(
            'The tokenization process was successfully finished.',
            result
          );
        };

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

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

Вы встраиваете виджет на сайт. Пользователь вводит данные счета, Банк 131 сохраняет их в своей системе, а вам возвращает токен для выплаты.

Вы можете сохранить этот токен и использовать его для повторных выплат на тот же счет. Это безопасно.

к сведению

Чтобы проверить данные токена, используйте метод token/info.

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

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

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

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

Подключите скрипт (JS) и стили (CSS) виджета. Для тестирования и операций с реальными данными адреса различаются:

{/* Для тестовой среды */}
<link href="https://widget-demo.bank131.ru/bank-account-tokenizer.css" rel="stylesheet" />
<script src="https://widget-demo.bank131.ru/bank-account-tokenizer.js" defer></script>

{/* Для операций с реальными данными */}
<link href="https://widget.bank131.ru/bank-account-tokenizer.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/bank-account-tokenizer.js" defer></script>

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

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

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

<div id="bank131-bank-account-tokenizer"></div>

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

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

const bankAccountTokenizer = new Bank131BankAccountTokenizer('public token');

Если нужно, передайте параметры для настройки текстов и стилей полей ввода:

const bankAccountTokenizer = new Bank131BankAccountTokenizer(
    'public token',
    {
        texts: {
            // Лейбл поля для ввода номера счета. По умолчанию "Номер счета".
            bankAccountLabel: '',
            // Лейбл поля для ввода БИК. По умолчанию "БИК".
            bikLabel: '',
            // Кнопка привязки счета. По умолчанию "Привязать счет".
            submitButtonLabel: '',
            validationErrors: {
              invalidBankAccount: '',
              invalidBankAccountLength: '',
              invalidBikLength: '',
              isRequired: ''
            },
        },
        styles: {
            bankAccountTokenizer: {
            // Стили для строчного контейнера поля ввода.
            inputContainer: { background: 'cornsilk' },
            // Стили для поля ввода.
            inputField: { background: 'cornsilk' },
            // Стили для поля ввода при фокусе.
            inputFieldIsFocused: { background: 'white' },
            // Стили для поля ввода при ошибке.
            inputFieldIsInvalid: { background: 'red' },
            // Стили для плейсхолдера поля ввода.
            inputFieldPlaceholder: { color: 'blue' },
        },
    }
);

При необходимости настройте обработчики для ключевых событий:

bankAccountTokenizer.onReady = function () {
    // Обработчик события готовности виджета к работе.
};

bankAccountTokenizer.onTokenizationStart = function () {
   // Обработчик события, возникающего при старте процесса токенизации.
};

bankAccountTokenizer.onTokenizationFail = function () {
   // Обработчик события, возникающего при ошибке процесса токенизации.
};

bankAccountTokenizer.onTokenizationSuccess = function (result) {
   // Обработчик события, возникающего при успешном завершении процесса токенизации.
};

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

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

bankAccountTokenizer.render();

Как выплатить с виджетом или по токену >