Configurer l’achat d’objets
Choisissez la méthode la plus adaptée à votre projet pour accéder aux données Xsolla :
Créer une commande côté client de l'application
Pour créer une commande avec les données utilisateur et les données de l’objet côté Xsolla, utilisez l’appel API Create order with specified item. Cette méthode renverra un jeton de paiement, nécessaire pour ouvrir l’interface et effectuer un paiement. Pour utiliser le mode bac à sable, passez le paramètre “sandbox”: true
dans le corps de la requête d’obtention du jeton.
Ouvrir l'interface de paiement
Pour ouvrir l’interface de paiement dans une nouvelle fenêtre, utilisez l’URL suivante : https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
, où TOKEN
est le jeton reçu.
Vous pouvez également ouvrir l’interface de paiement à l’aide d’autres options :
- Avec Pay Station Embed. Limitation : des problèmes peuvent survenir lors de son ouverture dans le navigateur en jeu (WebView).
- Dans un iframe. Limitation : des problèmes peuvent survenir lors de son ouverture dans le navigateur en jeu (WebView) et dans la version mobile de votre application.
- 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.
L’équipe Xsolla a créé un widget qui simplifie l’intégration de l’interface de paiement sur votre site Web. Le script du widget est disponible dans notre dépôt GitHub.
Paramètres d’initialisation du script :
Paramètre | Type | Description |
---|---|---|
access_token | string | Jeton reçu via API. 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). |
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 . |
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% . |
lightbox.zIndex | integer | Définit l’ordre d’empilement. La valeur par défaut est 1000 . |
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 ). |
lightbox.overlayBackground | string | Couleur de fond de la superposition. La valeur par défaut est #000000 . |
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 . |
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. |
lightbox.contentMargin | string | Marge du cadre. La valeur par défaut est 10px . |
lightbox.spinner | string | Type d’indicateur de chargement animé. Valeurs possibles : xsolla ou round . La valeur par défaut est xsolla . |
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 . |
Le script vous permet de suivre les événements de l’interface de paiement. Selon le type d’événement, vous pouvez effectuer différentes actions sur la page Web.
Liste des événements :
Paramètre | Description |
---|---|
init | Widget initialisé. |
open | Widget ouvert. |
load | L’interface de paiement (Pay Station) est chargée. |
close | L’interface de paiement (Pay Station) est fermée. |
status | L’utilisateur est sur la page d’état. |
status-invoice | L’utilisateur est sur la page d’état ; le paiement est en cours. |
status-delivering | L’utilisateur a été déplacé sur la page d’état ; le paiement a été effectué ; la notification de paiement a été envoyée. |
status-done | L’utilisateur est sur la page d’état ; le paiement est crédité sur le compte de l’utilisateur. |
status-troubled | L’utilisateur a été déplacé sur la page d’état, mais le paiement a échoué. |
https://secure.xsolla.com/paystation4/?token=TOKEN
.https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
.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.Pour ouvrir l’interface de paiement dans un iframe :
- Implémentez le mécanisme
postMessage
pour recevoir les événements de l’interface de paiement. - Ouvrez l’interface de paiement en suivant le lien
https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN
, oùTOKEN
est le jeton reçu.
Problème potentiel : Si le bouton de copie du code de confirmation de paiement, requis par certains systèmes de paiement ne s’affiche pas lors de l’ouverture de l’interface de paiement dans une iframe, passez l’attribut allow=“clipboard-read; clipboard-write; payment”
à l’iframe.
Exemple :
- html
<iframe
src="https://sandbox-secure.xsolla.com/paystation4/?token=TOKEN"
width="800"
height="700"
allow="clipboard-read; clipboard-write; payment"
></iframe>
Effectuer un paiement test
Pour tester le processus de paiement, utilisez le mode bac à sable. Il s’agit d’un environnement autonome qui reproduit toutes les fonctionnalités d’un environnement réel, à l’exception des paiements réels et des paiements refusés. Pour accéder au mode bac à sable, passez le paramètre “sandbox”: true
lorsque vous créez une commande.
Avant la signature d’un contrat avec Xsolla, le test du processus de paiement n’est disponible qu’en mode bac à sable.
Les tests n’impliquent pas de retrait d’argent d’un compte bancaire réel.
- Ouvrez l'interface de paiement en mode bac à sable.
- Choisissez le mode de paiement Carte bancaire.
- Entrez les informations de la carte bancaire. Dans les autres champs (par exemple, le nom ou l'adresse), entrez n'importe quelle donnée. Vous pouvez également indiquer des informations incorrectes (numéro de carte ou date d'expiration) pour vérifier si une erreur est générée.
- Cliquez sur Pay.
Outre les informations de la carte, vous devez indiquer le code postal si au moins l’une des conditions suivantes est vraie :
- Le pays de l’utilisateur est les États-Unis ou le Canada.
- Le numéro d’identification bancaire (BIN) indique que la carte a été émise aux États-Unis.
Vous pouvez indiquer n’importe quel code postal valide (par exemple, 12345). Il détermine le taux de la taxe de vente, mais n’affecte pas la progression du paiement test.
Les paiements par carte bancaire en mode bac à sable peuvent être effectués dans les devises suivantes : USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND, ZAR.
Pour voir les informations détaillées, y compris les frais, sur les transactions effectuées en mode bac à sable :
- Ouvrez votre Compte éditeur.
- Accédez à Accounting > Transaction registry.
- Cochez la case Show test transactions.
Vous pouvez également consulter les détails des transactions et demander des remboursements dans le Compte éditeur dans la section Support > Transaction search.
Créer une commande et ouvrir l'interface de paiement
Pour créer une commande avec les données de l’utilisateur et du bien côté Xsolla, appelez la méthode SDK XsollaCatalog.Purchase
; passez les paramètres suivants :
itemSku
— UGS de l’objet que l’utilisateur souhaite acheter.onSuccess
— fonction de rappel en cas d’achat réussi, déclenché lorsque le statut de la commande passe àdone
.onError
— fonction de rappel en cas d’erreur de requête.onBrowseClosed
— fonction de rappel en cas de fermeture du navigateur (facultatif). L’événement n’est suivi que lorsque l’utilisateur ouvre l’interface de paiement dans le navigateur intégré. Les événements liés à un navigateur externe ne sont pas suivis.purchaseParams
— paramètres d’achat et d’interface de paiement de l’utilisateur, tels que la devise et la langue (facultatif).customHeaders
— en-têtes personnalisés de la requête Web (facultatif).
La méthode XsollaCatalog.Purchase
lance le processus d’achat pour l’objet spécifié, incluant la création de la commande, l’ouverture de l’interface de paiement et le suivi de l’état de la commande. Le paramètre onSuccess contient une fonction qui est appelée lorsque le statut de la commande passe à done
.
Lorsqu’une commande est créée, Xsolla génère un jeton de paiement nécessaire pour ouvrir l’interface de paiement et effectuer le paiement.
Par défaut, la durée de vie du jeton est de 24 heures. Si vous souhaitez modifier cette valeur, contactez votre responsable de la réussite client ou envoyez un e-mail à csm@xsolla.com. La nouvelle valeur sera activée pour tous les projets de votre entreprise créés dans le Compte éditeur.
Effectuer un paiement test
Pour tester le processus de paiement, utilisez le mode bac à sable. Il s’agit d’un environnement autonome qui reproduit toutes les fonctionnalités d’un environnement réel, à l’exception des paiements réels et des paiements refusés. Pour accéder au mode bac à sable, cochez la case
Avant la signature d’un contrat avec Xsolla, le test du processus de paiement n’est disponible qu’en mode bac à sable.
Les tests n’impliquent pas de retrait d’argent d’un compte bancaire réel.
- Lancez votre application ou la scène dans l'éditeur Unity.
- Choisissez le mode de paiement Bank card.
- Entrez les informations de la carte bancaire. Dans les autres champs (par exemple, le nom ou l'adresse), entrez n'importe quelle donnée. Vous pouvez également indiquer des informations incorrectes (numéro de carte ou date d'expiration) pour vérifier si une erreur est générée.
- Cliquez sur Pay.
Outre les informations de la carte, vous devez indiquer le code postal si au moins l’une des conditions suivantes est vraie :
- Le pays de l’utilisateur est les États-Unis ou le Canada.
- Le numéro d’identification bancaire (BIN) indique que la carte a été émise aux États-Unis.
Vous pouvez indiquer n’importe quel code postal valide (par exemple, 12345). Il détermine le taux de la taxe de vente, mais n’affecte pas la progression du paiement test.
Les paiements par carte bancaire en mode bac à sable peuvent être effectués dans les devises suivantes : USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND, ZAR.
Pour voir les informations détaillées, y compris les frais, sur les transactions effectuées en mode bac à sable :
- Ouvrez votre Compte éditeur.
- Accédez à Accounting > Transaction registry.
- Cochez la case Show test transactions.
Vous pouvez également consulter les détails des transactions et demander des remboursements dans le Compte éditeur dans la section Support > Transaction search.
Créer une commande et ouvrir l'interface de paiement
- Pour créer une commande avec les données de l'utilisateur et du bien côté Xsolla, appelez la méthode
createOrderByItemSku
de la bibliothèque Store ; passez les paramètres suivants :
callback
— fonction de rappel en cas de création de commande réussie. Elle reçoit le jeton nécessaire pour ouvrir l'interface de paiement et effectuer le paiement ;
itemSku
— UGS de l'objet que l'utilisateur souhaite acheter ;
options
— paramètres de paiement (facultatif) ;
quantity
— nombre d'objets que l'utilisateur souhaite acheter (facultatif). Si la quantité n'est pas spécifiée, la valeur1
est fixée par défaut.
- Implémentez la logique d'ouverture de l'interface UI :
- kotlin
val intent = XPayments.createIntentBuilder(activity)
.accessToken(AccessToken(<payment token>))
.isSandbox(<isSandbox>)
.build()
startActivityForResult(intent, RC_PAYSTATION)
- implémentez la gestion des résultats des paiements :
- kotlin
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)
if (requestCode == RC_PAYSTATION) {
val (status, _) = XPayments.Result.fromResultIntent(data)
when (status) {
XPayments.Status.COMPLETED -> Log.d("MainActivity", "Payment completed")
XPayments.Status.CANCELLED -> Log.d("MainActivity", "Payment cancelled")
XPayments.Status.UNKNOWN -> Log.d("MainActivity", "Status unknown")
}
}
}
Effectuer un paiement test
Pour tester le processus de paiement, utilisez le mode bac à sable. Il s’agit d’un environnement autonome qui reproduit toutes les fonctionnalités d’un environnement réel, à l’exception des paiements réels et des paiements refusés. Pour accéder au mode bac à sable, appelez la méthode isSandbox
et passez true
comme argument lors de la création d’un objetIntentBuilder
.
Avant la signature d’un contrat avec Xsolla, le test du processus de paiement n’est disponible qu’en mode bac à sable.
Les tests n’impliquent pas de retrait d’argent d’un compte bancaire réel.
- Lancez votre application.
- Choisissez le mode de paiement Bank card.
- Entrez les informations de la carte bancaire. Dans les autres champs (par exemple, le nom ou l'adresse), entrez n'importe quelle donnée. Vous pouvez également indiquer des informations incorrectes (numéro de carte ou date d'expiration) pour vérifier si une erreur est générée.
- Cliquez sur Pay.
Outre les informations de la carte, vous devez indiquer le code postal si au moins l’une des conditions suivantes est vraie :
- Le pays de l’utilisateur est les États-Unis ou le Canada.
- Le numéro d’identification bancaire (BIN) indique que la carte a été émise aux États-Unis.
Vous pouvez indiquer n’importe quel code postal valide (par exemple, 12345). Il détermine le taux de la taxe de vente, mais n’affecte pas la progression du paiement test.
Les paiements par carte bancaire en mode bac à sable peuvent être effectués dans les devises suivantes : USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND, ZAR.
Pour voir les informations détaillées, y compris les frais, sur les transactions effectuées en mode bac à sable :
- Ouvrez votre Compte éditeur.
- Accédez à Accounting > Transaction registry.
- Cochez la case Show test transactions.
Vous pouvez également consulter les détails des transactions et demander des remboursements dans le Compte éditeur dans la section Support > Transaction search.
Créer une commande et ouvrir l'interface de paiement
- Pour créer une commande avec les données de l'utilisateur et du bien côté Xsolla, appelez la méthode SDK
FetchPaymentToken
; passez les paramètres suivants :
AuthToken
— jeton d'authentification utilisateur, obtenu lors de l'authentification via Xsolla Login ;
ItemSKU
— UGS de l'objet que l'utilisateur souhaite acheter ;
SuccessCallback
— fonction de rappel déclenché lors de la réception du jeton de paiement ;
ErrorCallback
— fonction de rappel d'état ;
PurchaseParams
— paramètres d'achat et d'interface de paiement de l'utilisateur, tels que la devise et la langue (facultatif).
- Implémentez l'ouverture de l'interface de paiement. Pour ce faire, appelez la méthode SDK
LaunchPaymentConsole
; passez les paramètres suivants :
WorldContextObject
— objet de contexte mondial (pour les appels C++) ;
OrderId
— ID de la commande ;
AccessToken
— jeton de paiement ;
SuccessCallback
— fonction de rappel déclenché lors de la réception du jeton de paiement ;
ErrorCallback
— fonction de rappel d'état ;
BrowserClosedCallback
— fonction de rappel an cas de fermeture du navigateur. L'événement n'est suivi que lorsque l'utilisateur ouvre l'interface de paiement dans le navigateur intégré. Les événements liés à un navigateur externe ne sont pas suivis ;
PayStationVersion
— version de Pay Station. Par défaut, la version 4 est utilisée.
Effectuer un paiement test
Pour tester le processus de paiement, utilisez le mode bac à sable. Il s’agit d’un environnement autonome qui reproduit toutes les fonctionnalités d’un environnement réel, à l’exception des paiements réels et des paiements refusés. Pour accéder au mode bac à sable, cochez la case
Avant la signature d’un contrat avec Xsolla, le test du processus de paiement n’est disponible qu’en mode bac à sable.
Les tests n’impliquent pas de retrait d’argent d’un compte bancaire réel.
- Lancez votre application ou la map dans l'éditeur Unreal.
- Choisissez le mode de paiement Bank card.
- Entrez les informations de la carte bancaire. Dans les autres champs (par exemple, le nom ou l'adresse), entrez n'importe quelle donnée. Vous pouvez également indiquer des informations incorrectes (numéro de carte ou date d'expiration) pour vérifier si une erreur est générée.
- Cliquez sur Pay.
Outre les informations de la carte, vous devez indiquer le code postal si au moins l’une des conditions suivantes est vraie :
- Le pays de l’utilisateur est les États-Unis ou le Canada.
- Le numéro d’identification bancaire (BIN) indique que la carte a été émise aux États-Unis.
Vous pouvez indiquer n’importe quel code postal valide (par exemple, 12345). Il détermine le taux de la taxe de vente, mais n’affecte pas la progression du paiement test.
Les paiements par carte bancaire en mode bac à sable peuvent être effectués dans les devises suivantes : USD, EUR, RUB, GBP, AED, ALL, AMD, ARS, AUD, AZN, BGN, BRL, BYN, CAD, CHF, CLP, CNY, COP, CZK, DKK, DZD, EGP, GEL, HKD, HRK, HUF, IDR, ILS, INR, ISK, JPY, KES, KGS, KRW, KZT, MAD, MDL, MKD, MNT, MXN, MYR, NGN, PEN, PHP, PKR, PLN, RON, RSD, SAR, SEK, SGD, THB, TRY, TWD, UAH, UYU, UZS, VEF, VND, ZAR.
Pour voir les informations détaillées, y compris les frais, sur les transactions effectuées en mode bac à sable :
- Ouvrez votre Compte éditeur.
- Accédez à Accounting > Transaction registry.
- Cochez la case Show test transactions.
Vous pouvez également consulter les détails des transactions et demander des remboursements dans le Compte éditeur dans la section Support > Transaction search.
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.