Comment ajouter un paiement par code QR Stripe dans WordPress

Vous cherchez à ajouter une option de paiement par code QR sur votre site WordPress ?

Une méthode de paiement par code QR permet aux utilisateurs de scanner et d'accéder à votre lien de paiement sur leur téléphone. Cela rend le processus de paiement plus simple et plus facile pour eux.

Cependant, il existe de nombreuses façons de permettre aux utilisateurs de payer par code QR. De plus, il existe de nombreuses passerelles de paiement que vous pouvez intégrer avec le code QR.

Par exemple, vous pouvez ajouter manuellement un code QR de paiement à votre site en utilisant des plateformes comme QR Code Generator ou QRStuff. Mais cela nécessite un long processus de configuration.

Vous devez saisir les informations dans le code QR, telles que le lien de paiement, l'URL du site Web et les coordonnées. Vous devez également personnaliser le code QR séparément de votre site et le télécharger sous forme d'image.

Au final, cela peut sembler déplacé et entraîner des conflits de fonctionnalités.

De plus, les codes QR générés manuellement sont statiques, ce qui signifie que toute mise à jour nécessite de régénérer et de remplacer l'image sur votre site.

C'est pourquoi nous vous recommandons d'utiliser WPForms pour vous aider à créer une option de paiement par code QR.

Premièrement, avec WPForms, vous pouvez générer dynamiquement des codes QR basés sur les entrées du formulaire, telles que les détails de l'utilisateur, les montants des paiements ou les inscriptions à des événements. Cela garantit que les codes QR sont toujours pertinents et personnalisés sans intervention manuelle.

Vous pouvez également ajouter rapidement un code QR avec votre lien de paiement à n'importe quel formulaire ou page à l'aide du constructeur visuel, ce qui vous fait gagner du temps.

Le meilleur, c'est que WPForms s'intègre avec des passerelles de paiement comme PayPal et Stripe, ce qui facilite la génération de codes QR liés aux pages de paiement.

Maintenant que nous avons sélectionné un outil pour créer le code QR de paiement, la question suivante est : quelle passerelle est la meilleure pour configurer des codes QR de paiement ?

Ici, votre priorité devrait être de trouver une passerelle de paiement sécurisée, évolutive et conviviale. Vous devriez également en trouver une qui prend en charge de nombreuses devises, vous donnant accès à un public mondial.

Pour ces raisons, nous avons sélectionné Stripe.

Stripe vous permet de générer des codes QR dynamiques qui renvoient vers des pages de paiement en temps réel. Vous pouvez personnaliser la page de paiement liée au code QR avec votre image de marque, votre logo et vos couleurs.

Stripe prend en charge diverses méthodes de paiement, notamment les cartes de crédit/débit, les portefeuilles mobiles comme Apple Pay et Google Pay, ainsi que les systèmes de paiement locaux.

Par conséquent, un seul code QR peut diriger les utilisateurs vers une page de paiement où ils choisissent leur méthode préférée.

Voici d'autres raisons pour lesquelles Stripe est une excellente passerelle de paiement par code QR.

• Paiements en un clic : Les clients peuvent scanner le code QR et finaliser le paiement en quelques secondes en utilisant leurs méthodes de paiement enregistrées.
• Montants de paiement dynamiques : Stripe vous permet de créer des codes QR liés à des montants de paiement calculés dynamiquement.
• Intégration facile avec les sites Web : Stripe fournit des intégrations API simples et des plugins pour des plateformes comme WordPress.
• Mises à jour en temps réel : Le tableau de bord de Stripe suit les paiements effectués via les codes QR. Vous pouvez surveiller les transactions instantanément.
• Transactions sécurisées : Les paiements via les codes QR Stripe sont traités de manière sécurisée, avec un cryptage avancé et des mécanismes de détection de fraude.

Comme vous pouvez le constater, la combinaison de Stripe et de WPforms est un excellent moyen de recevoir des paiements via des codes QR.

