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

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

注意
決済UIを開くためのリンクを取得するクライアントサイドのメソッドは、自分の側で価格を管理し、特定のユーザーに対してサブスクリプション価格を設定することができないので、初回支払いに関連付けられるサブスクリプション料金があるサブスクリプションを販売する場合に使用しないでください。
お知らせ
プロジェクトでユーザーがプランを変更できるようにしたい場合は、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。

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

  1. 以下のいずれかの方法で、決済UIを開くためのトークンを取得することを実装します:
  2. 決済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メソッド経由

  1. クライアントAPIメソッドを使用して、決済UIを開くためのリンクを取得することを実装します。
  2. 以下のいずれかの方法で決済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の例:
決済UIの例:

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

パラメータ種類説明文
plan_external_id
string必須です。サブスクリプションプランのexternal IDです。アドミンページ > サブスクリプション > サブスクリプションプランセクションで見つけることができます。
settings
objectカスタムプロジェクト設定(オブジェクト)。
settings.ui
objectインタフェース設定(オブジェクト)。
settings.ui.theme
string決済インターフェースのテーマ。defaultdefault_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にすることができます。
booleantrueの場合、ヘッダーにはあなたのロゴが表示されます(最初にあなたのカスタマーサクセスマネージャーに画像を提供してください)。
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_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
          }
        },
        "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.comsecure.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
    booleantrueの場合、ライトボックスフレームを閉じることはできません。既定はfalseです。
    lightbox.closeByClick
    booleantrueの場合、オーバーレイをクリックするとライトボックスが閉じます。既定はtrueです。
    lightbox.closeByKeyboard
    booleantrueの場合、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のの開始を初期化する場合は、次のリンクをご利用ください:https://secure.xsolla.com/paystation4/?token=ACCESS_TOKENACCESS_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_TOKENACCESS_TOKENトークンを取得するメソッドで取得したトークンです。また、決済インターフェースを開くためのクライアントメソッドを実装する時、トークン付きの既製のリンクを取得することができます。

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

    新しいウィンドウで

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

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

    この記事は役に立ちましたか?
    ありがとうございます!
    改善できることはありますか? メッセージ
    申し訳ありません
    この記事が参考にならなかった理由を説明してください。 メッセージ
    ご意見ありがとうございました!
    あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
    最終更新日: 2024年9月30日

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

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