Перейти к основному содержимому

Виджет

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

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

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

  1. Инициация - Пользователь на вашей стороне переходит к оплате (например, нажимает на кнопку)
  2. Создание запроса - Вы создаете запрос на оплату и отображаете на своем сайте платежную форму Сам.Эквайринг
  3. Выбор способа - Пользователь в платежной форме выбирает способ оплаты, вводит данные и переходит к оплате
  4. Подтверждение - Сам.Эквайринг реализует нужный сценарий подтверждения оплаты (например, перенаправляет пользователя в интернет-банк)
  5. Оплата - Пользователь подтверждает оплату
  6. Возврат - Сам.Эквайринг автоматически возвращает пользователя на страницу завершения оплаты на вашей стороне
  7. Результат - Вы отображаете нужную информацию, в зависимости от статуса платежа

Обработка результата оплаты

Проверка статуса оплаты

Чтобы понять как прошла оплата (успешно или с ошибкой) - при возвращении на URL указанный в параметрах магазина будет добавлен параметр success или error. А также параметр id с номером вашего заказа.

Пример ссылки: https://доменвашегосайта/?success&id=15273648338

Важно для безопасности

Обращение по этому URL не является фактом того, что оплата прошла успешно. По этой ссылке могут обратиться злоумышленники и указать любые параметры.

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

Для получения достоверного статуса оплаты:

Базовая реализация

Внимание

Пример реализации не предусматривает генерацию полей 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 не являются фактом того, что оплата прошла успешно или нет. Данные события могут подделать злоумышленники и указать любые параметры.

Для получения достоверного статуса оплаты:

Синтаксис

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