Checkout

Платежная форма Checkout представляет собой готовое техническое решение, которое позволяет совершить платеж. Форма отдается с веб-серверов RBKmoney и открывается в iframe таким образом, чтобы создать для плательщика видимость нахождения на сайте мерчанта.

Примеры интеграции платежной формы

Рассмотрим сценарии с использованием инвойсов:

Использование HTML API

<form action="https://<your-server-side>" method="GET">
    <script src="https://checkout.rbk.money/checkout.js" class="rbkmoney-checkout"
            data-invoice-id="string"
            data-invoice-access-token="string"
            data-name="Company name"
            data-description="Some product"
            data-label="Pay with RBKmoney">
    </script>
</form>

С помощью form можно задать callback. В случае успешного платежа, будет произведен submit формы.

data-* атрибут Описание Обязательный Возможные значения
data-invoice-id Идентификатор инвойса oVU2LzUCbQ
data-invoice-access-token Токен для доступа к указанному инвойсу eyJhbGciOiJSUzI1N…
data-name Наименование вашей компании или сайта Company name
data-description Описание вашего продукта или сервиса Some product
data-label Текст кнопки открытия формы Pay with RBKmoney
data-email Если вы знаете email вашего плательщика, вы можете его предзаполнить example@mail.com
data-obscure-card-cvv Затенять карточный cvv код true / false
data-require-card-holder Требовать от плательщика заполнять поле card holder true / false
data-locale Настройка локализации платежной формы auto / ru / en

Использование JS API

const checkout = RbkmoneyCheckout.configure({
    invoiceID: 'string',
    invoiceAccessToken: 'string',
    name: 'Company name',
    description: 'Some product',
    opened: function () {
        console.log('Checkout opened');
    },
    closed: function () {
        console.log('Checkout closed');
    },
    finished: function () {
        console.log('Payment successful finished');
    }
});

document.getElementById('customButton').addEventListener('click', function () {
    checkout.open();
});

window.addEventListener('popstate', function () {
    checkout.close();
});
Свойство конфигурации Описание Обязательное Возможные значения
invoiceID Идентификатор инвойса oVU2LzUCbQ
invoiceAccessToken Токен для доступа к указанному инвойсу eyJhbGciOiJSUzI1N…
name Наименование вашей компании или сайта Company name
description Описание вашего продукта или сервиса Some product
email Если вы знаете email вашего плательщика, вы можете его предзаполнить example@mail.com
opened Callback на открытие модального окна function
closed Callback на закрытие модального окна function
finished Callback на успешное завершение платежа function
obscureCardCvv Затенять карточный cvv код true / false
requireCardHolder Требовать от плательщика заполнять поле card holder true / false
locale Настройка локализации платежной формы auto / ru / en

Примечание: Checkout возвращает управление в callback только при успешном завершении платежа. С целью увеличения конверсии оплат при неуспешных попытках оплаты (например неверно введены данные или на карте недостаточно средств) мы оставляем UA плательщика на форме, позволяя исправить ошибку, использовать другую карту и т.п.

Совершение оплаты с использованием шаблонов инвойсов.

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

  • HTML API: data-invoice-template-id, data-invoice-template-access-token.
  • JS API: invoiceTemplateID, invoiceTemplateAccessToken.

В случае с шаблонами инвойса, c открытой стоймостью товаров или услуг, возможно заранее указать сумму к оплате:

Свойство конфигурации (JS API) data-* атрибут (HTML API) Описание Возможные значения
amount data-amount Сумма к оплате, в минорных денежных единицах, например в копейках в случае указания российских рублей в качестве валюты. integer

Пример интеграции:

JS API

HTML API

Создание привязки плательщика.

Вместо пары invoiceID и invoiceAccessToken, необходимо использовать идентификатор плательщика и токен для доступа к указанному плательщику.

  • HTML API: data-customer-id, data-customer-access-token.
  • JS API: customerID, customerAccessToken.

Совершение оплаты с удержанием денежных средств.

Для настройки необходимо:

  1. Указать параметр конфигурации paymentFlowHold со значением: true.
  2. Выбрать политику, которая будет применена по истечении срока удержания денежных средств. Возможные значения:
    • cancel - удержание в пользу плательщика. Данная политика используется по умолчанию.
    • capture - удержание в пользу мерчанта.
Свойство конфигурации (JS API) data-* атрибут (HTML API) Описание Возможные значения
paymentFlowHold data-payment-flow-hold Признак совершения оплаты с удержанием денежных средств true / false
holdExpiration data-hold-expiration Политика управления удержанием денежных средств cancel / capture

Управление методами оплаты.

Метод оплаты Свойство конфигурации (JS API) data-* атрибут (HTML API) Возможные значения Значение по умолчанию
Банковская карта и токенизированные карты (Apple Pay, Google Pay, Samsung Pay) bankCard data-bank-card true / false true
Электронные кошельки wallets data-wallets true / false true
Терминалы оплаты terminals data-terminals true / false true

Управление методами оплаты, которые будут предложены плательщику в первую очередь:

  • HTML API: data-initial-payment-method
  • JS API: initialPaymentMethod

Возможные значения:

bankCard - Банковская карта.

terminalEuroset - Терминалы “Евросеть”.

walletQiwi - Электоронный кошелек “Qiwi”.

Предотвращение блокировки функции открытия checkout.

Не вызывайте функцию открытия checkout в callback. Большинство мобильных браузеров блокируют подобное поведение. Открытие нового окна должно происходить в результате действия пользователя.

// Будет работать:
document.getElementById("button").addEventListener("click", function() {
    checkout.open();
});

// Не будет работать:
document.getElementById("button").addEventListener("click", function() {
    someFunction().then(function() {
        checkout.open();
    });
});

Ошибка RbkmoneyCheckout is not defined

При некорректном встраивании Checkout в код вашей страницы часто может возникать ошибка RbkmoneyCheckout is not defined. Она связана с тем, что вы вызываете функцию RbkmoneyCheckout.configure() до полной инициализации DOM. Используйте удобные вам практики для того, чтобы обеспечить вызов платежной формы после полной инициализации модели документа.

Частный случай решения этой задачи с использованием jquery, указывающий направление ее решения может выглядеть так:

<html>

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://checkout.rbk.money/checkout.js"></script>
</head>
<script>
$(function() {
    $('#rbkmoney-checkout').on('click', function(e) {
        e.preventDefault();
        const checkout = initCheckout('{INVOICE_ID}', '{INVOICE_ACCESS_TOKEN}');
        checkout.open();
    });

    function initCheckout(invoiceID, invoiceAccessToken) {
        return RbkmoneyCheckout.configure({
            invoiceID: invoiceID,
            invoiceAccessToken: invoiceAccessToken,
            name: 'Product name',
            description: 'Product description',
            email: 'example@example.com',
            finished: function() {
                console.log('Payment successful finished');
            },
            opened: function() {
                console.log('Checkout opened');
            },
            closed: function() {
                console.log('Checkout closed');
            }
        });
    }
});
</script>
<button id="rbkmoney-checkout">Pay with RBKmoney</button>

</html>