在应用程序侧集成SDK
一般信息
快速指南
以下是最简单的游戏内销售方案实施说明。
交互流程:
- 用户启动游戏。
- 该应用程序将启动艾克索拉登录web小部件。
- 用户登录到游戏并转到商品目录。
- 应用程序从艾克索拉请求商品目录。
- 成功接收商品数据后,应用程序将显示商品目录。
- 用户点击商品购买按钮。
- 应用程序启动购买过程并在浏览器中显示支付UI。
- 用户进行支付。
- 应用程序关闭支付UI并将支付数据传递给艾克索拉。
- 应用程序向日志输出关于支付处理结果的消息。
应用(StoreController
脚本)与SDK交互时序图:
场景限制:
注:
小组件自定义仅在签署艾克索拉产品许可协议后可用。要签署该协议,请前往您发布商帐户中的协议与税务信息 > 协议部分。
- 该场景仅使用真实货币销售商品,不使用购物车,即用户只能购买一件商品。
创建商品小组件脚本
创建一个名为VirtualItemWidget
的新脚本:
- 在Unity Editor中打开您的项目。
- 在主菜单中,前往
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;
}
}
- 保存更改。
创建商品小组件预制体
创建UI以在商店中显示商品:
- 创建一个
Canvas
对象来显示UI元素。方法是在主菜单中转到GameObject > UI > Canvas 。这将在场景中创建以下对象:- 带有
Canvas
、Canvas Scaler
以及Graphic Raycaster
组件的Canvas
对象。 - 如果场景中不存在此类对象,则为
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 面板拖放到Inspector 面板中的相应的VirtualItemWidget
组件插槽。
- 在
- 将创建的
VirtualItemWidget
对象转换为预制件:- 在
Hierarchy 面板中,选择VirtualItemWidget
对象。 - 将对象拖放到
Assets 文件夹中的Project 面板。因此,Assets 文件夹中会出现一个新对象,场景中的对象颜色也会变为蓝色。
- 在
小组件预制件的示例:
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/item-widget.png)
创建商店脚本
创建一个名为StoreController
的新脚本:
- 在Unity Editor中打开您的项目。
- 在主菜单中,前往
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}");
}
}
}
- 保存更改。
创建商店对象
创建UI以在商店中显示商品列表:
- 添加一个组件,在网格中排列单个商品的小部件,管理嵌套对象的位置和大小。方法是:
- 在
Hierarchy 面板中,选择Canvas
对象。 - 在
Inspector 面板中,单击Add Component 并选择Grid Layout Group
脚本。 - 在
Inspector 面板中,必要时更改组件设置:设置单元格大小、间距等。
- 在
注:
我们建议制作
VirtualItemWidget
对象的多个副本,以获得更好的可视化效果和更轻松的配置。这使您可以立即评估商店的总体布局。- 将商店小部件脚本作为组件添加到
Canvas
对象:- 在
Hierarchy 面板中选择Canvas
对象。 - 在
Inspector 面板中,单击Add Component ,然后选择StoreController
脚本。
- 在
- 将元素分配到所需的
StoreController
脚本插槽:- 在
Hierarchy 面板中,选择Canvas
对象。 - 将
Canvas
对象从Hierarchy 面板拖放到Inspector 面板中的WidgetsContainer 插槽。 - 将
VirtualItemWidget
对象从Hierarchy 面板拖放到Inspector 面板中的WidgetPrefab 插槽。
- 在
商店对象的示例:
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/store-layout.png)
启动和测试商店
在Unity Editor中启动商店并检查其操作:
- 对于
Canvas
对象,删除所有子对象。 - 单击
Play 。这样,当应用程序启动时,就会打开一个带有艾克索拉登录部件的浏览器窗口。
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-log-in.png)
- 登录到应用程序。用户授权成功后,应用程序将从艾克索拉请求商品目录。成功接收商品数据后,应用程序将创建必要的小部件。而后,显示商店商品列表。
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-catalog.png)
- 点击任何商品部件中的购买按钮。应用程序就会启动购买流程,并在浏览器中显示支付UI。
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-payment-ui.png)
- 完成购买过程。使用测试卡进行支付。购买成功后,日志中会显示
Purchase completed
消息。
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-purchase-complete.png)
本文对您的有帮助吗?
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。有用链接
上次更新时间: 2025年2月7日发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。