Module Complémentaire Paystack

Le module complémentaire Paystack est une fonctionnalité Pro

Débloquez le module complémentaire Paystack et d'autres fonctionnalités puissantes pour développer votre entreprise.

Obtenir WPForms Pro

Souhaitez-vous accepter des paiements de clients au Nigeria, au Ghana, au Kenya ou en Afrique du Sud ? Les acheteurs de ces pays s'attendent à payer avec les méthodes qu'ils utilisent déjà tous les jours, comme les cartes locales, les virements bancaires et l'argent mobile.

Le module complémentaire Paystack connecte vos formulaires à Paystack afin que les acheteurs effectuent leur paiement dans une fenêtre contextuelle sécurisée sans quitter votre site. Ce tutoriel vous montrera comment installer et utiliser le module complémentaire Paystack avec WPForms.

Prérequis :

  • Vous aurez besoin d'une licence Pro ou supérieure pour accéder au module complémentaire Paystack.
  • Assurez-vous d'avoir installé la version 2.0.2.2 ou supérieure de WPForms pour répondre à la version minimale requise pour le module complémentaire Paystack.
  • Vous aurez besoin d'un compte Paystack enregistré au Nigeria, au Ghana, au Kenya ou en Afrique du Sud.

Avant de commencer, assurez-vous d'installer et d'activer WPForms sur votre site WordPress. Après avoir vérifié votre licence, vous pourrez rapidement installer et activer le module complémentaire Paystack.

Connecter Paystack à votre site

Une fois le module complémentaire Paystack installé et activé, vous devrez connecter votre compte Paystack à WPForms. Pour ce faire, vous copierez vos clés API de votre tableau de bord Paystack dans vos paramètres de paiement WPForms. Nous vous guiderons à travers chaque étape ci-dessous.

Obtenir vos clés API Paystack

Pour commencer, connectez-vous à votre tableau de bord Paystack. Cliquez ensuite sur Paramètres en bas du menu de gauche.

Page de paramètres avec une barre de navigation gauche sombre et un panneau droit affichant le formulaire d’informations personnelles (Nom complet, E-mail, Téléphone) sous l’onglet Profil.

Une fois sur place, ouvrez l'onglet Clés API et Webhooks.

Page de paramètres affichant l’onglet Clés API et Webhooks sélectionné avec un soulignement bleu ; bannière d’avertissement concernant les clés de test ; le formulaire affiche la clé secrète de test avec une valeur masquée et un lien « Générer une nouvelle clé secrète » sur le côté.

Paystack affiche les clés pour le mode dans lequel se trouve votre tableau de bord. Pour accepter des paiements réels, vous aurez besoin de vos clés de production, qui apparaissent sous Configuration API – Mode Production.

Remarque : Les nouveaux comptes Paystack démarrent en mode test, et les clés de production ne deviennent disponibles qu'après l'activation de votre entreprise par Paystack. Pour l'activer, ouvrez la page Conformité dans votre tableau de bord Paystack, complétez chaque section et cliquez sur Activer l'entreprise. Votre tableau de bord passe en mode production une fois que Paystack approuve vos informations. Pour les étapes complètes, consultez le guide de Paystack sur l'activation de votre entreprise.

Pendant que vous attendez l'approbation, vous pouvez toujours essayer le module complémentaire avec vos clés de test. Voir la section Tester les paiements Paystack ci-dessous.

Ensuite, cliquez sur l’icône en forme d’œil à côté de votre Clé secrète en direct. Paystack vous demandera le mot de passe de votre compte avant d’afficher la clé. Copiez ensuite la clé.

Après cela, copiez votre Clé publique en direct du champ situé en dessous.

Panneau de paramètres Clés API et Webhooks avec Clé secrète Live, liste blanche IP et URL ; icône en forme d’œil pour révéler le secret

Laissez cette page ouverte. Vous collerez les deux clés dans WPForms à l’étape suivante, et vous reviendrez ici pour ajouter votre URL de webhook.

Finaliser la connexion dans WPForms

Dans votre zone d’administration WordPress, allez dans WPForms » Paramètres et cliquez sur l’onglet Paiements.

