決済UIを開くメソッドをセットアップ
プロジェクトの認証設定に応じて、以下のいずれかを使用して決済UIを開くことができます:
- 以下の場合はサーバーサイドのトークンを作成するAPIコール:
- アプリケーションで独自の認証システムを使用しています。
- サブスクリプションプランは、プロジェクトの初回支払いに関連付けられるサブスクリプション料金が設定されています。
- プロジェクトでエクソーラログインを使用している場合、決済UIを開くためのリンクを取得するためのクライアントサイドメソッドをセットアップします。
サーバーのトークンを作成するAPIコール経由
- 以下のいずれかの方法で、決済UIを開くためのトークンを取得することを実装します:
- 決済UIを開く方法を実装します:
決済方法選択ページの表示あり
決済UIを開いた際に決済方法の選択ページを表示させるには、選択したプランのIDをpurchase.subscription.plan_id
パラメータとしてトークンを取得するAPIコールに渡します。必要に応じて、追加のカスタマイズパラメータを渡します。- サブスクリプションプランの価格付きの
purchase.checkout.amount
- 通貨価値付きの
purchase.checkout.currency
- curl
curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
"user":{
"id":{
"value": "1234567",
"hidden": true
},
"email": {
"value": "user1234@game1234.com"
},
"name": {
"value": "UserName",
"hidden": false
}
},
"settings": {
"project_id": 12345,
"currency": "USD"
},
"purchase": {
"subscription": {
"plan_id": "54321"
}
}
}'
決済方法選択ページの例:
決済データ入力ページの表示あり
決済UIを開いたときに決済データ入力ページを表示させるには、トークンを取得するAPIコールで以下のパラメータを渡します:- 選択されたプランのIDを持つ
purchase.subscription.plan_id
。 - 決済方法のIDを持つ
settings.payment_method
。識別子のリストを見つけるには、アドミンページのペイステーション > 決済方法セクションで確認するか、プロジェクトのカスタマーサクセスマネージャーに申請してください。
- サブスクリプションプランの価格付きの
purchase.checkout.amount
- 通貨価値付きの
purchase.checkout.currency
- curl
curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
"user":{
"id":{
"value": "1234567",
"hidden": true
},
"email": {
"value": "user1234@game1234.com"
},
"name": {
"value": "UserName",
"hidden": false
}
},
"settings": {
"project_id": 12345,
"payment_method": 1380,
"currency": "USD"
},
"purchase": {
"subscription": {
"plan_id": "54321"
}
}
}'
決済データ入力ページの例:
クライアントAPIメソッド経由
- クライアントAPIメソッドを使用して、決済UIを開くためのリンクを取得することを実装します。
- 以下のいずれかの方法で決済UIを開くことを実装します:
決済UIを開くためのリンクを取得するクライアントメソッド
アプリケーションのクライアント側で、HTTP POSTリクエストを使用して、決済UIを開くことを実装します:https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/subscriptions/buy
。
リクエストには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
として指定します。このパラメータは、アドミンページでプロジェクト名の隣に表示されます。クエリーパラメータにcountry
を指定します - ISO 3166-1 alpha-2規格に従ったユーザーの国名の二文字表記です。ロケールと通貨の選択に影響します。このパラメータを渡さなかった場合、国はユーザーのIPアドレスによって決定されます。
リクエストで次のパラメータを渡します:
plan_external_id
は、決済方法の選択ページで決済インターフェイスを開きます。
plan_external_id
およびsettings.payment_method
を使用して、決済データを入力するページで決済インターフェイスを開きます。
リクエストボディパラメータ:
パラメータ | 種類 | 説明文 |
---|---|---|
| string | 必須です。サブスクリプションプランのexternal IDです。アドミンページ > サブスクリプション > サブスクリプションプランセクションで見つけることができます。 |
| object | カスタムプロジェクト設定(オブジェクト)。 |
| object | インタフェース設定(オブジェクト)。 |
| string | 決済インターフェースのテーマ。default 、default_dark またはカスタムテーマIDに指定できます。 |
| string | デバイスの種類。desktop (既定)またはmobile に指定できます。 |
| object | デスクトップバージョン(オブジェクト)のインターフェース設定。 |
| object | ヘッダー設定(オブジェクト)。 |
| boolean | デスクトップ版ペイステーションに閉じるボタンを表示する設定。このボタンはペイステーションを閉じて、settings.return_url パラメータで指定されたURLにユーザーをリダイレクトします。デフォルトはfalse です。 |
| boolean | 決済インターフェースにヘッダーを表示するかどうかを示します。 |
| string | ヘッダーの外観。compact (この場合、ゲーム名とユーザーIDはヘッダーに表示されません)またはnormal にすることができます。 |
| boolean | true の場合、ヘッダーにはあなたのロゴが表示されます(最初にあなたのカスタマーサクセスマネージャーに画像を提供してください)。 |
| boolean | ヘッダーにプロジェクト名を表示するかどうかを示します。 |
| string | ヘッダーを表示する方法。compact (プロジェクト名とユーザーIDを隠す)またはnormal (既定)に指定できます。 |
| boolean | モバイル版ペイステーションに閉じるボタンを表示する設定。このボタンはペイステーションを閉じて、settings.return_url パラメータで指定されたURLにユーザーをリダイレクトします。デフォルトはfalse です。 |
| string | ペイステーションのインターフェースモード。user_account のみとなります:ヘッダーにはユーザーアカウントのナビゲーションメニューのみが含まれています。ユーザーは商品を選択したり、決済を行うことはできません。このモードは、デスクトップ上でのみ使用できます。 |
| string | ご希望の決済通貨。3文字のISO 4217通貨コード。 |
| string | ゲーム内のトランザクションID。各ユーザーの支払いに対して一意でなければならなりません。 |
| integer | 決済方法ID。決済方法IDのリストは、アドミンページで取得できます。 |
| string | ページを使用して決済後にユーザーをリダイレクトします。パラメータuser_id 、foreigninvoice 、invoice_id とstatus は、自動的にリンクに追加されます。 |
| object | リダイレクトポリシー設定(オブジェクト)。 |
| string | 決済後、ユーザーをリターンURLにリダイレクトする決済状況。none 、successful 、successful_or_canceled 、any またはなし にすることができます。 |
settings.redirect_policy.delay | integer | ユーザーがリターンURLに自動的にリダイレクトされるまでの遅延時間(秒)。 |
| string | 決済後、ユーザーをリターンURLにリダイレクトする決済状況。none 、successful 、successful_or_canceled 、any またはなし にすることができます。 |
| string | 手動リダイレクト用のボタンのテキスト。 |
- curl
curl -X 'POST' \
'https://subscriptions.xsolla.com/api/user/v1/projects/{project_id}/subscriptions/buy?country=RU ' \
-H 'accept: application/json' \
-H 'Authorization: Bearer client_user_jwt'
{
"plan_external_id": "PlanExternalId",
"settings": {
"ui": {
"size": "large",
"theme": "string",
"version": "desktop",
"desktop": {
"header": {
"is_visible": true,
"visible_logo": true,
"visible_name": true,
"type": "compact",
"close_button": true
}
},
"mobile": {
"mode": "saved_accounts",
"footer": {
"is_visible": true
},
"header": {
"close_button": true
}
},
"mode": "user_account"
}
},
"currency": "string",
"locale": "string",
"external_id": "string",
"payment_method": 1,
"return_url": "string",
"redirect_policy": {
"redirect_conditions": "none",
"delay": 0,
"status_for_manual_redirection": "none",
"redirect_button_caption": "string"
}
}
{
"link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
}
ペイステーション埋め込み付き
ウェブサイトのページにスクリプトを追加して、決済UIウィジェットを開くことができます。スクリプトの詳細な説明は、GitHubリポジトリにあります。
例:スクリプトの非同期読み込み
- html
<script>
var options = {
access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
sandbox: true //TODO please do not forget to remove this setting when going live
};
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
s.addEventListener('load', function (e) {
XPayStationWidget.init(options);
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
<button data-xpaystation-widget-open>Buy Credits</button>
ペイステーション埋め込みを使用すると、postMessage
経由で決済UIからイベントを取得できます。これらのイベントは分析システムに送信できます。分析システムでイベント処理を設定するには、カスタマーサクセスマネージャーに連絡するか、csm@xsolla.comに電子メールを送信してください。
スクリプト初期化パラメータ:
パラメータ | 種類 | 説明文 |
---|---|---|
access_token | string | トークンはサーバーのトークンを作成するAPIコールで受信、またはクライアント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 です。 |
https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN
。ACCESS_TOKEN
はトークンを取得するメソッドで取得したトークンです。また、決済インターフェースを開くためのクライアントメソッドを実装する時、トークン付きの既製のリンクを取得することができます。https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
。Iframeで
お客様側で次のメカニズムを実装してください:
- デバイスの種類(デスクトップまたはモバイル)を指定し、トークンのsettings.ui.versionパラメータ内で送信する。
- postMessage経由で決済UIからイベントを受け取る。こちらのイベントは分析システムに送信できます。分析システムでイベント処理を設定する場合は、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。
決済UIをiframeで開くには、次のリンクをご利用ください:https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN
。ACCESS_TOKEN
はトークンを取得するメソッドで取得したトークンです。また、決済インターフェースを開くためのクライアントメソッドを実装する時、トークン付きの既製のリンクを取得することができます。
テスト用には、このURLを使用してください:https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN
。
新しいウィンドウで
決済UIを新しいウィンドウで開くには、次のリンクをご利用ください:https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN
。ACCESS_TOKEN
はトークンを取得するメソッドで取得したトークンです。また、決済インターフェースを開くためのクライアントメソッドを実装する時、トークン付きの既製のリンクを取得することができます。
テスト用には、このURLを使用してください:https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN
。
誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。