サブスクリプションカタログの表示と購入の設定

サブスクリプションカタログの実装は、プロジェクトへのサブスクリプションの統合方法によって異なります：

独自のアプリケーションまたはウェブサイトにサブスクリプション販売を統合している場合は、次のいずれかを実行できます：
- エクソーラAPIまたは独自のローカルデータからのサブスクリプションプランデータを使用して、カタログUIの全体をお客様側で構築します。
- エクソーラの決済UIを使用してサブスクリプションカタログを表示する — プランデータを個別に取得する必要はありません。
エクソーラサイトビルダーを使用してウェブサイトを作成している場合は、カタログUIをウェブサイトのレイアウト内に直接配置する必要があります。この場合、プランデータの取得や決済UIの個別実装は不要です。

サブスクリプションカタログを表示する場所を選択してください：

サブスクリプション購入のための認証オプションを選択してください：

このシナリオでは、お客様側でサブスクリプションカタログの表示を実装し、独自のサーバーを介して購入フローを管理します。エクソーラとのすべてのやり取りは、エクソーラAPIのサーバーサイドコールを使用して実行されます。

サブスクリプションカタログの表示と決済UIの開き方を実装するには：

プランを取得サーバーサイドコールを使用して、サブスクリプションプランのリスト取得を実装します（任意）。

プランのリストをローカルに保存し、そのデータを使用してカタログを構築することもできます。その場合、プランのリストを取得するためにAPIメソッドを呼び出す必要はありません。

お客様側でカタログ表示を実装します。
Iサブスクリプション購入のための決済UIを開くためのトークン生成を、以下のいずれかの場所で実装します：
- 決済方法の選択ページ
- 支払いデータ入力ページ
決済UIの開き方を実装します。

決済方法選択ページで決済UIを開くためのトークンを生成する

決済UIを開いた際に決済方法の選択ページを表示させるには、選択したプランのIDをpurchase.subscription.plan_idパラメータとしてトークンを取得するAPIコールに渡します。必要に応じて、追加のカスタマイズパラメータを渡します。

初回支払いに関連付けられるサブスクリプション料金が設定されているプランがプロジェクトに設定されている場合、以下のパラメータも渡す必要があります：

サブスクリプションプランの価格付きのpurchase.checkout.amount
通貨価値付きのpurchase.checkout.currency

Copy

Full screen

Small screen

 1curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
 2-X POST \
 3-u your_merchant_id:merchant_api_key \
 4-H 'Content-Type:application/json' \
 5-H 'Accept: application/json' \
 6-d '
 7{
 8  "user":{
 9    "id":{
10      "value": "1234567",
11      "hidden": true
12    },
13    "email": {
14      "value": "user1234@game1234.com"
15    },
16    "name": {
17      "value": "UserName",
18      "hidden": false
19    }
20  },
21  "settings": {
22    "project_id": 12345,
23    "currency": "USD"
24  },
25  "purchase": {
26    "subscription": {
27      "plan_id": "54321"
28    }
29  }
30}'

決済方法選択ページの例：

支払いデータ入力ページで決済UIを開くためのトークンを生成する

決済UIを開いたときに決済データ入力ページを表示させるには、トークンを取得するAPIコールで以下のパラメータを渡します：

選択されたプランのIDを持つpurchase.subscription.plan_id。
決済方法のIDを持つsettings.payment_method。識別子のリストを確認するには、パブリッシャーアカウントでプロジェクトの決済ソリューション > 決済方法セクションにアクセスするか、またはカスタマーサクセスマネージャーにリクエストしてください。

サブスクリプションプランの価格付きのpurchase.checkout.amount
通貨価値付きのpurchase.checkout.currency

必要に応じて、カスタマイズのための追加パラメータを渡します。

Copy

Full screen

Small screen

 1curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
 2-X POST \
 3-u your_merchant_id:merchant_api_key \
 4-H 'Content-Type:application/json' \
 5-H 'Accept: application/json' \
 6-d '
 7{
 8  "user":{
 9    "id":{
10      "value": "1234567",
11      "hidden": true
12    },
13    "email": {
14      "value": "user1234@game1234.com"
15    },
16    "name": {
17      "value": "UserName",
18      "hidden": false
19    }
20  },
21  "settings": {
22    "project_id": 12345,
23    "payment_method": 1380,
24    "currency": "USD"
25  },
26  "purchase": {
27    "subscription": {
28      "plan_id": "54321"
29    }
30  }
31}'

決済データ入力ページの例：

決済UIを開く

ユーザーがサブスクリプションプランを変更できるようにしたい場合は、プロジェクトに必要な設定を行い、ユーザーにサブスクリプションプランを変更させる方法に関する説明に記載されている通りに決済UIの開始を実装してください。

例：スクリプトの非同期読み込み

Copy

Full screen

Small screen

 1<script>
 2   var options = {
 3       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
 4       sandbox: true //TODO please do not forget to remove this setting when going live
 5   };
 6   var s = document.createElement('script');
 7   s.type = "text/javascript";
 8   s.async = true;
 9   s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
10   s.addEventListener('load', function (e) {
11       XPayStationWidget.init(options);
12   }, false);
13   var head = document.getElementsByTagName('head')[0];
14   head.appendChild(s);
15</script>
16
17<button data-xpaystation-widget-open>Buy Credits</button>

