Create catalog UI

There are three ways to create catalog UI:

• using own interface
• using Xsolla Pay Station
• using Xsolla Site Builder

Using own interface

When creating a directory in your own interface, you can use:

• Own data storage and any authorization option. In this case, implement the catalog UI on your side.
• Your own authorization and the Get Plans server-side method. Implement the catalog UI on your side after getting the list of plans.
• Xsolla Login and client-side API calls.

Xsolla Login and client-side API calls

1. Get a list of subscription plans using client methods:
   • if your project has subscription-based products configured, use the client-side method to get the subscription plans by products
   • if your project does not have subscription-based products configured, the client-side method for getting the list of plans
2. Implement the display of the received list of plans in the interface.

Client-side method to get the subscription plans by products

On the client side of your application, use an HTTP get request to implement getting the list of plans: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans.

The request must contain an Authorization: Bearer <client_user_jwt> header, where <client_user_jwt> is user’s JSON Web Token (JWT) — a unique, Base64-encoded token encoded according to the Base64 standard. To get the token:

• Use the Register new user and Auth by username and password API calls if your application uses login and password authorization.

• Use the Auth via social network API call if your application uses authorization through social networks.

• projectId — project ID. You can find this parameter in your Publisher Account next to the name of the project.

• productID — subscription-based product ID. To get it, contact your Customer Success Manager or email to csm@xsolla.com.

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'

{
  "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
}

Client-side method for getting the list of plans

On the client side of your application, use an HTTP GET request to implement getting the list of plans: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans.

The request must contain an Authorization: Bearer <client_user_jwt> header, where <client_user_jwt> is user’s JSON Web Token (JWT) — a unique, Base64-encoded token encoded according to the Base64 standard. To get the token:

• Use the Register new user and Auth by username and password API calls if your application uses login and password authorization.

• Use the Auth via social network API call if your application uses authorization through social networks.

Specify as query parameters:

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'

{
  "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
}

Using Xsolla Pay Station

1. Implement getting the token via the server-side Create token API call. Pass the following parameters in the request:
   • user.id — user ID in your authorization system.
   • user.email — user email. Must be valid according to the RFC 822 protocol.
   • settings.project_id — project ID. You can find this parameter in your Publisher Account next to the name of the project.
2. Implement opening the payment UI in one of the following ways:
   • Pay Station Embed script
   • Iframe
   • New window

{
    "user": {
        "name": {
            "value": "j.smith@email.com"
        },
        "id": {
            "value": "123a345b678c091d"
        }
    },
    "settings": {
        "project_id": 177226
    }
}

An example of displaying the subscription catalog in the Xsolla Pay Station:

Using Xsolla Site Builder

Xsolla Site Builder allows you to create and set up your site for subscription sales. To do this, use the Web Shop template to create a site. You can read more about setting up roles in the Web Shop with user authentication instructions.