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

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

Этот виджет позволяет безопасно проводить операции с банковскими картами.

Вы подключаете виджет на страницу в своем сервисе, отображаете пользователю и получаете данные карты в токенизированном виде. С этими данными можно проводить выплаты.

Всё безопасно: форма для ввода данных отображается во фрейме, и операции проводятся по уникальному токену.

Токен с номером карты можно сохранить, и проводить выплаты на эту карту повторно — по токену. Вы можете узнать информацию о токене или о карте с помощью метода token/info. В том числе — получить последние 4 цифры номера карты, чтобы показать пользователю, куда придет выплата.

Как выглядит виджет​

Начальное состояние виджета​

Пример кода страницы с виджетом​

<!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>

Как добавить виджет на страницу​

Для использования виджета необходимо подключить на страницу JavaScript-библиотеку и получить токен (с помощью метода token).

1. Подключите скрипты и стили​

Необходимо подключить скрипт и стили виджета к странице.

<!-- На тестовой среде -->
<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>

2. Добавьте контейнер с виджетом​

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

3. Создайте экземпляр виджета​

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

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

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

Обработайте событие успешного получения токена:

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

Для отображения формы вызовите метод render():

cardTokenizer.render();

API виджета​

Bank131CardTokenizer​

Конструктор класса формы токенизации.

new Bank131CardTokenizer(publicToken[, options])
ПараметрТипОписание
publicTokenstringОбязательный. Публичный токен
optionsobjectОбъект дополнительных настроек
options.containerHTMLElementКонтейнер, в который будет вставлена форма.
Значение по умолчанию:
<div id="bank131-card-tokenizer"></div>
options.textsobject
options.texts.cardNumberLabelstringЛейбл к полю ввода карточного номера. Значение по умолчанию Номер карты
options.texts.submitButtonLabelstringЛейбл кнопки токенизации. Значение по умолчанию Привязать карту

Метод cardTokenizer.render()​

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

cardTokenizer.render();

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

Обработчик события готовности формы к работе.

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

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

Обработчик события, возникающего при старте процесса токенизации.

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

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

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

cardTokenizer.onTokenizationSuccess = function (cardToken) {
  /* обработчик */
};
ПараметрТипОписание
cardTokenobject
cardToken.infoobjectОбъект дополнительной информации по карте
cardToken.info.card_networkstringТип карточной системы. Возможные значения: visa, mastercard, mir
cardToken.info.card_typestringТип карты. Дополнительно включает подбренд (visa_electron, maestro, mirmaestro)
cardToken.info.masked_card_numberstringМаскированное значение номера карты, например 424242******4242
cardToken.tokenstringТокен карточного номера

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

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

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

Кастомизация виджета​

Внешний вид​

Вы можете подключить собственные стили после стилей библиотеки и переопределить их. Например, так:

<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;
}

Кастомизировать внешний вид значения, которое вводится в форму (внутри iframe), пока нельзя. Позже такая возможность появится.

Тексты​

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