Функциональность в платежном окне доступна для следующих платежей:

  • Платежи картой, указав payment параметр card.
  • Платежи способами, использующими услугу инициирования платежа (УИП).

Для отображения платежного окна, можете воспользоваться нашей готовой библиотекой.

1. Создайте кнопку.

Создайте кнопку, которая будет вызывать окно оплаты картой, задайте уникальный тег для кнопки (например: id="payNow").

<button id="payNow" type="button">Payment Demo</button>

2. Сгенерируйте параметры.

Воспользуйтесь библиотекой WebToPay ( Интеграция через библиотеку ) или спецификацией ( Интеграция со спецификацией ) для генерации параметров data и sign.

Дополнительный список параметров с описаниями:

Параметр Длина Обязательно Описание
frame 1 Да Для активации использования frame (0 – нет, 1 – да)
payment 20 Да Способ оплаты, значение которого должно быть либо card, чтобы принимать платежи картой, либо одно из предоставленных в списке bank_key (первый столбик): Методы оплаты (УИП должно быть активировано для конкретного способа оплаты). Как активировать услугу УИП для конкретного способа можно найти здесь.
amount 11 Да Сумма (в центах), которую должен оплатить клиент.
currency 3 Да Валюта (напр. USD, EUR и. т. п.), в которой вы предпочитаете получать платежи клиента. Если указанная валюта не может быть принята посредством выбранного метода оплаты, система автоматически конвертирует сумму в поддерживаемую валюту по курсу текущего дня. В ответе на Ваш сайт будут переданы payamount и paycurrency.
p_email 255 Да По этому адресу система Paysera информирует плательщика о статусе платежа.
test 1 Да Должно быть 0, поскольку тестовые платежи в платежном окне недоступны.
card_type 6 Нет Тип карты (credit – кредитная, debit – дебетовая). Этот параметр позволяет принимать только определенные типы карт.
card_brand 12 Нет Вид карты (visa, maestro, visaelectron, mastercard). Этот параметр позволяет принимать только определенные виды карт

3. Обработка данных после нажатия на кнопку.

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

<script>
    var checkoutApp = new PayseraCheckout.App();
    checkoutApp.on(PayseraCheckout.AppEvent.SUCCESS, function () {
        // happens after successful payment, when window is closed
    });

    checkoutApp.on(PayseraCheckout.AppEvent.ERROR, function (message) {
       // happens after unsuccessful payment when window is closed or when buyer closes window.
        switch (message.code) {
            case PayseraCheckout.ErrorCode.USER_CLOSED:
                // buyer closed window
                break;

            case PayseraCheckout.ErrorCode.CARD_INITIAL_RESULT_FAILED:
                // failed to get payment configuration
                break;

            case PayseraCheckout.ErrorCode.CARD_AUTHORIZATION_FAILED:
                // failed to authorize card
                break;

            case PayseraCheckout.ErrorCode.CARD_RESULT_FAILED:
                // wrong payment status after card authorization/3D secure
                break;

            case PayseraCheckout.ErrorCode.CARD_SIGNATURE_FAILED:
                // failed to perform 3D secure step
                break;
        }
    });

    // Button click event
    var payButton = document.getElementById('payNow');
    payButton.addEventListener('click', function () {
        checkoutApp.pay({
            data: '', // generated data
            sign: '' // generated sign
        });
    });
</script>