Оплата заказа 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>

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

mngatoff

20 февраля 2019, 14:56

2 066

+16

Комментарии: 7

Павел Гвоздь

21 февраля 2019, 07:21

да, fancybox это умеет

Фенсибокс третий классный! Сам совсем недавно оценил возможности.

Статья очень хороша, ибо описано просто и реализовано также!

Игорь Терентьев

21 февраля 2019, 08:10

Но, в отличие от второго, он платный для коммерческого использования.
fancyapps.com/fancybox/3/#license

mngatoff

21 февраля 2019, 09:10

это значит, что если ты продаешь его в составе своего компонента, то надо платить. а просто на сайты ставить вполне бесплатно

fancybox is licensed under the GPLv3 license for all open source applications.

все, что с открытыми исходниками, бесплатно

mngatoff

21 февраля 2019, 09:21

A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).

если ты ПРОДАЕШЬ ГОТОВЫЙ сайт или тему, например, как тут, особенно если есть запрет на копирование, то надо покупать лицензию

Игорь Терентьев

21 февраля 2019, 09:36

Разве создание не open source коммерческого сайта (который ты по сути продаешь) не попадает под эти запреты?

mngatoff

21 февраля 2019, 09:42

нет) ты не сайт продаешь, а свои услуги по настройке open source платформы Modx. и клиент твой тоже не сайт продает, а свои товары/услуги с его помощью.

грубо говоря, увидев на любом рандомном сайте работающий fancybox, его создатели пройдут мимо. увидев продающийся софт, в состав которого он включен, потребуют денег

Игорь Терентьев

21 февраля 2019, 14:07