ペイステーション埋め込みを使用すると、postMessage経由で決済UIからイベントを取得できます。これらのイベントは分析システムに送信できます。分析システムでイベント処理を設定するには、カスタマーサクセスマネージャーに連絡するか、csm@xsolla.comに電子メールを送信してください。

エクソーラチームは、決済UIのウェブサイトへの統合を簡素化するウィジェットを作成しました。ウィジェットスクリプトはGitHubリポジトリにあります。

スクリプト初期化パラメータ：

パラメータ	種類	説明文
access_token	string	APIから受信したトークン。必須。
sandbox	boolean	決済処理をテストするには、`true`に設定します。`sandbox-secure.xsolla.com`が`secure.xsolla.com`の代わりに使用されます。
lightbox	object	ライトボックスパラメータ（オブジェクト、デスクトップバージョンのみ）。
payment_widget_ui.lightbox.width	string	ライトボックスのフレームの高さ。`null`の場合、ペイステーションの高さに依存します。既定は`null`です。
payment_widget_ui.lightbox.height	string	ライトボックスのフレームの高さ。`null`の場合、ペイステーションの高さに依存します。既定は`100%`です。
payment_widget_ui.lightbox.zIndex	integer	配置順序を定義します。既定は`1000`です。
payment_widget_ui.lightbox.overlayOpacity	integer	ウィジェットの背景の不透明度（`0` — 完全透明、`1` — 完全不透明）。デフォルト値は60%です（`.6`）。
payment_widget_ui.lightbox.overlayBackground	string	オーバーレイの背景色。既定は`#000000`。
payment_widget_ui.lightbox.modal	boolean	`true`の場合、ライトボックスフレームを閉じることはできません。既定は`false`です。
lightbox.closeByClick	boolean	`true`の場合、オーバーレイをクリックするとライトボックスが閉じます。既定は`true`です。
lightbox.closeByKeyboard	boolean	`true`の場合、ESCを押すとライトボックスが閉じます。既定は`true`です。
payment_widget_ui.lightbox.contentBackground	string	フレームの背景色。デフォルトは`#ffffff`。これらの色の変更は、ペイステーションiframe自体には影響を与えず、それを保持するライトボックスの設定のみに影響を与えることに注意してください。
payment_widget_ui.lightbox.contentMargin	string	フレームマージン。既定は`10px`です。
payment_widget_ui.lightbox.spinner	string	ローディングアニメーションのインジケータの種類。`xsolla`または`round`に指定できます。既定は`xsolla`です。
payment_widget_ui.lightbox.spinnerColor	string	スピナーの色。既定値はありません。
childWindow	object	ペイステーションUIを含む子ウィンドウのオプション。モバイル版でサポートされています。
childWindow.target	string	ペイステーションウィンドウを開く場所。`_blank`、`_self`、`_parent`に指定できます。既定は`_blank`です。

このスクリプトでは、決済UIのイベントを追跡することができます。イベントの種類に応じて、ウェブページでさまざまな操作を実行できます。

イベントの一覧：

パラメータ	説明文
init	ウィジェットが初期化されました。
open	ウィジェットが開かれました。
load	決済UI（ペイステーション）が読み込まれました。
close	決済UI（ペイステーション）が閉じられています。
status	ユーザーはステータスページにいます。
status-invoice	ユーザーはステータスページにいます。支払いが進行中です。
status-delivering	ユーザーはステータスページにいます。支払いが完了しました。支払い通知が送信されました。
status-done	ユーザーはステータスページにいます。支払いはユーザーのアカウントに振り込まれます。
status-troubled	ユーザーはステータスページにいます。支払いに失敗しました。

決済UIのオープンを初期化する場合は、次のリンクを使用してください。https://secure.xsolla.com/paystation4/?token=TOKEN。

https://のプレフィックスが付いたリンクは、決済画面を開くときにのみ使用する必要があります。

テストには次のURLを使用してください。https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN。

access_tokenパラメータにはプライベートユーザーデータが含まれます。このパラメータを取得するときは、必ずサーバー間通信を使用してください。

Iframeで決済UIを開くには：

postMessageメカニズムを実装して、決済UIからイベントを受け取ります。
リンクhttps://sandbox-secure.xsolla.com/paystation4/?token=TOKENをたどって決済UIを開き、TOKEN は受信したトークンです。

潜在的な問題：iframeで決済UIを開いたときに、一部の決済システムで必要な決済確認コードをコピーするボタンが表示されない場合は、iframeにallow=“clipboard-read; clipboard-write; payment”属性を渡します。

例：

Copy

Full screen

Small screen

1<iframe
2  src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
3  width="800"
4  height="930"
5  allow="clipboard-read; clipboard-write; payment"
6></iframe>

このシナリオでは、サブスクリプションプランデータに関するすべての操作は、エクソーラAPIのクライアント側APIコールを使用して処理されます。これにより、プランリストの取得、カタログの表示、決済UIの起動をクライアントから直接行うことができます。

お客様のプロジェクトに初回支払いに紐づくサブスクリプション料金を伴うサブスクリプションプランが含まれている場合は、サーバーサイドのシナリオを使用して決済UIを開くリンクを取得してください。

サブスクリプションカタログの表示と決済UIの開き方を実装するには：