Cela étant dit, nous allons vous montrer, étape par étape, comment configurer les paiements par code QR dans WordPress.

Voici un exemple du paiement par code QR Stripe que nous allons créer dans ce tutoriel :

Cela étant dit, commençons.

Comment ajouter un paiement par code QR Stripe dans WordPress

Comme mentionné, nous avons besoin de deux outils pour configurer les paiements par code QR dans WordPress : WPForms et Stripe.

Heureusement, WPForms est compatible avec Stripe. Nous allons donc connecter Stripe à WordPress via WPForms. Ce processus permet aux utilisateurs de payer par code QR sur n'importe quel formulaire que vous souhaitez, en utilisant le constructeur par glisser-déposer. Cela rend les achats pratiques et faciles pour vos utilisateurs.

Maintenant, consultez toutes les étapes que nous allons suivre ci-dessous. Si vous souhaitez passer à une étape, cliquez simplement dessus.

• Étape 1 : Installer et configurer WPForms
• Étape 2 : Installer et configurer le module complémentaire WPForms Stripe Pro
• Étape 3 : Créer un formulaire de paiement
• Étape 4 : Configurer le paiement Stripe
• Étape 5 : Configurer les notifications et les messages de confirmation
• Étape 6 : Publier le formulaire
• Étape 7 : Ajouter un code QR pour les paiements Stripe dans WordPress

Laissez-nous vous guider tout au long du processus ci-dessous.

Étape 1 : Installer et configurer WPForms

La première étape consiste à installer WPforms dans votre tableau de bord WordPress. Cependant, nous devons mentionner que WPforms propose une version gratuite qui vous permet d'effectuer des paiements Stripe. Vous pouvez y accéder rapidement dans votre répertoire WordPress et commencer à créer des formulaires.

Mais vous avez besoin de la version pro pour des fonctionnalités Stripe plus avancées, comme l'utilisation d'un code QR.

C'est parce que la version pro vous donne accès au module complémentaire Stripe Pro, dont nous aurons besoin dans ce tutoriel. De plus, la version gratuite de WPForms est assortie de frais de transaction de 3 %, ce qui peut augmenter le coût de vos marchandises.

Consultez la dernière critique de WPForms pour en savoir plus.

Pour commencer, rendez-vous sur le site officiel de WPForms et inscrivez-vous pour un forfait. Ils proposent une variété de forfaits, ce qui vous permet de trouver facilement celui qui correspond à votre budget et à vos besoins. Cependant, pour utiliser spécifiquement le module complémentaire Stripe Pro, vous avez besoin des forfaits Pro ou Elite de WPForms.

Après avoir acheté le plan Pro ou Elite, connectez-vous à votre compte WPForms et accédez à Téléchargements.

Après cela, téléchargez le fichier Zip WPForms sur votre PC. Ensuite, toujours sur cette page, copiez la Clé de licence ; vous en aurez besoin pour activer la version pro.

Une fois terminé, rendez-vous sur votre tableau de bord WordPress et allez dans Extensions » Ajouter une nouvelle extension. Ensuite, installez et activez WPForms comme vous le feriez pour toute autre extension.

Consultez ce tutoriel sur comment installer des extensions si vous avez besoin d'aide.

Après l'activation, vous devriez voir une nouvelle option de menu apparaître dans votre tableau de bord WordPress intitulée « WPForms ». Cela indique que le processus d'installation a été un succès.

Après cela, allez dans WPForms » Paramètres » Général et collez la « Clé de licence » que vous avez copiée précédemment.

Enfin, cliquez sur Vérifier la clé, et c'est tout ! Vous êtes prêt à utiliser WPForms.

Voyons maintenant comment configurer les paiements Stripe dans WordPress via WPForms.

Étape 2 : Installer et configurer le module complémentaire WPForms Stripe Pro

WPforms rend très simple l'ajout de paiements Stripe et leur configuration. Tout ce que vous avez à faire est d'aller dans WPForms » Modules complémentaires.

