Crear interfaz de usuario del catálogo

Hay tres formas de crear una interfaz de usuario de catálogo:

• utilizando una interfaz propia
• utilizando Xsolla Pay Station
• utilizando Xsolla Site Builder

Utilizar una interfaz propia

Al crear un directorio en su propia interfaz, puede utilizar:

• Almacenamiento de datos propio y cualquier opción de autorización. En este caso, implemente la interfaz de usuario del catálogo en su lado.
• Su propia autorización y el método de servidor Obtener planes. Implemente la interfaz de usuario del catálogo en su lado después de obtener la lista de planes.
• Xsolla Login y llamadas API del lado cliente.

Xsolla Login y llamadas API del lado cliente

1. Obtenga una lista de planes de suscripción mediante métodos de cliente:
   • si su proyecto tiene configurados productos de pago por suscripción, utilice el método del lado del cliente para obtener los planes de suscripción por productos
   • si su proyecto no tiene configurados productos de pago por suscripción, el método del lado del cliente para obtener la lista de planes
2. Implementar la visualización de la lista de planes recibidos en la interfaz.

Método del lado cliente para obtener los planes de suscripción por productos

En el lado cliente de su aplicación, utilice una solicitud HTTP GET para implementar la obtención de la lista de planes: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans.

La solicitud debe contener un encabezado Authorization: Bearer <client_user_jwt>, en el cual <client_user_jwt> es el JSON Web Token (JWT) del usuario, un token único codificado en Base64 según el estándar Base64. Para obtener el token:

• Utilice las llamadas API Register new user y Auth by username y de contraseña si su aplicación utiliza la autorización de inicio de sesión y contraseña.

• Utilice la llamada API Auth via social network si su aplicación utiliza autorización mediante redes sociales.

• el ID del proyecto (projectId). Encontrará este parámetro en su Cuenta del editor junto al nombre del proyecto.

• productID (ID de producto de pago por suscripción). Para obtenerlo, contacte con su gestor del éxito del cliente o envíe un correo electrónico a 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
}

Método del lado cliente para obtener la lista de planes

En el lado cliente de su aplicación, utilice una solicitud HTTP GET para obtener la lista de planes: https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans.

La solicitud debe contener un encabezado Authorization: Bearer <client_user_jwt>, en el cual <client_user_jwt> es el JSON Web Token (JWT) del usuario, un token único codificado en Base64 según el estándar Base64. Para obtener el token:

• Utilice las llamadas API Register new user y Auth by username y de contraseña si su aplicación utiliza la autorización de inicio de sesión y contraseña.

• Utilice la llamada API Auth via social network si su aplicación utiliza autorización mediante redes sociales.

Especifique como parámetros de consulta:

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
}

Utilizar Xsolla Pay Station

1. Implemente la obtención de tókenes a través de la llamada API del lado del servidor Crear token. Transmita los siguientes parámetros en la solicitud:
   • user.id - ID de usuario en su sistema de autorización.
   • user.email - Correo electrónico del usuario. Debe ser válido conforme al protocolo RFC 822.
   • settings.project_id - ID de proyecto. Puede encontrar este parámetro en su Cuenta del editor junto al nombre del proyecto.
2. Implemente la apertura de la interfaz de pago de una de las siguientes maneras:
   • Script Pay Station Embed
   • Iframe
   • Nueva ventana

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

Un ejemplo de visualización del catálogo de suscripciones en Xsolla Pay Station:

Utilizar Xsolla Site Builder

Xsolla Site Builder le permite crear y configurar su sitio web para la venta de suscripciones. Para ello, utilice la plantilla Web Shop para crear un sitio web. Puede leer más sobre la definición de roles en Web Shop con las instrucciones de autenticación de usuario.