Платёжная форма
Наша форма имеет две цветовые темы – светлую и тёмную. Подумайте, какая их них будет лучше сочетаться с дизайном вашего сайта:
Определились? Теперь можно приступать к интеграции.
Если вы уже используете интерфейс 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 | Номер заказа в магазине | |
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>