如何结合PlayFab身份认证使用支付中心

如已使用PlayFab在应用程序中实现用户身份认证，可在PlayFab侧生成一个支付令牌，然后将其传入应用程序的客户端侧来打开支付UI。

如使用此集成方案，需独立实现决定用户国家/地区和支付所使用的货币的逻辑。

集成过程：

1. 创建项目。

1. 注册发布商帐户并新建一个项目。后续步骤需要用到所创建项目的ID。

2. 设置目录：
   • 在艾克索拉侧创建一个商品目录。您可以手动添加商品或从Google Play或PlayFab导入。
   • 使用SDK实现在应用程序客户端侧获取和显示目录。

3. 设置商品购买：
   • 通过PlayFab云脚本使用用户和商品数据在应用程序客户端侧创建一个订单。
   • 使用SDK实现在应用程序客户端侧打开支付UI。

4. 设置订单状态跟踪。

创建项目

注册发布商帐户

发布商帐户是配置艾克索拉功能以及对分析和交易进行操作的主要工具。

注册时指定的公司及应用程序信息将用于创建与艾克索拉许可协议的草稿以及生成合适解决方案的推荐。后续您可以更改这些数据，但在注册时提供正确的信息可以加快签署许可协议的速度。

要注册，请前往发布商帐户，然后创建一个帐户。

在发布商帐户中创建项目

如有多个应用程序，建议您为每个应用程序创建单独的项目。艾克索拉会根据项目创建过程中指定的数据为您推荐适合的解决方案。

要创建新项目：

1. 打开发布商帐户。
2. 在侧边栏中，单击创建项目。

3. 用英文输入您的项目名称（必需）。

4. 选择游戏的一个或多个发布平台（必需）。
5. 添加游戏的链接。如游戏没有网站，请添加一个包含游戏信息的资源链接（必需）。
6. 选择游戏引擎。
7. 选择使用或打算使用的盈利方式。
8. 指定游戏是否已发布。如游戏尚未发布，则指定计划发布日期。
9. 单击创建项目。您将看到一个包含推荐艾克索拉推荐产品的页面。

集成过程中需提供项目ID，可在发布商帐户中项目名称的旁边找到。

设置目录

在发布商帐户中创建商品

要向目录添加具有基本设置的虚拟物品：

1. 在发布商帐户中打开您的项目。
2. 在侧边栏中单击商店。
3. 在虚拟物品窗格中，单击连接。
4. 在下拉列表中，选择创建物品。

5. 在以下字段中完成物品的基本设置：
   • 图片（可选）
   • SKU（物品唯一ID）
   • 物品名称
   • 描述（可选）

6. 指定物品价格：
   1. 将真实货币定价开关设置为开。
   2. 在默认货币字段，更改货币（可选）并指定物品价格。
   3. 如更改了默认货币字段中的货币，请在真实货币定价字段中选择同样的货币。

7. 将物品状态更改为可用。

8. 单击创建物品。

安装并设置SDK

1. 下载Epic Games启动器。
2. 新建一个虚幻引擎项目。

3. 下载并安装SDK：
   1. 要从虚幻商城下载并安装该SDK：
      1. 前往虚幻商城上的SDK页面。
      2. 单击Open in Launcher。

1. 1. 3. 前往Epic Games启动器。

1. 1. 4. 单击Install to Engine。
      5. 在虚幻编辑器中打开您的虚幻引擎项目。
      6. 前往Settings > Plugins > Installed > Xsolla SDK部分。勾选Enabled复选框并单击Restart Now以保存设置并重新加载虚幻编辑器。

1. 2. 要从GitHub下载并安装该SDK：
      1. 下载包含用于相应引擎版本SDK的包。
      2. 解压缩包。
      3. 将SDK文件夹移至虚幻引擎项目根目录下的plugins目录。

4. 前往Settings > Project Settings > Plugins > Xsolla Settings > General。
5. 在Project ID字段中，指定可在发布商帐户中项目名称旁边找到的项目ID。

在应用程序客户端侧显示目录

创建目录商品的类

1. 在Content Browser中，前往Content目录。
2. 调用快捷菜单并选择Blueprint Class。

3. 在All Classes部分，选择Object并单击Select。

4. 指定StoreItemData作为类名称。
5. 打开所创建类的蓝图。
6. 在My Blueprint面板中，单击Add New并选择Variable。
7. 在Details面板中：

1. 1. 在Variable Type字段中指定StoreItem。
   2. 勾选Instance Editable和Expose on Spawn复选框。

8. 保存并关闭StoreItemData蓝图。

创建目录商品的小组件

