Виджет

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

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

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 + 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

Интеграция через 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>