Configurer l’affichage du widget de paiement
Pour ajouter une interface de widget de paiement à votre plateforme, vous devez ajouter la bibliothèque de widget. Vous pouvez également ajuster la hauteur du widget et la gestion des événements pour améliorer l’expérience utilisateur.
Ajouter une bibliothèque de widget de paiement
Note
Pour ouvrir le widget de paiement en mode bac à sable, reportez-vous à ces instructions.
Configurer en utilisant un script
Ajoutez le script à la page du site web de votre plateforme. Dans les paramètres d’initialisation du script, passez le jeton d’autorisation obtenu à l’étape d’intégration précédente. Le script s’exécute à chaque fois que la page est chargée.Copy
<script>
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/payouts/v0/_bundles/santorelli.min.js";
s.addEventListener('load', function () {
const widget = new XPayoutsWidget.Widget({
token: '<auth token>',
theme: 'black',
size: 'fixed'
});
widget.show('<container_id>');
widget.addEventListener('load', () => {
console.log('loaded');
});
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
Configurer en utilisant un npm-package
- Exécutez la commande
npm install @xsolla/payouts-sdket installez la bibliothèque de widget. - Ajoutez un lien vers la bibliothèque sur le site de votre plateforme. Dans la requête, passez le jeton d'autorisation obtenu à l'étape d'intégration précédente.
Copy
import {Widget} from '@xsolla/payouts-sdk';
const widget = new Widget({
token: '<auth token>',
theme: 'black',
size: 'fixed'
});
widget.show('<container_id>');
widget.addEventListener('load', () => {
console.log('loaded');
});
Paramètres supplémentaires
Hauteur
Vous pouvez ajuster la hauteur du widget de paiement en passant le paramètre suivant dans le code d’initialisation :| Paramètre | Type | Description |
|---|---|---|
| string | Hauteur du widget de paiement :
|
Gestion des événements
Vous pouvez configurer la gestion des événements suivants :
loaded— chargement d’un widget dans une iframe ;tokenExpired— expiration d’un jeton ;requestWithdrawal— demande de retrait réussie ;heightResize— changement de hauteur du widget. L’événement n’est géré que si le paramètresize==‘auto’est passé.
Exemple de configuration de la gestion des événements :
Copy
widget.addEventListener('tokenExpired', () => {
console.log('tokenExpired');
});
widget.addEventListener('heightResize', ({ height }) => {
console.log(`height resize to: ${height}`);
});
widget.addEventListener('requestWithdrawal', ({ amount }) => {
console.log(`success request withdrawal, amount: ${amount}`);
});
Votre progression
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.