Ici, faites défiler les modules complémentaires disponibles ou utilisez la fonction de recherche pour trouver le module complémentaire « Stripe Pro ». Après cela, installez et activez-le comme tout autre module complémentaire d'extension.

C'est tout ! Vous pouvez maintenant utiliser les fonctions avancées de Stripe sur WPForms via ce module complémentaire.

Ensuite, configurez et mettez en place les paiements Stripe sur WPForms.

Pour ce faire, allez dans WPForms » Paramètres et accédez à l'onglet « Paiement ». Après cela, faites défiler jusqu'à la section Stripe sur la page et cliquez sur « Se connecter avec Stripe ».

Vous serez redirigé vers une page d'inscription où vous pourrez ajouter vos identifiants de connexion Stripe. Si vous n'avez pas de compte Stripe, vous pouvez également en créer un sur cette page.

Une fois connecté, vous serez redirigé vers votre tableau de bord WordPress. À ce stade, vous devriez voir une coche verte à côté de « Statut de la connexion » sous l'onglet Stripe.

Consultez cet article sur les meilleurs plugins Stripe si vous recherchez d'autres outils qui se connectent aussi facilement à Stripe dans WordPress.

Super ! Vous venez de configurer Stripe et êtes prêt à recevoir des paiements.

Étape 3 : Créer un formulaire de paiement

La prochaine étape consiste à configurer un formulaire de paiement où les utilisateurs peuvent effectuer des paiements. Comme mentionné, l'avantage d'utiliser WPForms est que vous pouvez ajouter un champ de paiement à n'importe quel formulaire de votre choix.

Par exemple, vous pouvez ajouter un champ de paiement à un formulaire d'inscription. Cela combine le processus d'inscription et de paiement par code QR, simplifiant ainsi le processus de paiement. Vous pouvez également l'ajouter à un formulaire de don, un formulaire de facturation, un formulaire d'enchères, un formulaire de RSVP pour une fête, un formulaire de commande, et plus encore.

Le meilleur atout de WPforms est qu'il est livré avec plus de 2000 modèles de formulaires prêts à l'emploi. Cela simplifie encore le processus. Vous pouvez également utiliser la toile vierge si vous avez de l'expérience en conception.

Pour vous aider à choisir un modèle, WPforms vous montre un aperçu de chacun sur la page des modèles. Si vous souhaitez afficher le modèle en plein écran, survolez-le et sélectionnez "voir la démo".

Notre tutoriel étape par étape utilisera le modèle "Formulaire de contact simple".

Nous allons donc le survoler et cliquer sur "Utiliser le modèle". Cela ouvrira le modèle dans le constructeur de formulaires par glisser-déposer.

Tout d'abord, vous remarquerez que l'interface du constructeur de formulaires est divisée en deux sections : "Champs" à gauche et un aperçu en direct de votre formulaire à droite.

Les champs sont divisés en Champs standard, Champs fantaisie et Champs de paiement. Cela facilite la recherche d'un champ que vous souhaitez ajouter.

WPForms offre une variété de types de champs, y compris du texte sur une seule ligne, des e-mails, des listes déroulantes, des cases à cocher, et plus encore, vous donnant la flexibilité de créer des formulaires adaptés à votre objectif.

Pour ajouter un champ, faites-le simplement glisser depuis le panneau de gauche et déposez-le à l'endroit souhaité sur votre formulaire dans la fenêtre d'aperçu à droite. Vous pouvez réorganiser les champs en cliquant dessus et en les faisant glisser dans l'aperçu en direct pendant que vous créez votre formulaire de contact.

Cela vous permet de personnaliser la mise en page du formulaire pour répondre à vos besoins sans effort.

Par exemple, vous pouvez ajouter un champ Cases à cocher, plusieurs Articles ou Articles déroulants si vous souhaitez vendre plusieurs produits sur votre formulaire. D'autre part, vous pouvez ajouter un champ Article unique si vous souhaitez vendre un seul produit sur le formulaire de contact.

