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
- Implémentez l’obtention d’un jeton pour ouvrir l’interface de paiement de l’une des manières suivantes :
- 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ètrepurchase.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.purchase.checkout.amount
avec le prix du plan d’abonnement ;purchase.checkout.currency
avec la valeur de la devise.
- curl
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.
purchase.checkout.amount
avec le prix du plan d’abonnement ;purchase.checkout.currency
avec la valeur de la devise.
- curl
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
- Implémentez l’obtention d’un lien pour ouvrir l’interface de paiement à l’aide de la méthode API client.
- 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 :
- Utilisez les appels API
Register new user etAuth 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
, 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.
plan_external_id
etsettings.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 :
Paramètre | Type | Description |
---|---|---|
| string | Obligatoire. ID externe du plan d’abonnement. Il se trouve dans la section Subscriptions > Subscription Plans du Compte éditeur. |
| object | Paramètres de projet personnalisés (objet). |
| object | Paramètres de l’interface (objet). |
| string | Thème de l’interface de paiement. Valeurs possibles : default , default_dark ou un ID de thème customisé. |
| string | Type d’appareil. Valeurs possibles : desktop (par défaut) ou mobile . |
| object | Paramètres d’interface pour la version de bureau (objet). |
| object | Paramètres d’en-tête (objet). |
| boolean | Dé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 . |
| boolean | Détermine l’affichage de l’en-tête dans l’interface de paiement. |
| string | Apparence de l’en-tête. Valeurs possibles : compact (masque le nom du jeu et l’ID de l’utilisateur) ou normal . |
| boolean | Si défini sur true , l’en-tête affiche votre logo. (Assurez-vous de fournir l’image à votre responsable de la réussite client). |
| boolean | Détermine l’affichage du nom du projet dans l’en-tête. |
| string | Apparence de l’en-tête. Valeurs possibles : compact (masque le nom du projet et l’ID de l’utilisateur) ou normal (par défaut). |
| boolean | Dé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. |
| string | Mode 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. |
| string | Devise de paiement préférée. Code de devise ISO 4217 à trois lettres. |
| string | ID de transaction dans le jeu. Doit être unique pour chaque utilisateur. |
| integer | ID du mode de paiement. La liste des ID des modes de paiement s’obtient dans le Compte éditeur. |
| string | Page 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. |
| object | Paramètres de politique de redirection (objet). |
| string | Statut 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 | integer | Délai (en secondes) après lequel l’utilisateur est automatiquement redirigé vers l’URL de retour. |
| string | Statut 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 . |
| string | Texte sur le bouton de redirection manuelle. |
- curl
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
- html
<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ètre | Type | Description |
---|---|---|
access_token | string | Jeton, obtenu via l’appel API serveur Créer un jeton ou obtenu à travers un lien lorsque l’appel API client est utilisé. Obligatoire. |
sandbox | boolean | Dé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 | object | Objet avec les paramètres de la lightbox (version de bureau uniquement). |
payment_widget_ui.lightbox.width | string | Largeur 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 | string | Hauteur 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 | integer | Définit l’ordre d’empilement. La valeur par défaut est 1000 . |
payment_widget_ui.lightbox.overlayOpacity | integer | Opacité 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 | string | Couleur de fond de la superposition. La valeur par défaut est #000000 . |
payment_widget_ui.lightbox.modal | boolean | Si définie sur true , le cadre de la lightbox ne peut pas être fermé. La valeur par défaut est false . |
lightbox.closeByClick | boolean | Si définie sur true , cliquer sur la superposition ferme la lightbox. La valeur par défaut est true . |
lightbox.closeByKeyboard | boolean | Si définie sur true , appuyer sur ESC ferme la lightbox. La valeur par défaut est true . |
payment_widget_ui.lightbox.contentBackground | string | Couleur 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 | string | Marge du cadre. La valeur par défaut est 10px . |
payment_widget_ui.lightbox.spinner | string | Type d’indicateur de chargement animé. Valeurs possibles : xsolla ou round . La valeur par défaut est xsolla . |
payment_widget_ui.lightbox.spinnerColor | string | Couleur de l’indicateur de chargement. Aucune valeur par défaut. |
childWindow | object | Paramètres de la fenêtre enfant dans laquelle s’ouvre l’interface Pay Station. Prise en charge dans la version mobile. |
childWindow.target | string | Détermine où s’ouvre la fenêtre Pay Station. Valeurs possibles : _blank , _self et_parent . La valeur par défaut est _blank . |
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.https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
.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
.
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.