カスタムチェックアウトで購入ボタンを有効にする

なぜ重要なのか

Appleの特定の地域におけるポリシーの最近の更新により、開発者はアプリから外部ウェブサイトへユーザーを誘導し、仮想アイテムの支払いを受け付けることが可能になりました。

Appleの規則にも違反せず、違反による強制措置のリスクを負うことなく、ゲーム内に視認性の高いボタン、バナー、メッセージ、その他のコール・トゥ・アクションを追加することで、ユーザーを安全なブラウザベースのチェックアウト（自身のウェブショップや決済UI）へワンクリックで誘導し、アイテム購入につなげることが可能です。

ヘッドレスチェックアウトを介した購入ボタンの統合は、独自のカスタム決済UIを作成し、ユニークなユーザー体験を提供したい場合に最適です。この統合オプションにより、ユーザーはゲームからブラウザでの購入へシームレスに進むことができ、Apple Payによるワンクリック決済を含む幅広い決済方法を利用して、迅速で慣れ親しんだモバイル決済体験を実現します。

ヘッドレスチェックアウトは、ヘッドレスアプリケーションアーキテクチャに基づいた決済受付ソリューションであり、機能はAPI経由でアクセス可能です。このアプローチは、バックエンドとビジネスロジックをUIから分離します。

iOSゲームアプリケーションでヘッドレスチェックアウトを使用するには、以下の手順を実行してください：

1. 独自のストアを作成します。
2. ストアにヘッドレスチェックアウトを統合します。
3. ゲーム内にユーザーをストアに誘導するリンクを追加します。

最も迅速なローコード統合オプションをお探しの場合は、ウェブショップベースの統合を確認してください。

エクソーラサイトビルで構築されていないカスタムウェブショップを使用していて、既製の決済UIをゲームに統合したい場合は、エクソーラモバイルSDK経由での統合を確認してください。

どのように動作するか

ユーザーフロー：

1. ユーザーがiOSデバイスでゲームアプリケーションを開きます。
2. ユーザーが希望するアイテムの横にある購入ボタンをクリックします。
3. ストアはウェブブラウザで開きます。シームレスなユーザー体験を確実にするため、エンドツーエンドの認証を実装してください。
4. ユーザーはアイテムを選択し、ストアを離れることなく購入を完了します。
5. 支払い完了後、ユーザーはゲームアプリケーションにリダイレクトされます。
6. アプリケーションはウェブフック経由で購入確認を受け取ります。

統合フロー

1. パブリッシャーアカウントでプロジェクトを作成し、エクソーラとライセンス契約を締結します。
2. アイテムカタログを作成します。
3. バックエンド統合を実装する：トークンを作成し、ウェブフックを設定します。
4. SDKをインストールします。
5. アプリケーション側にSDKを統合します。
6. ゲーム内に、ユーザーをあなたのストア（ヘッドレスチェックアウトが統合されている場所）に誘導するリンクを追加します。

プロジェクトを作成し、ライセンス契約を締結します

パブリッシャーアカウントは、エクソーラの機能を構成し、アナリティクスや取引を処理するための主要なツールです。

新規登録するには、パブリッシャーアカウントにアクセスしてアカウントを作成してください。プロジェクトを作成するには、サイドメニューのプロジェクトを作成をクリックし、必要な情報を入力します。設定は後で変更できます。

ライセンス契約を締結するには、契約と税金 > 契約セクションに移動し、契約フォームを完了してください。

アイテムカタログを作成する

アプリ内購入（IAP）製品は、エクソーラエコシステム内では仮想アイテムとして表現されます。これらには、名前、説明、SKU、および価格が含まれます。IAP SKUプロダクトカタログを設定するには、以下の方法があります：

1. JSONファイルをアップロードして、カタログをパブリッシャーアカウントに簡単に追加します。
2. 仮想アイテムと仮想通貨 > 管理のドキュメントセクションのAPIコールを使用して、アイテムカタログを作成します。

バックエンド統合の実装

トークンを作成する

ウェブフックを構成する

ウェブフックを有効するには：

1. パブリッシャーアカウント内のプロジェクトで、プロジェクト設定 >ウェブフックセクションに移動します。
2. ウェブフックサーバーフィールドに、ウェブフックを受信したいサーバーのURLをhttps://example.com形式で指定します。ウェブフックテストツールで見つけたURLを指定することもできます。
3. プロジェクトのウェブフックに署名するための秘密鍵は、デフォルトで生成されます。新しい秘密鍵を生成したい場合は、更新アイコンをクリックします。
4. 「ウェブフックを有効にする」をクリックします。

インゲームストアと決済管理を完全に操作するには、メインのウェブフックの処理を実装する必要があります：

