在应用程序侧集成SDK

一般信息

1. 设计应用程序的登录系统、游戏内商店及其他页面的界面。
2. 使用SDK方法在应用程序中实现用户认证、商店显示、购买等逻辑。

快速指南

以下是最简单的游戏内销售方案实施说明。

交互流程：

1. 用户启动游戏。
2. 该应用程序将启动艾克索拉登录web小部件。
3. 用户登录到游戏并转到商品目录。
4. 应用程序从艾克索拉请求商品目录。
5. 成功接收商品数据后，应用程序将显示商品目录。
6. 用户点击商品购买按钮。
7. 应用程序启动购买过程并在浏览器中显示支付UI。
8. 用户进行支付。
9. 应用程序关闭支付UI并将支付数据传递给艾克索拉。
10. 应用程序向日志输出关于支付处理结果的消息。

应用（StoreController脚本）与SDK交互时序图：

场景限制：

• 现成的艾克索拉登录管理器web小部件用于用户授权。艾克索拉提供标准小组件模板。它们的外观和内容取决于您在发布商帐户中为项目所选的登录方式和小组件自定义设置。

• 该场景仅使用真实货币销售商品，不使用购物车，即用户只能购买一件商品。

创建商品小组件脚本

创建一个名为VirtualItemWidget的新脚本：

1. 在Unity Editor中打开您的项目。
2. 在主菜单中，前往Assets > Create > C# Script。
3. 将Assets文件夹中的新文件的名称指定为VirtualItemWidget。
4. 在编辑器中打开创建的文件，并向其中添加以下代码：

 1using UnityEngine;
 2using UnityEngine.UI;
 3
 4namespace Xsolla.Example
 5{
 6    public class VirtualItemWidget : MonoBehaviour
 7    {
 8       public Image IconImage;
 9       public Text NameText;
10       public Text DescriptionText;
11       public Text PriceText;
12       public Button BuyButton;
13    }
14}

5. 保存更改。

创建商品小组件预制体

创建UI以在商店中显示商品：

1. 创建一个Canvas对象来显示UI元素。方法是在主菜单中转到GameObject > UI > Canvas。这将在场景中创建以下对象：
   • 带有Canvas、Canvas Scaler以及Graphic Raycaster组件的Canvas对象。
   • 如果场景中不存在此类对象，则为EventSystem对象。
2. 创建VirtualItemWidget子对象：
   1. 在Hierarchy面板中，选择Canvas对象。
   2. 在主菜单中，前往GameObject > UI > Image。这将创建一个新的游戏对象，该对象将是Canvas对象的子对象。
   3. 将创建的对象重命名为VirtualItemWidget。
3. 添加UI对象以显示商品信息：
   1. 创建一个对象以显示小部件图标：
      1. 在Hierarchy面板中，选择VirtualItemWidget对象。
      2. 在主菜单中，前往GameObject > UI > Image。
      3. 将创建的对象重命名为IconImage。
   2. 创建一个对象以显示商品名称：
      1. 在Hierarchy面板中，选择VirtualItemWidget对象。
      2. 在主菜单中，前往GameObject > UI > Legacy > Text。
      3. 将创建的对象重命名为NameText。
   1. 创建一个对象以显示商品说明：
      1. 在Hierarchy面板中，选择VirtualItemWidget对象。
      2. 在主菜单中，前往GameObject > UI > Legacy > Text。
      3. 将创建的对象重命名为DescriptionText。
   4. 为商品购买按钮创建对象：
      1. 在Hierarchy面板中，选择VirtualItemWidget对象。
      2. 在主菜单中，前往GameObject > UI > Legacy > Button。这将创建一个带有Text子对象的按钮对象。
      3. 将创建的对象重命名为BuyButton。
      4. 将Text对象重命名为PriceText。
4. 将商品小部件脚本作为组件添加到VirtualItemWidget对象：
   1. 在Hierarchy面板中选择VirtualItemWidget对象。
   2. 在Inspector面板中，单击Add Component，然后选择VirtualItemWidget脚本。
5. 将UI元素分配到所需的脚本插槽：
   1. 在Hierarchy面板中，选择 VirtualItemWidget对象。
   2. 将子UI对象从Hierarchy面板拖放到Inspector面板中的相应的VirtualItemWidget组件插槽。
6. 将创建的VirtualItemWidget对象转换为预制件：
   1. 在Hierarchy面板中，选择VirtualItemWidget对象。
   2. 将对象拖放到Assets文件夹中的Project面板。因此，Assets文件夹中会出现一个新对象，场景中的对象颜色也会变为蓝色。

