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

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

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

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?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://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=

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

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?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://store.xsolla.com/pages/buy.php?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を対象)が異なることに注意してください。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

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

続きを読む

次のステップ

ウェブフックの設定
最終更新日: 2022年9月20日

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

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