クライアント側のコールを使用して、サブスクリプションプランのリスト取得を実装します（任意）。
- プロジェクトにサブスクリプションベースの製品が設定されている場合は、製品ごとのサブスクリプションプランを取得するメソッドを使用します
- プロジェクトにサブスクリプションベースの製品が設定されていない場合は、プランのリストを取得するメソッドを使用します

プランのリストをローカルに保存し、そのデータを使用してカタログを構築することもできます。その場合、プランのリストを取得するためにAPIメソッドを呼び出す必要はありません。また、SDKライブラリを使用して、独自のインターフェイスでカタログを実装することもできます。既製のライブラリは、すぐに使えるデータ構造とエクソーラAPIを操作するためのメソッドを提供することで、エクソーラ製品をプロジェクトに統合することを容易にします。

お客様側でカタログ表示を実装します。
サブスクリプション購入のための決済UIを開くトークン生成を実装します。これを行うには、決済UIリンクを取得するためのクライアント側のコールを使用します。
決済UIの開き方を実装します。

商品ごとのサブスクリプションプランを取得するクライアント側のメソッド

アプリケーションのクライアント側で、HTTP GETリクエストを使用して、プランのリストを取得することを実装します：https://subscriptions.xsolla.com/api/user/v1/projects/{projectId}/products/{productId}/plans。

リクエストにはAuthorization: Bearer <client_user_jwt>ヘッダーが含まれている必要があります。<client_user_jwt>はユーザーのJSONウェブトークン（JWT）であり、Base64 標準に従ってエンコードされた一意のBase64エンコードトークンです。トークンと取得するには：

アプリケーションでログインとパスワード経由での認証を行う場合は、Register new userおよびAuth by usernameとパスワードのAPIコールを使用してください。
ソーシャルネットワークを介した認証を利用する場合は、Auth via social network APIコールをご利用ください。

パスパラメータとして指定します：

projectId — プロジェクトID。このパラメータは、パブリッシャーアカウントでプロジェクト名の側に表示されます。

productID — サブスクリプションベースのプロダクトIDです。取得するには、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。

クエリパラメータとして指定します：

パラメータ	種類	説明文
plan_id	array of integers	プランID。
plan_external_id	array of strings	プランのexternal ID。パブリッシャーアカウントのアイテムカタログ > サブスクリプション > サブスクリプションプラン > あなたのプランセクション、またはプランの一覧APIコールで確認できます。
limit	integer	ページ内の要素数の制限。デフォルトでは15件が表示されます。
offset	integer	リスト生成元のエレメントの番号。デフォルトでは、カウントは0から始まります。
locale	string	ISO 639-1に準拠した2文字の小文字で、インターフェース言語を指定します。このパラメータが渡されない場合、言語はユーザーのIPアドレスによって決定されます。渡されたロケールがエクソーラリストにない場合、デフォルトで英語が使用されます。
country	string	二文字のISO 3166-1 alpha-2指定は、ユーザーの国を識別するために使用されます。このパラメータは、ロケールと通貨の選択に影響します。このパラメータが渡されない場合、国はユーザーのIPアドレスによって決定されます。

Copy

Full screen

Small screen

1curl -X 'GET' \
2'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/products/{productId}/plans?country=RU  ' \
3  -H 'accept: application/json' \
4  -H 'Authorization: Bearer client_user_jwt'

Copy

Full screen

Small screen

 1{
 2  "items": [
 3    {
 4      "plan_id": 54321,
 5      "plan_external_id": "PlanExternalId",
 6      "plan_group_id": "TestGroupId",
 7      "plan_type": "all",
 8      "plan_name": "Localized plan name",
 9      "plan_description": "Localized plan description",
10      "plan_start_date": "2021-04-11T13:51:02+03:00",
11      "plan_end_date": "2031-04-11T13:51:02+03:00",
12      "trial_period": 7,
13      "period": {
14        "value": 1,
15        "unit": "month"
16      },
17      "charge": {
18        "amount": 4.99,
19        "setup_fee": 0.99,
20        "currency": "USD"
21      },
22      "promotion": {
23        "promotion_charge_amount": 3.99,
24        "promotion_remaining_charges": 3
25      }
26    }
27  ],
28  "has_more": false
29}

プランのリストを取得するクライアント側のメソッド

アプリケーションのクライアント側で、HTTP GETリクエストを使用して、プランのリストを取得することを実装します：https://subscriptions.xsolla.com/api/user/v1/projects/{projectId}/plans。

アプリケーションでログインとパスワード経由での認証を行う場合は、Register new userおよびAuth by usernameとパスワードのAPIコールを使用してください。
ソーシャルネットワークを介した認証を利用する場合は、Auth via social network APIコールをご利用ください。

プロジェクトIDをパスパラメータprojectIdとして指定します。このパラメータは、パブリッシャーアカウントでプロジェクト名の隣に表示されます。

クエリパラメータとして指定します：

