ゲームキー販売のセットアップ

Buy Buttonは、ゲームのウェブサイト上でゲームキーを実際通貨または仮想通貨で販売することで、ゲームの収益化を実現します。

ゲームキーを未認証のユーザーと認証済みのユーザーに販売することができます。

未認証のユーザー向け

ご購入の際には、以下の条件によって制限されます：

• ユーザーは、エンタイトルメントシステムを使用できません。
• エクソラ決済ステーションに決済方法とエクソラ残高が保存されません。

認証済みのユーザー向け

ユーザーの自分のアプリケーションやエクソラ製品の機能へのアクセスを管理するために、認証システムを設定します。このためには、エクソラログインを使用するか、独自の認証システムを実装することができます。

独自の認証システムを導入しており、決済UIのみが必要な場合は、決済ステーションアクセストークンを生成して、サーバーにウェブフックを設定します。

独自のサーバーを持っていない場合や、既存のソリューションを利用したい場合に、ゲーム内ストアにエクソラログインを使用することができます。以下の機能はエクソラ側で行います。

• カタログを保存管理する
• 価格を管理する
• 地域価格のデータを保存する
• ユーザーを認証する
• 取引を処理する

エクソラログイン経由の認証

エクソラログインは、ユーザー登録と認証のための標準プロトコルOAuth 2.0をサポートしています。標準のOAuth 2.0プロトコルは、クライアント側のアプリケーションの開発を簡素化するのに役立ちます。OAuth 2.0では、ユーザーを介さずにアクセストークンを更新することができます。

認証されたユーザーのデータを以下の場所で保存することができます：

• エクソラストレージ。セットアップするには、エクソラログインをはじめにを参照してください。
• PlayFabデータベース内。セットアップするには、PlayFabストレージのハウツーを使用してください。
• カスタムストレージ内。セットアップするには、カスタマイズストレージのハウツーを使用してください。

決済ステーションアクセストークン経由の認証

クライアントとエクソラサーバー間の相互作用の流れ：

1. クライアントは認証要求をサーバーに送信します。
2. あなたのサーバーは認証トークンをリクエストし、project_id/merchant_idとapi_keyパラメータを含むヘッダをエクソラサーバーに送信します。
3. エクソラサーバーが決済ステーションアクセストークンを返します。
4. サーバーは決済ステーションアクセストークンをクライアントに渡します。
5. 返された決済ステーションアクセストークンは、ゲーム内ストアおよびBuy Button APIでの認証、およびストアインターフェイスの構築のための認証トークンとして使用されます。

決済ステーションアクセストークンを取得する

アプリケーションのバックエンドで、HTTP POSTリクエストを使用して決済ステーションアクセストークンを取得するメソッドを実装します。

エクソラAPIは基本HTTP認証を採用しています。リクエストは、Authorization: Basic <your_authorization_basic_key>ヘッダーを含む必要があります。<your_authorization_basic_key>はマーチャントID：APIキーのペアで、Base64の基準に従ってエンコードしています。パブリッシャーアカウントに移動して、次のパラメータを見つけます：

• マーチャントIDは以下の場所で表示されます：
  • プロジェクト設定 > ウェブフックセクション。
  • 会社設定 > 会社セクション。
  • パブリッシャーアカウントページのブラウザーアドレスバーのURL。URLは以下の形式があります：https://publisher.xsolla.com/​マーチャントID/パブリッシャーアカウントセクション。

• APIキーは、作成時に一度だけパブリッシャーアカウントに表示され、お客様側で保存する必要があります。次のセクションで新しいキーを作成できます：
  • 会社設定 > APIキー
  • プロジェクト設定 > APIキー

HTTPリクエスト：

POST https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token

トークンを取得するには、リクエストボディに以下のパラメータを渡します：

APIリファレンスのリクエストとレスポンスの例を参照してください。

ゲーム内ストアとインベントリを操作するときの決済ステーションアクセストークンの有効期間は、エクソラAPIを最後に呼び出してから1時間となります。決済ステーションアクセストークンの有効期限を変更するには、アカウントマネージャーに連絡してください。

期限切れ後に新しい決済ステーションアクセストークンを受け取るためのロジックを実装します。ユーザーがアプリケーションに再度ログインする必要がないように、バックグランドモードで新しいトークンを取得することをお勧めします。

ゲームキーは、ダイレクトリンク、ストアUI、ウィジェット経由で販売することができます。

ダイレクトリンク経由の販売

以下のリンクは決済UIを開きます：

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}

このリンクに次のデータを追加します：

• YOUR-ITEM-TYPE — アイテムの種類：
  • game — ゲーム；game_key — 特定のプラットフォームのゲーム。
  • bundle — バンドル。
