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 :

Avis
Étant donné que la méthode côté client, qui consiste à obtenir un lien pour ouvrir l’interface de paiement, ne vous permet pas de gérer les prix de votre côté ni de définir le prix de l’abonnement pour un utilisateur spécifique, ne l’utilisez pas pour vendre un abonnement avec des frais d’abonnement associés au premier paiement.
Note
Si vous souhaitez permettre à l’utilisateur de modifier le plan dans votre projet, contactez votre responsable de la réussite client ou envoyez un e-mail à csm@xsolla.com pour une configuration adéquate de l’interface de paiement.

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 :
  2. Implémentez l’option d’ouverture de l’interface de paiement :

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

Pour que l’interface utilisateur de paiement affiche la page de sélection du mode de paiement lorsqu’elle s’ouvre, passez le paramètre purchase.subscription.plan_id avec l’ID du plan sélectionné à l’appel API Créer un jeton. Passez des paramètres de customisation supplémentaires si nécessaire.
Note
Si des plans avec des frais d’abonnement associés au premier paiement sont définis dans votre projet, vous devez également passer les paramètres suivants :
  • purchase.checkout.amount avec le prix du plan d’abonnement ;
  • purchase.checkout.currency avec la valeur de la devise.
Copy
Full screen
Small screen
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

Pour que l’interface de paiement affiche la page de saisie des données de paiement lorsqu’elle s’ouvre, passez les paramètres suivants dans l’appel API Créer un jeton :
  • 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.
Note
Si des plans avec des frais d’abonnement associés au premier paiement sont définis dans votre projet, vous devez également passer les paramètres suivants :
  • purchase.checkout.amount avec le prix du plan d’abonnement ;
  • purchase.checkout.currency avec la valeur de la devise.
Passez des paramètres supplémentaires pour la customisation si nécessaire.
Copy
Full screen
Small screen
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 :

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 :

Spécifiez projectId, l’ID de projet, comme paramètre de chemin. Ce paramètre se trouve dans le Compte éditeur à côté du nom du projet.

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.

Exemple d’interface de paiement :
Exemple d’interface de paiement :

Paramètres du corps de la requête :

ParamètreTypeDescription
plan_external_id
stringObligatoire. ID externe du plan d’abonnement. Il se trouve dans la section Subscriptions > Subscription Plans du Compte éditeur.
settings
objectParamètres de projet personnalisés (objet).
settings.ui
objectParamètres de l’interface (objet).
settings.ui.theme
stringThème de l’interface de paiement. Valeurs possibles : default, default_dark ou un ID de thème customisé.
settings.ui.version
stringType d’appareil. Valeurs possibles : desktop (par défaut) ou mobile.
settings.ui.desktop
objectParamètres d’interface pour la version de bureau (objet).
settings.ui.desktop.header
objectParamètres d’en-tête (objet).
settings.ui.desktop.header.close_button
booleanDétermine l’affichage du bouton Close sur la version de bureau de Pay Station. Le bouton ferme Pay Station et redirige l’utilisateur vers l’URL spécifiée dans le paramètre settings.return_url. La valeur par défaut est false.
settings.ui.desktop.header.is_visible
booleanDétermine l’affichage de l’en-tête dans l’interface de paiement.
settings.ui.desktop.header.type
stringApparence de l’en-tête. Valeurs possibles : compact (masque le nom du jeu et l’ID de l’utilisateur) ou normal.
booleanSi défini sur true, l’en-tête affiche votre logo. (Assurez-vous de fournir l’image à votre responsable de la réussite client).
settings.ui.desktop.header.visible_name
booleanDétermine l’affichage du nom du projet dans l’en-tête.
settings.ui.desktop.header.type
stringApparence de l’en-tête. Valeurs possibles : compact (masque le nom du projet et l’ID de l’utilisateur) ou normal (par défaut).
settings.ui.mobile.header.close_button
booleanDétermine l’affichage du bouton Close sur la version mobile de Pay Station. Le bouton ferme Pay Station et redirige l’utilisateur vers l’URL spécifiée dans le paramètre settings.return_url. Défini sur false par défaut.
settings.ui.mode
stringMode interface dans Pay Station. L’unique valeur possible est user_account : l’en-tête contient uniquement le menu de navigation du compte, et l’utilisateur ne peut sélectionner de bien ni effectuer de paiement. Ce mode n’est disponible que sur la version de bureau.
settings.currency
stringDevise de paiement préférée. Code de devise ISO 4217 à trois lettres.
settings.external_id
stringID de transaction dans le jeu. Doit être unique pour chaque utilisateur.
settings.payment_method
integerID du mode de paiement. La liste des ID des modes de paiement s’obtient dans le Compte éditeur.
settings.return_url
stringPage vers laquelle rediriger l’utilisateur après un paiement. Les paramètres user_id, foreigninvoice, invoice_id et status seront automatiquement ajoutés au lien.
settings.redirect_policy
objectParamètres de politique de redirection (objet).
settings.redirect_policy.redirect_conditions
stringStatut du paiement qui détermine la redirection de l’utilisateur vers une URL de retour après un paiement. Valeurs possibles : none, successful, successful_or_canceled ou any.
settings.redirect_policy.delay
integerDélai (en secondes) après lequel l’utilisateur est automatiquement redirigé vers l’URL de retour.
settings.redirect_policy.status_for_manual_redirection
stringStatut du paiement qui détermine la redirection de l’utilisateur vers une URL de retour après un paiement. Valeurs possibles : none, successful, successful_or_canceled ou any.
settings.redirect_policy.redirect_button_caption
stringTexte sur le bouton de redirection manuelle.
Passez des paramètres supplémentaires pour la customisation si nécessaire.
Copy
Full screen
Small screen
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"
      }
    }
