Для того чтобы начать принимать платежи, Продавцу необходимо разместить на своей странице простой скрипт, который будет сам создавать сессию и формировать страницу оплаты. Пример взаимодействия решения Продавца с платежным шлюзом theMAP при Легкой интеграции:
Для установки виджета необходимо прописать на сайте скрипт в разделе head:
<script type="text/javascript" src="https://static-stage.mapcard.pro/static/widget/map-widget.js"></script>
Далее на какое-либо событие (например, нажатие кнопки оплаты) прописывается вызов виджета. Например:
<button id="pay_button" onclick="openWidget()">Оплатить</button>
Вызов виджета с необходимыми параметрами следует поместить на странице перед закрывающим тегом </body>
<!-- Функция openWidget может иметь такой вид -->
function openWidget() {
var widget = new MapWidget({
Token: "Jms7xd95Cv30S3Mri7Xfp3md8cn3lxmD5Xb47Hg8Bl9Dm8cF6Hbsl3VgP21KioIo",
OrderID: "map_widget_2019",
Amount: 5999000,
Currency: "RUB",
ProductName: "Телефон",
Receipt: true,
Email: "example@mapcard.pro",
AutoClose: true
})
}
Параметры виджета, которые передаются в его конструктор
Название | Описание | Формат | Обязательный |
---|---|---|---|
Token |
Ключ терминала. Выдается Продавцу с параметрами тестового/боевого доступа | Строка | Да |
OrderID |
Идентификатор платежа в системе Продавца | Строка (максимум 50 символов) | Да |
Amount |
Сумма операции в минимальных единицах валюты (копейках) | Цифры, не содержащие десятичных или других разделителей | Да |
Currency |
Валюта терминала | Строка | Да |
Product |
Наименование товара | Строка (максимум 50 символов) | Нет |
Receipt |
Требовать указания e-mail адреса пользователя в виджете | true/false | Нет |
Email |
Email адрес пользователя | Строка | Нет |
Goods |
Cписок товаров для фискализации | Массив в формате JSON | Нет |
CustomParams |
Дополнительные параметры платежа | Массив объектов формата: {key: "Phone", value: "123456789"} | Нет |
ShowGoods |
Показать/скрыть список товаров для фискализации | true/false | Нет |
AutoClose |
Автозакрытие виджета. Значение по-умолчанию false |
true/false | Нет |
После запуска конструктора с параметрами происходит проверка на размер экрана устройства и проверка на то, открыта ли страница на мобильном устройстве. Страница масштабируется для корректного и удобного отображения виджета.
Происходит генерация HTML кода виджета. Код встраивается в раздел body, добавляясь в качестве узла-потомка к тегу
. Элементам присваивается большое значения аттрибута стиля z-index, чтобы они перекрывали страницу при отображении. Первоначально все элементы скрыты.Загрузка виджета. Создается POST-запрос с данными, содержащимися в виджете. Ответ представляет собой шаблон, который содержит поля для заполнения и кнопку оплаты. Данный шаблон загружается в элемент <iframe>
виджета.
После проведения оплаты виджет закрывается и отправляется postMessage
с результатом оплаты paymentResult
. Происходит удаление его HTML-кода с основной страницы.
Шаблон Виджета может быть выполнен в дизайне сайта Мерчанта.
Внимание! Шаблоны не должны содержать ссылок на сторонние ресурсы. Если вы хотите добавить свои собственные скрипты, изображения или стили, вы должны отправить их в нашу службу поддержки на support@mapcard.pro.