Платежи / Открытие платежного интерфейса
 На главную

Платежи

  • Руководство по интеграции

  • Тестирование

  • Возможности

  • Инструкции

  • Справочники

  • Открытие платежного интерфейса

    Примечание

    Тестирование платежей до подписания договора с Иксоллой доступно только в тестовом окружении. Если у вас возникли ошибки, изучите их описания.

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

    Новое окно

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

    Примечание
    Эта ссылка для открытия платежного интерфейса в тестовом окружении (sandbox-режиме). После запуска проекта используйте URL-адрес https://secure.xsolla.com/paystation3/?access_token=TOKEN.

    Вы также можете открывать платежный интерфейс другими способами:

    • С помощью скрипта Pay Station Embed. Ограничение: могут возникнуть проблемы с открытием во внутриигровом браузере (WebView).
    • В iframe. Ограничение: могут возникнуть проблемы с открытием во внутриигровом браузере (WebView) и в мобильной версии приложения.

    Pay Station Embed

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

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

    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.

    Команда Иксоллы создала виджет для упрощения интеграции платежного интерфейса на вашем сайте. Скрипт виджета доступен в нашем проекте на 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), по умолчанию .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/paystation3/?access_token=TOKEN.

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

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

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

    Iframe

    Чтобы открыть платежный интерфейс внутри iframe:

    1. Реализуйте механизм postMessage для получения событий от платежного интерфейса.
    2. Получите токен при создании заказа, используя методы API из группы Payment. В запросе укажите:
      • тип устройства (настольное или мобильное) в параметре settings.ui.version;
      • размер платежного интерфейса в параметре settings.ui.size:

    Размер платежного интерфейсаШирина iframe
    large (используется по умолчанию)670–850 px
    medium590–740 px
    small510–630 px

    1. Откройте платежный интерфейс, используя ссылку https://sandbox-secure.xsolla.com/paystation3/?access_token=TOKEN, где TOKEN — это полученный токен.

    Прогресс интеграции
    Спасибо за обратную связь!

    Продолжить чтение

    Последнее обновление: 22 декабря 2022

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

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