ゲームキー販売のセットアップ
ゲームキーは、ダイレクトリンク、ストアUI、ウィジェット経由で販売することができます。
ダイレクトリンク経由の販売
以下のリンクは決済UIを開きます：
Copy
- curl
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
- curl
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
- curl
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にリクエストを送信し、ユーザーがゲーム内に存在することを確認します。決済テスト時にエラーが発生しないように、パブリッシャーアカウント > プロジェクト設定 > ウェブフックでスイッチをオフにしてください。ウェブフックを使用する場合は、ユーザー検証ウェブフックの正常な処理を実装してください。
- テスト用URLの例：
Copy
- curl
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandboxストアUI経由の販売
ゲームキーの販売は、ストアのインターフェイスから行うことができます。ストアを作成するには：
- サイトビルダーを使用します
- 独自のストアのバージョンを作成してゲーム内ストア & Buy Button APIを統合します
独自のバージョンのストアを実装する場合は、ストアのデモバージョンをベースとして使用し、GitHubに投稿されたコードスニペットを追加できます。
ゲームキーパッケージを販売するには、ゲーム内ストア & Buy Button APIを統合します：
- カタログを表示するには、ゲームリストを取得するメソッドを使用します。
- ゲームキーの購入を実装します：
- 1つのキーを素早く購入する場合は、指定したアイテムで注文を作成するメソッドを使用します。このメソッドに応答して、決済インターフェイスを開くために使用する必要があるトークンを受け取ります。
- 複数のゲームキーを購入する場合は、以下のカートの管理方法をご利用ください：
- 現在のカートからカート項目を更新して、ゲームキーをカートに追加します。
- 現在のユーザーのカートを取得し、カート内のゲームキーのリストを取得します。
- カートにあるゲームキーの代金を支払うために、現在のカートのすべての商品で注文を作成します。このメソッドに応答して、決済インターフェイスを開くために使用する必要があるトークンを受け取ります。
メソッドが正しく機能するように、適切な認証オプションを選択してください。
お知らせ
ゲーム内ストア & Buy Button APIを通じてゲームを販売する場合、プレーヤーがクライアントで特定のプラットフォームを選択できるようにする機能を実装する必要があります。SKUを取得するには、ゲームのリストを取得するリクエストから
items.unit_items.skuパラメータの値を渡します。ウィジェット経由の販売
ボタンを開発し、エクソラAPIと統合する方法はいくつかあります：
- ボタンのカスタマイズのパブリッシャーアカウントで
- 決済ステーションウィジェットを使用する
ボタンカスタマイズ
- パブリッシャーアカウントであなたのプロジェクトを開きます。
- サイドメニューでストアを開きます。
- ゲームキーペインで、構成するをクリックします。
- ゲームキーを選択し、ウィジェットカスタマイズタブに移動します。
お知らせ
ゲームキーがない場合は、新規に作成してください。
- カスタマイズブロックで、背景色としてライトを選択します。
お知らせ
また、コード内で
themeオブジェクトを修正し、パラメータbackgroundに空文字列を値として持たせることもできます。- ウィジェットコードをページに追加すると、ウィジェットには継承されたスタイルが含まれます。これらのスタイルを上書きするために、以下のスタイルを追加してください。
注意
CSSの継承/優先順位の理由から、ウィジェットカスタマイズタブで取得した
scriptタグの下にstyleタグでこれらを追加しました。Copy
- 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ウィジェットのコードと同様の構造です。移行の例：
Copy
- 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のセットが必要です。sku28行目）とtarget_element（34行目、2行目のdivを対象）が異なることに注意してください。
この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。このページを評価する
このページを評価する
答えたくない
ご意見ありがとうございました！
続きを読む
次のステップ
ウェブフックの設定誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
