Comment ajouter le paiement du code QR Stripe dans WordPress
Publié: 2025-01-28Vous cherchez à ajouter une option de paiement de code QR sur votre site WordPress?
Un mode de paiement QR permet aux utilisateurs de numériser 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.
Mais, il existe de nombreuses façons de permettre aux utilisateurs de payer par code QR. En plus de cela, il existe de nombreuses passerelles de paiement que vous pouvez intégrer au code QR.
Par exemple, vous pouvez ajouter manuellement un code QR de paiement à votre site à l'aide de plates-formes telles que le générateur de code QR ou QRStuff. Mais cela nécessite un long processus de configuration.
Vous devez saisir les informations du 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 en tant qu'image.
En fin de compte, il peut paraître hors de propos et avoir un conflit de fonctionnalités.
En plus de cela, les codes QR générés manuellement sont statiques, ce qui signifie que toutes les mises à jour nécessitent la régénération et le remplacement de l'image sur votre site.
C'est pourquoi nous vous recommandons d'utiliser WPFORMS pour vous aider à créer une option de paiement de code QR.
Tout d'abord, avec WPFORMS, vous pouvez générer dynamiquement des codes QR en fonction des entrées de formulaire, telles que les détails de l'utilisateur, les montants de paiement ou les inscriptions d'é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 vers n'importe quel formulaire ou page utilisant le constructeur visuel, l'heure d'été.
La meilleure partie est que WPFORMS s'intègre aux 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 convient le mieux à la configuration des codes de paiement QR?
Ici, votre priorité devrait être de trouver une passerelle de paiement sécurisée, évolutive et conviviale. Vous devriez également en trouver un 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 sont liés aux pages de paiement en temps réel. Vous pouvez personnaliser la page de paiement liée au code QR avec votre marque, votre logo et vos couleurs.
Stripe prend en charge diverses méthodes de paiement, y compris les cartes de crédit / débit, les portefeuilles mobiles comme Apple Pay et Google Pay, ainsi que les systèmes de paiement locaux.
En conséquence, 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 de code QR.
- Paiements à un coup: les clients peuvent scanner le code QR et effectuer le paiement en quelques secondes en utilisant des méthodes de paiement enregistrées
- Montants de paiement dynamique: Stripe vous permet de créer des codes QR liés aux 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 plates-formes comme WordPress.
- Mises à jour en temps réel: le tableau de bord de Stripe suit les paiements effectués via des codes QR. Vous pouvez surveiller les transactions instantanément.
- Transactions sécurisées: Les paiements via des codes QR Stripe sont traités en toute sécurité, avec des mécanismes avancés de cryptage et de détection de fraude.
Comme vous pouvez le voir, la combinaison de Stripe et WPForms est un excellent moyen de recevoir des paiements via des codes QR.
Avec cela à l'écart, laissez-nous vous montrer, étape par étape, comment configurer des paiements de code QR dans WordPress.
Vous trouverez ci-dessous un échantillon du paiement du code QR Stripe que nous créerons dans ce tutoriel:
Avec cela à l'écart, commençons.
Comment ajouter le paiement du code QR Stripe dans WordPress
Comme mentionné, nous avons besoin de deux outils pour configurer les paiements QR dans WordPress: WPForms et Stripe.
Heureusement, WPForms est compatible avec Stripe. Nous allons donc connecter Stripe avec WordPress via WPFORMS. Ce processus permet aux utilisateurs de payer par code QR sur tout formulaire que vous souhaitez utiliser le générateur de glisser-déposer. Cela rend pratique et facile pour vos utilisateurs de faire un achat.
Maintenant, consultez toutes les étapes que nous suivrons ci-dessous. Si vous souhaitez passer à une étape, cliquez simplement dessus.
- Étape 1: Installer et configurer WPFORMS
- Étape 2: Installez et configurez Wpforms Stripe Pro Addon
- Étape 3: Créer un formulaire de paiement
- Étape 4: configurer le paiement de la bande
- Étape 5: Configurer des notifications et des messages de confirmation
- Étape 6: Publiez le formulaire
- Étape 7: Ajouter le code QR pour les paiements de rayures dans WordPress
Laissez-nous vous promener 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. Mais, nous devons mentionner que WPFORMS propose une version gratuite qui vous permet de effectuer des paiements de rayures. Vous pouvez y accéder rapidement dans votre référentiel WordPress et commencer à créer des formulaires.
Mais vous avez besoin de la version Pro pour des fonctionnalités à rayures plus avancées, telles que l'utilisation d'un code QR.
En effet, la version Pro vous donne accès au Stripe Pro Addon, dont nous aurons besoin dans ce tutoriel. En dehors de cela, la version gratuite de WPFORMS est livrée avec des frais de transaction de 3%, qui peuvent augmenter le coût de vos marchandises.
Consultez la dernière revue WPForms pour en savoir plus.
Pour commencer, rendez-vous sur le site officiel de WPFORMS et inscrivez-vous à un plan. Ils offrent une variété de plans, ce qui facilite la recherche de votre budget et de vos besoins. Mais, pour utiliser l'addon Stripe Pro spécifiquement, vous avez besoin des plans pro ou elite wpforms.
Après avoir acheté le plan Pro ou Elite, connectez-vous à votre compte WPFORMS et accédez aux téléchargements .
Après cela, téléchargez le fichier ZIP WPFORMS sur votre PC. Ensuite, encore, sur cette page, copiez la clé de licence ; Vous en aurez besoin pour activer la version Pro.
Une fois terminé, dirigez-vous vers votre tableau de bord WordPress et accédez aux plugins »Ajouter un nouveau plugin . Ensuite, installez et activez les WPForms comme vous le feriez pour n'importe quel autre plugin.
Consultez ce tutoriel sur la façon d'installer des plugins 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é «WPFORMS». Cela indique que le processus d'installation a été un succès.
Après cela, accédez à WPForms »Paramètres» Général et collez la «clé de licence» que vous avez copiée plus tôt.
Enfin, appuyez sur Vérifiez la clé , et c'est tout! Vous êtes prêt à utiliser WPFORMS.
Voyons ensuite comment configurer le paiement de Stripe dans WordPress via WPFORMS.
Étape 2: Installez et configurez Wpforms Stripe Pro Addon
WPFORMS rend super simple d'ajouter des paiements à rayures et de les configurer. Tout ce que vous avez à faire est d'aller à Wpforms »Addons .
Ici, faites défiler les addons disponibles ou utilisez la fonction de recherche pour trouver l'addon «Stripe Pro». Après cela, installez-le et activez-le comme n'importe quel autre ajouter de plugin.
C'est ça! Vous pouvez désormais utiliser des fonctions de bande avancées sur WPForms via cet addon.
Ensuite, configurez et configurez les paiements de rayures sur WPFORMS.
Pour ce faire, dirigez-vous vers WPFORMS »Paramètres et accédez à l'onglet« Paiement ». Après cela, faites défiler la section Stripe sur la page et appuyez sur «Connectez-vous avec Stripe».
Vous serez redirigé vers une page d'inscription où vous pourrez ajouter vos détails 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 tique verte à côté du «statut de connexion» sous l'onglet Stripe.
Consultez cet article sur les meilleurs plugins Stripe si vous recherchez plus d'outils qui le connectent facilement avec Stripe dans WordPress.
Super! Vous venez de configurer Stripe et êtes prêt à recevoir des paiements.
Étape 3: Créer un formulaire de paiement
L'étape suivante consiste à configurer un formulaire de paiement où les utilisateurs peuvent effectuer des paiements. Comme mentionné, la beauté de l'utilisation de WPForms est que vous pouvez ajouter un champ de paiement sur tout formulaire que vous souhaitez.
Par exemple, vous pouvez ajouter un champ de paiement à un formulaire d'inscription. Cela combine l'inscription et la rémunération avec le processus de code QR, rationaliser la caisse. Vous pouvez également l'ajouter à un formulaire de don, un formulaire de facturation, un formulaire d'enchères, un formulaire RSVP de fête, une forme de commande, etc.
La meilleure partie de l'utilisation de WPFORMS est qu'il est livré avec plus de 2000 modèles de formulaire prêt à l'emploi. Cela simplifie davantage le processus. Vous pouvez également utiliser la toile vierge si vous avez une expérience de conception.
Pour vous aider à choisir un modèle, WPForms vous montre un aperçu de chacun sur la page du modèle. Si vous souhaitez afficher le modèle en plein écran, survolez-le et sélectionnez «Afficher la démo».
Notre tutoriel étape par étape utilisera le modèle de «formulaire de contact simple».
Ainsi, nous planerons dessus et frapperons «Utiliser le modèle». Cela ouvrira le modèle dans le générateur de formulaire de glisser-déposer.
Tout d'abord, vous remarquerez que l'interface de générateur de formulaire 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, des champs de fantaisie et des champs de paiement. Cela facilite la recherche d'un champ que vous souhaitez ajouter.
WPFORMS propose une variété de types de champs, y compris du texte à ligne unique, des e-mails, des listes déroulantes, des cases à cocher, etc., vous offrant la flexibilité de créer des formulaires adaptés à votre objectif.
Pour ajouter un champ, faites-le simplement glisser à partir du panneau de gauche et déposez-le dans le spot souhaité sur votre formulaire dans la fenêtre d'aperçu à droite. Vous pouvez réorganiser les champs en les cliquant 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 disposition du formulaire en fonction de vos besoins sans effort.
Par exemple, vous pouvez ajouter un champ d'articles à cocher, plusieurs articles ou des articles déroulants si vous souhaitez vendre plusieurs produits sur votre formulaire. D'un autre côté, vous pouvez ajouter un champ d'article unique si vous souhaitez vendre un seul produit sur le formulaire de contact.
N'oubliez pas que chaque modèle WPForms a 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 de champ apparaîtront à gauche. À partir de là, vous pouvez modifier l'étiquette de champ, le texte de l'espace réservé et d'autres paramètres, tels que le champ est requis.
Une fois que vous avez terminé l'édition ou l'ajout de champs, enregistrez votre formulaire à l'aide du 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 formes fonctionnelles professionnelles en quelques minutes.
Consultez cet article de comparaison sur WPForms vs FormStack pour voir comment ils correspondent à la création de formulaire.
Étape 4: configurer le paiement de la bande
Avec votre formulaire de contact prêt, la configuration de l'option de paiement à rayures est la prochaine étape.
Pour ce faire, nous devrons ajouter un champ Stripe à la forme. Il s'agit d'un processus très simple, car vous utiliserez le même processus de glisser-déposer que nous avons utilisé ci-dessus.
Alors, accédez au panneau des champs et faites défiler les champs de paiement . Ici, localisez le champ «Stripe Credit Card», puis faites-le glisser et déposez-le à l'emplacement sur le formulaire que vous souhaitez qu'il apparaît.
Le champ de paiement à rayures WPFORMS est livré préfabriqué avec le numéro de carte, l'expiration, le CVC et les lignes de texte du pays. Ainsi, vous n'avez pas besoin de personnaliser davantage le champ de carte de crédit Stripe.
Consultez cet article pour apprendre un autre moyen pratique de recevoir des paiements de carte dans WordPress.
Avec le champ de paiement à rayures prêts, accédez à l'onglet «Paiements» à l'extrême 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 avez sélectionné cette option, une nouvelle page s'ouvrira à gauche avec un bouton à bascule pour activer les «paiements ponctuels» ou les «paiements récurrents».
Consultez cet article pour savoir comment configurer des paiements récurrents avec WPFORMS.
Pour notre tutoriel aujourd'hui, nous effectuerons des paiements ponctuels.
Une fois que vous avez utilisé le bouton basculer pour activer cette fonctionnalité, vous verrez des options pour cartographier vos champs de formulaire de contact aux champs de paiement. Cela permet à WPFORMS de communiquer avec Stripe et de s'assurer 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 cartographie.
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 à cartographier, ce qui le rend encore plus facile.
Par exemple, sous la liste déroulante du reçu de paiement Stripe, vous voyez «e-mail». Ensuite, dans la liste déroulante du nom du client, vous obtiendrez un «nom».
Après cartographie, cela devrait ressembler à la capture d'écran ci-dessous:
Pour améliorer davantage l'expérience utilisateur, vous pouvez activer la logique conditionnelle au bas de cette page.
Ici, vous pouvez dicter lorsque les champs de paiement doivent être affichés ou cachés. WPFORMS vous permet même d'ajouter plusieurs règles de logique conditionnelle.
Outre la logique conditionnelle, voici une autre façon de réduire l'abandon de la forme qui peut être utile.
Étape 5: Configurer des notifications et des messages de confirmation
Désormais, 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 des commentaires instantanés aux utilisateurs, en les rassurant que leur paiement a été traité avec succès.
Les notifications par e-mail peuvent être configurées pour envoyer des détails de réception ou de confirmation à l'utilisateur tout en vous informé de la transaction.
Les messages de confirmation, affichés immédiatement après la soumission du formulaire, aident à éliminer la confusion en permettant aux utilisateurs de savoir que leur paiement et la soumission du formulaire ont réussi.
Vous pouvez définir le message de confirmation immédiatement sur la même page en tant que «message», afficher sur une autre page sur le même site ou sur une URL externe.
WPFORMS vous permet de les définir tous les deux dans les paramètres . Ici, vous obtenez des onglets pour les «notifications» et les «confirmations».
N'oubliez pas que la garantie de ces messages est claire et que le professionnel améliore la confiance des utilisateurs et crée une expérience globale plus fluide.
Vous pouvez consulter cet article sur la création de notifications et de confirmations de formulaires pour une explication approfondie.
Étape 6: Publiez le formulaire
Maintenant, avec tout ce qui est défini, la seule chose à faire est de publier votre formulaire sur votre site WordPress. Il existe deux façons de le faire: publier sur une nouvelle page ou publier sur une page existante.
Voyons comment publier sur une page existante.
Tout d'abord, appuyez sur le bouton Enregistrer en haut de la page. Une fois terminé, sélectionnez le bouton «Incorporer» à côté du bouton Enregistrer pour ouvrir une fenêtre contextuelle. Ensuite, dans cette fenêtre, choisissez «Sélectionnez la page existante».
Dans la prochaine fenêtre, choisissez la page où vous voulez que le formulaire apparaisse à partir de la liste déroulante. Après ce coup, "Allons-y".
Cela ouvrira la page dans l'éditeur de blocs de WordPress.
Après cela, accédez à l'extrême gauche de l'éditeur de blocs et sélectionnez le bouton Plus (+) pour ouvrir les blocs.
Ensuite, localisez le bloc WPForms et faites glisser et déposez-le à l'emplacement sur la page où vous souhaitez que votre formulaire de paiement apparaisse. Une fois qu'il se charge, utilisez le menu déroulant dans le bloc pour sélectionner le formulaire de paiement que vous venez de construire.
Enfin, appuyez 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, revenez au bouton d'intégration en haut du générateur de formulaire de glisser-déposer. Mais cette fois, sélectionnez «Créer une nouvelle page».
Sur la prochaine fenêtre contextuelle, nommez votre nouvelle page et sélectionnez «Allons». 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 WordPress Blocks pour personnaliser davantage la page. Mais, le formulaire devrait être prêt à publier tel quel. Une fois que vous êtes satisfait du formulaire, appuyez sur «Publier» en haut de la page.
C'est ça! Vous pouvez désormais publier un formulaire en utilisant WPFORMS sur les pages existantes et nouvelles.
Ensuite, voyons comment ajouter un code QR pour accepter les paiements via le formulaire.
Étape 7: Ajouter le code QR pour les paiements de rayures dans WordPress
Maintenant, il existe 2 méthodes gratuites et simples pour ajouter un code QR à votre formulaire de paiement. Tout d'abord, vous pouvez utiliser Google Chrome, qui a une fonction QR intégrée, ou Shortcodes Ultimate, un plugin WordPress gratuit.
1. Utilisez la fonction chromée intégrée pour ajouter un code QR
Pour créer un code QR à l'aide de la fonction Google Chrome, ouvrez la page du formulaire de paiement sur le navigateur.
Vous pouvez utiliser le bouton Partager à côté de la barre de texte URL pour ouvrir la fonction de code QR.
Si vous ne le trouvez pas ici, appuyez sur le bouton «Personnaliser et contrôler» en haut à droite de votre navigateur Chrome. Ceci est généralement affiché comme 3 points.
Après cela, faites défiler vers le bas pour lancer, sauver et partager . Ensuite, dans le menu déroulant, sélectionnez «Créer du code QR».
Ensuite, sur la fenêtre contextuelle qui apparaît ensuite, téléchargez le code QR comme image.
Ensuite, accédez à n'importe quelle page ou publiez sur votre site et ajoutez le code QR que vous avez téléchargé. De préférence, ajoutez-le aux pages de produits afin que vous puissiez rediriger rapidement vos utilisateurs vers la page de paiement.
Ensuite, tout ce que vous avez à faire est de modifier la page ou de le publier dans l'éditeur de blocs. Ensuite, utilisez le bloc d'image pour ajouter le code QR.
C'est ça. Vos utilisateurs peuvent ouvrir votre formulaire de paiement instantanément.
2. Utilisez les shortcodes ultime pour ajouter un code QR
Les codes shorts construits par Shortcodes Ultimate vous permettent de placer le code QR dans des zones de page plus pratiques, des widgets, des barres latérales, et plus encore sans codage.
Pour obtenir la version gratuite de ce plugin Shortcode, accédez à votre référentiel WordPress et utilisez la fonction de recherche pour trouver «Shortcodes Ultimate». Après cela, installez-le et activez-le comme vous le feriez pour n'importe quel 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 raccourcis vers la position sur la page où vous souhaitez que le code QR apparaisse.
Une fois terminé, sélectionnez l'option Square Bracket «[]» en haut du bloc de raccourcis pour ouvrir plus d'options. Ensuite, recherchez «Code QR» à partir de la longue liste d'options dans la fenêtre contextuelle.
Sur le prochain contexte, entrez l'URL du formulaire de paiement dans le champ de données . Ensuite, vous pouvez ajouter plus de personnalisations comme la taille, la marge, l'alignement, le lien, etc.
Après cela, appuyez sur Insérer un raccourci et mettez à jour la page. Vous devriez voir le code QR sur la page en direct à ce stade.
Consultez l'échantillon du code QR de paiement ci-dessous:
La meilleure partie est que vous pouvez utiliser ce code QR créé sur plusieurs pages et articles sans d'autres modifications.
C'est ça! Vous venez d'apprendre à ajouter le paiement du code QR Stripe dans WordPress. Nous espérons que vous l'avez apprécié. Si vous avez d'autres questions, consultez les questions couramment posées ci-dessous.
FAQS: Comment ajouter des paiements de code QR Stripe dans WordPress
L'ajout de codes QR Stripe à WordPress est-il sécurisé?
Absolument, Stripe assure un traitement de paiement sécurisé avec la conformité et le cryptage PCI. Lorsqu'ils sont intégrés dans WordPress à l'aide de plugins réputés comme WPFORMS ou WOOCommerce, vos paiements de code QR sont aussi sécurisés que les transactions Stripe régulières.
Puis-je utiliser des codes QR Stripe pour les paiements récurrents WordPress?
Oui, Stripe prend en charge les paiements récurrents, et vous pouvez l'activer via des plugins comme WPFORMS ou des abonnements WooCommerce. Après avoir configuré un lien de paiement d'abonnement dans Stripe, créez un code QR qui les lie et l'intégrez-le sur votre site WordPress.
Comment ajouter des paiements de code QR Stripe à mon site WordPress?
Pour ajouter un paiement de code QR Stripe à WordPress, utilisez un plugin comme WPFORMS ou WOOCOMMERCE. Activez la bande dans les paramètres de votre plugin, générez un lien de paiement et utilisez un générateur de code QR tel que le générateur de code QR pour créer un code lié à l'URL de paiement. Enfin, intégrez le code QR dans votre site Web à l'aide d'un widget, d'une page ou d'un éditeur de publication.
Puis-je créer un code QR à bande dynamique dans WordPress?
Très certainement, vous pouvez créer des codes QR dynamiques en intégrant Stripe avec des plugins comme WPFORMS ou des scripts personnalisés. Utilisez le générateur de formulaire pour capturer les entrées des utilisateurs comme le montant et générer un lien de paiement à bande unique. Convertissez le lien en un code QR à l'aide d'un générateur tiers, en veillant à ce que les données s'adaptent aux entrées utilisateur.
Félicitations! Vous pouvez désormais 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 que vous pourriez être intéressés à lire.
- 9 meilleurs plugins de paiement WordPress
- WP Simple Pay Review: Est-ce le meilleur plugin de paiement?
- 9 meilleurs plugins de paiement WordPress
Le premier article répertorie les meilleurs plugins de paiement pour WordPress. Le prochain examine WP Simple Pay, un autre plugin de paiement incroyable. Le dernier message classe les meilleurs plugins de paiement WordPress.