パラメータ	種類	説明文
plan_id	array of integers	プランID。
plan_external_id	array of strings	プランのexternal ID。パブリッシャーアカウントのアイテムカタログ > サブスクリプション > サブスクリプションプラン > あなたのプランセクション、またはプランの一覧APIコールで確認できます。
limit	integer	ページ内の要素数の制限。デフォルトでは15件が表示されます。
offset	integer	リスト生成元のエレメントの番号。デフォルトでは、カウントは0から始まります。
locale	string	ISO 639-1に準拠した2文字の小文字で、インターフェース言語を指定します。このパラメータが渡されない場合、言語はユーザーのIPアドレスによって決定されます。渡されたロケールがエクソーラリストにない場合、デフォルトで英語が使用されます。
country	string	二文字のISO 3166-1 alpha-2指定は、ユーザーの国を識別するために使用されます。このパラメータは、ロケールと通貨の選択に影響します。このパラメータが渡されない場合、国はユーザーのIPアドレスによって決定されます。

Copy

Full screen

Small screen

1curl -X 'GET' \
2'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/plans?country=RU  ' \
3  -H 'accept: application/json' \
4  -H 'Authorization: Bearer client_user_jwt'

Copy

Full screen

Small screen

 1{
 2  "items": [
 3    {
 4      "plan_id": 54321,
 5      "plan_external_id": "PlanExternalId",
 6      "plan_group_id": "TestGroupId",
 7      "plan_type": "all",
 8      "plan_name": "Localized plan name",
 9      "plan_description": "Localized plan description",
10      "plan_start_date": "2021-04-11T13:51:02+03:00",
11      "plan_end_date": "2031-04-11T13:51:02+03:00",
12      "trial_period": 7,
13      "period": {
14        "value": 1,
15        "unit": "month"
16      },
17      "charge": {
18        "amount": 4.99,
19        "setup_fee": 0.99,
20        "currency": "USD"
21      },
22      "promotion": {
23        "promotion_charge_amount": 3.99,
24        "promotion_remaining_charges": 3
25      }
26    }
27  ],
28  "has_more": false
29}

決済UIを開くためのリンクを取得するクライアントメソッド

アプリケーションのクライアント側で、HTTP POSTリクエストを使用して、決済UIを開くことを実装します：https://subscriptions.xsolla.com/api/user/v1/projects/{projectId}/subscriptions/buy。

アプリケーションでログインとパスワード経由での認証を行う場合は、Register new userおよびAuth by usernameとパスワードのAPIコールを使用してください。
ソーシャルネットワークを介した認証を利用する場合は、Auth via social network APIコールをご利用ください。

プロジェクトIDをパスパラメータprojectIdとして指定します。このパラメータは、パブリッシャーアカウントでプロジェクト名の隣に表示されます。

クエリーパラメータにcountryを指定します - ISO 3166-1 alpha-2規格に従ったユーザーの国名の二文字表記です。ロケールと通貨の選択に影響します。このパラメータを渡さなかった場合、国はユーザーのIPアドレスによって決定されます。

リクエストで次のパラメータを渡します：

plan_external_idは、決済方法の選択ページで決済インターフェイスを開きます。

決済UIの例：

plan_external_idおよびsettings.payment_methodを使用して、決済データを入力するページで決済インターフェイスを開きます。

決済UIの例：

リクエスト本文パラメータ：

パラメータ	種類	説明文
plan_external_id	string	必須。サブスクリプションプランのexternal ID。パブリッシャーアカウント > アイテムカタログ > サブスクリプション > サブスクリプションプランセクションで確認できます。
settings	object	カスタムプロジェクト設定（オブジェクト）。
settings.ui	object	インタフェース設定（オブジェクト）。
settings.ui.theme	string	決済UIのテーマ。`default`、`default_dark`またはカスタムテーマIDに指定できます。
settings.ui.version	string	デバイスの種類。`desktop`（既定）または`mobile`に指定できます。
settings.ui.desktop	object	デスクトップバージョン（オブジェクト）のインターフェース設定。
settings.ui.desktop.header	object	ヘッダー設定（オブジェクト）。
settings.ui.desktop.header.close_button	boolean	デスクトップ版ペイステーションに閉じるボタンを表示する設定。このボタンはペイステーションを閉じて、`settings.return_url`パラメータで指定されたURLにユーザーをリダイレクトします。デフォルトは`false`です。
settings.ui.desktop.header.is_visible	boolean	決済UIにヘッダーを表示するかどうかを示します。
settings.ui.desktop.header.type	string	ヘッダーの外観。`compact`（この場合、ゲーム名とユーザーIDはヘッダーに表示されません）または`normal`にすることができます。
settings.ui.desctop.header.visible_logo	boolean	`true`の場合、ヘッダーにはあなたのロゴが表示されます（最初にあなたのカスタマーサクセスマネージャーに画像を提供してください）。
settings.ui.desktop.header.visible_name	boolean	ヘッダーにプロジェクト名を表示するかどうかを示します。
settings.ui.desktop.header.type	string	ヘッダーを表示する方法。`compact`（プロジェクト名とユーザーIDを隠す）または`normal`（既定）に指定できます。
settings.ui.mobile.header.close_button	boolean	モバイル版ペイステーションに閉じるボタンを表示する設定。このボタンはペイステーションを閉じて、`settings.return_url`パラメータで指定されたURLにユーザーをリダイレクトします。デフォルトは`false`です。
settings.ui.mode	string	ペイステーションのインターフェースモード。`user_account`のみとなります：ヘッダーにはユーザーアカウントのナビゲーションメニューのみが含まれています。ユーザーは商品を選択したり、決済を行うことはできません。このモードは、デスクトップ上でのみ使用できます。
settings.currency	string	ご希望の決済通貨。3文字のISO 4217通貨コード。
settings.external_id	string	ゲーム内のトランザクションID。各ユーザーの支払いに対して一意でなければならなりません。
settings.payment_method	integer	決済方法ID。決済方法IDのリストは、パブリッシャーアカウントで取得できます。
settings.return_url	string	ページを使用して決済後にユーザーをリダイレクトします。パラメータ`user_id`、`foreigninvoice`、`invoice_id`と`status`は、自動的にリンクに追加されます。
settings.redirect_policy	object	リダイレクトポリシー設定（オブジェクト）。
settings.redirect_policy.redirect_conditions	string	決済後、ユーザーをリターンURLにリダイレクトする決済状況。`none`、`successful`、`successful_or_canceled`、`any`または`なし`にすることができます。
settings.redirect_policy.delay	integer	ユーザーがリターンURLに自動的にリダイレクトされるまでの遅延時間（秒）。
settings.redirect_policy.status_for_manual_redirection	string	決済後、ユーザーをリターンURLにリダイレクトする決済状況。`none`、`successful`、`successful_or_canceled`、`any`または`なし`にすることができます。
settings.redirect_policy.redirect_button_caption	string	手動リダイレクト用のボタンのテキスト。

