Как открыть платежный интерфейс
Тестирование платежей до подписания договора с 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
<script>
var options = {
access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
sandbox: true //TODO please do not forget to remove this setting when going live
};
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
s.addEventListener('load', function (e) {
XPayStationWidget.init(options);
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
<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 (для полноэкранной версии). |
lightbox.width | string | Ширина lightbox. Значение по умолчанию null. Если установлено значение null, ширина lightbox соответствует ширине платежного интерфейса. |
lightbox.height | string | Высота lightbox. Значение по умолчанию 100%. Если установлено значение null, высота lightbox соответствует высоте платежного интерфейса. |
lightbox.zIndex | integer | Свойство, отвечающее за положение объекта, по умолчанию 1000. |
lightbox.overlayOpacity | integer | Непрозрачность подложки виджета (0 — полностью прозрачная, 1 — полностью непрозрачная). Значение по умолчанию — 60% (.6). |
lightbox.overlayBackground | string | Фон для верхнего слоя, по умолчанию #000000. |
lightbox.modal | boolean | Если установлено значение true, lightbox нельзя закрыть. По умолчанию false. |
lightbox.closeByClick | boolean | Если установлено значение true, lightbox закрывается при нажатии на верхний слой. По умолчанию true. |
lightbox.closeByKeyboard | boolean | Если установлено значение true, lightbox закрывается при нажатии ESC. По умолчанию true. |
lightbox.contentBackground | string | Фон фрейма, по умолчанию #ffffff. Обратите внимание, что настройка влияет только на фон фрейма lightbox и не меняет фон окна платежного интерфейса. |
lightbox.contentMargin | string | Отступ вокруг фрейма, по умолчанию 10px. |
lightbox.spinner | string | Тип прелоадера, может принимать значение xsolla или round, по умолчанию xsolla. |
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— это полученный токен.
Была ли статья полезна?
Оценить страницу
В другой раз
Спасибо за обратную связь!
Продолжить чтение
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
