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

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

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

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

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

Токен с номером карты можно сохранить, и проводить выплаты на эту карту повторно — по токену. Вы можете узнать информацию о токене или о карте с помощью метода 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.