Интеграция SDK на стороне приложения
Основная информация
- Разработайте интерфейс для системы входа, внутриигрового магазина и других страниц вашего приложения.
- Реализуйте в вашем приложении логику аутентификации пользователей, отображения товаров в магазине, покупки и т. д. с помощью методов SDK.
Примечание
Вы можете создать собственное решение, следуя инструкциям Unity, или использовать демосцену как шаблон. Чтобы адаптировать UI демосцены под свое приложение, воспользуйтесь конструктором интерфейса.
Быстрый старт
Ниже приведены инструкции по наиболее простой реализации продажи товаров внутри игры.
Сценарий взаимодействия:
- Пользователь запускает игру.
- Приложение запускает веб-виджет Xsolla Login.
- Пользователь авторизуется в игре и переходит в каталог товаров.
- Приложение отправляет запрос к Xsolla для получения каталога товаров.
- После успешного получения информации о товарах приложение отображает каталог товаров.
- Пользователь нажимает кнопку покупки товара.
- Приложение инициирует процесс покупки и отображает в браузере платежный интерфейс.
- Пользователь совершает оплату.
- Приложение закрывает платежный интерфейс и передает в Xsolla информацию о платеже.
- Приложение выводит в лог сообщение о результатах обработки платежа.
Диаграмма взаимодействия вашего приложения (скрипт StoreController
) с SDK:
Особенности сценария:
- Для авторизации пользователя используется готовый веб-виджет Xsolla Login. Xsolla предоставляет стандартные шаблоны для виджета авторизации. Их внешний вид и наполнение определяются способом авторизации, выбранным для проекта, и настройками кастомизации виджета в Личном кабинете.
Примечание
Кастомизация виджета в Личном кабинете доступна только после подписания Лицензионного договора с Xsolla. Для подписания договора перейдите в раздел Договоры и налоги > Договоры в Личном кабинете.
- В сценарии реализована продажа товаров за реальную валюту без использования корзины, т. е. пользователь сможет купить только один товар.
Создание скрипта виджета предмета
Создайте новый скрипт с названием VirtualItemWidget
, для этого:
- Откройте ваш проект в редакторе Unity.
- В главном меню выберите пункт
Assets > Create > C# Script . - Укажите для нового файла в папке
Assets название —VirtualItemWidget
. - Откройте созданный файл в редакторе и добавьте в него следующий код:
Copy
- 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
. - Откройте созданный файл в редакторе и добавьте в него следующий код:
Copy
- 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
.

Была ли статья полезна?
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.Полезные ссылки
Последнее обновление:
7 февраля 2025
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.