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

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

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

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

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

Как провести выплату на карту через виджет

Как выглядит виджет
Пример кода страницы с виджетом

Widget

<!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.pikepayments.com/card-tokenizer.css"
      rel="stylesheet"
    />
    <script src="https://widget.pikepayments.com/card-tokenizer.js" defer></script>
  </head>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

cardTokenizer.render();

API виджета

`PikeCardTokenizer`

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

new PikeCardTokenizer(publicToken[, options])

Параметр	Тип	Описание
`publicToken`	string	Обязательный. Публичный токен
`options`	object	Объект дополнительных настроек
`options.container`	HTMLElement	Контейнер, в который будет вставлена форма. Значение по умолчанию: `<div id="pike-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) {
  /* обработчик */
};

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

Внешний вид

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

HTML
CSS

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

/* custom-styles.css */

.pike-Field__label {
  color: green;
}

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

Тексты

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

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

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

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

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

API виджета​

PikeCardTokenizer​

Метод cardTokenizer.render()​

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

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

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

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

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

Внешний вид​

Тексты​