ゲームキー販売のセットアップ
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では、ユーザーを介さずにアクセストークンを更新することができます。
認証されたユーザーのデータを以下の場所で保存することができます:
- エクソラストレージ。セットアップするには、エクソラログインをはじめにを参照してください。
- PlayFabデータベース内。セットアップするには、PlayFabストレージのハウツーを使用してください。
- カスタムストレージ内。セットアップするには、カスタマイズストレージのハウツーを使用してください。
決済ステーションアクセストークン経由の認証
クライアントとエクソラサーバー間の相互作用の流れ:
- クライアントは認証要求をサーバーに送信します。
- あなたのサーバーは認証トークンをリクエストし、
project_id/merchant_id
とapi_key
パラメータを含むヘッダをエクソラサーバーに送信します。 - エクソラサーバーが決済ステーションアクセストークンを返します。
- サーバーは決済ステーションアクセストークンをクライアントに渡します。
- 返された決済ステーションアクセストークンは、ゲーム内ストアおよび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リファレンスのリクエストとレスポンスの例を参照してください。
custom_parameters
、purchase
など)は、認証トークンを受け取るためのものではありませんので、渡さないでください。ゲーム内ストアとインベントリを操作するときの決済ステーションアクセストークンの有効期間は、エクソラAPIを最後に呼び出してから1時間となります。決済ステーションアクセストークンの有効期限を変更するには、アカウントマネージャーに連絡してください。
期限切れ後に新しい決済ステーションアクセストークンを受け取るためのロジックを実装します。ユーザーがアプリケーションに再度ログインする必要がないように、バックグランドモードで新しいトークンを取得することをお勧めします。
ゲームキーは、ダイレクトリンク、ストアUI、ウィジェット経由で販売することができます。
ダイレクトリンク経由の販売
以下のリンクは決済UIを開きます:
- curl
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.ui
JSON-objectを渡します。UI設定を含むURLの例:
- curl
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=
- ユーザーデータを受け渡すためのトークン。認証されたユーザーのみにゲームキーを販売する際に使用します。このトークンは認証メソッドに依存します。トークンを含むURLの例:
- curl
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の例:
- curl
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つのキーを素早く購入する場合は、指定したアイテムで注文を作成するメソッドを使用します。このメソッドに応答して、決済インターフェイスを開くために使用する必要があるトークンを受け取ります。
- 複数のゲームキーを購入する場合は、以下のカートの管理方法をご利用ください:
- 現在のカートからカート項目を更新して、ゲームキーをカートに追加します。
- 現在のユーザーのカートを取得し、カート内のゲームキーのリストを取得します。
- カートにあるゲームキーの代金を支払うために、現在のカートのすべての商品で注文を作成します。このメソッドに応答して、決済インターフェイスを開くために使用する必要があるトークンを受け取ります。
メソッドが正しく機能するように、適切な認証オプションを選択してください。
items.unit_items.sku
パラメータの値を渡します。ウィジェット経由の販売
ボタンを開発し、エクソラAPIと統合する方法はいくつかあります:
- ボタンのカスタマイズのパブリッシャーアカウントで
- 決済ステーションウィジェットを使用する
ボタンカスタマイズ
- パブリッシャーアカウントであなたのプロジェクトを開きます。
- サイドメニューでストアを開きます。
- ゲームキーペインで、構成するをクリックします。
- ゲームキーを選択し、ウィジェットカスタマイズタブに移動します。
- カスタマイズブロックで、背景色としてライトを選択します。
theme
オブジェクトを修正し、パラメータbackground
に空文字列を値として持たせることもできます。- ウィジェットコードをページに追加すると、ウィジェットには継承されたスタイルが含まれます。これらのスタイルを上書きするために、以下のスタイルを追加してください。
script
タグの下にstyle
タグでこれらを追加しました。- css
/* 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ウィジェットのコードと同様の構造です。移行の例:
- js
<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
のセットが必要です。sku
28行目)とtarget_element
(34行目、2行目のdiv
を対象)が異なることに注意してください。
この記事は役に立ちましたか?
このページを評価する
答えたくない
ご意見ありがとうございました!
続きを読む
次のステップ
ウェブフックの設定誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。