• YOUR-PROJECT-ID — パブリッシャーアカウントのプロジェクト設定 > 一般設定 > ロジェクトIDセクションからのプロジェクトのID。
• YOUR-ITEM-SKU — ゲームキーパッケージSKU。特定のプラットフォームでゲームを販売するには、ゲームリストを取得する（通常このSKUはunit_name_drm_skuのようなこと）を使ってSKUを取得します。

• 決済UIスタイル：テーマ（ダークまたはデフォルトのライトテーマ）、サイズ、およびその他のパラメータ。URLでui_settingsパラメーターを指定し、値としてBase64エンコードを持つsettings.uiJSON-objectを渡します。UI設定を含むURLの例：

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=

• ユーザーデータを受け渡すためのトークン。認証されたユーザーのみにゲームキーを販売する際に使用します。このトークンは認証メソッドに依存します。トークンを含むURLの例：

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR_ITEM_SKU}&xsolla_login_token={ACCESS_TOKEN}

• 決済テストのmode=sandboxパラメータ。テスト銀行カードを使用して、決済を完了することができます。

1. テスト用URLの例：

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox

ストアUI経由の販売

ゲームキーの販売は、ストアのインターフェイスから行うことができます。ストアを作成するには：

• サイトビルダーを使用します
• 独自のストアのバージョンを作成してゲーム内ストア & Buy Button APIを統合します

独自のバージョンのストアを実装する場合は、ストアのデモバージョンをベースとして使用し、GitHubに投稿されたコードスニペットを追加できます。

ゲームキーパッケージを販売するには、ゲーム内ストア & Buy Button APIを統合します：

1. カタログを表示するには、ゲームリストを取得するメソッドを使用します。
2. ゲームキーの購入を実装します：
   • 1つのキーを素早く購入する場合は、指定したアイテムで注文を作成するメソッドを使用します。このメソッドに応答して、決済インターフェイスを開くために使用する必要があるトークンを受け取ります。
   • 複数のゲームキーを購入する場合は、以下のカートの管理方法をご利用ください：
     • 現在のカートからカート項目を更新して、ゲームキーをカートに追加します。
     • 現在のユーザーのカートを取得し、カート内のゲームキーのリストを取得します。
     • カートにあるゲームキーの代金を支払うために、現在のカートのすべての商品で注文を作成します。このメソッドに応答して、決済インターフェイスを開くために使用する必要があるトークンを受け取ります。

メソッドが正しく機能するように、適切な認証オプションを選択してください。

ウィジェット経由の販売

ボタンを開発し、エクソラAPIと統合する方法はいくつかあります：

• ボタンのカスタマイズのパブリッシャーアカウントで
• 決済ステーションウィジェットを使用する

ボタンカスタマイズ

1. パブリッシャーアカウントであなたのプロジェクトを開きます。
2. サイドメニューでストアを開きます。
3. ゲームキーペインで、構成するをクリックします。
4. ゲームキーを選択し、ウィジェットカスタマイズタブに移動します。

5. カスタマイズブロックで、背景色としてライトを選択します。

6. ウィジェットコードをページに追加すると、ウィジェットには継承されたスタイルが含まれます。これらのスタイルを上書きするために、以下のスタイルを追加してください。

/* This should be used for button positioning but note this technically repositions the entire widget */
#xsolla-buy-button-widget {
  /* place code for button positioning here */
}

/* Styles the button itself */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button {
  background-color: #ff005b;
  color: black;
}

/* Button on hover */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button:hover {
  background-color: #ff005b;
}

/* The following are style overrides to leave you with just the button */

/* space immediately surrounding button */
.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
  background-color: white;
}

/* space above button (including game title area) */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-game-logo {
  height: 200px;
  background-image: none !important;
  background-color: white;
}

 /* Game title (located right above button) */
.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
  display: none !important;
}

複数のボタンやSKUを作成する方法

Pay2Playウィジェットを使用してこれを実現する方法のコード例については、Xsolla Pay2Playウィジェットシンプルな統合4つのボタンを参照してください。

Buy Buttonウィジェットのコードと同様の構造です。移行の例：

<div id="xsolla-buy-button-widget"></div>
<div id="xsolla-buy-button-widget-2"></div>
    <script>
      var options = {
        project_id: "191204",
        sku: "789",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      // options for second buy button - note the different SKU and target_element
      var options2 = {
        project_id: "191204",
        sku: "123",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget-2",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";

// one event listener per widget instance. repeat for more buttons, passing in different SKUs
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance = XBuyButtonWidget.create(options);
        },
        false
      );
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance2 = XBuyButtonWidget.create(options2);
        },
        false
      );
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(s);
    </script>

このページを評価する

改善できることはありますか？ 送信

答えたくない

ご意見ありがとうございました！

続きを読む