Pokupo + Wix

Всем привет. Сегодня я хотел бы поделиться с вами небольшим решением по подключению кнопки оплаты Pokupo для платформы Wix.

Казалось бы, что тут такого - берешь и подключаешь. Я тоже так подумал, пока не попробовал заняться этим вопросом. Не смотря на свою известность викс оказался далеко не так дружелюбен как могло показаться, да что там стесняться, он оказался настоящим кошмаром - жутко тормозной, неудобный, намеренно лишенный очень важного функционала. Все это максимально усложнило задачу, которая элементарно решается в любом магазине на платформе Pokupo.

Но обо всем по порядку. Самым большим открытием для меня стало то, что викс не позволяет добавлять пользовательский javascript для изменения DOM. Можно подключить свои скрипты через iframe, но политики безопасности не позволяют обращаться к объектам родительского окна из iframe. В викс есть встроенный объект $w но он поддерживает ограниченный набор методов и также не позволяет менять элементы на странице. Это плохо.

Но хуже то, что для работы с заказами нет соответствующего API, нет доступа к базе, нельзя менять некоторые страницы, добавить собственный платежный модуль тоже нельзя. Возможно за деньги какие-то из этих функций и присутствуют, но в моем случае, в бесплатной версии, ничего такого нет.

Разительный контраст с платформой Pokupo, где есть и api на все случаи жизни, и возможность изменения DOM, и подключения любых скриптов, и добавление любых методов оплаты, в том числе и таких, которые платформой штатно не поддерживаются (об этом как-нибудь в другой раз)

Итак, викс. Первым делом создаем магазин и добавляем собственный метод оплаты Dashboard-> Settings-> Accept Payments

После этого переходим в редактор сайта. В левой части экрана в меню "Site Structure" выбираем "Thank you page" и добавляем кнопку в какой-нибудь место на странице.

И тут начинается самое интересное. Можно сделать так, чтобы при нажатии на кнопку открывалась страница мерчанта Pokupo, но при этом никакие параметры передать мерчанту не удастся, то есть пользователю придется самостоятельно вводить сумму для оплаты заказа, повторно вводить свой адрес email, что радует далеко не всех, да опечататься можно. Удивительно, но штатными средствами такое не реализуется, ввиду описанных выше ограничений.

Но как обычно, не смотря на массу ограничений мне удалось найти лазейку. Дело в том что у каждой страницы сайта викс есть "версия с исходным кодом". Для того чтобы ее посмотреть достаточно к адресу страницы добавить параметр ?escaped_fragment=.

После этого можно получить все требуемые параметры, только из самого викса это сделать невозможно. необходим скрипт-посредник.

Api викс содержит модули wix-location (отвечающий за обработку url и переадресацию) и wix-fetch (позволяющий обрабатывать http запросы). Это именно то, что нам нужно.

Алгоритм получился следующим. При нажатии на кнопку "Оплатить через Pokupo", скрипт-обработчик с помощью wix-location отправляет скрипту-посреднику url страницы.
Посредник загружает указанную страницу с параметром escaped_fragment, парсит результат и возвращает требуемые данные в формате json. Обработчик получает результат, формирует ссылку для оплаты на платформе Pokupo и переадресовывает пользователя на мерчант Pokupo.

Скрипт-обработчик нажатия кнопки
import wixLocation from 'wix-location'; import {getJSON} from 'wix-fetch'; export function button1_click_1(event) { getJSON("https://ВАШ САЙТ/wix.php?url="+wixLocation.url) .then( (json) => { wixLocation.to("https://pokupo.ru/payment/12375/payment#//description=WIX order "+json.orderId+"&mailUser="+json.buyerMail+"&idMethodPayment=&byGroup=no&amount="+json.value); } ) }

Скрипт-посредник (размещается на собственном хостинге)
$url=$_REQUEST['url']; preg_match('/.*\//',$url,$m, PREG_OFFSET_CAPTURE); $u=urlencode($m[0][0]); $z=file_get_contents($url."?_escaped_fragment_="); preg_match('/IFRAME src=".*"/ ', $z, $matches, PREG_OFFSET_CAPTURE); $r=str_replace("IFRAME","",$matches[0][0]); $r=str_replace('src="','',$r); $r=str_replace('" width="980" scrolling="auto" frameborder="0"','',$r); $r=preg_replace('/seo.*/','',$r); $r=$r."seo&section-url=".$u."&devicetype=Desktop"; $w=file_get_contents(trim($r)); preg_match('/(?:"orderId":)(.*?)(?:,)/',$w,$m, PREG_OFFSET_CAPTURE); $ord=$m[0][0]; preg_match('/(?:"value":)(.*?)(?:,)/',$w,$m, PREG_OFFSET_CAPTURE); $amount=$m[0][0]; preg_match('/(?:"buyerMail":")(.*?)(?:")/',$w,$m, PREG_OFFSET_CAPTURE); $email=$m[0][0]; echo '{'.$ord.$amount.$email.'}';

И, как результат, получаем то, что и требовалось

Возможно решение не самое изящно, но оно работает. В дальнейшем wix реализует api
для работы с заказами и данный лайфхак станет неактуальным, ну а пока что есть, от есть.

P.S. Пример можно глянуть вот тут https://jrodger5.wixsite.com/website/thank-you-page/42814950-636d-47f0-9f3c-863a00f9175b