1. 在Content Browser中，前往Content目录。调用快捷菜单并选择User Interface > Widget Blueprint。
2. 指定StoreItem作为蓝图名称。
3. 打开创建的蓝图。
4. 在Hierarchy面板中，调用CanvasPanel元素的快捷菜单。选择Replace With > Overlay。

5. 从Palette面板中放置UI基元，如下所示。对于商品的图片、标题和描述，请勾选Details面板中的Is Variable复选框。

6. 打开Graph视图。
7. 单击Class settings。
8. 在Details面板中，前往Interfaces > Implemented Interfaces。
9. 单击Add，然后选择UserObjectListEntry。此为标准UE界面，允许UI基元实现列表元素常规的行为。

10. 为OnListItemObjectSet事件添加逻辑：
    1. 在My Blueprint面板中，调用Interfaces部分的快捷菜单并选择Implement event。

1. 2. 如下所示添加节点：

11. 保存并关闭StoreItem蓝图。

创建目录页的小组件

1. 在Content Browser中，前往Content目录并从快捷菜单中选择User Interface > Widget Blueprint。
2. 指定WBP_Store作为蓝图名称。
3. 打开创建的蓝图。
4. 在商品显示区域中，添加List View元素并将其命名为StoreListView。

5. 在Details面板的Entry Widget Class中，为商品选择之前创建的类(StoreItem)。
6. 前往Graph视图。
7. 将GetVirtualItems SDK方法调用绑定到EventConstruct节点，如下图所示。

8. 在My Blueprint面板中，单击Add New并选择Variable。
9. 在Details面板中：
   1. 在Variable Type字段中选择String。
   2. 勾选Instance Editable和Expose on Spawn复选框。
   3. 指定PlayFabId作为名称。

10. 保存并关闭WBP_Store小组件。
11. 添加目录显示逻辑。下方是实现用户成功认证后显示目录的示例。

设置商品购买

要使用用户和商品数据在艾克索拉侧创建订单，请添加使用为购买创建支付令牌API调用的云函数至项目。该调用将返回一个支付令牌，用于打开支付UI并进行购买。

限制：

• 需在请求支付令牌时传入用户国家/地区或用户IP地址。
• 如未在令牌中传入货币，则货币由国家/地区决定。
• 如在令牌中传入了货币，则用户用该货币进行支付。

向项目添加云脚本

1. 打开Visual Studio Code，前往Azure选项卡。
2. 在Workspace部分中，单击+图标，然后选择Create Function。

3. 选择新项目目录。随后将显示包含设置选项的新建项目菜单。

4. 指定新项目的设置：
   1. 选择函数项目的语言 — JavaScript。
   2. 选择JavaScript编程模型 — model V4。
   3. 选择项目首个函数的模板 — HTTP trigger。
   4. 输入函数名称 — getXsollaPaymentToken。
   5. 选择项目打开方式 — Open in current window。

1. 作为结果，Visual Studio Code将生成一个JS项目并打开生成的getXsollaPaymentToken.js文件。

5. 修改getXsollaPaymentToken.js文件：

const { app } = require('@azure/functions');

const projectId = ""; //your xsolla project id from publisher account
const apiKey = ""; your api key from publisher account

app.http('getXsollaPaymentToken', {
    methods: ['POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {

      var body = await request.json();

      const userId = body.uid;
      const email = body.email;
      const sku = body.sku;
      const returnUrl = body.returnUrl;

        if (!userId) {
          return {status: 400, body: 'Request body is missing' };
        }

        const payload = {
            user: {
              id: {value: userId},
              name: {
                value: email
              },
              email: {
                value: email
              },
              country: {
                value: 'US',
                allow_modify: false
              }
            },
            purchase: {
              items: [
                {
                  sku: sku,
                  quantity: 1
                }
              ]
            },
            sandbox: true,
            settings: {
              language: 'en',
              currency: 'USD',
              return_url: returnUrl,
              ui: {
                theme: '63295aab2e47fab76f7708e3'
              }
            }
          }

        let url = "https://store.xsolla.com/api/v2/project/" + projectId.toString() + "/admin/payment/token";

        return fetch(
            url,
            {
                method: "POST",
                headers: {
                'Content-Type': 'application/json',
                Authorization: 'Basic ' + btoa(`${projectId}:${apiKey}`)
                },
                body: JSON.stringify(payload)
            },
            )
            .then(xsollaRes => {
            // Handle the response data
                if (xsollaRes.ok) {
                    return xsollaRes.json();
                } else {
                    return { status: 400, body: `HTTP request failed with error: ${xsollaRes.statusText}` };
                }
            })
            .then(data => {
                return { status: 200, body: JSON.stringify(data) };
            })
            .catch(error => {
                return { status: 501, body: `Error = ${error}` };
            });
        }
});

