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

パスパラメータとして指定します：
  • projectId — プロジェクトID。このパラメータは、アドミンページでプロジェクト名の側に表示されます。

  • productID — サブスクリプションベースのプロダクトIDです。取得するには、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。

クエリパラメータとして指定します：
パラメータ種類説明文
plan_id
array of integersプランID。
plan_external_id
array of stringsプランのexternal ID。アドミンページのサブスクリプション > サブスクリプションプラン > プランセクション、またはプランを取得するAPIコールで確認できます。
limit
integerページ内の要素数の制限。デフォルトでは15件が表示されます。
offset
integerリスト生成元のエレメントの番号。デフォルトでは、カウントは0から始まります。
locale
string2文字の小文字で表したインターフェース言語。ISO 639-1の値を受け入れます。このパラメータが渡されない場合、言語はユーザーのIPアドレスによって決定されます。
使用可能な値：
  • en - 英語
  • ar - アラビア語
  • bg - ブルガリア語
  • cn - 中国語 (簡体字)
  • cs - チェコ語
  • de - ドイツ語
  • es - スペイン語
  • fr - フランス語
  • he - ヘブライ語
  • it - イタリア語
  • ja - 日本語
  • ko- 韓国語
  • pl - ポーランド語
  • pt - ポルトガル語
  • ro - ルーマニア語
  • ru - ロシア語
  • th - タイ語
  • tr - トルコ語
  • tw - 中国語（繁体字）
  • vi - ベトナム語
エクソーラリストにないロケールが渡された場合、英語ロケールが使われます。
country
string二文字のISO 3166-1 alpha-2指定は、ユーザーの国を識別するために使用されます。このパラメータは、ロケールと通貨の選択に影響します。このパラメータが渡されない場合、国はユーザーのIPアドレスによって決定されます。
Copy
Full screen
Small screen
  • curl
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
  • javascript
{
  "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
string2文字の小文字で表したインターフェース言語。ISO 639-1の値を受け入れます。このパラメータが渡されない場合、言語はユーザーのIPアドレスによって決定されます。
使用可能な値：
  • en - 英語
  • ar - アラビア語
  • bg - ブルガリア語
  • cn - 中国語 (簡体字)
  • cs - チェコ語
  • de - ドイツ語
  • es - スペイン語
  • fr - フランス語
  • he - ヘブライ語
  • it - イタリア語
  • ja - 日本語
  • ko- 韓国語
  • pl - ポーランド語
  • pt - ポルトガル語
  • ro - ルーマニア語
  • ru - ロシア語
  • th - タイ語
  • tr - トルコ語
  • tw - 中国語（繁体字）
  • vi - ベトナム語
エクソーラリストにないロケールが渡された場合、英語ロケールが使われます。
country
string二文字のISO 3166-1 alpha-2指定は、ユーザーの国を識別するために使用されます。このパラメータは、ロケールと通貨の選択に影響します。このパラメータが渡されない場合、国はユーザーのIPアドレスによって決定されます。
Copy
Full screen
Small screen
  • curl
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
  • javascript
{
  "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
}

エクソーラペイステーションを使用する

  1. サーバー側のトークンを作成するAPIコールを介してトークンの取得を実装します。リクエストで次のパラメータを渡します：
    • user.id — 認証システムのユーザーID。
    • user.email — ユーザーのメールアドレス。RFC 822プロトコルに従って有効である必要があります。
    • settings.project_id — プロジェクトID。このパラメータは、アドミンページのプロジェクト名の横にあります。
  2. 以下のいずれかの方法で決済UIを開くことを実装します：
Copy
Full screen
Small screen
  • javascript
{
    "user": {
        "name": {
            "value": "j.smith@email.com"
        },
        "id": {
            "value": "123a345b678c091d"
        }
    },
    "settings": {
        "project_id": 177226
    }
}

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

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

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

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

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

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