必要に応じて、カスタマイズのための追加パラメータを渡します。

Copy

Full screen

Small screen

 1curl -X 'POST' \
 2'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/subscriptions/buy?country=RU  ' \
 3  -H 'accept: application/json' \
 4  -H 'Authorization: Bearer client_user_jwt'
 5
 6  {
 7    "plan_external_id": "PlanExternalId",
 8    "settings": {
 9      "ui": {
10        "size": "large",
11        "theme": "string",
12        "version": "desktop",
13        "desktop": {
14          "header": {
15            "is_visible": true,
16            "visible_logo": true,
17            "visible_name": true,
18            "type": "compact",
19            "close_button": true
20          }
21        },
22        "mobile": {
23          "mode": "saved_accounts",
24          "footer": {
25            "is_visible": true
26          },
27          "header": {
28            "close_button": true
29          }
30        },
31        "mode": "user_account"
32        }
33      },
34      "currency": "string",
35      "locale": "string",
36      "external_id": "string",
37      "payment_method": 1,
38      "return_url": "string",
39      "redirect_policy": {
40        "redirect_conditions": "none",
41        "delay": 0,
42        "status_for_manual_redirection": "none",
43        "redirect_button_caption": "string"
44      }
45    }

Copy

Full screen

Small screen

1{
2  "link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
3}

決済UIを開く

例：スクリプトの非同期読み込み

Copy

Full screen

Small screen

 1<script>
 2   var options = {
 3       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
 4       sandbox: true //TODO please do not forget to remove this setting when going live
 5   };
 6   var s = document.createElement('script');
 7   s.type = "text/javascript";
 8   s.async = true;
 9   s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
10   s.addEventListener('load', function (e) {
11       XPayStationWidget.init(options);
12   }, false);
13   var head = document.getElementsByTagName('head')[0];
14   head.appendChild(s);
15</script>
16
17<button data-xpaystation-widget-open>Buy Credits</button>

スクリプト初期化パラメータ：

パラメータ	種類	説明文
access_token	string	APIから受信したトークン。必須。
sandbox	boolean	決済処理をテストするには、`true`に設定します。`sandbox-secure.xsolla.com`が`secure.xsolla.com`の代わりに使用されます。
lightbox	object	ライトボックスパラメータ（オブジェクト、デスクトップバージョンのみ）。
payment_widget_ui.lightbox.width	string	ライトボックスのフレームの高さ。`null`の場合、ペイステーションの高さに依存します。既定は`null`です。
payment_widget_ui.lightbox.height	string	ライトボックスのフレームの高さ。`null`の場合、ペイステーションの高さに依存します。既定は`100%`です。
payment_widget_ui.lightbox.zIndex	integer	配置順序を定義します。既定は`1000`です。
payment_widget_ui.lightbox.overlayOpacity	integer	ウィジェットの背景の不透明度（`0` — 完全透明、`1` — 完全不透明）。デフォルト値は60%です（`.6`）。
payment_widget_ui.lightbox.overlayBackground	string	オーバーレイの背景色。既定は`#000000`。
payment_widget_ui.lightbox.modal	boolean	`true`の場合、ライトボックスフレームを閉じることはできません。既定は`false`です。
lightbox.closeByClick	boolean	`true`の場合、オーバーレイをクリックするとライトボックスが閉じます。既定は`true`です。
lightbox.closeByKeyboard	boolean	`true`の場合、ESCを押すとライトボックスが閉じます。既定は`true`です。
payment_widget_ui.lightbox.contentBackground	string	フレームの背景色。デフォルトは`#ffffff`。これらの色の変更は、ペイステーションiframe自体には影響を与えず、それを保持するライトボックスの設定のみに影響を与えることに注意してください。
payment_widget_ui.lightbox.contentMargin	string	フレームマージン。既定は`10px`です。
payment_widget_ui.lightbox.spinner	string	ローディングアニメーションのインジケータの種類。`xsolla`または`round`に指定できます。既定は`xsolla`です。
payment_widget_ui.lightbox.spinnerColor	string	スピナーの色。既定値はありません。
childWindow	object	ペイステーションUIを含む子ウィンドウのオプション。モバイル版でサポートされています。
childWindow.target	string	ペイステーションウィンドウを開く場所。`_blank`、`_self`、`_parent`に指定できます。既定は`_blank`です。