1. 在脚本中，指定常量的值：

1. • PROJECT_ID — 可在发布商帐户中项目名称旁边找到的项目ID。

1. • API_KEY — API密钥。密钥仅在创建它时在发布商帐户中显示一次，必须存储在己侧。您可以在以下部分中创建新的密钥：
     • 公司设置 > API密钥
     • 项目设置 > API密钥

添加云脚本后，您可以在本地测试调用getXsollaPaymentToken函数。

部署云脚本

1. 在Visual Studio Code中，前往Azure > Resources部分，然后单击+图标。
2. 选择Create Function App in Azure作为资源。随后将显示包含设置选项的新建应用程序菜单。
3. 设置应用程序的设置：

1. 1. 输入新函数应用程序的名称 — XsollaFunctions。
   2. 选择运行时栈 — .NET 8 Isolated。
   3. 选择新资源的位置（可选择任意方案）。

1. 等待资源组创建完成。

4. 在资源列表中，选择XsollaFunctions，调用快捷菜单并选择Deply to Function App。

添加云脚本后，您可以在远程测试调用getXsollaPaymentToken函数。

测试云脚本

要测试云脚本（本地或远程），请使用Postman或其他工具调用getXsollaPaymentToken函数。具体方法是：

1. 在Visual Studio Code中，前往Azure > Workspace > Local Project > Functions部分，然后单击Start debugging to update this list。
2. 调用函数的快捷菜单并选择Copy Function Url。进行本地测试时，URL类似于 — http://localhost:7071/api/getXsollaPaymentToken；进行远程测试时则类似于 — https://xsollafunctions.azurewebsites.net/api/GetXsollaPaymentToken。

3. 使用复制的URL通过指定参数调用该函数。要从Postman调用函数：
   1. 新建一个GET请求。
   2. 提供在步骤2中复制的URL。
   3. 前往Body选项卡并指定请求参数。

示例请求正文：

{

 "FunctionArgument": {

   "uid": "1D384D9EF12EAB8B",

   "sku": "booster_max_1",

   "returnUrl": "https://login.xsolla.com/api/blank"

 }

}

4. 单击Send。响应中应会收到包含以下参数的JSON：
   • token — 支付令牌。打开支付UI所必需。
   • order_id — 所创建订单的ID。跟踪订单状态所必需。

示例响应正文：

{"token":"xsnpCF8tS4ox7quoibgTgPFVFxG9gTvS_lc_en_bg_2C2640_tb_6E7BF7","order_id":90288613}

在PlayFab中注册用于获取支付令牌的函数

1. 在PlayFab中打开您的项目。
2. 在侧边栏中，单击Automation。
3. 在Register New Cloud Script Function部分中，单击Register Function。
4. 输入函数名称 — GetXsollaPaymentToken。
5. 输入复制到Visual Studio Code中的函数URL（见测试云脚本中的步骤1-2）。

在虚幻引擎项目中创建订单并打开支付UI

1. 打开您的虚幻引擎项目。
2. 打开WBP_Store小组件。
3. 在Hierarchy面板中，选择StoreListView。
4. 在Details面板中，单击On Clicked事件旁边的+图标。

5. 前往Graph视图。
6. 添加创建PlayfabJsonObject对象并向其传递数据的逻辑以向OnItemClicked节点创建订单，如下所示：

7. 添加对ExecuteFunction方法的调用。向其传递functionName = getXsollaPaymentToken和FunctionParameter = PlayfabJsonObject参数。

设置订单状态跟踪

您需要跟踪项目状态，以确保支付成功并向用户发放商品。

获取客户端侧订单状态

要跟踪订单状态，请在应用程序的客户端部分使用CheckPendingOrder SDK方法。将以下参数传入方法：

• AuthToken — 用户授权令牌
• OrderId — 从通过购物车购买、一键购买或用虚拟货币进行购买收到的订单ID
• SuccessCallback — 订单进入完成状态时的回调
• ErrorCallback — 艾克索拉服务器返回错误时的回调

关于方法的详细使用信息，请参阅跟踪订单状态部分。

在服务器侧获取订单状态

要在艾克索拉侧配置Webhook：

1. 在发布商帐户中打开您的项目。
2. 在侧边栏中单击项目设置，然后前往Webhooks部分。
3. 在Webhook服务器字段中，输入艾克索拉要向其发送Webhook的URL。

4. 复制并保存密钥字段的值。该密钥默认生成，并用于Webhook签名。如要更改该密钥，请单击更新图标。
5. 单击启用Webhook。