カタログUIを作成する

内容

カタログUIを作成する方法は3つあります：

独自のインターフェースを使用する

独自のインターフェイスでディレクトリを作成する場合、以下のことを使用できます：

お知らせ
また、SDKライブラリを使用して、独自のインターフェイスでカタログを実装することもできます。既製のライブラリは、すぐに使えるデータ構造とエクソラAPIを操作するためのメソッドを提供することで、エクソラ製品をプロジェクトに統合することを容易にします。

エクソラログインとクライアント側のAPIコール

カタログを実装するには：

  1. クライアントメソッドを使用して、サブスクリプションプランのリストを取得します：
  2. 受信したプランのリストをインターフェースの表示を実装します。

商品ごとのサブスクリプションプランを取得するクライアント側のメソッド

アプリケーションのクライアント側で、HTTP GETリクエストを使用して、プランのリストを取得することを実装します：https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans。

リクエストにはAuthorization: Bearer <client_user_jwt>ヘッダーが含まれている必要があります。<client_user_jwt>はユーザーのJSONウェブトークン（JWT）であり、Base64標準に従ってエンコードされた一意のBase64エンコードトークンです。トークンと取得するには：

  • アプリケーションでログインとパスワードによる認証を行う場合は、Register new userおよびAuth by usernameとパスワードのAPIコールを使用してください。
  • ソーシャルネットワークを介した認証を利用する場合は、Auth via social network APIコールをご利用ください。

パスパラメータとして指定します：

  • productID — サブスクリプションベースのプロダクトIDです。取得するには、アカウントマネージャにお問い合わせください。

クエリパラメータとして指定します：

パラメータ種類説明文
plan_id
array of integersプランID。
plan_external_id
array of stringsプランのexternal ID。パブリッシャーアカウントのサブスクリプション > サブスクリプションプラン > プランセクション、またはプランを取得するAPIコールで確認できます。
limit
integerページ内の要素数の制限。デフォルトでは15件が表示されます。
offset
integerリスト生成元のエレメントの番号。デフォルトでは、カウントは0から始まります。
locale
stringインターフェイス言語を2文字の小文字で表す。ISO 639-1値を受け入れます。このパラメータが渡されない場合、言語はユーザーのIPアドレスによって決定されます。
country
string二文字のISO 3166-1 alpha-2指定は、ユーザーの国を識別するために使用されます。このパラメータは、ロケールと通貨の選択に影響します。このパラメータが渡されない場合、国はユーザーのIPアドレスによって決定されます。
Copy
Full screen
Small screen

    curl -X 'GET' \
'https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'

    Copy
    Full screen
    Small screen
    • js

    {
  "items": [
    {
      "plan_id": 54321,
      "plan_external_id": "PlanExternalId",
      "plan_group_id": "TestGroupId",
      "plan_type": "all",
      "plan_name": "Localized plan name",
      "plan_description": "Localized plan description",
      "plan_start_date": "2021-04-11T13:51:02+03:00",
      "plan_end_date": "2031-04-11T13:51:02+03:00",
      "trial_period": 7,
      "period": {
        "value": 1,
        "unit": "month"
      },
      "charge": {
        "amount": 4.99,
        "setup_fee": 0.99,
        "currency": "USD"
      },
      "promotion": {
        "promotion_charge_amount": 3.99,
        "promotion_remaining_charges": 3
      }
    }
  ],
  "has_more": false
}

    プランのリストを取得するクライアント側のメソッド

    アプリケーションのクライアント側で、HTTP GETリクエストを使用して、プランのリストを取得することを実装します：https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans。

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

    クエリパラメータとして指定します：

    パラメータ種類説明文
    plan_id
    		array of integersプランID。
    plan_external_id
    		array of stringsプランのexternal ID。パブリッシャーアカウントのサブスクリプション > サブスクリプションプラン > プランセクション、またはプランを取得するAPIコールで確認できます。
    limit
    		integerページ内の要素数の制限。デフォルトでは15件が表示されます。
    offset
    		integerリスト生成元のエレメントの番号。デフォルトでは、カウントは0から始まります。
    locale
    		stringインターフェイス言語を2文字の小文字で表す。ISO 639-1値を受け入れます。このパラメータが渡されない場合、言語はユーザーのIPアドレスによって決定されます。
    country
    		string二文字のISO 3166-1 alpha-2指定は、ユーザーの国を識別するために使用されます。このパラメータは、ロケールと通貨の選択に影響します。このパラメータが渡されない場合、国はユーザーのIPアドレスによって決定されます。
    Copy
    Full screen
    Small screen

      curl -X 'GET' \
'https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans?country=RU  ' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer client_user_jwt'

      Copy
      Full screen
      Small screen
      • js

      {
  "items": [
    {
      "plan_id": 54321,
      "plan_external_id": "PlanExternalId",
      "plan_group_id": "TestGroupId",
      "plan_type": "all",
      "plan_name": "Localized plan name",
      "plan_description": "Localized plan description",
      "plan_start_date": "2021-04-11T13:51:02+03:00",
      "plan_end_date": "2031-04-11T13:51:02+03:00",
      "trial_period": 7,
      "period": {
        "value": 1,
        "unit": "month"
      },
      "charge": {
        "amount": 4.99,
        "setup_fee": 0.99,
        "currency": "USD"
      },
      "promotion": {
        "promotion_charge_amount": 3.99,
        "promotion_remaining_charges": 3
      }
    }
  ],
  "has_more": false
}

      エクソラ決済ステーションを使用する

      決済UIでカタログが作成される方法は、以下のプロジェクトの認証設定に依存します：

      独自の認証システム

      アプリケーションが独自の認証システムを使用する場合：

      1. サーバーのトークンを作成するAPIコールによるトークンの取得を実装します。リクエストでは、user.idおよび user.emailパラメータでユーザー情報を渡します。
      2. Pay Station Embed、iframe、または新しいウィンドウで決済UIを開くことを実装します。
      Copy
      Full screen
      Small screen
      • js

      {
    "user": {
        "id": {
            "value": "1234567",
            "hidden": true
        }
    },
    "settings": {
        "project_id": 123456,
        "language": "en",
        "currency": "USD"
    }
}

      エクソラログイン

      プロジェクトでエクソラログインが設定されている場合：

      アプリケーションのクライアント側で、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
      		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>"
}

          エクソラ決済ステーションにサブスクリプションカタログを表示した例：

          エクソラサイトビルダーを使用する

          エクソラサイトビルダーで、サブスクリプションを販売するにはサイトを作成し、設定することができます。そのためには、ウェブショップのテンプレートを使って、サイトを作成します。ウェブショップのロール設定については、ユーザー認証のあるウェブショップに関する説明を参照してください。

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

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

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