小组件预制件的示例：

创建商店脚本

创建一个名为StoreController的新脚本：

1. 在Unity Editor中打开您的项目。
2. 在主菜单中，前往Assets > Create > C# Script。
3. 将Assets文件夹中的新文件的名称指定为StoreController。
4. 在编辑器中打开创建的文件，并向其中添加以下代码：

 1using System.Linq;
 2using UnityEngine;
 3using Xsolla.Auth;
 4using Xsolla.Catalog;
 5using Xsolla.Core;
 6namespace Xsolla.Example
 7{
 8	public class StoreController : MonoBehaviour
 9	{
10		[SerializeField] private VirtualItemWidget WidgetPrefab;
11		[SerializeField] private Transform WidgetsContainer;
12		private void Start()
13		{
14			StartAuthorization();
15		}
16		private void StartAuthorization()
17		{
18			Debug.Log("Start the authorization process with the Xsolla Login Widget");
19			XsollaAuth.AuthWithXsollaWidget(OnAuthSuccess, OnError, null);
20		}
21		private void OnAuthSuccess()
22		{
23			Debug.Log("Authorization successful");
24			Debug.Log("Get the catalog of virtual items");
25			XsollaCatalog.GetItems(OnCatalogReceived, OnError);
26		}
27		private void OnCatalogReceived(StoreItems items)
28		{
29			Debug.Log("Catalog received successfully");
30			BuildStoreUI(items.items);
31		}
32		private void BuildStoreUI(StoreItem[] items)
33		{
34			// Create a widget for each item in the catalog
35			foreach (var item in items)
36			{
37				// Check if the item has a price for real money. If not, skip the item (e.g., it is a virtual currency)
38				if (item.price == null)
39					continue;
40				// Instantiate a widget prefab
41				var widget = Instantiate(WidgetPrefab, WidgetsContainer, false);
42				// Fill the widget with data
43				widget.NameText.text = item.name;
44				widget.DescriptionText.text = item.description;
45				widget.PriceText.text = $"{item.price.amount} {item.price.currency}";
46				// Loading the item image and assigning it to the UI element
47				ImageLoader.LoadSprite(item.image_url, sprite => widget.IconImage.sprite = sprite);
48				// Add a click listener to the Buy button
49				widget.BuyButton.onClick.AddListener(() => StartPurchase(item.sku));
50			}
51		}
52		private void StartPurchase(string sku)
53		{
54			Debug.Log($"Start the purchase process for the item: {sku}");
55			XsollaCatalog.Purchase(sku, OnPurchaseCompleted, OnError);
56		}
57		private void OnPurchaseCompleted(OrderStatus status)
58		{
59			Debug.Log("Purchase completed");
60		}
61		private void OnError(Error error)
62		{
63			Debug.LogError($"Error message: {error.errorMessage}");
64		}
65	}
66}

5. 保存更改。

创建商店对象

创建UI以在商店中显示商品列表：

1. 添加一个组件，在网格中排列单个商品的小部件，管理嵌套对象的位置和大小。方法是：
   1. 在Hierarchy面板中，选择Canvas对象。
   2. 在Inspector面板中，单击Add Component并选择Grid Layout Group脚本。
   3. 在Inspector面板中，必要时更改组件设置：设置单元格大小、间距等。

2. 将商店小部件脚本作为组件添加到Canvas对象：
   1. 在Hierarchy面板中选择Canvas对象。
   2. 在Inspector面板中，单击Add Component，然后选择StoreController脚本。
3. 将元素分配到所需的StoreController脚本插槽：
   1. 在Hierarchy面板中，选择 Canvas对象。
   2. 将Canvas对象从Hierarchy面板拖放到Inspector面板中的WidgetsContainer插槽。
   3. 将VirtualItemWidget对象从Hierarchy面板拖放到Inspector面板中的WidgetPrefab插槽。

商店对象的示例：

启动和测试商店

在Unity Editor中启动商店并检查其操作：

1. 对于Canvas对象，删除所有子对象。
2. 单击Play。这样，当应用程序启动时，就会打开一个带有艾克索拉登录部件的浏览器窗口。

3. 登录到应用程序。用户授权成功后，应用程序将从艾克索拉请求商品目录。成功接收商品数据后，应用程序将创建必要的小部件。而后，显示商店商品列表。

4. 点击任何商品部件中的购买按钮。应用程序就会启动购买流程，并在浏览器中显示支付UI。

5. 完成购买过程。使用测试卡进行支付。购买成功后，日志中会显示Purchase completed消息。

有用链接