決済UIを開く

内容

プロジェクトの認証設定に応じて、以下のように決済UIを開くことができます：

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

  1. 以下のいずれかの方法で、決済UIを開くためのトークンを取得することを実装します：
  2. 決済UIを開く方法を実装します：

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

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

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。識別子のリストを見つけるには、パブリッシャーアカウントの決済ステーション > 決済方法セクションで確認するか、プロジェクトのアカウントマネージャーに申請してください。

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

    Copy
    Full screen
    Small screen
    • 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"
    }
  }
}'

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

    サブスクリプション管理と請求先アカウントページの表示あり

    決済UIを開いたときに、サブスクリプションと決済アカウントを管理するためのページを表示させるには、トークンを作成するAPIコールにsettings.ui.mode = user_accountパラメータを渡します。

    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
        }
    },
    "settings": {
      "project_id": 146026,
      "language": "en",
      "currency": "USD",
      "ui": {
          "mode": "user_account",
          "theme": "default_dark",
          "desktop": {
             "subscription_list": {
               "layout": "grid"
             }
           }
         }
    }
  }

      サブスクリプション管理ページと請求先アカウントの例：

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

      1. 以下のいずれかの方法で、決済UIを開くためのクライアントメソッドを実装します：
      2. 以下のいずれかの方法で決済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 パスパラメータにproject IDを指定します。このパラメータは、パブリッシャーアカウントでプロジェクト名の隣に表示されます。

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

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

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

      決済UIの例：

      決済UIの例：

      リクエストボディパラメータ：

      パラメータ種類説明文
      plan_external_id
      		string必須。サブスクリプションプランのexternal ID。パブリッシャーアカウント > サブスクリプション > サブスクリプションプランセクションで見つかります。
      settings
      		objectカスタムプロジェクト設定（オブジェクト）。
      settings.ui
      		objectインタフェース設定（オブジェクト）。
      settings.ui.size
      		string決済UIのサイズ。以下を指定できます：
      • small：決済UIの最小サイズ。ウィンドウサイズが厳しく制限されている場合にこの値を使用します（寸法：620 x 630 px）
      • medium：推奨サイズ。この値を使用して、ライトボックスに決済UIを表示します（寸法：740 x 760）
      • large：決済UIを新しいウィンドウまたはタブに表示するのに最適なサイズ（寸法：820 x 840）
      settings.ui.theme
      		string決済インターフェースのテーマ。default（既定）またはdefault_darkに指定できます。
      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.is_visible.type
      		stringヘッダーの外観。compact（この場合、ゲーム名とユーザーIDはヘッダーに表示されません）またはnormalにすることができます。
      booleantrueの場合、ヘッダーにはあなたのロゴが表示されます（最初にあなたのアカウントマネージャーに画像を提供してください）。
      settings.ui.desktop.header.visible_name
      		booleanヘッダーにプロジェクト名を表示するかどうかを示します。
      settings.ui.desktop.header.type
      		stringヘッダーを表示する方法。compact（プロジェクト名とユーザーIDを隠す）またはnormal（既定）に指定できます。
      settings.ui.mobile.mode
      		stringユーザーは、保存された決済方法を使用してのみ決済を行うことができます。saved_accountsに指定できます。
      booleanモバイル版の決済インターフェースでフッターを非表示にするかどうかを示します。
      settings.ui.mobile.header.close_button
      		booleanモバイル版決済ステーションに閉じるボタンを表示する設定。このボタンは決済ステーションを閉じて、settings.return_urlパラメータで指定されたURLにユーザーをリダイレクトします。デフォルトはfalseです。
      settings.ui.license_url
      		stringEULAへのリンク。
      settings.ui.mode
      		string決済ステーションのインターフェースモード。user_accountのみとなります：ヘッダーにはユーザーアカウントのナビゲーションメニューのみが含まれています。ユーザーは商品を選択したり、決済を行うことはできません。このモードは、デスクトップ上でのみ使用できます。
      settings.ui.user_account
      		objectユーザーアカウントの詳細（オブジェクト）。
      settings.ui.user_account.history
      		object履歴サブメニュー。
      settings.ui.user_account.history.enable
      		integerセクションを決済UIのドロップダウンメニューに表示するかどうか。trueまたはfalseを指定できます。パラメータが渡されない場合、セクションは表示されません。
      settings.ui.user_account.history.order
      		integer決済インターフェースのドロップダウンメニューにあるセクションの場所。
      settings.ui.user_account.info
      		objectマイアカウントページ。
      settings.ui.user_account.info.order
      		integer決済UIのドロップダウンにおけるセクションの場所。
      settings.ui.user_account.info.enable
      		booleanセクションを決済UIのドロップダウンメニューに表示するかどうか。trueまたはfalseを指定できます。パラメータが渡されない場合、セクションは表示されません。
      settings.ui.user_account.payment_accounts
      		objectマイ決済アカウントサブメニュー。
      settings.ui.user_account.payment_accounts.order
      		integer決済UIのドロップダウンにおけるセクションの場所。
      settings.ui.user_account.payment_accounts.enable
      		booleanサブメニューを表示するかどうか。trueまたはfalseを指定できます。パラメータが渡されない場合、セクションが表示されます。
      settings.ui.user_account.subscriptions
      		objectサブスクリプション管理サブメニュー。
      settings.ui.user_account.subscriptions.enable
      		booleanサブメニューを表示するかどうか。trueまたはfalseを指定できます。パラメータが渡されない場合、セクションが表示されます。
      settings.ui.user_account.subscriptions.order
      		integer決済UIのドロップダウンにおけるセクションの場所。
      settings.currency
      		string標準の決済通貨。ISO 42173文字通貨コード。
      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
        }
      },
      "license_url": "string",
      "mode": "user_account",
      "user_account": {
        "history": {
          "enable": true,
          "order": 1
        },
        "payment_accounts": {
          "enable": true,
          "order": 1
        },
        "info": {
          "enable": true,
          "order": 1
        },
        "subscriptions": {
          "enable": true,
          "order": 1
        }
      }
    },
    "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>"
}

          サブスクリプション管理ページと請求先アカウントの表示あり

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

          リクエストには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パスパラメータにproject IDを指定します。このパラメータは、パブリッシャーアカウントでプロジェクト名の側に表示されます。

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

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

          リクエストボディパラメータ：

          パラメータ種類説明文
          plan_external_id
          		string必須。サブスクリプションプランのexternal ID。パブリッシャーアカウント > サブスクリプション > サブスクリプションプランセクションで見つかります。
          settings
          		objectカスタムプロジェクト設定（オブジェクト）。
          settings.ui
          		objectインタフェース設定（オブジェクト）。
          settings.ui.size
          		string決済UIのサイズ。以下を指定できます：
          • small：決済UIの最小サイズ。ウィンドウサイズが厳しく制限されている場合にこの値を使用します（寸法：620 x 630 px）
          • medium：推奨サイズ。この値を使用して、ライトボックスに決済UIを表示します（寸法：740 x 760）
          • large：決済UIを新しいウィンドウまたはタブに表示するのに最適なサイズ（寸法：820 x 840）
          settings.ui.theme
          		string決済インターフェースのテーマ。default（既定）またはdefault_darkに指定できます。
          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.is_visible.type
          		stringヘッダーの外観。compact（この場合、ゲーム名とユーザーIDはヘッダーに表示されません）またはnormalにすることができます。
          booleantrueの場合、ヘッダーにはあなたのロゴが表示されます（最初にあなたのアカウントマネージャーに画像を提供してください）。
          settings.ui.desktop.header.visible_name
          		booleanヘッダーにプロジェクト名を表示するかどうかを示します。
          settings.ui.desktop.header.type
          		stringヘッダーを表示する方法。compact（プロジェクト名とユーザーIDを隠す）またはnormal（既定）に指定できます。
          settings.ui.mobile.mode
          		stringユーザーは、保存された決済方法を使用してのみ決済を行うことができます。saved_accountsに指定できます。
          booleanモバイル版の決済インターフェースでフッターを非表示にするかどうかを示します。
          settings.ui.mobile.header.close_button
          		booleanモバイル版決済ステーションに閉じるボタンを表示する設定。このボタンは決済ステーションを閉じて、settings.return_urlパラメータで指定されたURLにユーザーをリダイレクトします。デフォルトはfalseです。
          settings.ui.license_url
          		stringEULAへのリンク。
          settings.ui.mode
          		string決済ステーションのインターフェースモード。user_accountのみとなります：ヘッダーにはユーザーアカウントのナビゲーションメニューのみが含まれています。ユーザーは商品を選択したり、決済を行うことはできません。このモードは、デスクトップ上でのみ使用できます。
          settings.ui.user_account
          		objectユーザーアカウントの詳細（オブジェクト）。
          settings.ui.user_account.history
          		object履歴サブメニュー。
          settings.ui.user_account.history.enable
          		integerセクションを決済UIのドロップダウンメニューに表示するかどうか。trueまたはfalseを指定できます。パラメータが渡されない場合、セクションは表示されません。
          settings.ui.user_account.history.order
          		integer決済インターフェースのドロップダウンメニューにあるセクションの場所。
          settings.ui.user_account.info
          		objectマイアカウントページ。
          settings.ui.user_account.info.order
          		integer決済UIのドロップダウンにおけるセクションの場所。
          settings.ui.user_account.info.enable
          		booleanセクションを決済UIのドロップダウンメニューに表示するかどうか。trueまたはfalseを指定できます。パラメータが渡されない場合、セクションは表示されません。
          settings.ui.user_account.payment_accounts
          		objectマイ決済アカウントサブメニュー。
          settings.ui.user_account.payment_accounts.order
          		integer決済UIのドロップダウンにおけるセクションの場所。
          settings.ui.user_account.payment_accounts.enable
          		booleanサブメニューを表示するかどうか。trueまたはfalseを指定できます。パラメータが渡されない場合、セクションが表示されます。
          settings.ui.user_account.subscriptions
          		objectサブスクリプション管理サブメニュー。
          settings.ui.user_account.subscriptions.enable
          		booleanサブメニューを表示するかどうか。trueまたはfalseを指定できます。パラメータが渡されない場合、セクションが表示されます。
          settings.ui.user_account.subscriptions.order
          		integer決済UIのドロップダウンにおけるセクションの場所。
          settings.currency
          		string標準の決済通貨。ISO 42173文字通貨コード。
          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/manage?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'
{
  "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
        }
      },
      "license_url": "string",
      "mode": "user_account",
      "user_account": {
        "history": {
          "enable": true,
          "order": 1
        },
        "payment_accounts": {
          "enable": true,
          "order": 1
        },
        "info": {
          "enable": true,
          "order": 1
        },
        "subscriptions": {
          "enable": true,
          "order": 1
        }
      }
    },
    "currency": "str",
    "locale": "st",
    "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の例：

              カスタマイゼーション

              決済UIでは、以下のカスタマイズオプションを使用できます：

              ダークテーマの決済UIの例：

              ダークテーマ用のトークンリクエストの例：

              Copy
              Full screen
              Small screen
              • 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"
    "ui": {
       "theme": "default_dark"
    }
  }
}
'

              • プランセクションの説明を自分で配置します。決済UIでサブスクリプション管理セクションの表示を構成します。これを行うには、トークンを取得するAPIコールにui.desktop.subscription_list.descriptionパラメータで説明テキストを渡します。
              注意
              クライアントメソッドを実装する場合、このタイプのカスタマイズは使用できません。

              決済UIの例：

              サブスクリプションの管理セクションとプランセクションの説明を含むライトテーマのトークンリクエストの例：

              Copy
              Full screen
              Small screen
              • 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",
    "ui": {
       "desktop": {
         "subscription_list": {
           "description": "Your Description"
         }
       },
        "user_account": {
          "subscriptions": {
              "order": 1,
              "enable": true
          }
        }
      }
    }
}
'

              • ブロックフォームで、標準のサブスクリプションリストビューを別のビューに変更します。これを行うには、settings.ui.desktop.subscription_list.layout = gridパラメータをトークンを取得するAPIコールに渡します。パラメータは、デフォルトでlistの値を取ります。
              注意
              クライアントメソッドを実装する場合、このタイプのカスタマイズは使用できません。

              決済UIの例：

              別のサブスクリプションリストビューのトークンリクエストの例：

              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": 111111,
    "currency": "USD",
    "ui": {
       "desktop": {
         "subscription_list": {
           "layout": "grid"
         }
       }
    }
  }
}
'

                カスタマイズとそれに使用するパラメータについては、決済ステーションのカスタマイズ方法のガイドを参照してください。

                Pay Station Embed付き

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

                Copy
                Full screen
                Small screen
                • 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>

                Pay Station Embedを使用すると、postMessage経由で決済UIからイベントを取得できます。これらのイベントは分析システムに送信できます。分析システムでイベント処理を設定するには、アカウントマネージャーに連絡するか、am@xsolla.comにメールを送信してください。

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

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

                パラメータ種類説明文
                access_token
                		stringAPIから受信したトークン。 必須。
                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）。既定は.6です。
                lightbox.overlayBackground
                		stringオーバーレイの背景色。既定は#000000。
                lightbox.modal
                		booleantrueの場合、ライトボックスフレームを閉じることはできません。既定はfalseです。
                lightbox.closeByClick
                		booleantrueの場合、オーバーレイをクリックするとライトボックスが閉じます。既定はtrueです。
                lightbox.closeByKeyboard
                		booleantrueの場合、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です。

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

                イベントの一覧：

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

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

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

                テストを試したいときは次のURLをご使用くださいhttps://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN。

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

                Iframeで

                お客様側で次のメカニズムを実装してください：

                • デバイスの種類（デスクトップまたはモバイル）を指定し、トークンのsettings.ui.versionパラメータ内で送信する。
                • postMessage経由で決済UIからイベントを受け取る。こちらのイベントは分析システムに送信できます。分析システムでイベント処理を設定する場合は、アカウントマネージャーにご連絡いただくか、am@xsolla.comまでメールでお問い合わせ下さい。

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

                テスト用には、このURLを使用してください：https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN。

                新しいウィンドウで

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

                テスト用には、このURLを使用してください：https://sandbox-secure.xsolla.com/paystation3/?access_token=ACCESS_TOKEN。

                進捗状況
                ご意見ありがとうございました！
                最終更新日: 2022年12月30日

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

                問題を報告する
                当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
                フォローアップ用のメールをご提供してください
                ご意見ありがとうございました！