Оплата заказа miniShop2 без перехода на страницу платёжки

Порой клиенту приходит в голову навязчивая идея ни в коем случае никуда не перенаправлять со своего сайта. И даже чтобы оплатить заказ — ни на какую платёжку не уходить, оставаться на сайте. При этом, денег, чтобы заплатить за разработку интерфейса приёма карт прямо на сайте, у него нет:) Именно по этому поводу и был изобретён этот костыль.

Нам понадобится:
1. fancybox 3
2. любой способ оплаты минишопа, возвращающий ссылку на оплату и дающий возможность задать разные страницы для успешной и неуспешной оплаты.

Для начала переименуем стандартный файл /assets/tpl/components/minishop2/js/web/default.js на, например, custom.js и укажем это в системной настройке ms2_frontend_js. Это для того, чтобы вносить в js правки, не боясь их потерять при обновлении минишопа.

Открываем файл, находим вот это:

callbacks.submit.response.success = function (response) {
    if (response.data['redirect']) {
        document.location.href = response.data['redirect'];
    }

Вместо строки document.location.href = response.data['redirect']; вставляем следующий код:

$.fancybox.open({
    src: response.data['redirect'],
    type: 'iframe',
    modal: true, // чтобы не появлялась кнопка "закрыть"
    iframe: {
        preload: false
    },
    afterClose: function (instance, current) {
        location.href = window.location.href; // перезагружаем страницу по закрытии окна
    }
})

Подключаем fancybox. Например вот так:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>

Большинство классов оплаты позволяют задать разные страницы для успешной и неуспешной оплаты. Например, во встроенном в минишоп из коробки классе PayPal это настройки ms2_payment_paypal_success_id и ms2_payment_paypal_cancel_id. Создаем эти страницы, указываем их в соотвествующих настройках. Придаём им такой вид, чтобы они нормально смотрелись в модальном окне — убираем шапку, футер, всё лишнее. Оставляем только сниппет msGetOrder с соответствующими чанками — в одном случае «ура, все оплачено», в другом «ой, заказ мы конечно приняли, но заплатить придется по-другому».

И добавляем на эти страницы кнопку для закрытия модального окна (да, fancybox это умеет):

<a href="javascript:" onclick="parent.jQuery.fancybox.getInstance().close();">Ок</a>

Всё. Всю процедуру оплаты клиент пройдёт в одном модальном окне, не покидая сайт. Когда процедура завершится, он увидит кнопку «Ок», нажав на которую закроет окно. После закрытия окна страница перезагрузится, чтобы обнулить корзину.