Платёжная форма

Подключите нашу новую платёжную форму для приёма платежей с банковских карт.

Наша форма имеет две цветовые темы – светлую и тёмную. Подумайте, какая из них будет лучше сочетаться с дизайном вашего сайта:

Светлая тема

Тёмная тема

Определились? Теперь можно приступать к интеграции.

Добавление платёжной формы на сайт магазина

Если вы уже используете интерфейс MONETA.Assistant, то подключение новой платёжной формы займёт совсем немного времени, если нет – изучите документацию, чтобы реализовать обработчики Check и Pay URL.

Подключим скрипт

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

<script type="text/javascript" src="https://www.payanyway.ru/assistant-builder">
</script>

Исходники скрипта доступны на GitHub

Определим параметры платежа

Теперь на этой же странице нужно подготовить параметры для платёжной формы:

<script type="text/javascript">

    var options = {
        account: 32691195,
        amount: 12.34,
        transactionId: '1234567890-abcdef'
    };
    
    ...

</script>

В этом примере параметров всего три, но может быть и больше – вот они все:

Параметр	Описание	По умолчанию
account	Номер вашего бизнес-счёта
amount	Сумма платежа
transactionId	Номер заказа в магазине
operationId	ID операции в PayAnyWay
description	Описание заказа
signature	Подпись запроса
subscriberId	ID клиента в магазине
testMode	Признак тестового платежа. Значения: 0 – платёж настоящий, 1 – платёж тестовый	0
lang	Язык интерфейса. Значения: ru – русский, en – английский	ru
theme	Цветовая тема интерфейса. Значения: light – светлая, dark – тёмная	light
customParams	Укажите любые другие параметры, если необходимо. Например: customParams: { param1: "value1", param2: "value2" } Все параметры из блока customParams будут присутствовать в запросах на Check и Pay URL.

Отрисуем платёжную форму

После того, как все параметры платёжной формы определены – отрисуем её.

var assistant = new Assistant.Builder();
assistant.build(options, 'payment-form');

Обратите внимание на второй параметр в функции build. Это id контейнера, в котором будет отрисована платёжная форма. В данном примере нам предварительно нужно было создать следующий html-элемент и разместить его на странице:

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

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

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

Добавим обработчики

И ещё один момент – после успешной оплаты или в случае ошибки (а иногда – во время обработки платежа) бывает необходимо совершить какие-либо действия: уйти на другую страницу и так далее. Для этого можно добавить обработчики:

// платёж прошёл успешно
assistant.setOnSuccessCallback(function(operationId, transactionId) {
    // todo: здесь можно сделать что угодно – например, 
    // перенаправить на другую страницу:
    location.replace("https://domain.domain"); 
});

// платёж не прошёл
assistant.setOnFailCallback(function(operationId, transactionId) {
    // todo: действия на ваш вкус
});

// платёж обрабатывается
assistant.setOnInProgressCallback(function(operationId, transactionId) {
    // todo: тоже можно что-нибудь придумать           
});

Здесь: operationId – номер операции в PayAnyWay, transactionId – номер заказа в магазине.

Если в настройках счёта задан InProgress URL – переход по нему произойдёт автоматически.

Код целиком

Если вдруг где-то запутались:

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

<script type="text/javascript" src="https://www.payanyway.ru/assistant-builder">
</script>
<script type="text/javascript">

    var options = {
        account: 32691195,
        amount: 12.34,
        transactionId: '1234567890-abcdef'
    };

    var assistant = new Assistant.Builder();
    
    // платёж прошёл успешно
    assistant.setOnSuccessCallback(function(operationId, transactionId) {
        // todo: здесь можно сделать что угодно – например, 
        // перенаправить на другую страницу:
        location.replace("https://domain.domain"); 
    });
    
    // платёж не прошёл
    assistant.setOnFailCallback(function(operationId, transactionId) {
        // todo: действия на ваш вкус
    });
    
    // платёж обрабатывается
    assistant.setOnInProgressCallback(function(operationId, transactionId) {
        // todo: тоже можно что-нибудь придумать            
    });
    
    assistant.build(options, 'payment-form');

</script>