О решении

Формирование платежного токена на стороне клиента

Формирование платежного токена на стороне сервера

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

Настройка каталога

Кастомизация

Промоакции

Управление платежным интерфейсом

Анти-фрод

Настройка покупки товара

Выберите наиболее подходящий для вашего проекта способ обращения к данным Xsolla:

Используйте в качестве примера реализации тестовые веб-приложения:

Java;
TypeScript.

Создание заказа в клиентской части приложения

Вы можете продавать как товар с одним артикулом в любом количестве, так и корзину товаров с разными артикулами, которую предварительно наполнил пользователь. Чтобы на стороне Xsolla сформировать заказ с данными о пользователе и товарах, используйте один из следующих методов API:

Вызванный метод API вернет платежный токен, который потребуется для открытия платежного интерфейса и совершения оплаты. Чтобы получить доступ к тестовому окружению, передайте параметр “sandbox”: true в теле запроса на получение токена.

По умолчанию время жизни токена — 24 часа. Если вы хотите изменить это значение, обратитесь к персональному менеджеру проекта или напишите на csm@xsolla.com. Новое значение будет действовать во всех проектах вашей компании, созданных в Личном кабинете.

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

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

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

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

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

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

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://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/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 (для полноэкранной версии).
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://.

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

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

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

Реализуйте механизм postMessage для получения событий от платежного интерфейса.
Откройте платежный интерфейс, используя ссылку https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, где TOKEN — это полученный токен.

Возможная проблема: Если при открытии платежного интерфейса в iframe не отображается кнопка копирования кода для подтверждения оплаты, который запрашивают некоторые платежные системы, передайте в iframe атрибут allow=“clipboard-read; clipboard-write; payment”.

Пример:

Copy

Full screen

Small screen

<iframe
  src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
  width="800"
  height="700"
  allow="clipboard-read; clipboard-write; payment"
></iframe>

Совершение тестового платежа

Для тестирования процесса оплаты вы можете использовать тестовое окружение (sandbox-режим). Тестовое окружение — это автономная рабочая среда, в которой доступны все функции live-режима, кроме проведения реальных платежей и отмены платежей. Чтобы получить доступ к тестовому окружению, передайте параметр “sandbox”: true при создании заказа.

Тестирование платежей до подписания договора с Xsolla доступно только в тестовом окружении.

При совершении тестовой покупки с реальных счетов не списываются деньги.

Откройте платежный интерфейс в тестовом окружении.
Выберите способ оплаты Карта банка.
Введите реквизиты карты. Остальные поля (например, имя или адрес) могут быть заполнены любыми данными. Вы также можете указать неверные реквизиты (номер карты или срок действия) для генерации ошибки.
Нажмите Оплатить.

Список тестовых карт

Посмотрите список тестовых банковских карт.

Кроме реквизитов карты вам потребуется указать индекс, если выполняется хотя бы одно из условий:

Страна пользователя определена как США или Канада.
ID карты (БИН) указывает на то, что карта выпущена в США.

Вы можете указать произвольное числовое значение в качестве индекса (например, 12345). Он используется для определения ставки налога на продажу и не влияет на прохождение тестового платежа.
Платежи банковской картой в тестовом окружении могут проводиться в следующих валютах: USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND, ZAR.

В тестовом окружении вы можете протестировать разовую оплату и оплату сохраненными методами с помощью банковских карт и PayPal.

Чтобы увидеть подробную информацию, включая комиссии, о транзакциях, проведенных в тестовом окружении:

Откройте Личный кабинет.
Перейдите в раздел Финансы > Реестр транзакций.
Установите флажок Показать тестовые транзакции.

Кроме этого, детали транзакции и оформление возврата доступны в Личном кабинете в разделе Поддержка > Поиск транзакций.

Создание заказа и открытие платежного интерфейса

Вы можете продавать как товар с одним артикулом в любом количестве, так и корзину товаров с разными артикулами, которую предварительно наполнил пользователь.

Чтобы сформировать заказ с данными о пользователе и товаре с одним артикулом на стороне Xsolla, вызовите метод XsollaCatalog.Purchase из библиотеки Store, передав в него следующие параметры:

itemSku — артикул товара, который пользователь хочет приобрести.
onSuccess — обработчик, вызываемый после того, как заказ перейдет в статус done.
onError — обработчик, вызываемый в случае ошибки запроса.
onBrowseClosed — обработчик, вызываемый после закрытия браузера (опционально). Событие отслеживается только при открытии пользовательского интерфейса оплаты во встроенном браузере. События внешнего браузера не отслеживаются.
purchaseParams — параметры покупки и пользовательского интерфейса оплаты, такие как локаль и валюта (опционально).
customHeaders — пользовательские заголовки веб-запроса (опционально).

Метод XsollaCatalog.Purchase запускает процесс покупки для указанного товара, включая создание заказа, открытие пользовательского интерфейса оплаты и отслеживание статуса заказа. Передайте в параметре onSuccess функцию, которая вызывается в случае перехода заказа в статус done.

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

При создании заказа Xsolla формирует платежный токен, который требуется для открытия платежного интерфейса и совершения оплаты.

Совершение тестового платежа

Для тестирования процесса оплаты вы можете использовать тестовое окружение (sandbox-режим). Тестовое окружение — это автономная рабочая среда, в которой доступны все функции live-режима, кроме проведения реальных платежей и отмены платежей. Чтобы иметь доступ к тестовому окружению, в редакторе Unity у вас должен быть установлен флажок Test Payments Mode в панели Inspector (установлен по умолчанию).

