Настройка покупки товара
Выберите наиболее подходящий для вашего проекта способ обращения к данным Xsolla:
Создание заказа в клиентской части приложения
Вы можете продавать как товар с одним артикулом в любом количестве, так и корзину товаров с разными артикулами, которую предварительно наполнил пользователь. Чтобы на стороне Xsolla сформировать заказ с данными о пользователе и товарах, используйте один из следующих методов API:
- Создание заказа с указанным товаром
- Создание заказа со всеми товарами из текущей корзины
- Создание заказа со всеми товарами из определенной корзины
Вызванный метод API вернет платежный токен, который потребуется для открытия платежного интерфейса и совершения оплаты. Чтобы получить доступ к тестовому окружению, передайте параметр “sandbox”: true в теле запроса на получение токена.
Открытие платежного интерфейса
Чтобы открыть платежный интерфейс в новом окне, используйте URL-адрес https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN, где TOKEN — это полученный токен.
Вы также можете открывать платежный интерфейс другими способами:
- С помощью скрипта Pay Station Embed. Ограничение: могут возникнуть проблемы с открытием во внутриигровом браузере (WebView).
- В iframe. Ограничение: могут возникнуть проблемы с открытием во внутриигровом браузере (WebView) и в мобильной версии приложения.
- 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:
- Реализуйте механизм
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>
Совершение тестового платежа
Для тестирования процесса оплаты вы можете использовать тестовое окружение (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.
Чтобы увидеть подробную информацию, включая комиссии, о транзакциях, проведенных в тестовом окружении:
- Откройте Личный кабинет и перейдите в раздел Финансы > Реестр транзакций.
- Установите переключатель Показать тестовые транзакции в активное положение.
Кроме этого, детали транзакции и оформление возврата доступны в Личном кабинете в разделе Поддержка игроков > Поиск транзакций.
Создание заказа и открытие платежного интерфейса
Вы можете продавать как товар с одним артикулом в любом количестве, так и корзину товаров с разными артикулами, которую предварительно наполнил пользователь.
Чтобы сформировать заказ с данными о пользователе и товаре с одним артикулом на стороне Xsolla, вызовите метод XsollaCatalog.Purchase из библиотеки Store, передав в него следующие параметры:
itemSku— артикул товара, который пользователь хочет приобрести.onSuccess— обработчик, вызываемый после того, как заказ перейдет в статусdone.onError— обработчик, вызываемый в случае ошибки запроса.onBrowseClosed— обработчик, вызываемый после закрытия браузера (опционально). Событие отслеживается только при открытии пользовательского интерфейса оплаты во встроенном браузере. События внешнего браузера не отслеживаются.purchaseParams— параметры покупки и пользовательского интерфейса оплаты, такие как локаль и валюта (опционально).customHeaders— пользовательские заголовки веб-запроса (опционально).
Метод XsollaCatalog.Purchase запускает процесс покупки для указанного товара, включая создание заказа, открытие пользовательского интерфейса оплаты и отслеживание статуса заказа. Передайте в параметре onSuccess функцию, которая вызывается в случае перехода заказа в статус done.
Чтобы сформировать заказ с данными о пользователе и корзине с товарами на стороне Xsolla, вам необходимо предварительно реализовать логику наполнения и редактирования корзины, а также получения ее содержимого. Подробная информация о покупке через корзину приведена в инструкции.
При создании заказа Xsolla формирует платежный токен, который требуется для открытия платежного интерфейса и совершения оплаты.
По умолчанию время жизни токена — 24 часа. Если вы хотите изменить это значение, обратитесь к персональному менеджеру проекта или напишите на csm@xsolla.com. Новое значение будет действовать во всех проектах вашей компании, созданных в Личном кабинете.
Совершение тестового платежа
Для тестирования процесса оплаты вы можете использовать тестовое окружение (sandbox-режим). Тестовое окружение — это автономная рабочая среда, в которой доступны все функции live-режима, кроме проведения реальных платежей и отмены платежей. Чтобы иметь доступ к тестовому окружению, в редакторе Unity у вас должен быть установлен флажок
Тестирование платежей до подписания договора с Xsolla доступно только в тестовом окружении.
При совершении тестовой покупки с реальных счетов не списываются деньги.
- Запустите ваше приложение или сцену в редакторе Unity.
- Выберите способ оплаты Карта банка.
- Введите реквизиты карты. Остальные поля (например, имя или адрес) могут быть заполнены любыми данными. Вы также можете указать неверные реквизиты (номер карты или срок действия) для генерации ошибки.
- Нажмите Оплатить.
Кроме реквизитов карты вам потребуется указать индекс, если выполняется хотя бы одно из условий:
- Страна пользователя определена как США или Канада.
- 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.
Чтобы увидеть подробную информацию, включая комиссии, о транзакциях, проведенных в тестовом окружении:
- Откройте Личный кабинет и перейдите в раздел Финансы > Реестр транзакций.
- Установите переключатель Показать тестовые транзакции в активное положение.
Кроме этого, детали транзакции и оформление возврата доступны в Личном кабинете в разделе Поддержка игроков > Поиск транзакций.
Создание заказа и открытие платежного интерфейса
Вы можете продавать как товар с одним артикулом в любом количестве, так и корзину товаров с разными артикулами, которую предварительно наполнил пользователь.
- Чтобы сформировать заказ с данными о пользователе и товаре с одним артикулом на стороне Xsolla, вызовите метод
FetchPaymentTokenиз библиотеки Store, передав в него следующие параметры:
AuthToken— токен авторизации пользователя, полученный во время авторизации с использованием Xsolla Login.
ItemSKU— артикул товара, который пользователь хочет приобрести.
SuccessCallback— обработчик, вызываемый после успешного получения платежного токена.
ErrorCallback— обработчик, вызываемый в случае ошибки запроса.
PurchaseParams— параметры покупки и пользовательского интерфейса оплаты, например, локаль и валюта (опционально).
- Реализуйте открытие платежного интерфейса. Для этого вызовите метод SDK
LaunchPaymentConsoleи передайте в него следующие параметры:
WorldContextObject— объект, который предоставляет контекст игрового мира (для вызова C++).
OrderId— ID заказа.
AccessToken— платежный токен.
SuccessCallback— обработчик, вызываемый после успешного завершения платежа.
ErrorCallback— обработчик, вызываемый в случае ошибки запроса.
BrowserClosedCallback— обработчик, вызываемый после закрытия браузера. Событие отслеживается только при открытии пользовательского интерфейса оплаты во встроенном браузере. События внешнего браузера не отслеживаются.
PayStationVersion— версия Pay Station. По умолчанию используется версия 4.
Чтобы сформировать заказ с данными о пользователе и корзине с товарами на стороне Xsolla, вам необходимо предварительно реализовать логику наполнения и редактирования корзины, а также получения ее содержимого. Подробная информация о покупке через корзину приведена в инструкции.
Совершение тестового платежа
Для тестирования процесса оплаты вы можете использовать тестовое окружение (sandbox-режим). Тестовое окружение — это автономная рабочая среда, в которой доступны все функции live-режима, кроме проведения реальных платежей и отмены платежей. Чтобы иметь доступ к тестовому окружению, в Unreal Editor у вас должен быть установлен флажок
Тестирование платежей до подписания договора с Xsolla доступно только в тестовом окружении.
При совершении тестовой покупки с реальных счетов не списываются деньги.
- Запустите ваше приложение или карту в Unreal Editor.
- Выберите способ оплаты Карта банка.
- Введите реквизиты карты. Остальные поля (например, имя или адрес) могут быть заполнены любыми данными. Вы также можете указать неверные реквизиты (номер карты или срок действия) для генерации ошибки.
- Нажмите Оплатить.
Кроме реквизитов карты вам потребуется указать индекс, если выполняется хотя бы одно из условий:
- Страна пользователя определена как США или Канада.
- 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.
Чтобы увидеть подробную информацию, включая комиссии, о транзакциях, проведенных в тестовом окружении:
- Откройте Личный кабинет и перейдите в раздел Финансы > Реестр транзакций.
- Установите переключатель Показать тестовые транзакции в активное положение.
Кроме этого, детали транзакции и оформление возврата доступны в Личном кабинете в разделе Поддержка игроков > Поиск транзакций.
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
