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ètresDescription
checkoutSessionL'ID de session de paiement pour le paiement que vous souhaitez surveiller
countryCodeLe code pays pour le processus de paiement. Voir Couverture par pays pour les pays pris en charge
languageLangue pour l'affichage du statut. Options prises en charge : en, fr, jp
yunoPaymentResultFonction 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_PAY
  • CREATED
  • SUCCEEDED
  • REJECTED
  • CANCELLED
  • ERROR
  • DECLINED
  • PENDING
  • EXPIRED
  • VERIFIED
  • REFUNDED
👍

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.js modifié. 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 fonction yunoPaymentResult vous pouvez gérer le résultat du statut dans votre propre version du script status-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.