Как открыть платежный интерфейс
Тестирование платежей до подписания договора с Xsolla доступно только в тестовом окружении. Если у вас возникли ошибки, изучите их описания.
Для открытия платежного интерфейса в тестовом окружении используйте ссылку https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, где ACCESS_TOKEN — токен, полученный на предыдущем шаге.
Новое окно
Чтобы открыть платежный интерфейс в новом окне, используйте URL-адрес https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, где TOKEN — это полученный токен.
https://secure.xsolla.com/paystation4/?token=TOKEN.- С помощью скрипта Pay Station Embed. Ограничение: могут возникнуть проблемы с открытием во внутриигровом браузере (WebView).
- В iframe. Ограничение: могут возникнуть проблемы с открытием во внутриигровом браузере (WebView) и в мобильной версии приложения.
Pay Station Embed
- html
1<script>
2 var options = {
3 access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
4 sandbox: true //TODO please do not forget to remove this setting when going live
5 };
6 var s = document.createElement('script');
7 s.type = "text/javascript";
8 s.async = true;
9 s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
10 s.addEventListener('load', function (e) {
11 XPayStationWidget.init(options);
12 }, false);
13 var head = document.getElementsByTagName('head')[0];
14 head.appendChild(s);
15</script>
16
17<button data-xpaystation-widget-open>Buy Credits</button>
Pay Station Embed позволяет обрабатывать через механизм postMessage события платежного интерфейса, которые вы можете отправлять в систему аналитики. Чтобы узнать, как настроить обработку событий в вашей системе аналитики, обратитесь к персональному менеджеру проекта или напишите на csm@xsolla.com.
Команда Xsolla создала виджет для упрощения интеграции платежного интерфейса на вашем сайте. Скрипт виджета доступен в нашем проекте на GitHub.
Список параметров для инициализации виджета:
| Параметр | Тип | Описание |
|---|---|---|
access_token | string | Токен, полученный по API. Обязательный. |
sandbox | boolean | Передайте true для тестирования. Будет использоваться URL sandbox-secure.xsolla.com вместо secure.xsolla.com. |
lightbox | object | Объект со списком настроек, доступных в случае открытия в lightbox (для полноэкранной версии). |
payment_widget_ui.lightbox.width | string | Ширина lightbox. Значение по умолчанию null. Если установлено значение null, ширина lightbox соответствует ширине платежного интерфейса. |
payment_widget_ui.lightbox.height | string | Высота lightbox. Значение по умолчанию 100%. Если установлено значение null, высота lightbox соответствует высоте платежного интерфейса. |
payment_widget_ui.lightbox.zIndex | integer | Свойство, отвечающее за положение объекта, по умолчанию 1000. |
payment_widget_ui.lightbox.overlayOpacity | integer | Непрозрачность подложки виджета (0 — полностью прозрачная, 1 — полностью непрозрачная). Значение по умолчанию — 60% (.6). |
payment_widget_ui.lightbox.overlayBackground | string | Фон для верхнего слоя, по умолчанию #000000. |
payment_widget_ui.lightbox.modal | boolean | Если установлено значение true, lightbox нельзя закрыть. По умолчанию false. |
lightbox.closeByClick | boolean | Если установлено значение true, lightbox закрывается при нажатии на верхний слой. По умолчанию true. |
lightbox.closeByKeyboard | boolean | Если установлено значение true, lightbox закрывается при нажатии ESC. По умолчанию true. |
payment_widget_ui.lightbox.contentBackground | string | Фон фрейма, по умолчанию #ffffff. Обратите внимание, что настройка влияет только на фон фрейма lightbox и не меняет фон окна платежного интерфейса. |
payment_widget_ui.lightbox.contentMargin | string | Отступ вокруг фрейма, по умолчанию 10px. |
payment_widget_ui.lightbox.spinner | string | Тип прелоадера, может принимать значение xsolla или round, по умолчанию xsolla. |
payment_widget_ui.lightbox.spinnerColor | string | Цвет прелоадера. |
childWindow | object | Настройки дочернего окна, в котором открывается платежный интерфейс. Работает для мобильной версии. |
childWindow.target | string | Свойство, определяющее, где должно быть открыто дочернее окно, может принимать значения _blank, _self, _parent, по умолчанию _blank. |
Скрипт позволяет вам отслеживать события, происходящие в платежном интерфейсе. В зависимости от типа события вы можете выполнять различные действия на вашей странице.
Список событий:
| Параметр | Описание |
|---|---|
| init | Инициализация виджета. |
| open | Открытие виджета. |
| load | Событие после загрузки платежного интерфейса. |
| close | Событие после закрытия платежного интерфейса. |
| status | Событие, когда пользователь попадает на страницу статуса. |
| status-invoice | Событие, когда пользователь попадает на страницу статуса, но платеж еще не завершен. |
| status-delivering | Событие, когда пользователь попадает на страницу статуса, платеж завершен, мы прислали оповещение о платеже. |
| status-done | Событие, когда пользователь попадает на страницу статуса, платеж успешно зачислен. |
| status-troubled | Событие, когда пользователь попадает на страницу статуса, но платеж не прошел. |
https://secure.xsolla.com/paystation4/?token=TOKEN.https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN.access_token содержит приватную информацию о пользователе. Убедитесь, что вы получаете этот параметр только при server-server взаимодействии.Iframe
Чтобы открыть платежный интерфейс внутри iframe:
- Реализуйте механизм
postMessageдля получения событий от платежного интерфейса. - Откройте платежный интерфейс, используя ссылку
https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, гдеTOKEN— это полученный токен.
Возможная проблема: Если при открытии платежного интерфейса в iframe не отображается кнопка копирования кода для подтверждения оплаты, который запрашивают некоторые платежные системы, передайте в iframe атрибут allow=“clipboard-read; clipboard-write; payment”.
Пример:
- html
1<iframe
2 src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
3 width="800"
4 height="930"
5 allow="clipboard-read; clipboard-write; payment"
6></iframe>
Продолжить чтение
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
