Виджет токенизации карты

Используйте виджет, чтобы хранить данные банковских карт в Банке 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.

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

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

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

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

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

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

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

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

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

API виджета​

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

Метод cardTokenizer.render()​

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

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

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

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

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

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

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