Statut de Paiement
Pour surveiller les paiements, vous pouvez utiliser l'une des solutions de surveillance de statut fournies par Yuno. Vous avez le choix entre deux options :
- Statuts: Vous pouvez utiliser le SDK Status pour informer l'utilisateur du processus de paiement. Il fournit des informations visuelles pour les clients.
- Status Lite: Vous pouvez utiliser le SDK Status Lite pour obtenir des informations sur le statut de paiement actuel. Cependant, le Status Lite ne monte aucun élément d'interface utilisateur.
Les deux solutions s'initialisent de la même manière. Après avoir ajouté le SDK Yuno à votre système et créé une instance, consultez la solution de statut souhaitée pour apprendre à l'utiliser.
Étape 1 : Inclure la bibliothèque dans votre projet.
Assurez-vous que le fichier SDK Yuno est inclus dans votre page web avant de fermer la balise <body> . Consultez l'exemple ci-dessous :
<script src="https://sdk-web.y.uno/v1.5/main.js"></script>Étape 2 : Initialiser le SDK avec la clé publique
Dans votre application JavaScript, créez une instance de la classe Yuno en fournissant une PUBLIC_API_KEYvalide. Consultez la Obtenir vos identifiants API valide.
Comme dans l'exemple ci-dessous, utilisez la classe initialisée attribuée à la constante yuno : Classe de données
<script src="https://sdk-web.y.uno/v1.5/main.js"></script>Une fois que vous avez créé l'instance, choisissez d'utiliser la solution Status ou Status Lite pour accéder au statut de paiement.
Étape 3 : Utiliser Status
Pour utiliser le Status, vous devez le monter. Utilisez la fonction mountStatusPayment pour définir la checkoutSession relative au paiement, le countryCode, la fonction languageet le rappel yunoPaymentResult.
Le rappel sera exécuté lorsque le statut est reçu, informant l'utilisateur. Il n'est pas nécessaire de définir l'élément où monter le Status puisqu'il couvrira tout l'écran. Le bloc de code suivant montre un exemple de la configuration des paramètres :
yuno.mountStatusPayment({
checkoutSession: '438413b7-4921-41e4-b8f3-28a5a0141638',
countryCode: 'FR',
language: 'fr',
yunoPaymentResult(data) {
console.log('yunoPaymentResult', data)
}
})Paramètres
| Paramètres | Description |
|---|---|
checkoutSession | L'ID de session de paiement pour le paiement que vous souhaitez surveiller |
countryCode | Le code pays pour le processus de paiement. Voir Couverture par pays pour les pays pris en charge |
language | Langue pour l'affichage du statut. Options prises en charge : en, fr, jp |
yunoPaymentResult | Fonction de rappel qui reçoit le statut du paiement. Le paramètre de données peut être 'READY_TO_PAY', 'CREATED', 'SUCCEEDED', 'REJECTED', 'CANCELLED', 'ERROR', 'DECLINED', 'PENDING', 'EXPIRED', 'VERIFIED', 'REFUNDED' |
Utiliser Status Lite
Pour recevoir le statut de paiement actuel en utilisant Status Lite, vous devez appeler la méthode yunoPaymentResult en fournissant la checkoutSession liée au paiement, comme le montre l'exemple ci-dessous :
const status = await yuno.yunoPaymentResult(checkoutSession)Le champ yunoPaymentResult retourne le statut de paiement actuel sans rendre d'éléments d'interface utilisateur (UI). Le statut retourné peut être l'une des valeurs suivantes :
READY_TO_PAYCREATEDSUCCEEDEDREJECTEDCANCELLEDERRORDECLINEDPENDINGEXPIREDVERIFIEDREFUNDED
Intégration de Statut de Paiement PersonnaliséSi vous préférez utiliser votre propre page de Statut de Paiement personnalisée au lieu de personnaliser celle fournie par notre SDK, vous pouvez le faire en éditant le fichier HTML pour vous connecter à un script
status-lite.jsmodifié. Cela vous permet de personnaliser entièrement l'apparence et le comportement de l'affichage du statut de paiement tout en utilisant la fonctionnalité de statut de Yuno. Par exemple, après avoir appelé la fonctionyunoPaymentResultvous pouvez gérer le résultat du statut dans votre propre version du scriptstatus-lite.js, qui mettra ensuite à jour votre fichier HTML personnalisé.
Restez informé
Visitez le journal des modifications pour les dernières mises à jour du SDK et l'historique des versions.
Mise à jour il y a 26 jours