Configurer l’ouverture de l’interface de paiement

Selon les paramètres d’authentification du projet, vous pouvez utiliser l’une des options ci-dessous pour ouvrir l’interface de paiement :

• appel API côté serveur Créer un jeton si :
  • vous utilisez votre propre système d’autorisation dans l’application ;
  • des plans d’abonnement sont configurés avec des frais d’abonnement associés au premier paiement dans votre projet.
• méthode côté client pour obtenir un lien permettant d’ouvrir l’interface de paiement si vous utilisez Xsolla Login dans votre projet.

Via l'appel API serveur Créer un jeton

1. Implémentez l’obtention d’un jeton pour ouvrir l’interface de paiement de l’une des manières suivantes :
   • sur la page de sélection du mode de paiement ;
   • sur la page de saisie des données de paiement.
2. Implémentez l’option d’ouverture de l’interface de paiement :
   • Script Pay Station Embed ;
   • Iframe ;
   • Nouvelle fenêtre.

Avec affichage de la page de sélection du mode de paiement

curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
  "user":{
    "id":{
      "value": "1234567",
      "hidden": true
    },
    "email": {
      "value": "user1234@game1234.com"
    },
    "name": {
      "value": "UserName",
      "hidden": false
    }
  },
  "settings": {
    "project_id": 12345,
    "currency": "USD"
  },
  "purchase": {
    "subscription": {
      "plan_id": "54321"
    }
  }
}'

Exemple de page de sélection du mode de paiement :

Avec affichage de la page de saisie des données de paiement

• purchase.subscription.plan_id avec l’ID du plan sélectionné.
• settings.payment_method avec l’ID du mode de paiement. Pour trouver la liste des identifiants, dans votre projet dans le Compte éditeur, accédez à la section Pay Station > Payment methods, ou demandez-la auprès de votre responsable de la réussite client.

curl -v https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token \
-X POST \
-u your_merchant_id:merchant_api_key \
-H 'Content-Type:application/json' \
-H 'Accept: application/json' \
-d '
{
  "user":{
    "id":{
      "value": "1234567",
      "hidden": true
    },
    "email": {
      "value": "user1234@game1234.com"
    },
    "name": {
      "value": "UserName",
      "hidden": false
    }
  },
  "settings": {
    "project_id": 12345,
    "payment_method": 1380,
    "currency": "USD"
  },
  "purchase": {
    "subscription": {
      "plan_id": "54321"
    }
  }
}'

Exemple de page de saisie des données de paiement :

Via la méthode API client

1. Implémentez l’obtention d’un lien pour ouvrir l’interface de paiement à l’aide de la méthode API client.
2. Implémentez l’option d’ouverture de l’interface de paiement :
   • Script Pay Station Embed ;
   • Iframe ;
   • Nouvelle fenêtre.

Méthode client pour obtenir un lien permettant d'ouvrir l'interface de paiement

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

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 country comme paramètre de requête — désignation à deux lettres du pays de l’utilisateur selon la norme ISO 3166-1 alpha-2. Affecte le choix de la langue et de la devise. Si ce paramètre n’est pas passé, le pays est déterminé par l’adresse IP de l’utilisateur.

Passez les paramètres suivants dans la requête :

• plan_external_id pour ouvrir l’interface de paiement sur la page de sélection du mode de paiement.

• plan_external_id et settings.payment_method pour ouvrir l’interface de paiement sur la page de saisie des données de paiement.

Paramètres du corps de la requête :

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
          }
        },
        "mode": "user_account"
        }
      },
      "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"
      }
    }

{
  "link_to_ps": "https://secure.xsolla.com/paystation2/?access_token=<access_token>"
}

Avec Pay Station Embed

Ajoutez un script à la page de votre site Web pour ouvrir le widget d’interface de paiement. Une description complète du script est disponible dans le dépôt GitHub.

EXEMPLE DE CHARGEMENT ASYNCHRONE DE SCRIPT

<script>
   var options = {
       access_token: 'ACCESS_TOKEN', //TODO use access token, received on previous step
       sandbox: true //TODO please do not forget to remove this setting when going live
   };
   var s = document.createElement('script');
   s.type = "text/javascript";
   s.async = true;
   s.src = "https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
   s.addEventListener('load', function (e) {
       XPayStationWidget.init(options);
   }, false);
   var head = document.getElementsByTagName('head')[0];
   head.appendChild(s);
</script>

<button data-xpaystation-widget-open>Buy Credits</button>

Pay Station Embed permet de recevoir les événements de l’interface de paiement via le mécanismepostMessage. Vous pouvez envoyer ces événements au système d’analyse. Pour configurer le traitement de ces événements dans votre système d’analyse, contactez votre responsable de la réussite client ou envoyez un e-mail à l’adresse csm@xsolla.com.

Paramètres d’initialisation du script :

Dans un iframe

Vous devez implémenter les mécanismes suivants de votre côté :

• Vérification du type d’appareil (bureau ou mobile) et envoie de la valeur dans le paramètre settings.ui.version du jeton ;
• Obtention des événements depuis l’interface de paiement via PostMessage et leur envoi aux systèmes d’analyse, si nécessaire. Pour configurer le traitement des événements dans votre système d’analyse, contactez votre responsable de la réussite client ou envoyez un e-mail à csm@xsolla.com.

Pour ouvrir l’interface de paiement dans un iframe, utilisez le lien suivant : https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, où ACCESS_TOKEN est le jeton obtenu à l’aide de la méthode Créer un jeton. Le jeton peut également être obtenu à travers un lien prêt à l’emploi lors de l’implémentation de la méthode client pour ouvrir l’interface de paiement.

À des fins de test, utilisez cette URL : https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.

Dans une nouvelle fenêtre

Pour ouvrir l’interface de paiement dans une nouvelle fenêtre, utilisez le lien suivant : https://secure.xsolla.com/paystation4/?token=ACCESS_TOKEN, où ACCESS_TOKEN est le jeton obtenu à l’aide de la méthode Créer un jeton. Le jeton peut également être obtenu à travers un lien prêt à l’emploi lors de l’implémentation de la méthode client pour ouvrir l’interface de paiement.

À des fins de test, utilisez cette URL : https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN.