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

С нашим виджетом вы можете безопасно проводить операции с банковскими картами.

Подключите виджет на странице в своем сервисе. После взаимодействия пользователя с виджетом, вы получите данные карты в токенизированном виде. Далее проводите выплаты с этим токеном.

Чтобы получить информацию о токене или о карте, используйте метод token/state. Например, чтобы получить последние 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.zetplat.com/card-tokenizer.css"
      rel="stylesheet"
    />
    <script src="https://widget.zetplat.com/card-tokenizer.js" defer></script>
  </head>

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

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

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

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

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

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

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

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

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

<!-- На тестовой среде -->
<link
  href="https://widget-demo.zetplat.com/card-tokenizer.css"
  rel="stylesheet"
/>
<script src="https://widget-demo.zetplat.com/card-tokenizer.js" defer></script>

<!-- Для реальных платежей -->
<link href="https://widget.zetplat.com/card-tokenizer.css" rel="stylesheet" />
<script src="https://widget.zetplat.com/card-tokenizer.js" defer></script>

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

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

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

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

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

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

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

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

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

cardTokenizer.render();

API виджета

`ZetplatCardTokenizer`

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

new ZetplatCardTokenizer(publicToken[, options])

Параметр	Тип	Описание
`publicToken`	string	Публичный токен (обязательный)
`options`	object	Дополнительные настройки
`options.container`	HTMLElement	Контейнер, в который будет вставлена форма. Значение по умолчанию: `<div id="zetplat-card-tokenizer"></div>`
`options.texts`	object
`options.texts.cardNumberLabel`	string	Метка к полю ввода карточного номера. Значение по умолчанию `Card number`
`options.texts.submitButtonLabel`	string	Метка кнопки токенизации. Значение по умолчанию `Bind card`

Метод `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) {
  /* обработчик */
};

Как настроить виджет

Внешний вид

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

HTML
CSS

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

/* custom-styles.css */

.zetplat-Field__label {
  color: green;
}

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

Тексты

Чтобы заменить тексты в форме, используйте параметр options.texts в конструкторе ZetplatCardTokenizer.

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

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

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

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

API виджета​

ZetplatCardTokenizer​

Метод cardTokenizer.render()​

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

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

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

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

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

Внешний вид​

Тексты​