Виджет
Способ интеграции с Сам.Эквайринг с отображением окна оплаты на вашем сайте. Вам необходимо подключить скрипт на сайте для работы данного способа.
Процесс оплаты через "Виджет"
- Инициация - Пользователь на вашей стороне переходит к оплате (например, нажимает на кнопку)
- Создание запроса - Вы создаете запрос на оплату и отображаете на своем сайте платежную форму Сам.Эквайринг
- Выбор способа - Пользователь в платежной форме выбирает способ оплаты, вводит данные и переходит к оплате
- Подтверждение - Сам.Эквайринг реализует нужный сценарий подтверждения оплаты (например, перенаправляет пользователя в интернет-банк)
- Оплата - Пользователь подтверждает оплату
- Возврат - Сам.Эквайринг автоматически возвращает пользователя на страницу завершения оплаты на вашей стороне
- Результат - Вы отображаете нужную информацию, в зависимости от статуса платежа
Обработка результата оплаты
Чтобы понять как прошла оплата (успешно или с ошибкой) - при возвращении на URL указанный в параметрах магазина будет добавлен параметр success
или error
. А также параметр id
с номером вашего заказа.
Пример ссылки: https://доменвашегосайта/?success&id=15273648338
Обращение по этому URL не является фактом того, что оплата прошла успешно. По этой ссылке могут обратиться злоумышленники и указать любые параметры.
Страница на этой ссылке - это возможность показать вашему клиенту финальный статус оплаты. С этой страницы клиент сможет продолжить совершать покупки на вашем сайте.
Для получения достоверного статуса оплаты:
- Дождитесь когда мы обратимся по URL-callback, который вы указали в настройках личного кабинета своего магазина
- Или самостоятельно запросите статус оплаты отправив запрос
GET /status
Базовая реализация
Пример реализации не предусматривает генерацию полей order_id (Ваш номер заказа) и signature (Подпись запроса).
Подразумевается, что за это отвечает ваш сервер.
Обязательным условием для работы виджета является форма со всеми заполненными полями, а также кнопка с id smz-init-payment-button
.
HTML + JavaScript
<form action="https://pro.selfwork.ru/merchant/v1/init" method="POST">
<input type="hidden" name="amount" value="400000">
<input type="hidden" name="info[0][name]" value="Cвитер ручной работы">
<input type="hidden" name="info[0][quantity]" value="2">
<input type="hidden" name="info[0][amount]" value="100000">
<input type="hidden" name="info[1][name]" value="Штаны ручной работы">
<input type="hidden" name="info[1][quantity]" value="1">
<input type="hidden" name="info[1][amount]" value="200000">
<input type="hidden" name="order_id" value="ID заказа">
<input type="hidden" name="signature" value="Подпись заказа">
<button id="smz-init-payment-button" type="submit">Оплатить</button>
</form>
<script src="https://pro.selfwork.ru/merchant-app/smz-init-payment.js"></script>
Метод subscribe
Метод subscribe
позволяет подписывать обработчики на определенные события виджета. Например, можно следить за открытием и закрытием всплывающего окна оплаты.
Доступные события
Событие | Описание |
---|---|
smzPaymentOpened | Виджет отобразился |
smzPaymentClosed | Виджет был закрыт |
smzPaymentError | При загрузке виджета произошла ошибка |
smzPaymentSuccess | Оплата прошла успешно |
smzPaymentFail | При оплате произошла ошибка |
События smzPaymentSuccess
и smzPaymentFail
не являются фактом того, что оплата прошла успешно или нет. Данные события могут подделать злоумышленники и указать любые параметры.
Для получения достоверного статуса оплаты:
- Дождитесь когда мы обратимся по URL-callback, который вы указали в настройках личного кабинета своего магазина
- Или самостоятельно запросите статус оплаты отправив запрос
GET /status
Синтаксис
(event: SubscribeEvent, callback: Function) => UnsubscribeFunction;
Пример использования событий
// Подписка на события
smzPaymentWidget.subscribe('smzPaymentOpened', () => {
console.log('Виджет отобразился');
});
smzPaymentWidget.subscribe('smzPaymentClosed', () => {
console.log('Виджет закрыт');
});
smzPaymentWidget.subscribe('smzPaymentError', () => {
console.log('Ошибка загрузки виджета');
});
smzPaymentWidget.subscribe('smzPaymentSuccess', (event) => {
console.log('Успешная оплата, ID заказа:', event.detail.id);
});
smzPaymentWidget.subscribe('smzPaymentFail', (event) => {
console.log('Ошибка оплаты, ID заказа:', event.detail.id);
});
// Отписка от события
const unsubscribe = smzPaymentWidget.subscribe('smzPaymentOpened', () => {
console.log('Виджет отобразился');
});
// Вызов функции для отписки
unsubscribe();
Метод close
Метод close
позволяет программно закрыть виджет оплаты.
smzPaymentWidget.close();
Работа с iframe
Если вы инициализируете оплату c помощью своего iframe, для корректной работы переходов и кнопок необходимо:
- Подключить js скрипт:
https://pro.selfwork.ru/merchant-app/smz-init-payment.js
- Назвать атрибут id для вашего тега iframe:
smz-payment-iframe
<script src="https://pro.selfwork.ru/merchant-app/smz-init-payment.js"></script>
...
<iframe id="smz-payment-iframe" src="ваша-страница-оплаты"></iframe>