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). |
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. |
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
postMessagepour 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ùTOKENest 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>
Poursuivre la lecture
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.
