Виджет для получения токенизированных данных банковской карты

Используйте виджет, чтобы хранить данные банковских карт в Банке 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.bank131.ru/card-tokenizer.css"
      rel="stylesheet"
    />
    <script src="https://widget.bank131.ru/card-tokenizer.js" defer></script>
  </head>

  <body>
    <div id="bank131-card-tokenizer"></div>

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

        const cardTokenizer = new Bank131CardTokenizer('public token');

        cardTokenizer.onTokenizationSuccess = function (cardToken) {
          // Обработка события успешного завершения процесса токенизации.
        };

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

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

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

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

к сведению

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

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

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

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

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

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

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

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

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

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

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

<div id="bank131-card-tokenizer"></div>

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

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

const cardTokenizer = new Bank131CardTokenizer('public token');

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

cardTokenizer.onTokenizationSuccess = function (cardToken) {
  // ...
};

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

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

cardTokenizer.render();

API виджета

Конструктор Bank131CardTokenizer

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

new Bank131CardTokenizer(publicToken[, options])

Параметр	Тип	Описание
publicToken	string	Публичный токен. Обязательный параметр
options	object	Дополнительные настройки
options.container	HTMLElement	Контейнер, в который будет встроен виджет. По умолчанию <div id="bank131-card-tokenizer"></div>
options.texts	object
options.texts.cardNumberLabel	string	Лейбл поля для ввода номера карты. По умолчанию Номер карты
options.texts.submitButtonLabel	string	Лейбл кнопки привязки карты. По умолчанию Привязать карту

Метод cardTokenizer.render()

Отображает виджет внутри контейнера, указанного в options.container:

cardTokenizer.render();

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

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

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

Обработчик события cardTokenizer.onTokenizationStart

Вызывается при старте процесса токенизации:

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

Обработчик события cardTokenizer.onTokenizationSuccess

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

cardTokenizer.onTokenizationSuccess = function (cardToken) {
  /* обработчик */
};

Параметр	Тип	Описание
cardToken	object
cardToken.info	object	Дополнительная информация по карте
cardToken.info.card_network	string	Тип платежной системы. Возможные значения: visa, mastercard, mir
cardToken.info.card_type	string	Тип карты. Дополнительно включает подбренд (visa_electron, maestro, mirmaestro)
cardToken.info.masked_card_number	string	Маскированное значение номера карты, например 424242******4242
cardToken.token	string	Хеш номера карты

Обработчик события cardTokenizer.onTokenizationFail

Вызывается при ошибке процесса токенизации:

cardTokenizer.onTokenizationFail = function (error) {
  /* обработчик */
};

Настройка виджета

Изменение внешнего вида

Чтобы изменить внешний вид виджета, подключите свой файл со стилями после стандартных стилей. Поле ввода внутри iframe изменить нельзя.

Пример подключения стилей:

<link href="https://widget.bank131.ru/card-tokenizer.css" rel="stylesheet" />
<link href="custom-styles.css" rel="stylesheet" />

Пример переопределения цвета:

/* custom-styles.css */

.bank131-Field__label {
  color: green;
}

Изменение текстов

Вы можете изменить стандартные тексты с помощью параметра options.texts в конструкторе Bank131CardTokenizer.

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