Smart Checkout de Viva.com vous permet d’accepter des paiements en ligne via une page de paiement hébergée.
Ce guide présente les principales étapes pour intégrer Smart Checkout à votre site web ou à votre application, depuis la configuration de votre compte Viva.com et de votre source de paiement jusqu’à la redirection des clients et à la vérification du résultat du paiement.
1. Choisissez votre environnement Viva.com
Viva.com propose deux environnements. Assurez-vous d’utiliser l’environnement qui correspond à ce que vous souhaitez faire.
Environnement | Utilisez-le pour | Pour commencer |
Production | Accepter des paiements réels | |
Démo | Tester votre intégration et effectuer des paiements de test |
Assurez-vous de travailler dans le bon environnement lors de la configuration et du test de votre intégration.
2. Créez une source de paiement pour les paiements en ligne
Une source de paiement contient les paramètres utilisés par Viva.com pour les paiements effectués via votre site web ou votre application.
Lors de la configuration de votre source de paiement, configurez votre nom de domaine et les URL vers lesquelles les clients doivent être redirigés après avoir terminé le processus de paiement.
Par exemple :
une page de confirmation, telle que « Merci pour votre commande »
une page d’échec, telle que « Un problème est survenu lors de votre paiement »
Pour créer une source de paiement pour les paiements en ligne, accédez à Ventes > Paiements en ligne dans votre tableau de bord Viva.com.
Après avoir créé la source de paiement, enregistrez son code à 4 chiffres. Vous aurez besoin de ce code lors de la configuration de votre intégration.
Exemple de configuration d’une source de paiement avec le code 2861
Pour obtenir des instructions de configuration détaillées, consultez Source pour les paiements en ligne | Support Viva.com.
3. Intégrez Smart Checkout
L’intégration de Smart Checkout comprend trois étapes principales :
Étape 1 : Créez un ordre de paiement
Avant de demander un paiement à un client, créez un ordre de paiement.
Chaque ordre de paiement se voit attribuer un identifiant unique à 16 chiffres, appelé orderCode.
Créez l’ordre de paiement depuis votre serveur à l’aide de Create Payment Order API, puis transmettez l’orderCode à votre site web ou à votre application.
Pour consulter les paramètres de l’API et les détails d’implémentation, rendez-vous sur Viva.com Developer Portal. Dans le menu de gauche, sélectionnez APIs for payments, puis Payment API. Sous Payments, sélectionnez Create payment order.
Étape 2 : Redirigez le client vers Smart Checkout
Après avoir créé l’ordre de paiement, redirigez le client vers Smart Checkout. Le client peut alors saisir ses informations de paiement et terminer le processus de paiement sur la page Smart Checkout.
Étape 3 : Gérez le retour du client et vérifiez le résultat du paiement
Après le processus de paiement, le client est redirigé vers l’URL configurée pour le résultat correspondant :
URL si succès pour les paiements réussis
URL si échec pour les paiements échoués
Vous pouvez configurer ces URL dans votre tableau de bord Viva.com sous Ventes > Paiements en ligne > Site internet / Apps.
Vérifiez le résultat du paiement
Vérifiez le statut de la transaction dans votre système à l’aide des informations de paiement renvoyées par Viva.com. Les informations de transaction utilisées pour la validation comprennent :
AmounttransactionIdstatusId
Viva.com propose les méthodes suivantes pour vérifier le résultat du paiement.
Webhooks
Les Webhooks permettent à votre système de recevoir des notifications concernant la réussite ou l’échec d’un paiement et prennent en charge les méthodes de paiement synchrones et asynchrones.
Pour obtenir des informations sur l’implémentation, les paramètres des événements et des exemples de payloads, rendez-vous sur Viva.com Developer Portal et sélectionnez Webhooks For Payments dans le menu.
Retrieve Transaction API
Vous pouvez également récupérer les informations d’une transaction à l’aide de Retrieve Transaction API. Pour consulter les paramètres de l’API et les détails d’implémentation, rendez-vous sur Viva.com Developer Portal. Dans le menu de gauche, sélectionnez APIs for payments, puis Payment API. Sous Transactions, sélectionnez Retrieve transaction.
Paramètres facultatifs de Smart Checkout
Vous pouvez également configurer des paramètres Smart Checkout supplémentaires en fonction des besoins de votre intégration.
Affichez le logo de votre entreprise
Vous pouvez ajouter le logo de votre entreprise à Smart Checkout via les paramètres de votre source de paiement. Pour obtenir des instructions, rendez-vous sur Viva.com Developer Portal, accédez à Tutorials, sélectionnez Smart Checkout Configuration, puis cliquez sur Add your brand logo.
Veillez à importer un logo net et de taille appropriée pour garantir un affichage optimal.
Affichez un bouton Annuler
Vous pouvez configurer un bouton Annuler dans les paramètres de Configuration avancée de la source de paiement. Cela permet aux clients d’annuler leur commande.
Le bouton Annuler est pris en charge pour les intégrations directes de Smart Checkout et les plugins pour Shopify et PrestaShop.
Vous pouvez également configurer des webhooks pour recevoir des notifications concernant les événements d’annulation de commande. Rendez-vous sur Viva.com Developer Portal, sélectionnez Webhooks For Payments, puis Order Updated pour obtenir plus d’informations.
Options de paiement supplémentaires
Smart Checkout prend également en charge des configurations de paiement supplémentaires, notamment :
Paiements récurrents : le commerçant déclenche automatiquement les débits selon un calendrier prédéfini après le premier paiement.
Préautorisations : un montant est réservé et le transfert des fonds est effectué ultérieurement.
Pour obtenir des informations techniques sur l’implémentation et découvrir les autres configurations Smart Checkout disponibles, rendez-vous sur Viva.com developer portal.
Vous avez encore besoin d’aide ? Notre équipe est à votre disposition. Veuillez nous contacter via l’option Discutez avec nous de votre compte Viva.com.