Tout d’abord, vérifiez le paramètre Devise en haut de la page. Il doit correspondre à la devise du pays où votre compte Paystack est enregistré. Par exemple, un compte kenyan a besoin du Shilling kényan (KES).

Contrôle déroulant intitulé Devise avec Shilling kényan (KES Ksh) sélectionné. Aborde l'accessibilité en affichant le choix de devise actuel.

Remarque : Chaque compte Paystack traite les paiements dans une seule devise, définie par le pays que vous avez choisi lors de votre inscription. Si la devise de WPForms ne correspond pas, vous verrez un avertissement dans vos paramètres de paiement, et les paiements ne seront pas effectués tant que les devises ne correspondront pas.

Ensuite, faites défiler jusqu’à la section Paystack. Collez votre clé secrète dans le champ Clé secrète en direct. Collez ensuite votre clé publique dans le champ Clé publique en direct.

Formulaire de paramètres affichant les clés Paystack : bascule Mode Test désactivée, avec trois champs de saisie pour la clé secrète en direct et la clé publique en direct et des légendes explicatives sous chaque champ.

Lorsque vous avez terminé, cliquez sur Enregistrer les paramètres.

WPForms vérifie votre clé secrète avec Paystack et s’assure que les deux clés correspondent au mode dans lequel vous vous trouvez. Si une clé est mal tapée ou appartient à l’autre mode, vous verrez une erreur immédiatement. Les clés de production commencent par sk_live_ et pk_live_, tandis que les clés de test commencent par sk_test_ et pk_test_. Lorsque la connexion fonctionne, le statut de la connexion indique Connecté à Paystack en mode production.

Paramètres Paystack : Connecté en mode production ; Mode test désactivé ; Clé secrète de production masquée se terminant par bab9.

Remarque : Le mode Test et le mode Live utilisent chacun leur propre paire de clés. Pour essayer l’intégration Paystack de votre formulaire avant d’accepter de vrais paiements, consultez la section Tester les paiements Paystack ci-dessous.

Configurer les webhooks Paystack

Les webhooks sont la manière dont Paystack informe votre site des mises à jour de paiement qui se produisent après qu’un client a soumis votre formulaire. Par exemple, un webhook permet à WPForms de savoir quand un virement bancaire arrive ou lorsque vous remboursez un paiement depuis votre tableau de bord Paystack.

Paystack ne permet pas à WPForms d’ajouter un webhook pour vous. Vous copierez donc une URL de WPForms et la collerez vous-même dans votre tableau de bord Paystack. Cela ne prend qu’une minute, et vous ne devez le faire qu’une seule fois pour chaque mode.

Après avoir enregistré vos clés, 2 nouveaux paramètres apparaissent dans la section Paystack. Laissez Activer les webhooks activé. Cliquez ensuite sur l’icône de copie à côté du champ Point de terminaison des webhooks pour copier votre URL de webhook.

Paramètres des webhooks : bascule activée, texte explicatif sur les webhooks Paystack, une URL dans un champ de texte intitulé Point de terminaison des webhooks, et un bouton Copier mis en surbrillance par une flèche

Revenez maintenant à la page Clés API et Webhooks dans votre tableau de bord Paystack. Collez l’URL dans le champ URL du webhook en direct. Cliquez ensuite sur Enregistrer les modifications.

Page des paramètres avec l'onglet Clés API et Webhooks ; met en surbrillance le champ de saisie de l'URL du webhook en direct avec une URL d'exemple.

WPForms recevra désormais les mises à jour de paiement de Paystack.

Remarque : Paystack conserve des paramètres de webhook distincts pour le mode Test et le mode Live, mais WPForms utilise la même URL pour les deux. Si vous testez d’abord, collez l’URL dans le champ URL du webhook de test. Si vous utilisez les deux modes, ajoutez-la aux deux champs.

Ajouter Paystack à vos formulaires

Après avoir connecté votre compte, vous êtes prêt à accepter des paiements dans vos formulaires. Pour commencer, créez un nouveau formulaire ou modifiez-en un existant pour ouvrir le constructeur de formulaires.

