Виджет платежной формы

Виджет платежной формы позволяет провести оплату.

Добавьте виджет на страницу, и дальше пользователь взаимодействует с виджетом.

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

<!DOCTYPE html>

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Виджет платежной формы</title>

    <link href="https://widget.zetplat.com/payment-widget.css" rel="stylesheet" />
    <script src="https://widget.zetplat.com/payment-widget.js" defer></script>
  </head>

  <body>
    <div id="zetplat-payment-form"></div>

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

        const paymentForm = new ZetplatPaymentForm('publicToken', {
          isCvcMasked: true,
          customerInteractionRedirect: {
               target: "_blank",
          });

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

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

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

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

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

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

<div id="zetplat-payment-form"></div>

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

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

const paymentForm = new ZetplatPaymentForm('public token');

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

paymentForm.render();

API виджета

`ZetplatPaymentForm`

Конструктор класса платежной формы.

const paymentForm = new ZetplatPaymentForm(publicToken[, options])

Параметр	Тип	Описание
`publicToken`	string	Публичный токен (обязательный)
`options`	object	Дополнительные настройки
`options.container`	HTMLElement	Контейнер, в который будет вставлена форма. Значение по умолчанию: `<div id="zetplat-payment-form"></div>`

Метод `paymentForm.render()`

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

paymentForm.render([options])

Параметр	Тип	Описание
`options`	object	Дополнительные настройки
`options.container`	HTMLElement	Контейнер, в который будет вставлена форма. Значение по умолчанию: `<div id="zetplat-payment-form"></div>`

Обработчик события `paymentForm.onReady`

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

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

Обработчик события `paymentForm.onPaymentStart`

Обработчик события при старте процесса оплаты.

paymentForm.onPaymentStart = function () { /* обработчик */ }

Обработчик события `paymentForm.onPaymentSuccess`

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

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

Обработчик события `paymentForm.onPaymentFail`

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

paymentForm.onPaymentFail = function (error) { /* обработчик */ }

Обработчик события `paymentForm.onDestroy`

Обработчик события закрытия формы.

paymentForm.onDestroy = () => {
/* обработчик */
    }

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

Маскировка кода CVV/CVC при вводе

Вы можете настроить поле ввода кода CVV/CVC таким образом, чтобы пользователь при вводе видел только последнюю введенную цифру, а остальные введенные цифры отображались как *. Для этого добавьте в конструктор класса платежной формы флаг isCvcMasked:

const paymentForm = new ZetplatPaymentForm('publicToken', {
   isCvcMasked: true,
 });

Управление открытием окна 3DS

Вы можете открыть окно 3DS для пользователя несколькими способами с помощью параметра target объекта customerInteractionRedirect:

_blank - в новой вкладке,
_self - в том же фрейме,
_parent - во фрейме выше уровнем, если фреймы вложены один в другой,
_top - поверх всех фреймов.
Значение по умолчанию: _top.

Обратите внимание:

Мы не рекомендуем использовать значение _self из соображений безопасности.

Если вы используете значение _blank, пользователю будет нужно разрешить всплывающие окна в браузере или перейти по ссылке из окна виджета.

Скрытие поля имени владельца карты

Чтобы скрыть поле Cardholder, передайте параметр hideCardHolderField: true. По умолчанию поле отображается.

Внешний вид

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

HTML
CSS

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

/* custom-styles.css */

.zetplat-Field__label {
  color: green;
}

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

Также есть возможность отредактировать текстовое содержимое различных элементов виджета оплаты. Можно поменять:

метки полей ввода,
тексты плейсхолдеров,
тексты ошибок,
тексты подписей под полями ввода,
метки кнопок,
текст футера.

Для этого надо передать объект options с параметрами элементов виджета в конструкторе класса платежной формы ZetplatPaymentForm.

Элемент виджета	Параметр	Тип	Значение по умолчанию
Настройка текстов виджета	`texts`	object
Экран неуспешной оплаты	`failedPaymentScreen`	string	`Error`
Форма оплаты	`paymentForm`	object
Кнопка оплаты	`buttonPayLabel`	string	`Pay`
Метка поля держателя карты	`cardholderLabel`	string	`Cardholder`
Подсказка к полю держателя карты	`cardholderNote`	string	отсутствует
Плейсхолдер поля держателя карты	`cardholderPlaceholder`	string	`Full name`
Метка поля номера карты	`cardNumberLabel`	string	`Card number`
Подсказка к полю номера карты	`cardNumberNote`	string	отсутствует
Плейсхолдер поля номера карты	`cardNumberPlaceholder`	string	`0000 0000 0000 0000`
Метка поля секретного кода карты	`cvvLabel`	string	`CVC`
Подсказка к полю секретного кода карты	`cvvNote`	string	отсутствует
Плейсхолдер поля секретного кода карты	`cvvPlaceholder`	string	`CVC`
Метка поля срока действия карты	`expireDateLabel`	string	`Expiration date`
Подсказка к полю срока действия карты	`expireDateNote`	string	`As stated on the card`
Плейсхолдер поля срока действия карты	`expireDatePlaceholder`	string	`MM/YY`
Метка чекбокса согласия на автоплатежи	`recurrentLabel`	string	`I agree to recurring payments`
Согласие с условиями
Текст предупреждения о согласии с условиями. Разметка `{{#link}}{{/link}}` обязательна, ей выделяется часть фразы, которая будет преобразована в ссылку на соглашение.	`termsAgreement`	string	`By pressing Pay, you accept the terms of our {{#link}}user agreement{{/link}}`
Ошибки валидации полей	`validationErrors`	object
Ошибка в номере карточного номера	`invalidCardNumber`	string	`Invalid card number`
Ошибка в секретном коде карты	`invalidCvv`	string	`CVV/CVC has 3 digits`
Ошибка в сроке действия карты	`invalidExpiryDate`	string	`Invalid date`
Не заполнено обязательное поле	`isRequired`	string	`Required field`
Экран процесса оплаты	`paymentProcessScreen`	object
Описание экрана процесса оплаты	`description`	string	`Just a moment`
Заголовок экрана процесса оплаты	`title`	string	`Payment processing...`
Экран перенаправления на страницу банка (3D Secure)	`redirectionScreen`	object
Предложение перейти по ссылке, если автоматического перенаправления не произошло. Разметка `{{#link}}{{/link}}` обязательна, ей выделяется часть фразы, которая будет преобразована в ссылку.	`followTheLink`	string	`If you haven't been redirected automatically, use {{#link}}this link.{{/link}}`
Заголовок экрана процесса оплаты	`title`	string	`Payment processing...`
Предупреждение об автоматическом перенаправлении с обратным отсчетом от 3-х секунд. Переменная `{{countdown}}` обязательна, вместо нее подставляется отсчет обратного времени. Разметкой `{{#strong}}{{/strong}}` можно выделить жирным шрифтом счетчик времени	`waitForRedirectToBanksPage`	string	`You will be redirected to the issuer bank's page in {{#strong}}{{countdown}} seconds.{{/strong}}`
Экран успешной оплаты	`successPaymentScreen`	object
Заголовок экрана успешной оплаты	`title`	string	`Payment success`
Информация о транзакции	`transactionData`	object
Метка суммы	`amountLabel`	string	`Amount`
Метка информации о способе оплаты (тип и маскированный номер карты)	`creditCardLabel`	string	`Card`
Метка ID транзакции	`transactionIdLabel`	string	`Transaction ID`
Неизвестная ошибка	`unknownError`	string	`Something went wrong...`

Пример кода для изменения текстов:

const paymentForm = new ZetplatPaymentForm('<public token>', {
  isCvcMasked: true,

  texts: {
    failedPaymentScreen: {
      title: 'Error',
    },

    paymentForm: {
      buttonPayLabel: 'Pay',

      cardholderLabel: 'Cardholder',
      cardholderNote: '',
      cardholderPlaceholder: 'Full name',

      cardNumberLabel: 'Card number',
      cardNumberNote: '',
      cardNumberPlaceholder: '0000 0000 0000 0000',

      cvvLabel: 'CVC',
      cvvNote: '',
      cvvPlaceholder: 'CVC',

      expireDateLabel: 'Expiration date',
      expireDateNote: '',
      expireDatePlaceholder: 'As stated on the card',

      recurrentLabel: 'I agree to recurring payments',

      termsAgreement:
        'By pressing Pay, you accept the terms of our {{#link}}user agreement{{/link}}',

      validationErrors: {
        invalidCardNumber: 'Invalid card number',
        invalidCvv: 'CVV/CVC has 3 digits',
        invalidExpiryDate: 'Invalid date',
        isRequired: 'Required field',
      },
    },

    paymentProcessScreen: {
      description: 'Just a moment',
      title: 'Payment processing...',
    },

    redirectionScreen: {
      followTheLink:
        'If you haven`t been redirected automatically, use {{#link}}this link.{{/link}}',
      title: 'Payment processing...',
      waitForRedirectToBanksPage:
        'You will be redirected to the issuer bank`s page in {{#strong}}{{countdown}} seconds.{{/strong}}',
    },

    successPaymentScreen: {
      title: 'Payment success',
    },

    transactionData: {
      amountLabel: 'Amount',
      creditCardLabel: 'Card',
      transactionIdLabel: 'Transaction ID',
    },

    unknownError: 'Something went wrong...',
  },
});

Ошибки для конечных пользователей

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

Код ошибки	Описание ошибки
`3DS_error`	Проблемы с прохождением 3DS
`activity_count_exceeded`	Достигнут лимит по сумме или количеству операций для карты/кошелька
`bank_card_expired`	Карта просрочена
`declined_by_issuer_bank`	Банк, выпустивший карту, отклонил операцию
`insufficient_funds`	Недостаточно средств на карте

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

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

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

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

API виджета​

ZetplatPaymentForm​

Метод paymentForm.render()​

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

Обработчик события paymentForm.onPaymentStart​

Обработчик события paymentForm.onPaymentSuccess​

Обработчик события paymentForm.onPaymentFail​

Обработчик события paymentForm.onDestroy​

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

Маскировка кода CVV/CVC при вводе​

Управление открытием окна 3DS​

Скрытие поля имени владельца карты​

Внешний вид​

Пример кода для изменения текстов:​

Ошибки для конечных пользователей​