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

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

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

未認証のユーザー向け

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

商品販売方法
ゲームのコピー1つ(ゲームキー)。直リンクまたはウィジェットを使用してください。
ゲームのコピー(ゲームキー)が数本、またはカートにゲームが数本入っています。一意のユーザーIDとメールアドレスを渡します。メールアドレスとその他の追加データ(ISO 3166-1 alpha-2によるユーザー名と国名コード)Base64エンコーディングで、決済トークンを取得するためのメソッドを呼び出す際にx-userパラメータのタイトルに渡されます。
1つのアイテム。1つのアイテムの迅速な購入コールを使用します。
カート内のいくつかのアイテム。一意のユーザーIDを渡します。一意のユーザーIDは、ゲームキーメソッドグループ(x-unauthorized-idパラメータ)からカタログサブセクションのAPI-メソッドを呼び出すときに、タイトルに数字または行として使用されます。識別子は、フロントエンド側で、識別子生成ライブラリなどを介して生成されます。

認証済みのユーザー向け

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

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

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

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

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

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

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

お知らせ
ユーザーデータには、現実の通貨の残高(小銭)、保存したカード、取引履歴、サブスクリプションなどが含まれます。

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

お知らせ
ゲーム内ストアとBuy Button APIメソッドを統合したい場合に推奨されます。

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

  1. クライアントは認証要求をサーバーに送信します。
  2. あなたのサーバーは認証トークンをリクエストし、project_id/merchant_idapi_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キー

注意

APIキーの操作については、APIリファレンスを参照してください。

キーに関する推奨事項:

  • 生成されたAPIキーは、お客様側で保存してください。APIキーは、パブリッシャーアカウントで作成時に一度だけ表示することができます。
  • APIキーは秘密にしておいてください。APIキーは、お客様の個人アカウントとパブリッシャーアカウントのプロジェクトへのアクセスを提供します。
  • APIキーはサーバーに保存する必要があり、決してバイナリやフロントエンドに保存してはいけません。

HTTPリクエスト:

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

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

パラメータ種類説明文
settings
objectカスタムプロジェクト設定(オブジェクト)。
settings.project_id
integerゲームのエクソラID。パブリッシャーアカウントのプロジェクト名の横にあります。 必須。
user
objectユーザーの詳細(オブジェクト)。
user.id
object認証システムのユーザーID(オブジェクト)。
user.id.value
stringユーザーID。 必須。
user.email
objectユーザーのEメール(オブジェクト)。
user.email.value
stringユーザーのメールアドレス。RFC 822で規定された書式を厳密に守らなければなりません。 必須。
user.name
objectユーザーのニックネームに関するデータを含むオブジェクト。 必須。
user.name.value
stringユーザーの画面名。
user.steam_id
objectユーザーSteam ID(オブジェクト)。
user.steam_id.value
stringユーザーSteam ID。必須アプリケーションがSteamで公開されている場合。
user.playfab_id
objectユーザーPlayFab ID(オブジェクト)。
user.playfab_id.value
stringユーザーPlayFab ID。必須アプリケーションがPlayFabサービスを使用してアイテムを付与する場合。

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

注意
リクエストでは、上記リストのパラメータのみを使用してください。APIコールの他のパラメータ(custom_parameterspurchaseなど)は、認証トークンを受け取るためのものではありませんので、渡さないでください。

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

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

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

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

Copy
Full screen
Small screen

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

お知らせ

ゲームキーの購入は、エクソラとライセンス契約を締結した後、直接リンクして実際の通貨で購入することが可能です。これを行うには、パブリッシャーアカウントでの会計 > 利用許諾契約セクションに移動し、契約書フォームに記入し、確認を待ちます。契約書の確認には、最大で3営業日かかる場合があります。

決済をテストするには、リンクにmode=sandboxパラメータを追加して、テスト環境を使用することができます。

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

  • 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の例:

Copy
Full screen
Small screen

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

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

Copy
Full screen
Small screen

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パラメータ。テスト銀行カードを使用して、決済を完了することができます。

お知らせ
決済を行う際、エクソラサーバーはウェブフックURLにリクエストを送信し、ユーザーがゲーム内に存在することを確認します。決済テスト時にエラーが発生しないように、パブリッシャーアカウント > プロジェクト設定 > ウェブフックでスイッチをオフにしてください。ウェブフックを使用する場合は、ユーザー検証ウェブフックの正常な処理を実装してください。

  1. テスト用URLの例:

Copy
Full screen
Small screen

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

ストアUI経由の販売

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

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

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

  1. カタログを表示するには、ゲームリストを取得するメソッドを使用します。
  2. ゲームキーの購入を実装します:

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

お知らせ
ゲーム内ストア & Buy Button APIを通じてゲームを販売する場合、プレーヤーがクライアントで特定のプラットフォームを選択できるようにする機能を実装する必要があります。SKUを取得するには、ゲームのリストを取得するリクエストからitems.unit_items.skuパラメータの値を渡します。

ウィジェット経由の販売

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

ボタンカスタマイズ

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

お知らせ
ゲームキーがない場合は、新規に作成してください。

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

お知らせ
また、コード内でthemeオブジェクトを修正し、パラメータbackgroundに空文字列を値として持たせることもできます。

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

注意
CSSの継承/優先順位の理由から、ウィジェットカスタマイズタブで取得したscriptタグの下にstyleタグでこれらを追加しました。
Copy
Full screen
Small screen

/* 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;
}

注意
  • 上記のid/class名とコードスニペットは、コピーしたウィジェットのコード(ステップ5の画像)と組み合わせて使用します。このため、コピーしたウィジェットコードを実装することが重要です。
  • 上記のコードをそのまま使用することもできますし、シナリオに応じてコードを変更することもできます。コードコメント(1、3、5、11、16、18、22、29行目)は、各CSSルールが何を対象としているかを判断し、今後のスタイリングに役立てるためのものです。例えば、ボタンだけ(ウィジェット全体ではなく)欲しい場合は、以下のwhiteの場所-20行目と27行目で、ページの背景色を代入する必要があります。

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

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

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

Copy
Full screen
Small screen

<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>

注意
  • 1行目と2行目 — ボタンごとに1つのdivがあり、それぞれに一意のIDがあります。
  • 26行目から始まるのは、2番目のボタンのオプションです(options2オブジェクトにレイアウトされます)。各購入ボタンには、上記のようなoptionsのセットが必要です。sku28行目)とtarget_element(34行目、2行目のdivを対象)が異なることに注意してください。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

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

続きを読む

次のステップ

ウェブフックの設定
最終更新日: 2023年1月31日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!