決済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 -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_idforeigninvoiceinvoice_idstatusは、自動的にリンクに追加されます。
      settings.redirect_policy
      objectリダイレクトポリシー設定(オブジェクト)。
      settings.redirect_policy.redirect_conditions
      string決済後、ユーザーをリターンURLにリダイレクトする決済状況。nonesuccessfulsuccessful_or_canceledanyまたはなしにすることができます。
      settings.redirect_policy.delay
      integerユーザーがリターンURLに自動的にリダイレクトされるまでの遅延時間(秒)。
      settings.redirect_policy.status_for_manual_redirection
      string決済後、ユーザーをリターンURLにリダイレクトする決済状況。nonesuccessfulsuccessful_or_canceledanyまたはなしにすることができます。
      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_idforeigninvoiceinvoice_idstatusは、自動的にリンクに追加されます。
          settings.redirect_policy
          objectリダイレクトポリシー設定(オブジェクト)。
          settings.redirect_policy.redirect_conditions
          string決済後、ユーザーをリターンURLにリダイレクトする決済状況。nonesuccessfulsuccessful_or_canceledanyまたはなしにすることができます。
          settings.redirect_policy.delay
          integerユーザーがリターンURLに自動的にリダイレクトされるまでの遅延時間(秒)。
          settings.redirect_policy.status_for_manual_redirection
          string決済後、ユーザーをリターンURLにリダイレクトする決済状況。nonesuccessfulsuccessful_or_canceledanyまたはなしにすることができます。
          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 -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 -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
                <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.comsecure.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_TOKENACCESS_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_TOKENACCESS_TOKENトークンを取得するメソッドで取得したトークンです。また、決済インターフェースを開くためのクライアントメソッドを実装する時、トークン付きの既製のリンクを取得することができます。

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

                新しいウィンドウで

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

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

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

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

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