N'oubliez pas que chaque modèle WPForms contient des champs pré-ajoutés que vous pouvez personnaliser.

Pour modifier un champ, sélectionnez-le dans l'aperçu du formulaire, et les options du champ apparaîtront à gauche. À partir de là, vous pouvez modifier l'étiquette du champ, le texte d'espace réservé et d'autres paramètres, tels que si le champ est obligatoire.

Une fois que vous avez terminé de modifier ou d'ajouter des champs, Enregistrez votre formulaire en utilisant le bouton en haut à droite pour vous assurer que toutes les modifications sont appliquées. Ce processus simple garantit que même les débutants peuvent créer des formulaires professionnels et fonctionnels en quelques minutes.

Consultez cet article comparatif sur WPForms vs. FormStack pour voir comment ils se comparent dans la création de formulaires.

Étape 4 : Configurer le paiement Stripe

Une fois votre formulaire de contact prêt, la configuration de l'option de paiement Stripe est la prochaine étape.

Pour ce faire, nous devrons ajouter un champ Stripe au formulaire. C'est un processus très simple, car vous utiliserez le même processus de glisser-déposer que nous avons utilisé ci-dessus.

Alors, allez dans le panneau des champs et faites défiler jusqu'à Champs de paiement. Ici, localisez le champ « Carte de crédit Stripe », puis faites-le glisser et déposez-le à l'emplacement du formulaire où vous souhaitez qu'il apparaisse.

Le champ de paiement Stripe de WPforms est pré-configuré avec les lignes de texte pour le numéro de carte, la date d'expiration, le CVC et le pays. Vous n'avez donc pas besoin de personnaliser davantage le champ de carte de crédit Stripe.

Consultez cet article pour découvrir une autre façon pratique de recevoir des paiements par carte dans WordPress.

Une fois le champ de paiement Stripe prêt, allez dans l'onglet « Paiements » tout à gauche.

Une fois sélectionné, vous ouvrez toutes les passerelles de paiement pour vous connecter avec WPForms. Vous pouvez utiliser Authorize.Net, Coupons, PayPal Commerce, PayPal Standard et Square.

Mais, la passerelle de paiement recommandée est Stripe, que vous trouverez en haut de cette page.

Une fois que vous sélectionnez cette option, une nouvelle page s'ouvrira sur la gauche avec un bouton bascule pour activer les « Paiements uniques » ou les « Paiements récurrents ».

Consultez cet article pour apprendre comment configurer les paiements récurrents avec WPForms.

Pour notre tutoriel d'aujourd'hui, nous allons configurer les paiements uniques.

Une fois que vous utilisez le bouton bascule pour activer cette fonctionnalité, vous verrez des options pour mapper vos champs de formulaire de contact aux champs de paiement. Cela permet à WPforms de communiquer avec Stripe et de garantir que les détails de paiement corrects sont capturés pendant le processus de soumission du formulaire.

Encore une fois, WPForms facilite le processus de mappage.

Tout ce que vous avez à faire est de sélectionner une option dans les menus déroulants. En fait, les menus déroulants ne contiennent que le champ le *plus probable* à mapper, ce qui le rend encore plus facile.

Par exemple, sous le menu déroulant Reçu de paiement Stripe, vous voyez « E-mail ». Ensuite, dans le menu déroulant Nom du client, vous obtiendrez « Nom ».

Après le mappage, cela devrait ressembler à la capture d'écran ci-dessous :

Pour améliorer encore l'expérience utilisateur, vous pouvez activer la logique conditionnelle en bas de cette page.

Ici, vous pouvez dicter quand les champs de paiement doivent être affichés ou masqués. WPForms vous permet même d'ajouter plusieurs règles de logique conditionnelle.

En dehors de la logique conditionnelle, voici une autre façon de réduire l'abandon de formulaire qui peut être utile.

Étape 5 : Configurer les notifications et les messages de confirmation

