Créer une interface de catalogue

Trois moyens s’offrent à vous pour créer une interface de catalogue :

• au moyen de votre propre interface ;
• au moyen de Xsolla Pay Station ;
• au moyen de Xsolla Site Builder.

Au moyen de votre propre interface

Lorsque vous créez un répertoire dans votre propre interface, vous pouvez utiliser :

• Votre propre stockage de données et n’importe quelle option d’autorisation. Dans ce cas, implémentez l’interface du catalogue de votre côté.
• Votre propre autorisation et la méthode serveur Lire les plans. Implémentez l’interface du catalogue de votre côté après avoir obtenu la liste des plans.
• Xsolla Login et les appels API côté client.

Xsolla Login et les appels API côté client

1. Obtenez la liste des plans d’abonnement à l’aide des méthodes client :
   • si votre projet comporte des produits par abonnement configurés, utilisez la méthode côté client d’obtention des plans d’abonnement par produit ;
   • si aucun produit par abonnement n’est configuré dans votre projet, utilisez la méthode côté client d’obtention de la liste des plans.
2. Implémentez l’affichage de la liste des plans reçus dans l’interface.

Méthode côté client pour obtenir les plans d'abonnement par produit

Côté client de votre application, utilisez une requête HTTP GET pour implémenter l’obtention de la liste des plans : https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/products/{​​productId}/plans.

La requête doit contenir un en-tête Authorization: Bearer <client_user_jwt>, où <client_user_jwt> est le JSON Web Token (JWT) de l’utilisateur, un jeton unique encodé conformément à la norme Base64. Pour obtenir le jeton :

• Utilisez les appels API Register new user et Auth by username si votre application utilise l’autorisation par nom d’utilisateur et mot de passe.

• Utilisez l’appel API Auth via social network si votre application utilise l’autorisation via les réseaux sociaux.

• projectId — ID de projet. Ce paramètre se trouve dans le Compte éditeur à côté du nom du projet.

• productID— ID de produit par abonnement. Pour l’obtenir, contactez votre responsable de la réussite client ou envoyez un e-mail à 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éthode côté client pour obtenir la liste des plans

Côté client de votre application, utilisez une requête HTTP GET pour implémenter l’obtention de la liste des plans : https://subscriptions.xsolla.com​/api/user/v1/projects/{project_id}/plans.

La requête doit contenir un en-tête Authorization: Bearer <client_user_jwt>, où <client_user_jwt> est le JSON Web Token (JWT) de l’utilisateur, un jeton unique encodé conformément à la norme Base64. Pour obtenir le jeton :

• Utilisez les appels API Register new user et Auth by username si votre application utilise l’autorisation par nom d’utilisateur et mot de passe.

• Utilisez l’appel API Auth via social network si votre application utilise l’autorisation via les réseaux sociaux.

Spécifiez comme paramètres de requête :

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
}

Au moyen de Xsolla Pay Station

1. Implémentez l’obtention du jeton via l’appel API côté serveur Créer un jeton. Passez les paramètres suivants dans la requête :
   • user.id — ID de l’utilisateur dans votre système d’autorisation ;
   • user.email — adresse e-mail de l’utilisateur. Doit être valide selon le protocole RFC 822 ;
   • settings.project_id — ID du projet. Ce paramètre se trouve dans le Compte éditeur à côté du nom du projet.
2. Implémentez l’option d’ouverture de l’interface de paiement :
   • Script Pay Station Embed ;
   • Iframe ;
   • Nouvelle fenêtre.

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

Exemple d’affichage du catalogue des abonnements dans Xsolla Pay Station :

Au moyen de Xsolla Site Builder

Xsolla Site Builder vous permet de créer et de configurer votre site pour la vente d’abonnements. Pour ce faire, créez un site en utilisant le modèle Web Shop. Pour plus d’informations sur la configuration des rôles, consultez les instructions pour le magasin en ligne avec authentification utilisateur.