Виджет

Способ интеграции с Сам.Эквайринг с отображением окна оплаты на вашем сайте. Вам необходимо подключить скрипт на сайте для работы данного способа.

Пример интеграции "Виджет"

Процесс оплаты через "Виджет":

1. Пользователь на вашей стороне переходит к оплате (например, нажимает на кнопку);

2. Вы создаете запрос на оплату и отображаете на своем сайте платежную форму Сам.Эквайринг;

3. Пользователь в платежной форме выбирает способ оплаты, вводит данные и переходит к оплате;

4. Сам.Эквайринг реализует нужный сценарий подтверждения оплаты (например, перенаправляет пользователя в интернет-банк);

5. Пользователь подтверждает оплату;

6. Сам.Эквайринг автоматически возвращает пользователя на страницу завершения оплаты на вашей стороне;

7. Вы отображаете нужную информацию, в зависимости от статуса платежа.

Чтобы понять как прошла оплата (успешно или с ошибкой) - при возвращении на URL указанный в параметрах магазина будет добавлен параметр success или error. А также параметр id с номером вашего заказа. Пример ссылки: https://<доменвашегосайта>/?success&id=15273648338 Обращение по этому URL не является фактом того, что оплата прошла успешно. По этой ссылке могут обратиться злоумышленники и указать любые параметры.

Страница на этой ссылке - это возможность показать вашему клиенту финальный статус оплаты. С этой страницы, клиент сможет продолжить совершать покупки на вашем сайте.

Чтобы получить статус оплаты по заказу, дождитесь когда мы обратимся по URL-callback, которую вы указали в настройках личного кабинета своего магазина. Так же вы можете самостоятельно запросить статус оплаты отправив запрос GET /status

Пример реализации отправки запроса

Пример реализации не предусматривает генерацию полей order_id и signature.

Подразумевается, что за это отвечает ваш сервер. Подробнее о методе.

Обязательным условием для работы виджета является форма со всеми заполненными полями, а так же внутри id кнопки с названием smz-init-payment-button.

HTML

<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 позволяет подписывать обработчики на определенные события виджета. Например, можно следить за открытием и закрытием всплывающего окна оплаты.

На данный момент реализовано 5 событий:

• smzPaymentOpened- Виджет отобразился;

• smzPaymentClosed - Виджет был закрыт;

• smzPaymentError - При загрузке виджета произошла ошибка;

• smzPaymentSuccess - Оплата прошла успешно;

• smzPaymentFail - При оплате произошла ошибка.

СобытияsmzPaymentSuccess и smzPaymentFail не являются фактом того, что оплата прошла успешно или нет. Данное событие могут подделать злоумышленники и указать любые параметры.

Чтобы получить статус оплаты по заказу, дождитесь когда мы обратимся по URL-callback, которую вы указали в настройках личного кабинета своего магазина. Так же вы можете самостоятельно запросить статус оплаты отправив запрос GET /status

(event: SubscribeEvent, callback: Function) => UnsubscribeFunction;

Пример релазиации отслеживания событий

JavaScript

smzPaymentWidget.subscribe('smzPaymentOpened', () => console.log('Виджет отобразился'));
smzPaymentWidget.subscribe('smzPaymentClosed', () => console.log('Виджет закрыт'));
smzPaymentWidget.subscribe('smzPaymentError', () => console.log('Ошибка загрузки виджета'));
smzPaymentWidget.subscribe('smzPaymentSuccess', (event)=>console.log(event.detail.id)); //ID заказа
smzPaymentWidget.subscribe('smzPaymentFail', (event)=>console.log(event.detail.id)); //ID заказа

//Отписаться от события можно вызвав результат функции subscribe
//Например отписаться от события отображения виджета:
const unsubscribe = smzPaymentWidget.subscribe('smzPaymentOpened', () => console.log('Виджет отобразился'));
unsubscribe();

Метод close

Метод close позволяет программно закрыть виджет оплаты.

JavaScript

smzPaymentWidget.close();

Если вы инициализируете оплату c помощью своего iframe, для корректной работы переходов и кнопок необходимо: - подключить js скрипт - https://pro.selfwork.ru/merchant-app/smz-init-payment.js; - назвать аттрибут id для вашего тега iframe - "smz-payment-iframe".