Maintenant, les notifications par e-mail et les messages de confirmation sont importants pour tous les formulaires. Mais, ils sont cruciaux pour les formulaires liés au paiement. Ils fournissent un feedback instantané aux utilisateurs, les rassurant sur le fait que leur paiement a été traité avec succès.

Les notifications par e-mail peuvent être configurées pour envoyer un reçu ou des détails de confirmation à l'utilisateur tout en vous informant de la transaction.

Les messages de confirmation, affichés immédiatement après la soumission du formulaire, aident à éliminer la confusion en informant les utilisateurs que leur paiement et la soumission du formulaire ont été réussis.

Vous pouvez définir le message de confirmation immédiatement sur la même page sous forme de « Message », l'afficher sur une autre page du même site, ou sur une URL externe.

WPForms vous permet de les configurer tous les deux sous Paramètres. Ici, vous trouverez des onglets pour « Notifications » et « Confirmations ».

N'oubliez pas que des messages clairs et professionnels renforcent la confiance des utilisateurs et créent une expérience globale plus fluide.

Vous pouvez consulter cet article sur la configuration des notifications et confirmations de formulaire pour une explication approfondie.

Étape 6 : Publier le formulaire

Maintenant que tout est configuré, la seule chose à faire est de publier votre formulaire sur votre site WordPress. Il y a deux façons de faire cela : publier sur une nouvelle page ou publier sur une page existante.

Regardons comment publier sur une page existante.

Tout d'abord, cliquez sur le bouton Enregistrer en haut de la page. Une fois terminé, sélectionnez le bouton « Intégrer » à côté du bouton Enregistrer pour ouvrir une fenêtre contextuelle. Ensuite, dans cette fenêtre, choisissez « Sélectionner une page existante ».

Dans la fenêtre contextuelle suivante, choisissez la page où vous souhaitez que le formulaire apparaisse dans le menu déroulant. Après cela, cliquez sur « Allons-y ».

Cela ouvrira la page dans l'éditeur de blocs de WordPress.

Après cela, allez tout à gauche de l'éditeur de blocs et sélectionnez le bouton Plus (+) pour ouvrir les blocs.

Ensuite, localisez le bloc WPForms et faites-le glisser et déposez-le à l'endroit de la page où vous souhaitez que votre formulaire de paiement apparaisse. Une fois qu'il est chargé, utilisez le menu déroulant dans le bloc pour sélectionner le formulaire de paiement que vous venez de créer.

Enfin, cliquez sur Enregistrer en haut à droite de la page. À ce stade, vous devriez voir le formulaire de contact que vous avez créé sur la page en direct.

Ensuite, voyons comment ajouter le formulaire de paiement à une nouvelle page.

Encore une fois, retournez au bouton Intégrer en haut du constructeur de formulaires par glisser-déposer. Mais cette fois, sélectionnez « Créer une nouvelle page ».

Sur le pop-up suivant, nommez votre nouvelle page et sélectionnez « Allons-y ». Cela ouvrira l'éditeur de blocs pour la nouvelle page. Cette fois, la nouvelle page se chargera avec le formulaire pré-ajouté.

Bien sûr, vous pouvez utiliser les blocs WordPress pour personnaliser davantage la page. Mais le formulaire devrait être prêt à être publié tel quel. Une fois que le formulaire vous convient, cliquez sur « Publier » en haut de la page.

C'est tout ! Vous pouvez maintenant publier un formulaire à l'aide de WPForms sur des pages existantes et nouvelles.

Ensuite, voyons comment ajouter un code QR pour accepter les paiements via le formulaire.

Étape 7 : Ajouter un code QR pour les paiements Stripe dans WordPress

Maintenant, il existe 2 méthodes gratuites et simples pour ajouter un code QR à votre formulaire de paiement. Premièrement, vous pouvez utiliser Google Chrome, qui dispose d'une fonction QR intégrée, ou Shortcodes Ultimate, un plugin WordPress gratuit.

