Интеграция SDK на стороне приложения
Основная информация
- Разработайте интерфейс для системы входа, внутриигрового магазина и других страниц вашего приложения.
- Реализуйте в вашем приложении логику аутентификации пользователей, отображения товаров в магазине, покупки и т. д. с помощью методов SDK.
Быстрый старт
Ниже приведены инструкции по наиболее простой реализации продажи товаров внутри игры.
Сценарий взаимодействия:
- Пользователь запускает игру.
- Приложение запускает веб-виджет Xsolla Login.
- Пользователь авторизуется в игре и переходит в каталог товаров.
- Приложение отправляет запрос к Xsolla для получения каталога товаров.
- После успешного получения информации о товарах приложение отображает каталог товаров.
- Пользователь нажимает кнопку покупки товара.
- Приложение инициирует процесс покупки и отображает в браузере платежный интерфейс.
- Пользователь совершает оплату.
- Приложение закрывает платежный интерфейс и передает в Xsolla информацию о платеже.
- Приложение выводит в лог сообщение о результатах обработки платежа.
Диаграмма взаимодействия вашего приложения (скрипт StoreController
) с SDK:
Особенности сценария:
- Для авторизации пользователя используется готовый веб-виджет Xsolla Login. Xsolla предоставляет стандартные шаблоны для виджета авторизации. Их внешний вид и наполнение определяются способом авторизации, выбранным для проекта, и настройками кастомизации виджета в Личном кабинете.
- В сценарии реализована продажа товаров за реальную валюту без использования корзины, т. е. пользователь сможет купить только один товар.
Создание скрипта виджета предмета
Создайте новый скрипт с названием VirtualItemWidget
, для этого:
- Откройте ваш проект в редакторе Unity.
- В главном меню выберите пункт
Assets > Create > C# Script . - Укажите для нового файла в папке
Assets название —VirtualItemWidget
. - Откройте созданный файл в редакторе и добавьте в него следующий код:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Xsolla.Example
{
public class VirtualItemWidget : MonoBehaviour
{
public Image IconImage;
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Button BuyButton;
}
}
- Сохраните изменения.
Создание префаба виджета товара
Создайте интерфейс для отображения товара в магазине:
- Создайте объект
Canvas
для отображения UI-элементов. Для этого в главном меню выберите пунктGameObject > UI > Canvas . В результате на сцене будут созданы:- Объект
Canvas
с компонентамиCanvas
,Canvas Scaler
иGraphic Raycaster
. - Объект
EventSystem
, если такого объекта еще не существует на сцене.
- Объект
- Создайте дочерний объект
VirtualItemWidget
:- В панели
Hierarchy выберите объектCanvas
. - В главном меню выберите пункт
GameObject > UI > Image . В результате будет создан новый игровой объект, этот объект будет дочерним по отношение к объектуCanvas
. - Переименуйте созданный объект в
VirtualItemWidget
.
- В панели
- Добавьте UI-объекты для отображения информации о товаре:
- Создайте объект для отображения иконки виджета:
- В панели
Hierarchy выберите объектVirtualItemWidget
. - В главном меню выберите пункт
GameObject > UI > Image . - Переименуйте созданный объект в
IconImage
.
- В панели
- Создайте объект для отображения названия товара:
- В панели
Hierarchy выберите объектVirtualItemWidget
. - В главном меню выберите пункт
GameObject > UI > Legacy > Text . - Переименуйте созданный объект в
NameText
.
- В панели
- Создайте объект для отображения описания товара:
- В панели
Hierarchy выберите объектVirtualItemWidget
. - В главном меню выберите пункт
GameObject > UI > Legacy > Text . - Переименуйте созданный объект в
DescriptionText
.
- В панели
- Создайте объект кнопки для покупки товара:
- В панели
Hierarchy выберите объектVirtualItemWidget
. - В главном меню выберите пункт
GameObject > UI > Legacy > Button . В результате будет создан объект кнопки с дочерним объектомText
. - Переименуйте созданный объект в
BuyButton
. - Переименуйте объект
Text
вPriceText
.
- В панели
- Создайте объект для отображения иконки виджета:
- Добавьте к объекту
VirtualItemWidget
скрипт виджета товара в качестве компонента:- В панели
Hierarchy выберите объектVirtualItemWidget
. - В панели
Inspector нажмитеAdd Component и выберите скриптVirtualItemWidget
.
- В панели
- Назначьте UI-элементы в необходимые слоты скрипта:
- В панели
Hierarchy выберите объектVirtualItemWidget
. - Перетащите дочерние UI-объекты из панели
Hierarchy в соответствующие им слоты компонентаVirtualItemWidget
в панелиInspector .
- В панели
- Преобразуйте созданный объект
VirtualItemWidget
в префаб:- В панели
Hierarchy выберите объектVirtualItemWidget
. - Перетащите объект в панель
Project в папкуAssets . В результате в папкеAssets появится новый объект, а объект на сцене сменит цвет на синий.
- В панели
Пример префаба виджета товара:

