Comment ouvrir l’interface de paiement
Avant la signature du contrat avec Xsolla, vous pouvez tester le processus de paiement uniquement en mode « bac à sable ». En cas d’erreurs, voir leurs descriptions.
Pour ouvrir l’interface de paiement en mode bac à sable, utilisez l’URL suivante : https://sandbox-secure.xsolla.com/paystation4/?token=ACCESS_TOKEN
, où ACCESS_TOKEN
est le jeton obtenu à l’étape précédente.
Nouvelle fenêtre
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.
https://secure.xsolla.com/paystation4/?token=TOKEN
.- Avec Pay Station Embed. Limites : des problèmes peuvent survenir lors de son ouverture dans le navigateur en jeu (WebView).
- Dans un iframe. Limites : des problèmes peuvent survenir lors de son ouverture dans le navigateur en jeu (WebView) et dans la version mobile de votre application.
Pay Station Embed
- 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.Iframe
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.
Cet article vous a été utile ?
Évaluer cette page
Préfère ne pas répondre
Merci pour votre commentaire !
Poursuivre la lecture
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.