1. Utilisez la fonction intégrée de Chrome pour ajouter un code QR

Pour créer un code QR en utilisant la fonction Google Chrome, ouvrez la page du formulaire de paiement dans le navigateur.

Vous pouvez utiliser le bouton de partage à côté de la barre d'adresse URL pour ouvrir la fonction de code QR.

Si vous ne le trouvez pas ici, cliquez sur le bouton « Personnaliser et contrôler » en haut à droite de votre navigateur Chrome. Il est généralement représenté par 3 points.

Après cela, faites défiler jusqu'à Diffuser, enregistrer et partager. Ensuite, dans le menu déroulant, sélectionnez « Créer un code QR ».

Ensuite, dans la fenêtre contextuelle qui apparaît, téléchargez le code QR sous forme d'image.

Ensuite, allez sur n'importe quelle page ou publication de votre site et ajoutez le code QR que vous avez téléchargé. De préférence, ajoutez-le aux pages produits afin de pouvoir rediriger rapidement vos utilisateurs vers la page de paiement.

Ensuite, tout ce que vous avez à faire est d'éditer la page ou la publication dans l'éditeur de blocs. Ensuite, utilisez le bloc d'image pour ajouter le code QR.

C'est tout. Vos utilisateurs pourront ouvrir votre formulaire de paiement instantanément.

2. Utilisez Shortcodes Ultimate pour ajouter un code QR

Les shortcodes créés par Shortcodes Ultimate vous permettent de placer le code QR dans des zones de page, des widgets, des barres latérales plus pratiques, et plus encore, sans codage.

Pour obtenir la version gratuite de ce plugin de shortcode, accédez à votre dépôt WordPress et utilisez la fonction de recherche pour trouver « Shortcodes Ultimate ». Après cela, installez-le et activez-le comme vous le feriez pour tout autre plugin.

Après cela, ouvrez une page nouvelle ou existante dans votre tableau de bord WordPress. Ensuite, utilisez la fonction Plus (+) pour rechercher « shortcode ».

Faites glisser et déposez le bloc de shortcode à l'endroit de la page où vous souhaitez que le code QR apparaisse.

Une fois terminé, sélectionnez l'option des crochets « [] » en haut du bloc de shortcode pour ouvrir plus d'options. Ensuite, trouvez « QR Code » dans la longue liste d'options dans la fenêtre contextuelle.

Dans la fenêtre contextuelle suivante, entrez l'URL du formulaire de paiement dans le champ Data. Ensuite, vous pouvez ajouter plus de personnalisations comme la taille, la marge, l'alignement, le lien, et plus encore.

Après cela, cliquez sur Insert Shortcode et mettez à jour la page. Vous devriez voir le code QR sur la page en direct à ce stade.

Consultez l'exemple du code QR de paiement ci-dessous :

Le meilleur avantage est que vous pouvez utiliser ce code QR créé sur plusieurs pages et articles sans modifications supplémentaires.

C'est tout ! Vous venez d'apprendre à ajouter des paiements par code QR Stripe dans WordPress. Nous espérons que cela vous a plu. Si vous avez d'autres questions, consultez la foire aux questions ci-dessous.

FAQ : Comment ajouter des paiements par code QR Stripe dans WordPress

Félicitations ! Vous pouvez maintenant configurer des codes de paiement QR sur votre site WordPress. Voici un article pour vous montrer comment accepter les paiements Stripe dans WordPress si vous ne souhaitez pas ajouter de codes QR à votre formulaire de paiement.

En plus de cela, voici d'autres articles qui pourraient vous intéresser.

• 9 meilleurs plugins de paiement WordPress
• Avis sur WP Simple Pay : Est-ce le meilleur plugin de paiement ?
• 9 meilleurs plugins de paiement WordPress

Le premier article liste les meilleurs plugins de paiement pour WordPress. Le suivant examine WP Simple Pay, un autre plugin de paiement incroyable. Le dernier article classe les meilleurs plugins de paiement WordPress.