Votre formulaire nécessite au moins un champ de paiement qui définit un montant, tel que Article unique, Articles multiples, Cases à cocher ou Articles de liste déroulante. Il nécessite également un champ Email, car Paystack requiert l'adresse e-mail du client. Il n'y a pas de champ Paystack distinct à ajouter. Paystack collecte les détails du paiement dans son propre popup lors de la soumission du formulaire.

Ensuite, allez dans Paiements » Paystack dans le constructeur de formulaires et activez le bouton Activer les paiements Paystack.

Tableau de bord montrant un menu de passerelle à gauche (Stripe, PayPal Commerce, Square, Authorize.Net, Paystack) avec Paystack sélectionné, et un panneau de droite pour activer les paiements Paystack comprenant des champs de description et de détails client.

Remplissez ensuite les paramètres pour les paiements de ce formulaire :

  • Description du paiement : Une courte description du paiement, telle que le nom de votre produit ou service. Elle apparaît dans les détails du paiement dans votre tableau de bord Paystack.
  • E-mail du client : Le champ de votre formulaire qui contient l'adresse e-mail du client. Ce paramètre est obligatoire. Paystack a besoin d'une adresse e-mail pour créer le paiement et envoie son reçu à cette adresse.
  • Nom du client : Le champ de votre formulaire qui contient le nom du client. Il apparaît dans les détails du paiement dans votre tableau de bord Paystack.

Si votre formulaire contient déjà un champ Email et un champ Nom, WPForms les sélectionne pour vous.

Bouton bascule pour activer les paiements Paystack avec des champs pour la description, l'e-mail et le nom en dessous

Remarque : Les paiements Paystack nécessitent la soumission de formulaire AJAX, qui est activée par défaut pour les nouveaux formulaires. Si elle est désactivée, WPForms vous le rappellera lorsque vous enregistrerez le formulaire. Pour la réactiver, allez dans Paramètres » Général, ouvrez la section Avancé et cochez Activer la soumission de formulaire AJAX.

Lorsque vous avez terminé, enregistrez votre formulaire. Il est maintenant prêt à accepter des paiements.

Comment les clients paient avec Paystack

Lorsqu'un client soumet votre formulaire, une fenêtre popup Paystack s'ouvre sur la page. Le formulaire n'est soumis qu'après que le paiement soit effectué.

Interface de paiement avec les options M-PESA à gauche et un formulaire à droite pour payer 2 500 KES ; saisissez le numéro de mobile (drapeau kényan affiché).

Les options de paiement dans le popup dépendent de la devise de votre compte Paystack :

  • Naira Nigérian (NGN) : Carte et virement bancaire
  • Cedi Ghanéen (GHS) : Carte et argent mobile
  • Shilling Kényan (KES) : Carte et argent mobile
  • Rand Sud-Africain (ZAR) : Carte

Une fois le paiement réussi, le popup se ferme et le client voit le message de confirmation de votre formulaire.

Tester les paiements Paystack

Avant de commencer à accepter de vrais paiements, il est conseillé de tester un paiement vous-même via votre formulaire. Le mode test de Paystack vous permet de réaliser tout le processus sans aucune transaction d'argent.

Activer le mode test

Pour vous assurer qu'aucun paiement réel n'est traité pendant vos tests, allez dans WPForms » Paramètres et cliquez sur l'onglet Paiements.

Sous Paystack, activez le bouton Mode Test. Les champs Clé Secrète de Test et Clé Publique de Test apparaîtront à la place des champs en direct.

Remarque : Le mode Test et le mode réel sont configurés séparément, vous devrez donc ajouter vos clés de test ici même si vous avez déjà connecté vos clés réelles. WPForms vous le rappellera lorsque vous changerez de mode.

Ensuite, retournez à la page Clés API & Webhooks dans votre tableau de bord Paystack. Si votre tableau de bord est en Mode Live, utilisez le bouton en haut à droite du tableau de bord pour passer en Mode Test.

Copiez votre Clé secrète de test et collez-la dans le champ Clé secrète de test dans WPForms. Faites ensuite de même pour votre Clé publique de test.

