Подразделы Платёжная форма и виджет
Платёжная форма
Подразделы Платёжная форма
Общее описание
Интерфейс MONETA.Assistant предоставляет прикладной программный интерфейс для оплаты товаров и услуг при помощи различных платежных систем. Таким образом, online-магазин реализует поддержку только интерфейса MONETA.Assistant, в то время как покупатели могут производить оплату с любой электронной платежной системы, которую поддерживает «MONETA.RU».
При помощи интерфейса MONETA.Assistant можно связать свою внутреннюю систему приема, хранения и обработки заказов с системой «MONETA.RU». На основании сформированного заказа, магазин будет создавать запрос на оплату к системе «MONETA.RU» и принимать отчет о проведенной оплате с сохранением своих внутренних параметров (например, номер заказа в системе или дополнительные информационные поля).
Для подключения интерфейса на сайте необходимо создать форму специального вида с реквизитами оплаты, а также создать обработчик, который будет принимать уведомления с отчетом о проведенной операции.
Описание процесса оплаты
Оплата без открытия счета в «MONETA.RU»:
- Пользователь выбирает товар.
- Магазин формирует заказ, при необходимости регистрирует в своей системе реквизиты заказа.
- На странице интерфейса MONETA.Assistant Пользователь выбирает способ оплаты.
- Система «MONETA.RU» подготавливает форму оплаты.
- Пользователь подтверждает оплату выбранным способом.
- Внешняя платежная система уведомляет систему «MONETA.RU» об оплате.
- Система «MONETA.RU» отправляет магазину отчет о проведенной операции.
- Система «MONETA.RU» сообщает о результате оплаты и предлагает Пользователю вернуться на сайт магазина.
Диаграмма процедуры оплаты товара без открытия Пользователем счета в системе «MONETA.RU» с использованием интерфейса MONETA.Assistant:
С чего начать
Demo-площадка
Для того, чтобы попробовать, как работает MONETA.Assistant, можно создать личный кабинет на demo площадке.
Вы можете использовать demo площадку Moneta.Ru https://demo.moneta.ru, чтобы протестировать работу MONETA.Assistant.
Внимание! Номера счетов (MNT_ID) на demo площадке и рабочей платформе будут различаться!
Регистрация на demo площадке
Для того, чтобы начать работу на demo площадке Вам следует создать два личных кабинета: личный кабинет магазина, который может принимать платежи и личный кабинет пользователя, который может платить в магазин. Для каждого личного кабинета используйте разные e-mail адреса.
- Создайте личный кабинет магазина на demo площадке. Для этого перейдите по ссылке: https://demo.moneta.ru/backoffice/auth/register
- Создайте личный кабинет пользователя на demo площадке. Для этого перейдите по ссылке: https://demo.moneta.ru/locale.htm?moneta.locale=ru&redirect=/register.htm
- Свяжитесь со службой поддержки PayAnyWay (business@support.payanyway.ru), чтобы завершить регистрацию личного кабинета магазина, а также получить виртуальные деньги в личном кабинете пользователя.
Примечание: При обращении в службу поддержки укажите e-mail или телефон, которые Вы использовали при регистрации.
- После того как служба поддержки подтвердит регистрацию, создайте “расширенный” счет в личном кабинете магазина. Для этого выполните следующие шаги:
- Откройте https://demo.moneta.ru и зайдите в личный кабинет магазина.
- Перейдите
Мой счет > Управление счетами. - В разделе
Расширенные счета, нажмитеДобавить счет. - Заполните форму и нажмите
Сохранить.
Настройки счёта магазина
В разделе управления счетами (блок Счета в левой части обзорной страницы, ссылка Мой счет > Управление счетами) уполномоченные представители магазина могут настроить параметры взаимодействия учетной системы магазина и системы «МОНЕТА.РУ».
- Тестовый режим
- Признак тестового режима, в котором движения средств по операции не происходит, но обеспечивается информационный обмен.
Внимание! Тестовый режим настраивается только данным флагом. Параметр
MNT_TEST_MODEустарел и не влияет на включение / отключение тестового режима. - Список платежных систем
- Список (разделенный запятыми) идентификаторов платежных систем, которые необходимо показывать пользователю в MONETA.Assistant. Например, 1015,1017 - пользователю в MONETA.Assistant будут показаны только платежные системы МОНЕТА.РУ и WebMoney. Если список пустой, то будут показаны все доступные системы. Также это значение можно передать в запросе с помощью параметра paymentSystem.limitIds.
- Check URL
- Адрес обработчика в системе учета магазина для проверочных запросов. Если в свойствах счета указан Check URL, то магазин будет получать проверочные запросы. Дополнительная информация: Проверочные запросы (Check URL).
- Pay URL
- Адрес обработчика в системе учета магазина для уведомлений о проведенном платеже. Дополнительная информация: Уведомление о проведенной оплате (Pay URL).
- HTTP Method
- GET или POST метод отправки параметров для Check URL и Pay URL запросов.
- Код проверки целостности данных
- Код, обеспечивающий идентификацию отправителя и возможность проверки целостности данных, известный только системе «МОНЕТА.РУ» и учетной системе магазина. Устанавливается магазином при настройке счёта.
- Подпись формы оплаты обязательна
- Признак, который обязывает передавать параметр MNT_SIGNATURE в запросе на оплату. Если в настройках счета выставлен этот флаг, но параметр MNT_SIGNATURE в запросе на оплату не указан, то MONETA.Assistant завершится с ошибкой.
Внимание! Если в параметрах на оплату не указывается параметр MNT_TRANSACTION_ID, то этот флаг выставлять не следует. Запросы с параметром MNT_SIGNATURE при отсутствии параметра MNT_TRANSACTION_ID будут неверны.
- Можно переопределять настройки в URL
- Признак возможности задавать в параметрах запроса на оплату адреса страниц для возврата пользователя на сайт магазина.
- Success URL
- URL страницы магазина, куда должен попасть покупатель после благополучно проведенной оплаты или незавершенной оплаты, если не задан InProgress URL. Переход пользователя произойдет независимо от получения магазином отчета о проведенной оплате.
Примечание: MONETA.Assistant добавляет параметр MNT_TRANSACTION_ID в указанную ссылку, чтобы магазин смог определить внутренний идентификатор заказа.
- Fail URL
- URL страницы магазина, куда должен попасть покупатель после отмененной оплаты. Отчет об оплате в этом случае магазину не отсылается.
Примечание: MONETA.Assistant добавляет параметр MNT_TRANSACTION_ID в указанную ссылку, чтобы магазин смог определить внутренний идентификатор заказа.
- InProgress URL
- URL страницы магазина, куда должен попасть покупатель после успешного запроса на авторизацию средств, до подтверждения списания и зачисления средств. Поддерживается ограниченным количеством методов оплаты. Переход пользователя произойдет независимо от получения магазином средств и отчета о проведенной оплате.
Примечание: MONETA.Assistant добавляет параметр MNT_TRANSACTION_ID в указанную ссылку, чтобы магазин смог определить внутренний идентификатор заказа.
- Return URL
- URL страницы магазина, куда должен вернуться покупатель при добровольном отказе от оплаты. Отчет об оплате в этом случае магазину не отсылается.
Примечание: MONETA.Assistant добавляет параметр MNT_TRANSACTION_ID в указанную ссылку, чтобы магазин смог определить внутренний идентификатор заказа.
Запрос на оплату через MONETA.Assistant
Запрос на оплату через интерфейс MONETA.Assistant представляет собой HTML-форму. Форма должна быть подготовлена магазином, передана Пользователю, подтверждена Пользователем и отправлена на адрес https://moneta.ru/assistant.htm для обработки системой «MONETA.RU». Для тестирования работы системы можно использовать demo площадку: https://demo.moneta.ru/assistant.htm.
Новую форму достаточно поместить внутрь iframe и она сама адаптируется к размерам1.
Минимальная ширина iframe - 320px, рекомендуемая - 488px.
Полезная высота iframe зависит от количества методов оплаты: чем больше, тем выше нужен iframe, чтобы он не требовал прокрутки. ↩︎
Уведомление о проведенной оплате (Pay URL)
Уведомление об оплате MONETA.Assistant отсылает на указанную страницу магазина «Pay URL» в виде HTTP запроса методом GET или POST.
Статус приема уведомления должен быть возвращен в виде ответа на HTTP запрос. Для идентификации отправителя отчета используется «Код проверки целостности данных», который должен быть известен только системе «МОНЕТА.РУ» и учетной системе магазина. При помощи этого кода и основных параметров уведомления об оплате формируется подпись, которая однозначно идентифицирует отправителя и обеспечивает возможность проверки целостности пересылаемых данных.
В случае, если система «МОНЕТА.РУ» не получает ответ от магазина на отправленный запрос с уведомлением (например, из-за недоступности системы учёта магазина), будут произведены попытки отправить уведомление в автоматическом режиме в течение 26-27 часов. По истечении периода автоматической отправки уведомлений операция будет выполнена без подтверждения со стороны магазина.
Ответ на уведомление об оплате
Для того, чтобы сообщить MONETA.Assistant, что магазин получил информацию об оплате, скрипт магазина (PayURL) должен дать ответ соответствующим образом.
Ответ может быть в одном из форматов:
- Текстовый формат в кодировке UTF-8. Этот ответ не должен содержать HTML тэги.
- Ответ в XML формате.
Примечание: Ответ об успешном получении уведомления следует возвращать также в том случае, если учетной системой магазина уведомление принято повторно, то есть, в том случае, когда магазин уже отвечал результатом «SUCCESS» на предшествующие уведомления.
Попытки отправки уведомления будут повторены:
- Если система «MONETA.RU» не смогла получить ответ от обработчика.
- Если сервер магазина был недоступен.
- Если текстовая строка начинается словом FAIL.
Проверочные запросы (Check URL)
Если в свойствах счета магазина выставить Check URL, то магазину, кроме уведомления о проведенной оплате, будут отсылаться проверочные запросы.
Проверочные запросы служат для того, чтобы:
- Убедиться, что заказ существует, что заказ еще не оплачен, что срок действия заказа не истек.
- Указать сумму заказа, если магазин не передал сумму заказа в HTML-форме.
- Проверить статус заказа, если товар уже оплачен.
Проверочные запросы MONETA.Assistant отсылает на указанную страницу магазина Check URL в виде HTTP запроса методом GET или POST. Ответ на HTTP запрос должен быть в формате XML. Во время оплаты одного заказа MONETA.Assistant может несколько раз отсылать проверочные запросы.
Ответ на проверочный запрос
При вызове проверочного запроса (Check URL) магазину следует послать ответ в XML формате.
При получении ответа на проверочный запрос в системе MONETA.RU анализируются поля ответа. MONETA.Assistant прекращает обработку оплаты:
- Если система MONETA.RU не смогла получить ответ от обработчика.
- Если ответ содержит неверный формат.
- Если MNT_ID или MNT_TRANSACTION_ID не соответствуют параметрам запроса.
- Если MNT_RESULT_CODE не соответствует списку возможных кодов.
- Если MNT_SIGNATURE не сходится с ключом, сгенерированным в MONETA.RU.
Автоматическое прохождение MONETA.Assistant
В обычном режиме работы MONETA.Assistant пользователь может:
- Выбрать платежную систему для оплаты заказа.
- Указать необходимые параметры этой платежной системы.
- Увидеть страницу с деталями операции.
- После этого он попадает непосредственно на страницу выбранной платежной системы.
Например, пользователь выбирает платежную систему WebMoney, затем выбирает в качестве источника оплаты WebMoney WMR, затем видит детали операции, и только после этого попадает на сайт «WebMoney».
MONETA.Assistant позволяет в автоматическом режиме выбрать необходимую платежную систему, заполнить параметры этой платежной системы и перейти на сайт выбранной платежной системы.
Для этого необходимо заполнить дополнительные параметры запроса на оплату заказа.
Дополнительные параметры запроса на оплату
- followup
- Пройти весь MONETA.Assistant с предустановленными значениями. Для этого необходимо выбрать платежную систему и заполнить параметры платежной системы (если они есть).
Возможные значения:
true- Использовать дополнительные параметры, чтобы пропустить шаги MONETA.Assistant.false- Пользователь сам заполняет формы MONETA.Assistant.
Значение по умолчанию:
false. - javascriptEnabled
- Признак возможности использовать javascript для автоматической обработки форм (
trueилиfalse). Если будет передано значениеtrue, а на самом деле у пользователя javascript выключен, то пользователь увидит пустую страницу. Важно передавать действительное значение – «включен» или «выключен» javascript в браузере пользователя. Используется совместно с параметромfollowup. - paymentSystem.accountId
- Номер счета платежной системы. Например, тип кошелька WebMoney, 2 – WMR, 3 – WMZ, 4 – WME.
Примеры запросов на оплату
Пример 1
Пример формы для оплаты заказа «FF790ABCD» в магазине «MAGAZIN.RU» (номер счета 00000001) на сумму 120.25 рублей с автоматической обработкой диалогов. Оплата будет производиться через систему WebMoney, средства будут списаны с WMR кошелька. Пользователь будет перенаправлен на страницу оплаты системы WebMoney.
<form method="post" action="https://moneta.ru/assistant.htm">
<input type="hidden" name="MNT_ID" value="00000001">
<input type="hidden" name="MNT_TRANSACTION_ID" value="FF790ABCD">
<input type="hidden" name="MNT_CURRENCY_CODE" value="RUB">
<input type="hidden" name="MNT_AMOUNT" value="120.25">
<input type="hidden" name="paymentSystem.accountId" value="2">
<input type="hidden" name="javascriptEnabled" value="true">
<input type="hidden" name="followup" value="true">
<input type="submit" value="Pay with Webmoney WMR">
</form>Если в браузере пользователя выключен javascript и в MONETA.Assistant придет параметр javascriptEnabled = false, то пользователь попадет на последний шаг MONETA.Assistant – просмотр деталей операции. Для перехода на сайт системы WebMoney пользователь должен нажать кнопку Продолжить.
Пример 2
Пример формы для оплаты заказа «FF790ABCD» в магазине «MAGAZIN.RU» (номер счета 00000001) на сумму 120.25 рублей с автоматической обработкой диалогов. Оплата будет производиться через систему Яндекс.Деньги.
<form method="post" action="https://moneta.ru/assistant.htm">
<input type="hidden" name="MNT_ID" value="00000001">
<input type="hidden" name="MNT_TRANSACTION_ID" value="FF790ABCD">
<input type="hidden" name="MNT_CURRENCY_CODE" value="RUB">
<input type="hidden" name="MNT_AMOUNT" value="120.25">
<input type="hidden" name="followup" value="true">
<input type="submit" value="Pay with Yandex.Money">
</form>Получение данных от поставщика
Для поставщиков, предоставляющих при оплате расширенную информацию в интерактивном режиме, возможна отправка дополнительных проверочных запросов после каждого шага по вводу параметров.
Проверочные запросы служат для того, чтобы:
- Получить от поставщика данные которые зависят от уже введенных данных (например, по лицевому счету вернуть адрес и показания счетчиков).
- Указать сумму заказа, если сумма зависит от введенных параметров.
Основные принципы взаимодействия
Запросы на получение данных MONETA.Assistant отсылает на указанный в «Check URL» адрес в виде HTTP запроса методом GET или POST. Ответ на HTTP запрос должен быть в формате XML.
Во время оплаты одного заказа MONETA.Assistant может несколько раз отсылать проверочные запросы на получение данных.
При получении ответа на проверочный запрос в системе MONETA.RU анализируются поля ответа. Проверочный запрос считается не отправленным, и дальнейшая обработка заказа будет прервана:
- Если система MONETA.RU не смогла получить ответ от обработчика.
- Если ответ содержит неверный формат.
- Если MNT_ID или MNT_TRANSACTION_ID не соответствуют параметрам запроса.
- Если MNT_RESULT_CODE не соответствует списку возможных кодов.
- Если MNT_SIGNATURE не сходится с ключом, сгенерированным в MONETA.RU.
Дополнительные коды ошибок, отображаемые пользователю
- 302
- При отправке проверочного запроса в адрес партнера получен некорректный ответ (стандартная html-страница, страница с сообщением об ошибке и т.п.) или перенаправление на другой адрес (HTTP Status 301, 302).
Убедитесь, что ваш сервис доступен по адресу, указанному в Check URL, и в ответ на запрос вы возвращаете корректный XML.
- -1
- Запроса не было. В настройках счета задан параметр Check URL, но не задан параметр Pay URL.
- -600
- Невозможно отправить уведомление. Неверный Check URL или Pay URL или невозможно установить соединение.
Убедитесь, что в разделе управления счетами в настройках Check URL и Pay URL заданы верно, например: http://www.merchant-site.com/script
Примечание: Адрес должен быть доступен для нашей системы (например, нельзя задавать локальные имена внутренних серверов “localhost”, “my-pc” и т.п.).
- -700
- Невозможно обработать ответ. Неверный xml формат ответа или неверно сформированная подпись ответа.
Убедитесь, что ваш сервис возвращает xml в корректном формате, при формировании подписи вы используете тот же код проверки целостности данных, что указан в настройках счёта.
Использование виджета для отображения MONETA.Assistant
Виджет https://moneta.ru/assistant.widget - это форма оплаты, у которой визуальное представление организовано таким образом, чтобы посетитель интернет-магазина мог бы ввести его платежные данные прямо в корзине своего интернет-магазина.
Если Вы не используете виджет, то посетитель должен будет перейти из корзины на отдельную страницу оплаты заказа по кнопке “Оплатить”, размещенной в корзине.
Кнопка “Оплатить” в корзине должна формироваться динамически и представляет собой форму, у которой имеется ряд скрытых полей.
Таким образом, видна остается лишь только кнопка для отправки формы, т.е. кнопка “Оплатить”:
<form method='post' action='https://moneta.ru/assistant.htm'>
<input type='hidden' name='MNT_ID' value='19312235'>
<input type='hidden' name='MNT_CURRENCY_CODE' value='RUB'>
<input type='hidden' name='MNT_AMOUNT' value='10.25'>
<input type='submit' value='Pay order'>
</form>Чтобы вместо кнопки “Оплатить” сразу показать форму оплаты, надо поместить в корзину код iframe:
<iframe src='https://moneta.ru/assistant.widget?MNT_ID=19312235&MNT_CURRENCY_CODE=RUB&MNT_AMOUNT=10.25'>
Ваш браузер не поддерживает плавающие фреймы!
</iframe>Таким образом, мы “просим” MONETA.Assistant показать форму для оплаты заказа внутри iframe.
Если корзина интернет-магазина может быть изменена без перезагрузки страницы, то следует так же менять и параметры, передаваемые в iframe, в частности сумму заказа.
Особенности использования
Ссылка assistant.widget отличается от assistant.htm только дизайном - в assistant.widget не показываются хидеры, футеры и т.д. Это та же кнопка “Оплатить”, но уже “развёрнутая”.
SuccessUrl и FailUrl вызываются также, но нужно учитывать, что они покажутся в Вашем фрейме. Так как SuccessUrl и FailUrl - это страницы с Вашим дизайном, то Вам следует их оформить так, чтобы они хорошо смотрелись в iframe. Если Вам необходимо иметь разные SuccessUrl и FailUrl для работы с одним счетом (показывать в iframe и в браузере), то Вы можете передавать параметры MNT_SUCCESS_URL и MNT_FAIL_URL необходимые для данного конкретного случая (на счете в таком случае должна стоять галочка - “Можно переопределять параметры в запросе”).
Содержимое iframe можно стилизовать индивидуально по Вашему усмотрению. Примеры страниц, на которых выводится виджет MONETA.Assistant с измененным внешним видом при помощи дополнительного css-кода можно увидеть здесь.
Там же есть листинги css-кода по каждому из приведенных примеров. Для установки стилей на Вашем расширенном счете, необходимо прислать css-код для review в техническую поддержку. Примеры использования: http://payanyway.ru/info/w/ru/public/w/partnership/demo/var2.html
Кастомизация платёжной формы
Подразделы Кастомизация платёжной формы
Настройка стилей (лёгкая кастомизация)
1. Общая информация
Для платёжной формы доступна персонализация стилей, позволяющая адаптировать внешний вид. Вы можете изменить цветовую схему, шрифты, отступы и другие визуальные элементы без изменения функциональности и структуры.
Ознакомиться с платёжной формой можно в разделе “Платёжная форма и виджет” — «Новая платёжная форма».
Все загружаемые стили проходят автоматическую проверку на соответствие требованиям безопасности. Некоторые CSS-свойства будут удалены системой для защиты пользовательских данных и поддержания функциональности платёжной формы.
2. Основные элементы формы для кастомизации
- Хедер формы:
payment-header__info— контейнер заголовка платёжной формыmerchant— блок данных магазинаmerchant-name— название магазинаamount— блок с суммой платежаamount__total-wrapper— обёртка для суммы и деталейamount__total— сумма платежаarrow-bottom— стрелка для раскрытия деталейamount__details— детали платежаamount__details-item— элементы деталей платежа (получатель, номер заказа, описание)payment-form__mnt-logo— логотип магазина
- Кнопки:
button-primary— основная кнопка оплатыbutton-secondary— второстепенные кнопкиpayment-form__navigation— навигация по форме
- Поля ввода:
input— базовые поля вводаinput-wrapper— обёртка для полей вводаselect— выпадающие спискиselect-wrapper— обёртка для выпадающих списковselect-arrow— стрелка выпадающего спискаoption— стили для опций в выпадающем списке
- Основной контент:
payment-form__content— основной контейнер контента формыpayment-form__title— заголовок блока оплатыpayment-form__comment— дополнительная информация блока оплатыpayment-form__error— блок ошибок (красный)payment-form__alert— блок предупреждений (оранжевый)payment-form__notice— уведомление о согласии с договоромpayment-form__message— сообщение о результате операцииpayment-form__description— описание
- Форма оплаты по карте:
card— контейнер полей ввода картыlogo-cardType— логотип платёжной системы введённой картыpayment-form__input card-num— поле номера картыpayment-form__input card-exp— поле срока действия картыpayment-form__input card-cvv— поле CVV кодаpayment-form__input card-holder— поле имени держателя карты
- Футер формы оплаты по карте:
card__footer— нижний блок карточной формыcard__footer-security— блок информации о безопасностиcard__footer-security-logo— логотип безопасностиcard__footer-security-text— текст о безопасностиcard__footer-cardsystems-logo— логотипы списка платёжных систем
- Дополнительные элементы формы оплаты по карте:
remove-card— контейнер кнопки удаления сохранённой картыremove-card__button— кнопка удаления карты
- Чекбоксы:
checkbox-wrapper— контейнер чекбоксаremember-card— контейнер чекбокса «Запомнить карту»remember-card__checkbox— чекбокс «Запомнить карту»remember-card__label— текстовая метка чекбокса
- Всплывающие подсказки:
hint-wrapper— контейнер подсказкиhint-icon— иконка подсказкиhint-text— текст всплывающей подсказки
- Модальные тултипы:
tooltip-info— информационный тултип в модальном окнеtooltip-info-header— заголовок подсказкиtooltip-info-text— текст подсказкиtooltip-close— кнопка закрытия тултипа
- Дополнительные методы оплаты:
payment-methods— методы оплатыpayment-methods__main-list— список методов оплатыbutton payment-method__item— кнопка выбора метода оплаты
- Футер:
footer— нижний блок формыfooter__main— меню нижнего блока формыfooter__link— ссылка на раздел «Обратная связь»footer__copy— копирайт и логотипfooter__lang— выбор языка
- Загрузка и анимации:
loader-circles— анимация загрузки (три точки)three-body— анимация загрузки (три шара)dot-windmill— анимация загрузки (вращающиеся точки)
- QR-коды для оплаты:
payment-form__qrcode— контейнер QR-кодаpayment-form__qrcode-block— блок с QR-кодомpayment-form__qrcode-img— изображение QR-кода
- Модальные окна:
modal-wrapper— фон модального окнаmodal-window— модальное окноmodal-title— заголовок модального окнаmodal-content— основной контент модального окнаmodal-action— кнопки действий в модальном окнеmodal-closeIcon— иконка закрытия модального окна
3. Как загрузить стили
3.1. Шаги загрузки
- Войдите в Личный кабинет moneta.ru:
- Перейдите в раздел «Мой счёт» → «Управление счетами»
- Выберите «Редактировать стиль Moneta.Assistant»
- Загрузите CSS-стили:
- В поле «CSS стили» вставьте ваш CSS-код
- Нажмите кнопку «Сохранить»
Подсказка: Добавление стилей в виде javascript недоступно.
3.2. Ограничения
- Недоступны
@importи внешние ресурсы (в том числе шрифты) - Отсутствует возможность изменения структуры элементов формы
- Доступно использование только следующих шрифтов:
GolosTextWebRegular— обычный текстGolosTextWebMedium— среднее выделение текстаGolosTextWebDemiBold— полужирный текст для заголовковGolosTextWebBold— жирный текст для важных элементов
4. HTML стартовой страницы платёжной формы
Ниже представлена HTML-структура стартовой страницы платёжной формы. Изучение этой структуры поможет вам лучше понять взаимосвязь элементов и правильно определить классы для кастомизации. Данный HTML-код содержит основные контейнеры и элементы интерфейса. При написании CSS-стилей вы можете использовать классы из этой структуры для точного позиционирования и стилизации нужных элементов.
Карточная форма работает через iframe, поэтому html код разделён на два блока.
Подсказка: Для интерактивной работы с html-кодом — доступен просмотр платёжной формы в разделе “Платёжная форма и виджет” — «Новая платёжная форма» с помощью функционала браузера «Просмотреть код».
HTML-код платёжной формы
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Assistant</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="cache-control" content="no-cache">
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="static/img/favicon.ico" type="image/x-icon">
<link rel="icon" href="static/img/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="static/css/assistant.min.css">
<script src="static/js/assistant.js"></script>
</head>
<body data-test-id="card" id="assistant" style="position: static;">
<div class="modal-wrapper hidden" id="modalWrapper">
<div class="modal-window">
<button type="button" class="tooltip-close">
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M8.267 8.267C7.911 8.62277 7.911 9.19993 8.267 9.5557L14.7114 15.9999L8.267 22.4441C7.911 22.8001 7.911 23.3772 8.267 23.733C8.62299 24.089 9.20015 24.089 9.5557 23.733L16.0001 17.2886L22.4445 23.733C22.8001 24.089 23.3772 24.089 23.7332 23.733C24.0892 23.3772 24.0892 22.8001 23.7332 22.4441L17.2888 15.9999L23.7332 9.5557C24.0892 9.19993 24.0892 8.62277 23.7332 8.267C23.3772 7.911 22.8001 7.911 22.4445 8.267L16.0001 14.7112L9.5557 8.267C9.20015 7.911 8.62299 7.911 8.267 8.267Z"></path>
</svg>
</button>
<h4 class="tooltip-info-header">Запомним данные карты</h4>
<div class="tooltip-info-text">
<p>При следующей оплате вводить ничего не нужно, деньги спишутся автоматически.</p>
<p>Данные будем хранить в зашифрованном виде. Это надёжно и безопасно.</p>
<p>Отвязать карту и отменить автоматические списания можно у продавца или в службе поддержки PayAnyWay.</p>
</div>
</div>
</div>
<div class="payment-form">
<div id="header" class="payment-form__header payment-header"
data-state="CREATED" data-redirecttarget="_parent">
<div class="payment-header__info">
<div class="merchant">
<div class="merchant-name">Название счёта</div>
</div>
<div class="amount">
<div class="amount__total-wrapper">
<div class="amount__total" id="amountDetailsSwitcher" tabindex="1">
15,00 ₽
<div>
<div class="arrow-bottom">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.35199 8.34427C4.77864 7.92697 5.44629 7.88904 5.91676 8.23046L6.05155 8.34427L12 14.1623L17.9485 8.34427C18.3751 7.92697 19.0428 7.88904 19.5132 8.23046L19.648 8.34427C20.0747 8.76157 20.1135 9.41458 19.7644 9.87473L19.648 10.0066L12.8498 16.6557C12.4231 17.073 11.7555 17.111 11.285 16.7695L11.1502 16.6557L4.35199 10.0066C3.88267 9.54753 3.88267 8.8033 4.35199 8.34427Z" fill="#111111"></path>
</svg>
</div>
</div>
</div>
</div>
<div class="amount__details hidden" id="amountDetailsBlock" style="height: 0px;">
<div class="amount__details-items">
<div class="amount__details-item">
<div class="amount__details-item-name">Получатель</div>
<div class="amount__details-item-value">Название получателя</div>
</div>
<div class="amount__details-item">
<div class="amount__details-item-name">Номер заказа</div>
<div class="amount__details-item-value">base-241125-1734</div>
</div>
</div>
</div>
</div>
</div>
<div class="payment-form__mnt-logo"></div>
</div>
<iframe src="card.html" class="paymentForm" allowfullscreen="" id="cardForm" autofocus=""></iframe>
<div class="iframe_loader" id="ifrLoaderWrapper" style="height: 468px; margin-top: -468px;">
<div class="dot-windmill" id="iFrameLoader"></div>
</div>
<div class="payment-methods">
<div class="payment-methods__main-list" id="pmMainList">
<a class="button payment-method__item" href="/sbp" id="pm_sbp">
<div class="payment-method__item-info">
<div class="payment-method__item-logo payment-method__item-logo--sbp-ru"></div>
</div>
</a>
<a class="button payment-method__item" href="/sber.pay" id="pm_sberpay">
<div class="payment-method__item-info">
<div class="payment-method__item-logo payment-method__item-logo--sberpay"></div>
</div>
</a>
<a class="button payment-method__item" href="/alfa.pay" id="pm_alfapay">
<div class="payment-method__item-info">
<div class="payment-method__item-logo payment-method__item-logo--alfapay"></div>
</div>
</a>
<a class="button payment-method__item" href="/t.pay" id="pm_tpay">
<div class="payment-method__item-info">
<div class="payment-method__item-logo payment-method__item-logo--tpay"></div>
</div>
</a>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="footer__main">
<div class="footer__link">
<a href="https://www.payanyway.ru/backoffice/auth/support?lang=ru" target="_blank">Обратная связь</a>
</div>
<div class="footer__copy">
Платёжный сервис
<a href="https://www.payanyway.ru" target="_blank">PayAnyWay</a>
</div>
</div>
<div class="footer__lang">
<a href="?moneta.locale=en" id="langLinkD">English</a>
</div>
</footer>
</body>
</html>HTML-код формы оплаты по карте
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Card Backend</title>
<link rel="stylesheet" href="static/css/cardform.min.css">
<script type="text/javascript" src="static/js/cardform.js"></script>
<script type="text/javascript" src="static/js/threeDSInfo.min.js"></script>
</head>
<body>
<form class="payment-form__content" method="post" action="?">
<div class="payment-form__title">
<div class="payment-form__title-text">По карте</div>
<div class="payment-form__title-logos">
<div class="logo-cardType default" id="cardTypeLogo"></div>
</div>
</div>
<div class="card">
<div class="payment-form__input-wrapper">
<input placeholder="Номер карты" value="" aria-label="cardNumber" autocomplete="cc-number"
class="payment-form__input card-num" id="cardNumber" inputmode="numeric" maxlength="23" name="cardNumber">
</div>
<input placeholder="ММ/ГГ" value="" aria-label="cardExpiration" autocomplete="cc-exp"
class="payment-form__input card-exp" id="cardExpiration" inputmode="numeric" maxlength="7" name="cardExpiration">
<input placeholder="Код" aria-label="cardCVV2" autocomplete="cc-csc" class="payment-form__input card-cvv"
id="cardCVV2" inputmode="numeric" maxlength="3" name="cardCVV2" type="password">
<input placeholder="Владелец карты" value="" aria-label="cardHolder" autocomplete="cc-name"
class="payment-form__input card-holder" id="cardHolder" inputmode="text" name="cardHolder" type="text">
<div class="error-comment">Напишите имя как на карте, например: IVAN IVANOV</div>
<div class="remember-card">
<label class="remember-card__label">
<input id="rememberCard" name="rememberCard" type="checkbox">
<span class="remember-card__checkbox">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path id="checkbox-icon" fill-rule="evenodd" clip-rule="evenodd"
d="m4.2 8.3l6-6.3 0.8 0.8-6.8 7.2-3.2-3.3 0.8-0.9z" fill="currentColor"></path>
</svg>
</span>
<span>Запомнить карту</span>
</label>
</div>
</div>
<button class="button-primary" type="submit" name="_do_pay">
<span class="button-text">Оплатить</span>
<span id="loader-container" class="loader-circles__wrapper">
<span class="loader-circles loader-circles--center">
<span class="loader-circles__circle loader-circles__circle--left"></span>
<span class="loader-circles__circle loader-circles__circle--middle"></span>
<span class="loader-circles__circle loader-circles__circle--right"></span>
</span>
</span>
</button>
<div class="payment-form__notice">
При оплате вы соглашаетесь с <a href="https://www.moneta.ru/info/public/users/nko/cardsserviceoffer.pdf" class="link--gray" target="_blank">Договором</a>
</div>
<div class="card__footer">
<div class="card__footer-security">
<div class="card__footer-security-logo"></div>
<div class="card__footer-security-text">Безопасная оплата</div>
</div>
<div class="card__footer-cardsystems">
<div class="card__footer-cardsystems-logo"></div>
</div>
</div>
</form>
</body>
</html>Расширенная настройка интерфейса (глубокая кастомизация)
Для платёжной формы доступна опция расширенной кастомизации. В отличие от базовой настройки стилей, эта возможность позволяет полностью разработать собственный интерфейс для всех или отдельных этапов оплаты с сохранением базовой функциональности и безопасности платёжной системы.
Для получения исходного html-файла: выгрузите файл из интерфейса платёжной формы в браузере.
Ознакомиться с платёжной формой можно в разделе “Платёжная форма и виджет” — «Новая платёжная форма».
Для изменения доступны:
- HTML-файлы: с семантически правильной структурой, включая все необходимые секции (
<!DOCTYPE html>,<html>,<head>,<body>) и полный контент страницы. Файлы должны быть самодостаточными и содержать всю разметку, а не только изменяемые части. - CSS-файлы: должны содержать полное описание стилей для всех элементов интерфейса, а не только переопределения отдельных правил. Рекомендуем добавлять свои стили в css-файл формы.
- Шрифты: форматы
woff2иwoff. - Изображения и иконки: форматы SVG (рекомендуется для иконок), PNG, JPEG (JPG).
Ограничения:
- Недоступно добавление javascript.
- Для кнопок методов оплаты недоступно изменение наименований и иконок.
Ориентировочная структура предоставляемых файлов:
html-файл— платёжная форма и форма ввода данных картыcss-файл— стили для платёжной формы и формы ввода данных карты (name.css)fonts/— папка с файлами шрифтовimg/— папка с файлами изображений и иконок
Процесс предоставления файлов:
Подготовленные файлы кастомизации передайте вашему менеджеру.
При получении файлов мы проведём техническое ревью и предоставим обратную связь по результатам.
Пример файлов для предоставления:
В приложенном архиве представлена папка js с файлом script.js для ознакомления и просмотра работы формы. Его редактирование и добавление новых скриптов недоступны.
Настройка виджета
Добавление платёжной формы на сайт магазина
Примечание: Если вы уже используете интерфейс MONETA.Assistant, то подключение новой платёжной формы займёт совсем немного времени, если нет – изучите документацию, чтобы реализовать обработчики Check и Pay URL.
Подключим скрипт
После того, как ваш магазин готов обрабатывать запросы от нашей системы, добавьте следующий скрипт на страницу, где будете принимать платежи от клиентов:
<script type="text/javascript" src="https://payanyway.ru/assistant-builder"></script>Примечание: Исходники скрипта доступны на Github.
Определим параметры платежа
Теперь на этой же странице нужно подготовить параметры для платёжной формы:
<script type="text/javascript">
let options = {
account: 32691195,
amount: 12.34,
transactionId: '1234567890-abcdef'
};
// ...
</script>В этом примере параметров всего три, но может быть и больше – вот они все:
- account
- Номер вашего бизнес-счёта.
- amount
- Сумма платежа.
- transactionId
- Номер заказа в магазине.
- operationId
- ID операции в Монете.
- description
- Описание заказа.
- signature
- Подпись запроса.
- subscriberId
- ID клиента в магазине.
- testMode
- Признак тестового платежа.
Значения:
0– платёж настоящий (по умолчанию)1– платёж тестовый
- amount
- Язык интерфейса. Значения:
ru– русский (по умолчанию)en– английский
- theme
- Цветовая тема интерфейса. Значения:
light– светлая (по умолчанию)dark– тёмная
- customParams
- Укажите любые другие параметры, если необходимо. Например:
customParams: { param1: "value1", param2: "value2" }Все параметры из блока
customParamsбудут присутствовать в запросах на Check и Pay URL.
Отрисуем платёжную форму
После того, как все параметры платёжной формы определены – отрисуем её:
let assistant = new Assistant.Builder();
assistant.build(options, 'payment-form');Обратите внимание на второй параметр в функции build. Это id контейнера, в котором будет отрисована платёжная форма. В данном примере нам предварительно нужно было создать следующий html-элемент и разместить его на странице:
<div id="payment-form"></div>Если не указывать второй параметр в функции build – платёжная форма будет отрисована в модальном окне поверх всей страницы.
Примечание: Платёжная форма в модальном окне всегда имеет светлую цветовую тему. Наши дизайнеры небезосновательно считают, что так лучше.
Добавим обработчики
И ещё один момент – после успешной оплаты или в случае ошибки (а иногда – во время обработки платежа) бывает необходимо совершить какие-либо действия: уйти на другую страницу и так далее. Для этого можно добавить обработчики:
// платёж прошёл успешно
assistant.setOnSuccessCallback(function(operationId, transactionId) {
// здесь можно сделать что угодно – например,
// перенаправить на другую страницу
location.replace("https://domain.domain");
});
// платёж не прошёл
assistant.setOnFailCallback(function(operationId, transactionId) {
// действия по обработке ошибок
});
// платёж обрабатывается
assistant.setOnInProgressCallback(function(operationId, transactionId) {
// действия по обработке промежуточного статуса операции
});Здесь:
operationId– номер операции в МонетеtransactionId– номер заказа в магазине
Примечание: Если в настройках счёта задан InProgress URL – переход по нему произойдёт автоматически.
Код целиком
<div id="payment-form"></div>
<script type="text/javascript" src="https://payanyway.ru/assistant-builder"></script>
<script type="text/javascript">
let options = {
account: 32691195,
amount: 12.34,
transactionId: '1234567890-abcdef'
};
let assistant = new Assistant.Builder();
// платёж прошёл успешно
assistant.setOnSuccessCallback(function(operationId, transactionId) {
// здесь можно сделать что угодно – например,
// перенаправить на другую страницу
location.replace("https://domain.domain");
});
// платёж не прошёл
assistant.setOnFailCallback(function(operationId, transactionId) {
// действия по обработке ошибок
});
// платёж обрабатывается
assistant.setOnInProgressCallback(function(operationId, transactionId) {
// действия по обработке промежуточного статуса операции
});
assistant.build(options, 'payment-form');
</script>Компактная платёжная форма
Компактная платёжная форма поддерживает приём платежей только с банковских карт.
Цветовые темы
Наша форма имеет две цветовые темы – светлую и тёмную. Подумайте, какая из них будет лучше сочетаться с дизайном вашего сайта:
Определились? Теперь можно приступать к интеграции!
Добавление платёжной формы на сайт магазина
Подсказка: Если вы уже используете интерфейс MONETA.Assistant, то подключение компактной платёжной формы займёт совсем немного времени, если нет – изучите документацию, чтобы реализовать обработчики Check и Pay URL.
Подключим скрипт
После того, как ваш магазин готов обрабатывать запросы от нашей системы, добавьте следующий скрипт на страницу, где будете принимать платежи от клиентов:
<script type="text/javascript" src="https://payanyway.ru/assistant-builder"></script>Подсказка: Исходники скрипта доступны на GitHub.
Определим параметры платежа
Теперь на этой же странице нужно подготовить параметры для платёжной формы:
<script type="text/javascript">
const options = {
account: 32691195,
amount: 12.34,
transactionId: '1234567890-abcdef'
};
// ...
</script>В этом примере параметров всего три, но может быть и больше – вот они все:
- account
- Номер вашего бизнес-счёта.
- amount
- Сумма платежа.
- transactionId
- Номер заказа в магазине.
- operationId
- ID операции в Монете.
- description
- Описание заказа.
- signature
- Подпись запроса.
- subscriberId
- ID клиента в магазине.
- lang
- Язык интерфейса. Значения:
ru– русский
en– английский
- Значение по умолчанию:
ru. - theme
- Цветовая тема интерфейса. Значения:
light– светлая,
dark– тёмная
- Значение по умолчанию:
light - customParams
- Укажите любые другие параметры, если необходимо. Эти параметры будут присутствовать в запросах на
CheckиPay URL. Например:
customParams: {
param1: "value1",
param2: "value2"
}Отрисуем платёжную форму
После того, как все параметры платёжной формы определены – отрисуем её.
const assistant = new Assistant.Builder();
assistant.build(options, 'payment-form');Обратите внимание на второй параметр в функции build. Это id контейнера, в котором будет отрисована платёжная форма. В данном примере нам предварительно нужно было создать следующий html-элемент и разместить его на странице:
<div id="payment-form"></div>Если не указывать второй параметр в функции build – платёжная форма будет отрисована в модальном окне поверх всей страницы.
Подсказка: Платёжная форма в модальном окне всегда имеет светлую цветовую тему. Наши дизайнеры небезосновательно считают, что так лучше.
Добавим обработчики
И ещё один момент – после успешной оплаты или в случае ошибки (а иногда – во время обработки платежа) бывает необходимо совершить какие-либо действия: уйти на другую страницу и так далее. Для этого можно добавить обработчики:
// платёж прошёл успешно
assistant.setOnSuccessCallback(function(operationId, transactionId) {
// здесь можно сделать что угодно – например,
// перенаправить на другую страницу:
location.replace("https://domain.domain");
});
// платёж не прошёл
assistant.setOnFailCallback(function(operationId, transactionId) {
// действия по обработке ошибок
});
// платёж обрабатывается
assistant.setOnInProgressCallback(function(operationId, transactionId) {
// действия по обработке промежуточного статуса операции
});Здесь:
operationId– номер операции в МонетеtransactionId– номер заказа в магазине
Примечание: Если в настройках счёта задан InProgress URL – переход по нему произойдёт автоматически.
Код целиком
<div id="payment-form"></div>
<script type="text/javascript" src="https://payanyway.ru/assistant-builder"></script>
<script type="text/javascript">
const options = {
account: 32691195,
amount: 12.34,
transactionId: '1234567890-abcdef'
};
const assistant = new Assistant.Builder();
// платёж прошёл успешно
assistant.setOnSuccessCallback(function(operationId, transactionId) {
// здесь можно сделать что угодно – например,
// перенаправить на другую страницу:
location.replace("https://domain.domain");
});
// платёж не прошёл
assistant.setOnFailCallback(function(operationId, transactionId) {
// действия по обработке ошибок
});
// платёж обрабатывается
assistant.setOnInProgressCallback(function(operationId, transactionId) {
// действия по обработке промежуточного статуса операции
});
assistant.build(options, 'payment-form');
</script>


