Formulaire de devis WordPress avec Stripe : guide de configuration

L’assistant IA est facultatif. Vous pouvez créer les mêmes étapes manuellement et revoir les prix avant de connecter Stripe.

Commencez dans l’écran des formulaires du plugin et ouvrez l’assistant IA. Décrivez le modèle économique, les packages, les champs nécessaires et l’intention de paiement. Pour cet exemple, le prompt demande un formulaire de devis de projet web qui vend des packages de sites en ligne.

Le but n’est pas de publier le résultat de l’IA à l’aveugle. Utilisez-le pour obtenir plus vite un premier brouillon structuré : sélection de package, services optionnels, champs de contact, récapitulatif final et étape de paiement.

Après la génération, examinez le constructeur avant de toucher aux réglages de paiement. La première version doit déjà contenir les grandes étapes du parcours acheteur : choix du package, détails du projet, options, coordonnées et paiement.

Renommez les libellés, retirez les questions inutiles et décrivez une offre claire. Vérifiez ce que le visiteur réserve ou paie.

Revenez à la liste des formulaires et confirmez que le nouveau formulaire est enregistré sous un nom reconnaissable. C’est important quand le site comporte plusieurs formulaires de devis, démos ou calculateurs spécifiques aux clients.

Pour l’exemple de l’article, le formulaire s’appelle Devis & Acompte de Projet Web afin que l’objet du paiement reste clair dans l’administration.

Rouvrez le constructeur et confirmez que le parcours client est logique. Un bon formulaire de devis-vers-paiement ne doit pas demander le paiement avant que le visiteur ait compris l’offre et le total.

Dans cet exemple, les choix de package et d’options viennent d’abord, puis l’étape de méthode de paiement apparaît après le calcul du total, et le récapitulatif final apparaît avant l’ouverture de la modale Stripe.

Dans les paramètres inspectés, la section Payment contient les contrôles Stripe : Use Stripe payment, Stripe publishable key, Stripe secret key, Currency et Amount to pay. Saisissez la paire de clés publiques et secrètes de TEST de votre environnement Stripe autorisé. Gardez la clé secrète dans le réglage serveur du plugin, jamais dans une capture ou un champ public.

Le sélecteur Amount to pay inspecté propose Full amount, Percentage of the total price et Fixed amount. Pour l’acompte illustré, choisissez Percentage of the total price et saisissez 30. Vérifiez le montant résultant plutôt que de vous fier au total du devis.

Créez ou modifiez la page WordPress qui hébergera le formulaire de devis. Pour un tunnel de devis concentré, intégrez le formulaire en mode plein écran afin que l’expérience acheteur ne soit pas en concurrence visuelle avec le thème environnant.

Utilisez le shortcode du formulaire et ajoutez l’attribut fullscreen.

Ouvrez la page publique et démarrez comme un visiteur normal. Le premier écran doit rendre l’offre évidente et ne pas ressembler à un formulaire de contact générique.

Pour un formulaire de devis de site web, les noms et prix des packages doivent être visibles avant les questions optionnelles. Cela donne au visiteur assez de contexte pour continuer.

Choisissez un package et confirmez que le total en direct se met à jour immédiatement. C’est l’avantage clé d’un formulaire de devis par rapport à un formulaire de contact normal : l’acheteur voit la conséquence tarifaire de chaque choix.

Si le total ne correspond pas aux attentes, corrigez les prix des éléments du formulaire avant de tester Stripe. Les réglages de paiement doivent être la dernière couche, pas un contournement d’une logique de devis incorrecte.

Continuez jusqu’à l’étape de méthode de paiement et confirmez que l’option de paiement par carte sécurisée apparaît après le calcul du devis. Dans cet exemple, le formulaire affiche toujours le total complet du devis de 2 400 $ à cette étape.

La règle des 30 % s’applique à l’ouverture de la modale Stripe, où l’acompte dû est de 720 $. Cette séparation est importante : le total du formulaire reste le total du devis, tandis que Stripe reçoit le Montant à payer configuré.

Avant d’ouvrir la modale Stripe, examinez le récapitulatif final. Un bon récapitulatif aide le client à comprendre ce qu’il a choisi et donne à l’entreprise un enregistrement de lead ou de commande plus propre.

Assurez-vous que les champs de contact obligatoires sont remplis et que les lignes du récapitulatif reflètent les mêmes choix et prix affichés plus tôt dans le formulaire.

L’illustration existante montre un acompte de 720 pour un devis de 2 400. Vérifiez montant et devise dans votre fenêtre avant de soumettre. Stripe Elements gère le champ de carte dans le code inspecté ; ne créez jamais de champs ordinaires pour collecter des coordonnées bancaires.

Sur votre site séparé, utilisez uniquement les données officielles de test Stripe après avoir confirmé l’environnement de test. Ouvrir la fenêtre vérifie l’interface, pas la réussite du paiement. Aucun paiement soumis pour cet article.

Sur le parcours carte inspecté, le serveur récupère le PaymentIntent et exige le statut succeeded avant de marquer le journal correspondant payé avec la méthode Stripe. Une vérification refusée renvoie une erreur de paiement. Observation du code 10.6.4, pas preuve de paiement exécuté ni de configuration webhook.

Pendant votre test, examinez le paiement Stripe de test et l’enregistrement de commande correspondant du plugin. Comparez montant, devise et référence, puis message de confirmation et notifications prévues. Redirection, email ou montant affiché ne suffisent pas seuls.

Si Stripe refuse la requête, vérifiez d’abord que les deux clés appartiennent au même compte et environnement de test, que Stripe est activé pour ce formulaire et que devise et montant sont valides. Ne collez jamais une clé secrète dans une capture de support.

Si le montant est incorrect, contrôlez les prix des articles, les options et Amount to pay avant de réessayer. Si Stripe indique succeeded mais que le plugin reste impayé, comparez la référence PaymentIntent à l’enregistrement et examinez l’erreur de vérification. La page de remerciement ne confirme pas le paiement.