Configurer l’achat d’objets

Créer une commande côté serveur 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 payment token for purchase. 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.

Limites :

Vous devez passer le pays ou l’adresse IP de l’utilisateur dans la requête de jeton de paiement. Ces données permettent au système de déterminer la devise d’achat, la langue de l’interface de paiement et de calculer les taxes.
Si la devise n’est pas passée dans le jeton, elle est déterminée en fonction du pays.
Si la devise est passée dans le jeton, l’utilisateur paie dans cette devise.
Dans le paramètre user_id, passez l’ID de l’utilisateur dans votre système d’authentification. Cet ID est utilisé pour valider l’utilisateur avant un achat. Lors des tests, vous pouvez passer un symbole aléatoire dans ce paramètre.

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.

Ouvrir l'interface de paiement

Cette option d’ouverture de l’interface de paiement ne permet pas de vendre des clés de jeu. Pour vendre des clés de jeu, suivez ces instructions.

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.

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é.

Si vous souhaitez initialiser l’ouverture de l’interface de paiement, utilisez le lien suivant : https://secure.xsolla.com/paystation4/?token=TOKEN.

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.

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.

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.

Liste des cartes de test

Voir la liste des cartes bancaires de test.

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.

En mode bac à sable, vous pouvez tester le paiement unique et le paiement par modes de paiement enregistrés en utilisant des cartes bancaires ou PayPal.

Pour voir les transactions effectuées en mode bac à sable :

Ouvrez votre Compte éditeur.
Accédez à Accounting > Transaction registry.
Cochez la case Show test transactions.

Votre progression

Dernière mise à jour: 4 Septembre 2024

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

Your browser is not supported. Please try a different browser

Payments

Configurer l’achat d’objets

Créer une commande côté serveur de l'application

Ouvrir l'interface de paiement

access_token

sandbox

lightbox

lightbox.width

lightbox.height

lightbox.zIndex

lightbox.overlayOpacity

lightbox.overlayBackground

lightbox.modal

lightbox.closeByClick

lightbox.closeByKeyboard

lightbox.contentBackground

lightbox.contentMargin

lightbox.spinner

lightbox.spinnerColor

childWindow

childWindow.target

Effectuer un paiement test