ペイステーションとPlayFab認証の組み合わせ使用について

PlayFabを使用してアプリケーションにユーザー認証を実装済みの場合、PlayFab側で決済トークンを生成し、アプリケーションのクライアント側に渡して決済UIを開くことができます。

この統合オプションを使用すると、購入代金を支払うユーザーの国と通貨を決定するロジックを独自に実装する必要があります。

統合フロー：

1. プロジェクトを作成します。

1. アドミンページに新規登録して、新しいプロジェクトを作成します。今後の手順で作成したプロジェクトのIDが必要です。

2. カタログをセットアップします:
   • エクソーラ側のアイテムカタログを作成します。アイテムを手動で追加するか、Google PlayまたはPlayFabからインポートすることができます。
   • SDKを使用して、アプリケーションのクライアント側でカタログを取得して表示する機能を実装します。

3. アイテム購入をセットアップします：
   • アプリケーションのクライアント側で、PlayFabのクラウドスクリプトを使って、ユーザーとアイテムのデータを含む注文を作成します。
   • SDKを使用して、アプリケーションのクライアント側で決済UIを開くように実装します。

4. 注文状況の追跡をセットアップします。

プロジェクトを作成する

アドミンページの新規登録

アドミンページは、エクソーラの機能を構成し、アナリティクスや取引を処理するための主要なツールです。

登録時に指定された会社とアプリケーションに関するデータは、エクソーラとのライセンス契約のドラフトを作成し、あなたに適したソリューションを提案するために使用されます。データは後で変更することができますが、新規登録時に正しいデータを提供することで、ライセンス契約締結までのプロセスが迅速化されます。

新規登録するには、アドミンページにアクセスし、アカウントを作成してください。

アドミンページでのプロジェクト作成

複数のアプリケーションを所有している場合は、それぞれのアプリケーションに対して個別のプロジェクトを作成することをお勧めします。プロジェクト作成時に指定したデータに基づいて、エクソーラはあなたに適したソリューションを提案します。

新たしいプロジェクトを作成するには：

1. アドミンページを開きます。
2. サイドメニューで、「プロジェクトの作成」をクリックします。

3. プロジェクト名を英語で入力してください（必須）。

4. ゲームのリリースプラットフォームを1つまたは複数選択します（必須）。
5. ゲームへのリンクを追加します。ゲームがまだウェブサイトを持っていない場合は、ゲームに関する情報を含むソースへのリンクを追加します（必須）。
6. ゲームエンジンを選択します。
7. 使用している、または使用する予定の収益化オプションを選択します。
8. ゲームがすでにリリースされているかどうかを指定します。ゲームがまだリリースされていない場合は、予定公開日を指定します。
9. 「プロジェクトを作成する」をクリックします。おすすめのエクソーラ製品のページが表示されます。

統合プロセスでは、アドミンページでプロジェクト名の横に表示されているプロジェクトIDを入力する必要があります。

カタログのセットアップ

アドミンページでのアイテム作成

基本設定の仮想アイテムをカタログに追加するには：

1. アドミンページでプロジェクトを開きます。
2. サイドメニューの「ストア」をクリックします。
3. 「仮想アイテム」ペインで、「接続」をクリックします。
4. ドロップダウンメニューで、「アイテムを作成する」を選択します。

5. 以下のフィールドでアイテムの基本設定を行います：
   • イメージ（任意）
   • SKU（アイテムの一意のID）
   • アイテム名
   • 説明（任意）

6. アイテム価格を指定します：
   1. 「実際通貨での価格」のトグルを「オン」に設定します。
   2. 「デフォルト通貨」フィールドで通貨を変更し（任意）、アイテム価格を指定します。
   3. 「デフォルト通貨」フィールドで通貨を変更した場合は、「実際通貨での価格」フィールドで同じ通貨を選択します。

7. アイテムのステータスを「利用可能」に変更します。

8. 「アイテムを作成」をクリックします。

SDKのインストールとセットアップ

1. Epic Gamesランチャーをダウンロードします。
2. Unreal Engineプロジェクトを作成します。

3. SDKをダウンロードしてインストールします：
   1. Unreal EngineマーケットプレイスからSDKをダウンロードしてインストールするには：
      1. Unreal EngineマーケットプレイスでのSDKページに移動します。
      2. Open in Launcherをクリックします。

1. 1. 3. Epic Gamesランチャーに移動します。

1. 1. 4. Install to Engineをクリックします。
      5. Unreal EditorでUnreal Engineプロジェクトを開きます。
      6. Settings > Plugins > Installed > Xsolla SDKセクションに移動します。Enabledボックスにチェックを入れ、Restart Nowをクリックして設定を保存し、Unreal Editorをリロードします。

1. 2. GitHubからSDKをダウンロードしてインストールします：
      1. ご使用のバージョンのエンジンのSDKが含まれたパッケージをダウンロードします。.
      2. パッケージを解凍します。
      3. SDKフォルダをUnreal Engineプロジェクトのルートにある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を選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。

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キー。アドミンページには作成時に1回だけ表示され、ユーザー側に保存する必要があります。次のセクションで新しいキーを作成できます：
     • 会社設定 > 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 Code Studioにコピーした関数のURLを入力します（クラウドスクリプトのテストのステップ1-2を参照）。

Unreal Engineプロジェクトで注文を作成し、決済UIを開く

1. Unreal Engineプロジェクトを開きます。
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 — 注文がdoneの状況に変更した場合のコールバック
• ErrorCallback — エクソーラサーバーがエラーを返した場合のコールバック

メソッドの動作に関する詳細情報については、注文状況の追跡セクションを参照してください。

サーバー側で注文状況の取得

エクソーラ側でウェブフックを構成するには：

1. アドミンページでプロジェクトを開きます。
2. サイドメニューの「プロジェクト設定」をクリックし、「ウェブフック」セクションに移動します。
3. 「ウェブフックサーバー」フィールドに、エクソーラがウェブフックを送信するURLを入力します。

4. 「秘密鍵」フィールドの値をコピーして保存します。このキーはデフォルトで生成され、ウェブフックの署名に使用されます。変更したい場合は、更新アイコンをクリックします。
5. 「ウェブフックを有効にする」をクリックします。