Cliquez sur Enregistrer les paramètres. L'État de la connexion indiquera Connecté à Paystack en mode Test.

Écran des paramètres Paystack : connexion en direct en mode Test, avec une coche verte indiquant le statut connecté, et des champs pour la clé secrète de test et la clé publique de test avec un texte explicatif sous chaque champ.

Pour recevoir des webhooks pendant les tests, collez également l'URL de votre Point de terminaison des webhooks dans le champ URL de webhook de test de votre tableau de bord Paystack.

Effectuer un paiement test

Ensuite, ouvrez une page contenant votre formulaire Paystack et remplissez-la comme le ferait un client. Soumettez ensuite le formulaire pour ouvrir la fenêtre contextuelle Paystack.

En mode test, l'option Carte affiche des scénarios de test au lieu des champs de carte. Sélectionnez Succès et cliquez sur le bouton Payer pour effectuer un paiement de test réussi. Pour voir comment votre formulaire gère un paiement échoué, choisissez plutôt Refusé.

Flux de paiement de test avec options : Succès (Visa) sélectionné, Authentification bancaire, Refusé ; bouton Payer vert en dessous

Pour saisir vous-même les détails de la carte, cliquez sur Utiliser une autre carte et utilisez l'une des cartes de test de Paystack. Par exemple, le numéro de carte 4084 0840 8408 4081 avec le CVV 408 et une date d'expiration future quelconque permet d'effectuer un paiement réussi. La même page répertorie également les numéros de test pour les transferts bancaires et mobiles.

Voir vos paiements test

Pour trouver vos paiements de test, accédez à WPForms » Paiements et activez le bouton Données de test.

En-tête Résumé des paiements avec une bascule Données de test orange, un sélecteur Derniers 30 jours, une icône d'engrenage et une bannière d'avertissement "Affichage des données de test".

Cliquez sur un paiement pour voir ses détails. À partir de là, le lien Voir dans Paystack ouvre la transaction dans votre tableau de bord Paystack.

Détails du paiement #232 : total 3 500 Ksh, paiement Visa unique, coupon N/A ; statut Terminé. Boutons : Voir dans Paystack et Rembourser.

Pour en savoir plus sur les détails des paiements, les statuts et les tendances, consultez notre guide sur la visualisation et la gestion des paiements.

Configuration de la logique conditionnelle (facultatif)

La logique conditionnelle vous permet de décider quand une transaction Paystack doit être traitée, en fonction de ce que le client sélectionne dans votre formulaire. Par exemple, vous pourriez seulement vouloir facturer les clients qui choisissent une option payante.

Pour configurer cela, allez dans Paiements » Paystack dans le constructeur de formulaires et activez Activer la logique conditionnelle. Ensuite, construisez la règle qui décide quand traiter la transaction.

Interface du constructeur de logique conditionnelle : interrupteur avec icône d'aide et une règle "Traiter cette charge si la taille du gâteau est Grande (pour 20 personnes)" ; bouton Ajouter un nouveau groupe et icône de suppression à proximité.

Pour plus d'exemples, consultez notre tutoriel sur l'utilisation de la logique conditionnelle.

Questions fréquemment posées

Ci-dessous, nous avons abordé certaines des questions les plus courantes concernant l'utilisation du module complémentaire Paystack.

Quels pays et quelles devises puis-je utiliser avec le module complémentaire Paystack ?

Le module complémentaire fonctionne avec les comptes Paystack enregistrés au Nigeria, au Ghana, au Kenya et en Afrique du Sud. Chaque compte traite les paiements dans la devise de son pays : Naira nigérian (NGN), Cedi ghanéen (GHS), Shilling kényan (KES) ou Rand sud-africain (ZAR). Définissez la devise correspondante dans WPForms » Paramètres » Paiements.

Pourquoi mon paiement Paystack est-il marqué comme en attente ?

Les virements bancaires et les paiements par mobile money peuvent prendre un peu plus de temps à confirmer que les paiements par carte. Si un client choisit l'une de ces options et ferme la fenêtre contextuelle avant que Paystack ne confirme le paiement, WPForms enregistre l'entrée et marque le paiement comme En attente.

