決済UIを開くメソッドをセットアップ

プロジェクトの認証設定に応じて、以下のいずれかを使用して決済UIを開くことができます：

以下の場合はサーバーサイドのトークンを作成するAPIコール：
- アプリケーションで独自の認証システムを使用しています。
- サブスクリプションプランは、プロジェクトの初回支払いに関連付けられるサブスクリプション料金が設定されています。
プロジェクトでエクソーラログインを使用している場合、決済UIを開くためのリンクを取得するためのクライアントサイドメソッドをセットアップします。

決済UIを開くためのリンクを取得するクライアントサイドのメソッドは、自分の側で価格を管理し、特定のユーザーに対してサブスクリプション価格を設定することができないので、初回支払いに関連付けられるサブスクリプション料金があるサブスクリプションを販売する場合に使用しないでください。

プロジェクトでユーザーがプランを変更できるようにしたい場合は、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。

サーバーのトークンを作成するAPIコール経由

以下のいずれかの方法で、決済UIを開くためのトークンを取得することを実装します：
- 決済方法選択ページ
- 決済データ入力ページ
決済UIを開く方法を実装します：

決済方法選択ページの表示あり

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

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

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

Copy

Full screen

Small screen

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

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

Copy

Full screen

Small screen

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コールをご利用ください。

プロジェクト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	決済インターフェースのテーマ。`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	決済インターフェースにヘッダーを表示するかどうかを示します。
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のリストはアドミンページを参照するか、決済方法を取得するAPIコールを使用して取得できます。
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

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"
      }
    }

Copy

Full screen

Small screen

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

ペイステーション埋め込み付き

ウェブサイトのページにスクリプトを追加して、決済UIウィジェットを開くことができます。スクリプトの詳細な説明は、GitHubリポジトリにあります。

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

Copy

Full screen

Small screen

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

決済UIのの開始を初期化する場合は、次のリンクをご利用ください：https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN。ACCESS_TOKENはトークンを取得するメソッドで取得したトークンです。また、決済インターフェースを開くためのクライアントメソッドを実装する時、トークン付きの既製のリンクを取得することができます。

決済UIを開く場合にのみ、https://プレフィックス付きのリンクを使用する必要があります。

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

パラメータaccess_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。

進捗状況

最終更新日: 2024年1月22日

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

Your browser is not supported. Please try a different browser

サブスクリプション

決済UIを開くメソッドをセットアップ

サーバーのトークンを作成するAPIコール経由

決済方法選択ページの表示あり

決済データ入力ページの表示あり

クライアントAPIメソッド経由

決済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

ペイステーション埋め込み付き

access_token

sandbox

lightbox

lightbox.width

lightbox.height

lightbox.zIndex

lightbox.overlayOpacity

lightbox.overlayBackground

lightbox.modal

lightbox.closeByClick

lightbox.closeByKeyboard

lightbox.contentBackground

lightbox.contentMargin

lightbox.spinner

lightbox.spinnerColor

childWindow

childWindow.target

Iframeで

新しいウィンドウで