このスクリプトでは、決済UIのイベントを追跡することができます。イベントの種類に応じて、ウェブページでさまざまな操作を実行できます。

イベントの一覧：

パラメータ	説明文
init	ウィジェットが初期化されました。
open	ウィジェットが開かれました。
load	決済UI（ペイステーション）が読み込まれました。
close	決済UI（ペイステーション）が閉じられています。
status	ユーザーはステータスページにいます。
status-invoice	ユーザーはステータスページにいます。支払いが進行中です。
status-delivering	ユーザーはステータスページにいます。支払いが完了しました。支払い通知が送信されました。
status-done	ユーザーはステータスページにいます。支払いはユーザーのアカウントに振り込まれます。
status-troubled	ユーザーはステータスページにいます。支払いに失敗しました。

決済UIのオープンを初期化する場合は、次のリンクを使用してください。https://secure.xsolla.com/paystation4/?token=TOKEN。

https://のプレフィックスが付いたリンクは、決済画面を開くときにのみ使用する必要があります。

テストには次のURLを使用してください。https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN。

access_tokenパラメータにはプライベートユーザーデータが含まれます。このパラメータを取得するときは、必ずサーバー間通信を使用してください。

Iframeで決済UIを開くには：

postMessageメカニズムを実装して、決済UIからイベントを受け取ります。
リンクhttps://sandbox-secure.xsolla.com/paystation4/?token=TOKENをたどって決済UIを開き、TOKEN は受信したトークンです。

例：

Copy

Full screen

Small screen

1<iframe
2  src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
3  width="800"
4  height="930"
5  allow="clipboard-read; clipboard-write; payment"
6></iframe>

このシナリオでは、サブスクリプションカタログがエクソーラの決済UI内に直接表示されるため、プランリスト用のカスタムUIを実装する必要がありません。このアプローチにより、統合が簡素化され、サブスクリプションプランデータの自動更新が保証されます。

トークン生成を設定し、サブスクリプションカタログとともに決済UIを開くには：

サーバー側のトークンを作成するAPIコールを介してトークンの取得を実装します。リクエストで次のパラメータを渡します：
- user.id — 認証システムのユーザーID。
- user.email — ユーザーのメールアドレス。RFC 822プロトコルに従って有効である必要があります。
- settings.project_id — プロジェクトID。このパラメータは、パブリッシャーアカウントのプロジェクト名の横にあります。

リクエストの例：

Copy

Full screen

Small screen

 1{
 2    "user": {
 3        "name": {
 4            "value": "j.smith@email.com"
 5        },
 6        "id": {
 7            "value": "123a345b678c091d"
 8        }
 9    },
10    "settings": {
11        "project_id": 177226
12    }
13}

以下のいずれかの方法で決済UIの開き方を実装してください：

例：スクリプトの非同期読み込み

Copy

Full screen

Small screen

 1<script>
 2   var options = {
 3       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
 4       sandbox: true //TODO please do not forget to remove this setting when going live
 5   };
 6   var s = document.createElement('script');
 7   s.type = "text/javascript";
 8   s.async = true;
 9   s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
10   s.addEventListener('load', function (e) {
11       XPayStationWidget.init(options);
12   }, false);
13   var head = document.getElementsByTagName('head')[0];
14   head.appendChild(s);
15</script>
16
17<button data-xpaystation-widget-open>Buy Credits</button>

スクリプト初期化パラメータ：

パラメータ	種類	説明文
access_token	string	APIから受信したトークン。必須。
sandbox	boolean	決済処理をテストするには、`true`に設定します。`sandbox-secure.xsolla.com`が`secure.xsolla.com`の代わりに使用されます。
lightbox	object	ライトボックスパラメータ（オブジェクト、デスクトップバージョンのみ）。
payment_widget_ui.lightbox.width	string	ライトボックスのフレームの高さ。`null`の場合、ペイステーションの高さに依存します。既定は`null`です。
payment_widget_ui.lightbox.height	string	ライトボックスのフレームの高さ。`null`の場合、ペイステーションの高さに依存します。既定は`100%`です。
payment_widget_ui.lightbox.zIndex	integer	配置順序を定義します。既定は`1000`です。
payment_widget_ui.lightbox.overlayOpacity	integer	ウィジェットの背景の不透明度（`0` — 完全透明、`1` — 完全不透明）。デフォルト値は60%です（`.6`）。
payment_widget_ui.lightbox.overlayBackground	string	オーバーレイの背景色。既定は`#000000`。
payment_widget_ui.lightbox.modal	boolean	`true`の場合、ライトボックスフレームを閉じることはできません。既定は`false`です。
lightbox.closeByClick	boolean	`true`の場合、オーバーレイをクリックするとライトボックスが閉じます。既定は`true`です。
lightbox.closeByKeyboard	boolean	`true`の場合、ESCを押すとライトボックスが閉じます。既定は`true`です。
payment_widget_ui.lightbox.contentBackground	string	フレームの背景色。デフォルトは`#ffffff`。これらの色の変更は、ペイステーションiframe自体には影響を与えず、それを保持するライトボックスの設定のみに影響を与えることに注意してください。
payment_widget_ui.lightbox.contentMargin	string	フレームマージン。既定は`10px`です。
payment_widget_ui.lightbox.spinner	string	ローディングアニメーションのインジケータの種類。`xsolla`または`round`に指定できます。既定は`xsolla`です。
payment_widget_ui.lightbox.spinnerColor	string	スピナーの色。既定値はありません。
childWindow	object	ペイステーションUIを含む子ウィンドウのオプション。モバイル版でサポートされています。
childWindow.target	string	ペイステーションウィンドウを開く場所。`_blank`、`_self`、`_parent`に指定できます。既定は`_blank`です。