Jusqu’à ce que le paiement soit confirmé, WPForms retient les e-mails de notification du formulaire. Il attend également d’activer les comptes créés avec le module complémentaire d’inscription d’utilisateur et de compter l’utilisation de tout coupon. Une fois que Paystack confirme le paiement, WPForms le marque comme Terminé et termine ces étapes. Avec les webhooks configurés, cela prend généralement quelques secondes. Sans eux, cela peut prendre jusqu’à 30 minutes.

Dois-je configurer des webhooks ?

Nous le recommandons. Sans webhooks, WPForms vérifie auprès de Paystack toutes les 15 minutes et met à jour les paiements qui sont encore en attente, de sorte que les virements bancaires et les paiements par mobile money soient toujours complétés. Les paiements par carte restent en cours de traitement jusqu’à 30 minutes jusqu’à ce que cette vérification les marque comme complétés. Cependant, les remboursements que vous effectuez dans votre tableau de bord Paystack ne seront pas synchronisés avec WPForms.

Si WPForms constate que les paiements ne sont mis à jour que par ces vérifications, il affiche un avis dans votre administration WordPress vous demandant de vérifier votre configuration de webhook. Pour y remédier, copiez l’URL du Point de terminaison des webhooks depuis WPForms » Paramètres » Paiements dans le champ URL du webhook pour le mode que vous utilisez dans votre tableau de bord Paystack.

Pourquoi mon formulaire indique-t-il « Paiements actuellement indisponibles » ?

Ce message apparaît lorsque WPForms ne peut pas traiter un paiement Paystack sur votre formulaire. Voici les causes les plus courantes et comment résoudre chacune d’elles :

  • Paystack n’est pas connecté dans le mode actuel : Par exemple, le mode test est activé, mais aucune clé de test n’est enregistrée. Allez dans WPForms » Paramètres » Paiements et ajoutez les clés pour le mode que vous utilisez.
  • Les devises ne correspondent pas : Paystack ne traite les paiements que dans la devise de votre compte, donc la modification de la devise de WPForms interrompt les paiements. Rétablissez la devise pour qu’elle corresponde à votre compte Paystack.
  • La soumission de formulaire AJAX est désactivée : Les paiements Paystack nécessitent la soumission de formulaire AJAX, et certains modèles de formulaire, y compris les modèles d’inscription d’utilisateur, l’ont désactivée par défaut. Pour l’activer, ouvrez les paramètres de votre formulaire » Général, développez Avancé et cochez Activer la soumission de formulaire AJAX.

Pourquoi vois-je « Le montant du paiement est inférieur au minimum autorisé » ?

Paystack définit un montant minimum pour chaque devise, et WPForms vérifie le total avant d’ouvrir la fenêtre contextuelle. Les minimums sont de 50 NGN, 0,10 GHS, 3 KES et 1 ZAR. Si le total de votre formulaire peut tomber en dessous de ce montant, ajustez vos prix ou utilisez la logique conditionnelle pour ignorer les frais pour ces commandes.

WPForms stocke-t-il les détails de carte de mes clients ?

Non. La fenêtre contextuelle Paystack est hébergée par Paystack, donc les détails de carte vont directement à Paystack et ne touchent jamais votre site. WPForms enregistre uniquement l’enregistrement du paiement, ainsi que la marque de la carte et les 4 derniers chiffres pour votre référence.

C’est tout ! Vous pouvez maintenant accepter les paiements par carte, virement bancaire et argent mobile via le module complémentaire WPForms Paystack.

Ensuite, vous souhaitez surveiller de plus près les paiements qui arrivent via vos formulaires ? Consultez notre guide sur la visualisation et la gestion des paiements pour en savoir plus sur les détails des paiements, les statuts et les remboursements.

Le meilleur plugin de création de formulaires par glisser-déposer pour WordPress

Facile, rapide et sécurisé. Rejoignez plus de 6 millions de propriétaires de sites Web qui font confiance à WPForms.