Copy
Full screen
Small screen
    {
      "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

    Copy
    Full screen
    Small screen
    <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 :

    ParamètreTypeDescription
    access_token
    stringJeton, obtenu via l’appel API serveur Créer un jeton ou obtenu à travers un lien lorsque l’appel API client est utilisé. Obligatoire.
    sandbox
    booleanDéfinissez ce paramètre sur true pour tester le processus de paiement : l’URL sandbox-secure.xsolla.com sera utilisée à la place de secure.xsolla.com.
    lightbox
    objectObjet avec les paramètres de la lightbox (version de bureau uniquement).
    payment_widget_ui.lightbox.width
    stringLargeur du cadre de la lightbox. Si définie sur null, elle correspondra à la largeur de la Pay Station. La valeur par défaut est null.
    payment_widget_ui.lightbox.height
    stringHauteur du cadre de la lightbox. Si définie sur null, elle correspondra à la hauteur de Pay Station. La valeur par défaut est 100%.
    payment_widget_ui.lightbox.zIndex
    integerDéfinit l’ordre d’empilement. La valeur par défaut est 1000.
    payment_widget_ui.lightbox.overlayOpacity
    integerOpacité de l’arrière-plan du widget (0 — complètement transparent, 1 — complètement opaque). La valeur par défaut est 60 % (.6).
    payment_widget_ui.lightbox.overlayBackground
    stringCouleur de fond de la superposition. La valeur par défaut est #000000.
    payment_widget_ui.lightbox.modal
    booleanSi définie sur true, le cadre de la lightbox ne peut pas être fermé. La valeur par défaut est false.
    lightbox.closeByClick
    booleanSi définie sur true, cliquer sur la superposition ferme la lightbox. La valeur par défaut est true.
    lightbox.closeByKeyboard
    booleanSi définie sur true, appuyer sur ESC ferme la lightbox. La valeur par défaut est true.
    payment_widget_ui.lightbox.contentBackground
    stringCouleur de fond du cadre. La valeur par défaut est #ffffff. Notez que ce changement de couleur n’affecte pas l’iframe Pay Station, mais uniquement la lightbox qui le contient.
    payment_widget_ui.lightbox.contentMargin
    stringMarge du cadre. La valeur par défaut est 10px.
    payment_widget_ui.lightbox.spinner
    stringType d’indicateur de chargement animé. Valeurs possibles : xsolla ou round. La valeur par défaut est xsolla.
    payment_widget_ui.lightbox.spinnerColor
    stringCouleur de l’indicateur de chargement. Aucune valeur par défaut.
    childWindow
    objectParamètres de la fenêtre enfant dans laquelle s’ouvre l’interface Pay Station. Prise en charge dans la version mobile.
    childWindow.target
    stringDétermine où s’ouvre la fenêtre Pay Station. Valeurs possibles : _blank, _self et_parent. La valeur par défaut est _blank.
    Si vous souhaitez initialiser l’ouverture de l’interface, 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.
    Note
    Il est impératif de n’utiliser qu’un lien avec le préfixe https:// pour l’ouverture de l’interface de paiement.
    Utilisez l’URL suivante à des fins de test : https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN.
    Avis
    Le paramètre access_token contient des données utilisateur privées. Assurez-vous d’utiliser la communication serveur-serveur lors de l’obtention de ce paramètre.

    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.

    Cet article vous a été utile ?
    Merci !
    Que pouvons-nous améliorer ? Message
    Nous sommes désolés de l'apprendre
    Dites-nous pourquoi vous n'avez pas trouvé cet article utile. Message
    Merci pour votre commentaire !
    Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.
    Dernière mise à jour: 30 Septembre 2024

    Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.

    Signaler un problème
    Nous améliorons continuellement notre contenu grâce à vos commentaires.
    Indiquez votre adresse e-mail pour un suivi
    Merci pour votre commentaire !