Создание скрипта магазина
Создайте новый скрипт с названием StoreController
, для этого:
- Откройте ваш проект в редакторе Unity.
- В главном меню выберите пункт
Assets > Create > C# Script . - Укажите для нового файла в папке
Assets название —StoreController
. - Откройте созданный файл в редакторе и добавьте в него следующий код:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
namespace Xsolla.Example
{
public class StoreController : MonoBehaviour
{
[SerializeField] private VirtualItemWidget WidgetPrefab;
[SerializeField] private Transform WidgetsContainer;
private void Start()
{
StartAuthorization();
}
private void StartAuthorization()
{
Debug.Log("Start the authorization process with the Xsolla Login Widget");
XsollaAuth.AuthWithXsollaWidget(OnAuthSuccess, OnError, null);
}
private void OnAuthSuccess()
{
Debug.Log("Authorization successful");
Debug.Log("Get the catalog of virtual items");
XsollaCatalog.GetItems(OnCatalogReceived, OnError);
}
private void OnCatalogReceived(StoreItems items)
{
Debug.Log("Catalog received successfully");
BuildStoreUI(items.items);
}
private void BuildStoreUI(StoreItem[] items)
{
// Create a widget for each item in the catalog
foreach (var item in items)
{
// Check if the item has a price for real money. If not, skip the item (e.g., it is a virtual currency)
if (item.price == null)
continue;
// Instantiate a widget prefab
var widget = Instantiate(WidgetPrefab, WidgetsContainer, false);
// Fill the widget with data
widget.NameText.text = item.name;
widget.DescriptionText.text = item.description;
widget.PriceText.text = $"{item.price.amount} {item.price.currency}";
// Loading the item image and assigning it to the UI element
ImageLoader.LoadSprite(item.image_url, sprite => widget.IconImage.sprite = sprite);
// Add a click listener to the Buy button
widget.BuyButton.onClick.AddListener(() => StartPurchase(item.sku));
}
}
private void StartPurchase(string sku)
{
Debug.Log($"Start the purchase process for the item: {sku}");
XsollaCatalog.Purchase(sku, OnPurchaseCompleted, OnError);
}
private void OnPurchaseCompleted(OrderStatus status)
{
Debug.Log("Purchase completed");
}
private void OnError(Error error)
{
Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
- Сохраните изменения.
Создание объекта магазина
Создайте интерфейс для отображения списка товаров в магазине:
- Добавьте компонент, который будет располагать виджеты отдельных товаров в виде сетки, управлять расположением и размером вложенных объектов. Для этого:
- В панели
Hierarchy выберите объектCanvas
. - В панели
Inspector нажмитеAdd Component и выберите скриптGrid Layout Group
. - В панели
Inspector при необходимости измените настройки компонента: задайте размер ячеек, интервалы и т. д.
- В панели
VirtualItemWidget
для большей наглядности и удобства настройки. Это даст вам возможность сразу оценить общий вид вашего магазина.- Добавьте к объекту
Canvas
скрипт магазина в качестве компонента:- В панели
Hierarchy выберите объектCanvas
. - В панели
Inspector нажмитеAdd Component и выберите скриптStoreController
.
- В панели
- Назначьте элементы в необходимые слоты скрипта
StoreController
:- В панели
Hierarchy выберите объектCanvas
. - Перетащите объект
Canvas
из панелиHierarchy в слотWidgetsContainer в панелиInspector . - Перетащите объект
VirtualItemWidget
из панелиHierarchy в слотWidgetPrefab в панелиInspector .
- В панели
Пример объекта магазина:

Тестирование запуска магазина
Запустите магазин в редакторе Unity и проверьте его работу:
- Для объекта
Canvas
удалите все дочерние объекты. - Нажмите
Play . В результате при старте приложения откроется окно браузера с виджетом Xsolla Login.

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

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

- Завершите процесс покупки. Используйте для оплаты тестовые банковские карты. После успешной покупки в логах появится сообщение
Purchase completed
.

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