Тестирование платежей до подписания договора с Xsolla доступно только в тестовом окружении.

При совершении тестовой покупки с реальных счетов не списываются деньги.

Запустите ваше приложение или сцену в редакторе Unity.
Выберите способ оплаты Карта банка.
Введите реквизиты карты. Остальные поля (например, имя или адрес) могут быть заполнены любыми данными. Вы также можете указать неверные реквизиты (номер карты или срок действия) для генерации ошибки.
Нажмите Оплатить.

Список тестовых карт

Посмотрите список тестовых банковских карт.

Кроме реквизитов карты вам потребуется указать индекс, если выполняется хотя бы одно из условий:

Страна пользователя определена как США или Канада.
ID карты (БИН) указывает на то, что карта выпущена в США.

Чтобы увидеть подробную информацию, включая комиссии, о транзакциях, проведенных в тестовом окружении:

Откройте Личный кабинет.
Перейдите в раздел Финансы > Реестр транзакций.
Установите флажок Показать тестовые транзакции.

Создание заказа и открытие платежного интерфейса

Чтобы сформировать заказ с данными о пользователе и товаре с одним артикулом на стороне Xsolla, вызовите метод FetchPaymentToken из библиотеки Store, передав в него следующие параметры:

- AuthToken — токен авторизации пользователя, полученный во время авторизации с использованием Xsolla Login.

- ItemSKU — артикул товара, который пользователь хочет приобрести.

- SuccessCallback — обработчик, вызываемый после успешного получения платежного токена.

- ErrorCallback — обработчик, вызываемый в случае ошибки запроса.

- PurchaseParams — параметры покупки и пользовательского интерфейса оплаты, например, локаль и валюта (опционально).

Реализуйте открытие платежного интерфейса. Для этого вызовите метод SDK LaunchPaymentConsole и передайте в него следующие параметры:

- WorldContextObject — объект, который предоставляет контекст игрового мира (для вызова C++).

- OrderId — ID заказа.

- AccessToken — платежный токен.

- SuccessCallback — обработчик, вызываемый после успешного завершения платежа.

- ErrorCallback — обработчик, вызываемый в случае ошибки запроса.

- BrowserClosedCallback — обработчик, вызываемый после закрытия браузера. Событие отслеживается только при открытии пользовательского интерфейса оплаты во встроенном браузере. События внешнего браузера не отслеживаются.

- PayStationVersion — версия Pay Station. По умолчанию используется версия 4.

Совершение тестового платежа

Для тестирования процесса оплаты вы можете использовать тестовое окружение (sandbox-режим). Тестовое окружение — это автономная рабочая среда, в которой доступны все функции live-режима, кроме проведения реальных платежей и отмены платежей. Чтобы иметь доступ к тестовому окружению, в Unreal Editor у вас должен быть установлен флажок Enable Sandbox в разделе Settings > Project Settings > Plugins > Xsolla Settings > Purchases(установлен по умолчанию).

Тестирование платежей до подписания договора с Xsolla доступно только в тестовом окружении.

При совершении тестовой покупки с реальных счетов не списываются деньги.

Запустите ваше приложение или карту в Unreal Editor.
Выберите способ оплаты Карта банка.
Введите реквизиты карты. Остальные поля (например, имя или адрес) могут быть заполнены любыми данными. Вы также можете указать неверные реквизиты (номер карты или срок действия) для генерации ошибки.
Нажмите Оплатить.

Список тестовых карт

Посмотрите список тестовых банковских карт.

Кроме реквизитов карты вам потребуется указать индекс, если выполняется хотя бы одно из условий:

Страна пользователя определена как США или Канада.
ID карты (БИН) указывает на то, что карта выпущена в США.

Чтобы увидеть подробную информацию, включая комиссии, о транзакциях, проведенных в тестовом окружении:

Откройте Личный кабинет.
Перейдите в раздел Финансы > Реестр транзакций.
Установите флажок Показать тестовые транзакции.

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

Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.

Последнее обновление: 20 декабря 2024

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

Содержание

Создание заказа в клиентской части приложения
Открытие платежного интерфейса
Совершение тестового платежа
Создание заказа и открытие платежного интерфейса
Совершение тестового платежа
Создание заказа и открытие платежного интерфейса
Совершение тестового платежа

Your browser is not supported. Please try a different browser

Payments

Настройка покупки товара

Создание заказа в клиентской части приложения

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

access_token

sandbox

lightbox

payment_widget_ui.lightbox.width

payment_widget_ui.lightbox.height

payment_widget_ui.lightbox.zIndex

payment_widget_ui.lightbox.overlayOpacity

payment_widget_ui.lightbox.overlayBackground

payment_widget_ui.lightbox.modal

lightbox.closeByClick

lightbox.closeByKeyboard

payment_widget_ui.lightbox.contentBackground

payment_widget_ui.lightbox.contentMargin

payment_widget_ui.lightbox.spinner

payment_widget_ui.lightbox.spinnerColor

childWindow

childWindow.target

Совершение тестового платежа

Создание заказа и открытие платежного интерфейса

Совершение тестового платежа

Создание заказа и открытие платежного интерфейса

Совершение тестового платежа

Как мы используем файлы cookie