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

Search…
Подключите нашу новую платёжную форму для приёма платежей с банковских карт.
Наша форма имеет две цветовые темы – светлую и тёмную. Подумайте, какая их них будет лучше сочетаться с дизайном вашего сайта:
Светлая тема
Тёмная тема
Определились? Теперь можно приступать к интеграции.
Добавление платёжной формы на сайт магазина
Если вы уже используете интерфейс MONETA.Assistant, то подключение новой платёжной формы займёт совсем немного времени, если нет – изучите документацию, чтобы реализовать обработчики Check и Pay URL.
Подключим скрипт
После того, как ваш магазин готов обрабатывать запросы от нашей системы, добавьте следующий скрипт на страницу, где будете принимать платежи от клиентов:
1
<script type="text/javascript" src="https://www.payanyway.ru/assistant-builder">
2
</script>
Copied!
Исходники скрипта доступны на GitHub​
Определим параметры платежа
Теперь на этой же странице нужно подготовить параметры для платёжной формы:
1
<script type="text/javascript">
2
​
3
    var options = {
4
        account: 32691195,
5
        amount: 12.34,
6
        transactionId: '1234567890-abcdef'
7
    };
8
    
9
    ...
10
​
11
</script>
Copied!
В этом примере параметров всего три, но может быть и больше – вот они все:
 Параметр
Описание
По умолчанию
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.
​
Отрисуем платёжную форму
После того, как все параметры платёжной формы определены – отрисуем её. 
1
var assistant = new Assistant.Builder();
2
assistant.build(options, 'payment-form');
Copied!
Обратите внимание на второй параметр в функции build. Это id контейнера, в котором будет отрисована платёжная форма. В данном примере нам предварительно нужно было создать следующий html-элемент и разместить его на странице:
1
<div id="payment-form"></div>
Copied!
Если не указывать второй параметр в функции build – платёжная форма будет отрисована в модальном окне поверх всей страницы.
Платёжная форма в модальном окне всегда имеет светлую цветовую тему. Наши дизайнеры небезосновательно считают, что так лучше.
Добавим обработчики
И ещё один момент – после успешной оплаты или в случае ошибки (а иногда – во время обработки платежа) бывает необходимо совершить какие-либо действия: уйти на другую страницу и так далее. Для этого можно добавить обработчики:
1
// платёж прошёл успешно
2
assistant.setOnSuccessCallback(function(operationId, transactionId) {
3
    // todo: здесь можно сделать что угодно – например, 
4
    // перенаправить на другую страницу:
5
    location.replace("https://domain.domain"); 
6
});
7
​
8
// платёж не прошёл
9
assistant.setOnFailCallback(function(operationId, transactionId) {
10
    // todo: действия на ваш вкус
11
});
12
​
13
// платёж обрабатывается
14
assistant.setOnInProgressCallback(function(operationId, transactionId) {
15
    // todo: тоже можно что-нибудь придумать           
16
});
Copied!
Здесь: operationId – номер операции в PayAnyWay, transactionId – номер заказа в магазине.
Если в настройках счёта задан InProgress URL – переход по нему произойдёт автоматически.
Код целиком
Если вдруг где-то запутались:
1
<div id="payment-form"></div>
2
​
3
<script type="text/javascript" src="https://www.payanyway.ru/assistant-builder">
4
</script>
5
<script type="text/javascript">
6
​
7
    var options = {
8
        account: 32691195,
9
        amount: 12.34,
10
        transactionId: '1234567890-abcdef'
11
    };
12
​
13
    var assistant = new Assistant.Builder();
14
    
15
    // платёж прошёл успешно
16
    assistant.setOnSuccessCallback(function(operationId, transactionId) {
17
        // todo: здесь можно сделать что угодно – например, 
18
        // перенаправить на другую страницу:
19
        location.replace("https://domain.domain"); 
20
    });
21
    
22
    // платёж не прошёл
23
    assistant.setOnFailCallback(function(operationId, transactionId) {
24
        // todo: действия на ваш вкус
25
    });
26
    
27
    // платёж обрабатывается
28
    assistant.setOnInProgressCallback(function(operationId, transactionId) {
29
        // todo: тоже можно что-нибудь придумать            
30
    });
31
    
32
    assistant.build(options, 'payment-form');
33
​
34
</script>
Copied!
Last modified 1yr ago
Copy link
Contents
Добавление платёжной формы на сайт магазина
Подключим скрипт
Определим параметры платежа
Отрисуем платёжную форму
Добавим обработчики
Код целиком