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

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

Если вы уже используете интерфейс 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>
Last modified 2yr ago
Copy link
Outline
Добавление платёжной формы на сайт магазина
Подключим скрипт
Определим параметры платежа
Отрисуем платёжную форму
Добавим обработчики
Код целиком