このスクリプトでは、決済UIのイベントを追跡することができます。イベントの種類に応じて、ウェブページでさまざまな操作を実行できます。

イベントの一覧：

パラメータ	説明文
init	ウィジェットが初期化されました。
open	ウィジェットが開かれました。
load	決済UI（ペイステーション）が読み込まれました。
close	決済UI（ペイステーション）が閉じられています。
status	ユーザーはステータスページにいます。
status-invoice	ユーザーはステータスページにいます。支払いが進行中です。
status-delivering	ユーザーはステータスページにいます。支払いが完了しました。支払い通知が送信されました。
status-done	ユーザーはステータスページにいます。支払いはユーザーのアカウントに振り込まれます。
status-troubled	ユーザーはステータスページにいます。支払いに失敗しました。

決済UIのオープンを初期化する場合は、次のリンクを使用してください。https://secure.xsolla.com/paystation4/?token=TOKEN。

https://のプレフィックスが付いたリンクは、決済画面を開くときにのみ使用する必要があります。

テストには次のURLを使用してください。https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN。

access_tokenパラメータにはプライベートユーザーデータが含まれます。このパラメータを取得するときは、必ずサーバー間通信を使用してください。

Iframeで決済UIを開くには：

postMessageメカニズムを実装して、決済UIからイベントを受け取ります。
リンクhttps://sandbox-secure.xsolla.com/paystation4/?token=TOKENをたどって決済UIを開き、TOKEN は受信したトークンです。

例：

Copy

Full screen

Small screen

1<iframe
2  src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
3  width="800"
4  height="930"
5  allow="clipboard-read; clipboard-write; payment"
6></iframe>

エクソーラペイステーションにサブスクリプションカタログを表示した例：

このシナリオでは、すべてのカタログ要素と購入ロジックがサイトビルダー内で直接設定されるため、APIを使用する必要はありません。

サブスクリプションの販売を追加するには、サイトにボタンを構成し、そのボタンにサブスクリプションを購入アクションを設定する必要があります。ヘッダー、カードグリッド、ゲームエディションの各ブロックにカスタマイズ可能なボタンを追加できます。

サブスクリプション販売には、カードグリッドブロックの使用を推奨します。カードとレイアウトの両方に対して、柔軟なカスタマイズが可能だからです。

ウェブサイトでサブスクリプションを購入できるようにするには：

パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
対象のサイトを選択し、「サイトビルダーを開く」をクリックします。
ビルダーのメインエリアで、新しいブロックを追加したい場所を選び、「ブロックを追加」をクリックします。
カードグリッドブロックを追加し、設定を行います。例えば、タイトルを指定したり、背景を設定したり、テキストを追加したりできます。
ビルダーのメインエリアで、カードグリッドを次のように設定します：

1. グリッド内のエリアを縦または横に分割するには、対象エリアの左上に表示される縦線または横線のアイコンをクリックします。

1. エリアの高さや幅を設定するには、║または═のアイコンをドラッグしてください。

カードの設定に移動します。⚙アイコンをクリックしてください。

カードに「サブスクリプション購入」ボタンを追加します：

1. 「ボタンを追加」をクリックします。

1. アクションドロップダウンリストからサブスクリプションを購入を選択します。
2. サブスクリプションプランドロップダウンリストから、事前に作成したプランを選択します。

リストには通常プランタイプのサブスクリプションのみが表示されます。

必要なプランがリストにない場合は、「新しいプランを追加」をクリックして、パブリッシャーアカウントでサブスクリプションプランを設定します。

1. ボタンのスタイルを変更します（任意）。

サブスクリプション購入ボタンのテキストをカスタマイズします（任意）：

1. ビルダーのメインエリアでボタンのテキストをクリックします。
2. 希望するテキストを入力してください。デフォルトでは、選択されたサブスクリプションプランにトライアル期間が設定されている場合、ボタンにはサブスクリプションの価格またはトライアルの日数が表示されます。テキストを編集する際には、以下の変数を使ってサブスクリプションの価格やトライアル期間を含めることもできます：

1. - {priceDefault} — 通常価格。割引が適用されている場合、この金額は取り消し線付きで表示されます。
  - {pricePromo} — 割引が適用された最終的なサブスクリプション価格。
  - {trial} — 試用の日数。

デフォルトでは、ボタンのテキストは以下のルールに従って自動的に決定されます：