SDKをインストールする

1. 以下のコマンドを実行して、SDKをnpmパッケージとしてインストールします：

1npm install --save @xsolla/pay-station-sdk

2. 環境パラメータを渡してSDKを初期化します：

1import { headlessCheckout } from '@xsolla/pay-station-sdk';
2
3await headlessCheckout.init({
4  sandbox: true,
5});

3. 初期化されたSDKの決済トークンを渡します：

1await headlessCheckout.setToken(accessToken);

アプリケーション側でSDKを統合する

SDKをインストールして初期化した後：

1. 決済方法IDを指定して決済UIを初期化します。headlessCheckout.form.initメソッドは、決済UIとのさらなるインタラクションに使用されるオブジェクトを返します。

1await headlessCheckout.form.init({
2  paymentMethodId: 3175, // Apple Pay payment ID
3});

2. 追加フィールドの表示に関するshow_fieldsイベントの処理を追加します。

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'show_fields':
4      this.handleShowFieldsAction(nextAction);
5  }
6});

3. 決済UIののHTMLマークアップに次のコンポーネントを追加します：
   • 必須コンポーネント：
     • psdk-legal — 法的文書に関する情報を表示します。
     • psdk-total — 合計購入金額を表示します。
   • 決済フォームのコンポーネント。ビルトインのpsdk-payment-formコンポーネントを使用するか、すぐに使えるコンポーネントを使用して決済UI要素を手動で作成できます。
   • 決済ボタンコンポーネント — psdk-apple-pay。psdk-apple-payをすでに含んでいるpsdk-submit-buttonコンポーネントも利用できます。

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<psdk-apple-pay text="Apple Pay"></psdk-apple-pay>

4. 支払状況変更に関するcheck_statusイベントの処理を追加します。

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

5. 支払状況を表示するには、決済UIののHTMLマークアップにpsdk-statusコンポーネントを追加します。

1@if (showStatus) {
2  <psdk-status></psdk-status>
3}

iOSストアフロントの検出方法

現在のiOSストアフロントを特定し、地域に基づいてSDKの機能を調整するには、以下のコードスニペットを使用してください：

1[SKPaymentQueue loadCurrentStorefrontCountryCodeWithCompletion:^(NSString* _Nullable countryCode) {
2    settings.enablePayments = countryCode && [countryCode isEqualToString:@"USA"];
3
4    [[SKPaymentQueue defaultQueue] startWithSettings:settings];
5}];

1SKPaymentQueue.loadCurrentStorefrontCountryCode { countryCode in
2    settings.enablePayments = countryCode == "USA"
3
4    SKPaymentQueue.default().start(settings)
5}

loadCurrentStorefrontCountryCodeメソッドは、現在のストアフロントの3文字の国名コードを非同期的に取得します。この情報を使用して、特定の地域に対してSDKの機能を有効または無効にできます。

あるいは、以下に示すように、Appleの公式Storefrontを直接使用することもできます：

1let storefront = await Storefront.current   
2let countryCode = storefront?.countryCode
3
4settings.enablePayments = countryCode == "USA"
5
6SKPaymentQueue.default().start(settings)

Apple Payによるワンクリック決済

Apple Payによるワンクリック決済は、対応デバイスでユーザーが慣れ親しんだ安全なネイティブ決済方法を利用できるようにします。ワンクリック決済を設定するには：

1. このオプションを有効にするリクエストを作成します。これを行うには：

   a. パブリッシャーアカウントを開き、サポートハブセクションに移動します。

   b. 「リクエストを送信する」をクリックします。

   

   c. 開いたウィンドウで、フィールドに入力します：

   • 概要。例えば、Apple Payによるワンクリック決済。
   • 説明。決済UIを開くために使用するドメインを指定します。例：amazing.store.com。
   • プロジェクトID。ドロップダウンリストからプロジェクトIDを選択します。複数のプロジェクトに対してワンクリック決済オプションを設定したい場合は、「説明」フィールドでそれらのIDを指定してください。

   d. 「送信する」をクリックします。

2. ドメイン関連付けファイルを待ちます。このステップはエクソーラによって実行されます：
   1. エクソーラはAppleでドメインを登録します。
   2. エクソーラはAppleからドメイン関連ファイルを受け取ります。
   3. エクソーラはドメイン関連ファイルを電子メールで送信し、それをアップロードする場所に関する指示を提供します。

3. SDK初期化スクリプトを以下のように更新します：

1const config: InitialOptions = {
2  isWebview: false,
3  theme: 'default',
4  language: parameters.language,
5  topLevelDomain: 'amazing.store.com',
6  isApplePayInstantFlowEnabled: true
7};
8
9await initHeadlessCheckoutLib(config);