Comment configurer les paiements Stripe dans les formulaires Joomla et WordPress avec ChronoForms8

Étape 1 : Installer ChronoForms8

Assurez-vous d'avoir la dernière version de ChronoForms 8 pour Joomla ou WordPress installée sur votre site web, les dernières mises à jour peuvent être trouvées sur la page officielle des Téléchargements

Étape 2 : Ajouter l'action Stripe à votre formulaire

Nous redirigeons vers Stripe après la soumission du formulaire, nous avons donc placé l'action Stripe dans l'événement Soumettre de la première page du formulaire :

Étape 3 : Configurer l'action Stripe

Ensuite, nous devons configurer l'action Stripe. Voici comment notre action Stripe doit être configurée :

1. La Clé secrète peut être trouvée dans les paramètres de votre compte Stripe sous la section Développeurs > Clés API : https://dashboard.stripe.com/apikeys
2. La Clé publiable peut être trouvée sur la même page de votre compte Stripe avec votre Clé secrète
3. L'URL de succès est l'endroit où votre client sera redirigé après avoir complété l'achat avec succès, il peut s'agir de n'importe quelle URL sur votre site web
4. L'URL d'annulation est l'endroit où votre client sera redirigé s'il annule l'achat, il peut s'agir de n'importe quelle URL sur votre site web
5. Le Fournisseur de produits est un tableau multidimensionnel pour les produits à lister sur la page d'achat Stripe, le tableau doit contenir des sous-tableaux avec au moins les clés nom, description, prix et quantité, voici un exemple de la façon dont nous avons configuré l'action php17 pour retourner le tableau dont nous avons besoin, nous utilisons ensuite la variable {var:php17} pour alimenter ce tableau au fournisseur de produits Stripe :
   
6. La description du paiement est une chaîne de caractères pour décrire l'ensemble du paiement et sera affichée sur la page de paiement Stripe.

Étape 4 : Générer, stocker et envoyer à Stripe un identifiant de commande unique

Vous pouvez générer un identifiant de commande et le stocker dans la base de données AVANT de rediriger vers Stripe, vous pouvez le faire en utilisant l'action Variables avec le code court {str:uuid} :

Ensuite, nous pouvons l'enregistrer en utilisant l'action Enregistrer les données comme montré ci-dessous, veuillez noter que "order_id" doit être remplacé par le nom de la colonne de la table contenant l'order_id

Nous pouvons ensuite transmettre cette valeur à Stripe en utilisant la variable ID personnalisé sous le comportement Paramètres de redirection :

Étape 5 : Configurer l'action Écouteur Stripe pour recevoir les notifications de webhook de paiement de Stripe

Sur le même formulaire, ajoutez une nouvelle page, changez le Groupe de page en "webhook" et notez le nom de la page :

Dans votre page de webhooks Stripe, utilisez le lien : https://www.domain.com/LIVE-LINK-TO-YOUR-FORM?chronopage=page20&output=ajax

Remplacez "page20" par votre Alias de page

Sous l'événement Charger de la page webhook, ajoutez l'action Écouteur Stripe et configurez les mots secrets et choisissez un nom pour l'ID personnalisé que nous avons envoyé à Stripe précédemment.

Vous devrez ensuite activer le comportement Exécuter les événements, et activer l'événement "On Payment Success", et glisser une action "Save Data" en dessous comme indiqué au point #7

Étape 6 : Mettre à jour votre table de base de données des commandes

Vous pouvez ensuite mettre à jour votre table de base de données en utilisant l'identifiant de commande que nous avons reçu de Stripe :

Utilisez le comportement Modifier la source de données pour mettre à jour le champ de la table marquant la commande comme terminée, nous utilisons ici un champ "order_complete" :

Tester l'activité de l'Écouteur Stripe

Dans certains cas, vous devrez peut-être vous assurer que l'Écouteur Stripe est accessible par la passerelle Stripe, vous pouvez le faire en :

1. Ajoutant une vue Message avec du contenu AU-DESSUS de l'écouteur et en collant le lien de l'Écouteur dans la barre d'adresse de votre navigateur :
   https://www.domain.com/LIVE-LINK-TO-YOUR-FORM?chronopage=page20&output=ajax
   si vous pouvez voir le message, cela signifie que l'Écouteur est accessible par Stripe
2. Afin de tester les appels Stripe à l'écouteur, vous pouvez remplacer le message par une action email factice, assurez-vous que seuls les champs Destinataires, Sujet et Corps sont remplis, puis exécutez le même test ci-dessus OU effectuez une transaction test, vous devriez recevoir l'email si tout est configuré correctement.