{trial} day(s) for free — サブスクリプションに試用期間が設定されている場合。
{priceDefault} {pricePromo} per month — サブスクリプションに試用期間はないが、割引が適用されている場合。
{priceDefault} per month — サブスクリプションに試用期間も割引もない場合。
Manage plan — 現在ログインしているユーザーが有効なサブスクリプションを保有している場合。このテキストはビルダーで変更できず、ボタンにカスタムテキストを手動で設定した場合でも表示されます。

デフォルトのテキストに戻すには、ボタンのテキストをクリックしてカスタムテキストを削除し、ボタンからフォーカスを外します。

他のカード構成（例：テキスト、画像、背景の追加）を行います。
グリッド内の他のカードを構成します。

継続課金のサブスクリプションの例：

トライアル期間付きのサブスクリプションの例：

割引付きのサブスクリプションの例：

サブスクリプション料金表の例：

ウェブサイトのセットアップを完了してください：
- ウェブサイトのビジュアルテーマを設定します。
- ウェブサイトに追加のブロックを追加します。これを行うには、「ブロックを追加」をクリックしてサイトに表示されるブロックを選択します。ブロックの全リストについては、説明を参照してください。
- 各ブロックのコンテンツを編集します。これを行うには、ユーザーが見るビルダーのメイン部分で画像を追加し、テキストを編集します。
- SEOとローカリゼーション設定を設定します（任意）。
- 追加のサイトページを追加します（任意）。
サイトを一般公開するため、次のようにしてください：

1. サイトビルダーの右上隅にある「公開」をクリックします。

1. 公開したいページの隣にあるチェックボックスにチェックを入れます。

1. ウェブサイトが公開準備完了であることを確認し、「公開」をクリックします。

ウェブサイトの公開ができない場合は、以下の条件がすべて満たされていることを確認してください：

ウェブサイトに空のセクションがないこと（赤いインジケータで表示される）。
エクソーラとのライセンス契約が締結されました。
メインページが公開されているか、公開対象として選択されています。メインページを公開する前に、子ページを公開することはできません。

設定を強化します（任意）：
1. 1. ストアフロント > ウェブサイトセクションに移動し、ウェブサイトパネルの「設定」をクリックします。
1. 1. 独自のドメインを接続するには、サイト設定 > ドメインセクションに移動し、エクソーラドメインを変更するか、独自のドメインを接続します。
1. 1. ウェブサイトの有効性を監視するにはサイト設定 > アプリセクションに移動し、プロモーションとアナリティクスのためのサービスを選択して接続します。

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

あなたのメッセージを確認し、体験を向上させるために利用させていただきます。

最終更新日: 2025年12月12日

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

内容

決済方法選択ページで決済UIを開くためのトークンを生成する
支払いデータ入力ページで決済UIを開くためのトークンを生成する
決済UIを開く
商品ごとのサブスクリプションプランを取得するクライアント側のメソッド
プランのリストを取得するクライアント側のメソッド
決済UIを開くためのリンクを取得するクライアントメソッド
決済UIを開く

Your browser is not supported. Please try a different browser

サブスクリプションカタログの表示と購入の設定

決済方法選択ページで決済UIを開くためのトークンを生成する

支払いデータ入力ページで決済UIを開くためのトークンを生成する

決済UIを開く

access_token

sandbox

lightbox

payment_widget_ui.lightbox.width

payment_widget_ui.lightbox.height

payment_widget_ui.lightbox.zIndex

payment_widget_ui.lightbox.overlayOpacity

payment_widget_ui.lightbox.overlayBackground

payment_widget_ui.lightbox.modal

lightbox.closeByClick

lightbox.closeByKeyboard

payment_widget_ui.lightbox.contentBackground

payment_widget_ui.lightbox.contentMargin

payment_widget_ui.lightbox.spinner

payment_widget_ui.lightbox.spinnerColor

childWindow

childWindow.target

商品ごとのサブスクリプションプランを取得するクライアント側のメソッド

plan_id

plan_external_id

limit

offset

locale

country

プランのリストを取得するクライアント側のメソッド

plan_id

plan_external_id

limit

offset

locale

country

決済UIを開くためのリンクを取得するクライアントメソッド

plan_external_id

settings

settings.ui

settings.ui.theme

settings.ui.version

settings.ui.desktop

settings.ui.desktop.header

settings.ui.desktop.header.close_button

settings.ui.desktop.header.is_visible

settings.ui.desktop.header.type

settings.ui.desctop.header.visible_logo

settings.ui.desktop.header.visible_name

settings.ui.desktop.header.type

settings.ui.mobile.header.close_button

settings.ui.mode

settings.currency

settings.external_id

settings.payment_method

settings.return_url

settings.redirect_policy

settings.redirect_policy.redirect_conditions

settings.redirect_policy.delay

settings.redirect_policy.status_for_manual_redirection

settings.redirect_policy.redirect_button_caption

決済UIを開く

access_token

sandbox

lightbox

payment_widget_ui.lightbox.width

payment_widget_ui.lightbox.height

payment_widget_ui.lightbox.zIndex

payment_widget_ui.lightbox.overlayOpacity

payment_widget_ui.lightbox.overlayBackground

payment_widget_ui.lightbox.modal

lightbox.closeByClick

lightbox.closeByKeyboard

payment_widget_ui.lightbox.contentBackground

payment_widget_ui.lightbox.contentMargin

payment_widget_ui.lightbox.spinner

payment_widget_ui.lightbox.spinnerColor

childWindow

childWindow.target

access_token