Открытие интерфейса подписок

Доступны следующие способы открытия платежного интерфейса:

Note
Для открытия платежного интерфейса в тестовом окружении используйте URL https://sandbox-secure.xsolla.com/.

Pay Station Embed

Notice
Данный способ открытия платежного интерфейса не поддерживает продажу ключей. Чтобы продавать ключи, воспользуйтесь инструкцией.

ПРИМЕР АСИНХРОННОЙ ЗАГРУЗКИ СКРИПТА

Copy
Full screen
Small screen
<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 события платежного интерфейса, которые вы можете отправлять в систему аналитики. Чтобы узнать, как настроить обработку событий в вашей системе аналитики, обратитесь к аккаунт-менеджеру проекта или напишите на адрес am@xsolla.com.

Команда Иксоллы создала виджет для упрощения интеграции платежного интерфейса на вашем сайте. Скрипт виджета доступен по ссылке. Используйте этот URL для загрузки скрипта на вашу страницу. Более подробная информация доступна в нашем проекте на 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.height
stringВысота lightbox. Значение по умолчанию 100%. Если значение null, высота lightbox соответствует высоте платежного интерфейса.
lightbox.zIndex
integerСвойство, отвечающее за положение объекта, по умолчанию 1000.
lightbox.overlayOpacity
integerНепрозрачность верхнего слоя (от 0 до 1), по умолчанию .6.
lightbox.overlayBackground
stringФон для верхнего слоя, по умолчанию #000000.
lightbox.modal
booleanМожно ли закрыть lightbox, по умолчанию false.
lightbox.closeByClick
booleanДолжен ли закрываться lightbox при клике на верхний слой, по умолчанию true.
lightbox.closeByKeyboard
booleanДолжен ли закрываться 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/paystation3/?access_token=ACCESS_TOKEN.

Note
Для открытия платежного интерфейса необходимо использовать ссылку с префиксом https://.

Для тестирования используйте URL https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN.

Notice
Параметр access_token содержит приватную информацию о пользователе. Убедитесь, что вы получаете этот параметр только при server-server взаимодействии.

Iframe

Необходимо реализовать:

  • Определение типа устройства (desktop или mobile) и передачу значения в токене в параметре settings.ui.version.
  • Механизм postMessage для получения событий от платежного интерфейса, которые вы можете отправлять в систему аналитики. Чтобы узнать, как настроить обработку событий в вашей системе аналитики, обратитесь к аккаунт-менеджеру проекта или напишите на адрес am@xsolla.com.

Для открытия платежного интерфейса в iframe используется ссылка https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN, где ACCESS_TOKEN — токен, полученный на предыдущем шаге. Для тестирования используйте URL https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN.

Новое окно

Для открытия платежного интерфейса в новом окне используется ссылка https://secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN, где ACCESS_TOKEN — токен, полученный на предыдущем шаге. Для тестирования используйте URL https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN.

Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

Спасибо за обратную связь!
Последнее обновление: 1 сентября 2021

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

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