Comment intégrer la passerelle de paiement Paygate (Togo) à Laravel?
Bonjour les passionnés de Laravel. Dans cet article, nous verrons comment intégrer la passerelle de paiement Paygate à votre projet Laravel.
Vous vous êtes décider de faire du business en ligne avec l’e-commerce ou tout autre service où vous devez recevoir des paiements?
Vous êtes freelance et un client vous demande de lui développer un site web (ou application web/mobile) sur lequel les clients peuvent payer via Flooz ou T-money?
Lorsque vous devez travailler sur un tel projet, deux choix soffrent à vous :
1 — L’intégration des API des réseaux mobiles disponibles
Vous ferez des démarches vers les compagnies de télécommunication Moov et Togocel (TogoCom maintenant) afin de signer un contrat et d’avoir accès à leur API et à sa documentation. Vous trouverez quelques informations utiles sur les formalités de Flooz ici : https://github.com/Tech228/FloozAPI
2 — Utiliser les aggrégateurs de moyens de paiment en ligne
L’avantage est que celà vous évite les démarches et vous aide à aller beaucoup plus rapidement.
L’aggrégateur plus connu et le plus facile à intégrer est paygate.
Dans ce tutoriel, nous travaillerons dans un environnement local. Nous utiliserons deux super outils à savoir : Ngrok (pour exposer notre appli locale sur internet) et Guzzle Http (pour faire des requêtes vers l’api de paygate).
Avant de commencer, retenez ceci :
Paygate ne dispose pas encore de sandbox, c’est à dire qu’il n’y a pas encore d’environnement de test disponible. Ainsi, je vous conseil de faire des tests avec des micro frais de transaction.
Vous pouvez transférer à partir de 1 FCFA et même 0 FCFA via T-Money. Par contre le minimum sur Flooz est à 150F.
En fin vous devez fournir les infos à savoir : Nom de la Société ou du Produit & Numéro d’Identification Fiscale sans quoi, vous ne recevrez pas de confirmation de paiements.
Trève de bavardages, commençons par créer gratuitement notre compte sur paygate.
Étape 1 : Créer votre compte paygate
La création de compte est très simple. Rendez-vous sur : https://paygateglobal.com/nouveau-compte pour ouvrir un compte et le valider.
Une fois votre compte créé, vous serez redirigé directement sur votre tableau de bord.
Vous devez forcément mettre à jour votre profil avant de commencer à utiliser l’API de paygate. Comme je l’ai mentionné plus haut, n’oubliez pas de renseigner le Nom de la Société ou du Produit et le Numéro d’Identification Fiscale.
L’une des étapes de validation de votre compte c’est la vérification du numéro de téléphone que vous aviez fourni. Ceci devrait normalement vous permettre de faire vos retraits au moment venu.
Étape 2 : Intégration à un projet existant
Nous allons utiliser un projet laravel préexistant afin de nous concentrer sur l’éssentiel du sujet. Clonez ou téléchargez donc ce projet sur github ici.
Vocici le lien du guide d’intégration : https://www.paygateglobal.com/guide, n’hézitez pas à lire toute la page et à poser vos questions dans les commentaires.
Dans un premier temps, nous allons utiliser la méthode la plus simple et la plus complète supportant Flooz et T-money. Elle consiste à rediriger vos clients sur la page de paiement de paygate.
Demande de paiement (Méthode 2 : GET)
Il s’agit de la méthode de redirection vers le portal de paiement de paygate.
Ici le scénariot est simple, lorsque le client clique sur le boutton de paiement (checkout), nous allons enregistrer sa commande (mettre le status du paiement en attente) et ensuite le rediriger vers la page de paiement de paygate.
Voici une façon d’enregistrer la commande et de démarrer la transaction.
Notez que vous pouvez faire saisir à l’utilisateur son numéro de téléphone et le réseau (MOOV ou TOGOCEL). Ceci vous permettra de rediriger sur le formulatire paygate avec ces informations. Ainsi le client n’aura qu’à appuyer sur “CONTINUER” tout simplement.
Il est recommandé de prévenir les utilisateurs qu’ils seront dirigés sur un portal de paiement, ce qui est tout à fait transparent et intuitif.
Une fois l’utilisateur de retour sur votre site, vous l’affichez un message de paiement en attente ou effectué selon la réponse que vous recevrez de paygate.
Il est à noter que vous pouvez tester cette méthode dans votre navigateur web afin de simuler un paiement. Pour se faire, copier le lien d’exemple en dessous de la section “Demander un paiement — Méthode 2” sur la doc, éditer le lien en changeant les valeurs des paramètres.
Une fois que le réseau et le montant du paiment définis, appuyez sur continuer, vous serez redirigé sur une page de confirmation.
NB : N’oubliez pas de passer le paramètre « url » qui “sert idéalement, à ramener le client sur une page de votre application web”.
En cas de flooz, un message ussd push sera envoyé sur le numéro de téléphone entré par l’utilisateur.
En cas de T-Money, la redirection se fera sur une confirmation de code PIN.
Une fois le paiment terminé, Paygate fera une redirection sur votre site web, et confirmera le paiement si ce dernier a réussi.
Demande de paiement (Méthode 1 : POST)
Cette méthode ne marche qu’avec Flooz pour le moment. Sa particularité est qu’elle vous permet de garder vos utilisateurs dans votre application à chaque transaction.
Ici, nous allons enregistrer également la commande et initier la requête POST avec le client HTTP de Guzzle.
Message de confirmation d’un paiement
Cette partie est importante, parce qu’elle constitue l’étape finale de la transaction. C’est à la réception de la reponse de confirmation que vous aller éffectuer un certains nombres d’actions dans votre application. C’est à ce niveau que nous devons nous assurer d’avoir fourni notre URL de retour (Callback URL) à paygate.
Définissons une route de confirmation dans le fichier web/api.php
La méthode ci-dessous, nous permet de mettre à jour l’état de la transaction une fois que paygate aura renvoyé les informations de confirmation.
En suite installez ngrok et exposez l’application sur internet en spécifiant le port avec la commande ngrok http 8000.
Vous aurez cette interface dans votre terminal
Copiez donc l’adresse en https et ajouter le chemin api/confirmation
Une fois tout terminé, testez pour vous assurer que tout fonctionne parfaitement.
Etape 3 : Retraits d’argent
En réalité il y’a deux acteurs dans tout ce processus : l’e-commerçant (celui qui s’inscrit sur paygate), et le développeur (celui qui fait l’intégration). Ainsi cette partie ne vous concerne directement pas en tant que développeur, à moins que vous soyez l’initiateur du projet.
Pour faire un retrait, rendez-vous sur votre espace, cliquez sur l’onglet “Demandes de remboursement” puis sur le boutton “Nouvelle demane”, vous aurez le modal ci-dessous, et vous mettez mon numéro 😜.
Pour les retraits automatiques (lancés depuis votre application), veuillez contacter Paygate pour en savoir plus.
En résumé
Pour recevoir des paiements dans votre applications,
- vous devez avoir un compte (avec les infos de profil remplis) sur Paygate ;
- lire en suite la documentation de l’api afin de comprendre comment l’intégrer dans votre projet ;
- vous avez le choix entre la méthode POST ou GET (récommendée) pour permettre aux clients d’éffectuer les paiements ;
- tester la méthode GET dans votre navigateur avant de l’intégrer dans votre application ;
- vous devez enregistrer le paiement avec un identifiant précis dans un prermier temps ;
- et le mettre à jour après confirmation par paygate
- vous pourriez suivre les differents paiements dans l’onglet transactions.
Et c’est la fin
Et après? C’était mon tout premier article sur medium. J’ai passé un bon moment à l’écrire. Je suis ravi de publier plus d’articles et de continuer ce format d’article avec d’autres techno comme : Wordpress, NodeJs, PHP, Django ou peut-être dans une application mobile.
Retenez que je ne suis pas un guru du coup si vous trouvez que certains points n’ont pas été abordés ou que la logique est mal implémentée, n’hésiter pas à partager vos apports, suggestions et expériences, celà me fera plaisir!
J’ai aussi créé un repo GitHub pour ce tutoriel, contenant le code source complet.
Tout commentaire est apprécié et je serais ravi d’échanger avec vous. Si vous avez des questions, n’hésitez pas à les poser. Merci pour la lecture!😘️
