Easy Digital Downloads se consacre à fournir un système de commerce électronique facile à utiliser pour les utilisateurs de WordPress. Nous travaillons dur pour atteindre cet objectif quotidiennement. Cependant, en raison de son extensibilité et de la variation inévitable des besoins des clients, une grande partie de la fonctionnalité est laissée à la tâche ardue du développement personnalisé.
L'un des besoins les plus courants que nous constatons dans notre canal de support est un moyen facile de créer des formulaires de paiement personnalisés. Pour les non-développeurs, la création de formulaires personnalisés est déjà assez difficile. Ajoutez la fonctionnalité de commerce électronique et même les bricoleurs ont du mal.
L'objectif de cet article est d'aider tous les utilisateurs d'Easy Digital Downloads, quel que soit leur niveau de compétence, à apprendre à créer des formulaires de paiement personnalisés sans écrire aucun code.
Plugins requis minimum
Il y a au moins quatre plugins qui doivent fonctionner ensemble pour que cela se produise. Je vais expliquer chacun d'eux ci-dessous.
Easy Digital Downloads
Bien qu'Easy Digital Downloads ait sa propre fonctionnalité de paiement principale, le système de base ne prend en charge qu'un seul formulaire de paiement « universel ». Même si vous personnalisez le formulaire, il s'agira toujours du même formulaire pour toutes les transactions, quelle que soit la contenu du panier.
Gravity Forms
Gravity Forms est un constructeur de formulaires avancé pour WordPress. Vous pouvez l'utiliser pour créer n'importe quoi, du formulaire de contact le plus basique aux formulaires complexes qui servent à n'importe quel objectif. Avec des fonctionnalités telles que la logique conditionnelle des champs, l'organisation et la présentation des entrées, et la prise en charge des extensions, c'est sans aucun doute l'un des plugins WordPress premium les plus populaires sur le marché.
Paiement via Gravity Forms
Gravity Forms Checkout est le pont entre Easy Digital Downloads et Gravity Forms. Afin de créer plusieurs formulaires de paiement personnalisés pour vos produits, cette extension Easy Digital Downloads est une pièce nécessaire du puzzle.
Add-on de paiement Gravity Forms
Enfin, les formulaires de paiement personnalisés créés via Gravity Forms nécessitent que vous utilisiez des extensions Gravity Forms pour ajouter des fonctionnalités supplémentaires aux formulaires eux-mêmes. Cela signifie que les passerelles de paiement Easy Digital Downloads ne fonctionneront pas avec Gravity Forms Checkout.
Pour traiter les paiements, vous devez utiliser des passerelles de paiement conçues pour Gravity Forms. Dans cet article, nous ferons référence à l'extension Gravity Forms PayPal Payments Standard. Il existe d'autres options disponibles comme Stripe et Authorize.net.
Création de formulaires de paiement personnalisés
Maintenant que vous avez tous les plugins requis, commençons. Nous allons passer en revue la création d'un formulaire de paiement de base pour un seul produit. Suivez les étapes si vous êtes prêt à le faire.
À ce stade, vous devriez déjà avoir des produits dans votre boutique que vous souhaitez vendre. Veuillez noter que même si vous avez les outils susmentionnés activés ou en cours d'utilisation, votre boutique Easy Digital Downloads fonctionnera toujours de manière originale.
Les formulaires de paiement personnalisés avec Gravity Forms Checkout ajoutent simplement une autre option. Vos produits peuvent toujours être achetés de manière traditionnelle.
Créer de nouveaux formulaires avec Gravity Forms
Pour le processus de création de formulaire, considérez qu'Easy Digital Downloads s'intègre à Gravity Forms, et non l'inverse. Avec cette approche, il est logique que pour créer un nouveau formulaire de paiement personnalisé, vous deviez d'abord créer un nouveau formulaire dans Gravity Forms.
Avec Gravity Forms activé, allez dans Formulaires -> Nouveau formulaire dans votre tableau de bord WordPress. Il vous sera demandé de donner un titre et une description facultative au formulaire. Faites-le et créez le formulaire.
Ajout de champs de base
À ce stade, vous avez une entrée de formulaire créée mais elle ne contient aucun champ. Tout ce qu'elle contient, c'est un titre et une description qui seront automatiquement affichés par défaut, bien que vous puissiez les masquer si vous le souhaitez.
Vous devrez collecter au moins une adresse e-mail auprès de vos clients. Nous allons donc ajouter un champ d'adresse e-mail à notre formulaire pour commencer.
Sur le côté droit de l'écran, vous verrez plusieurs sections développables de regroupements de champs. Le champ E-mail se trouve dans la section Champs avancés. Pour ajouter le champ E-mail à votre formulaire, cliquez simplement sur le bouton intitulé E-mail.
En cliquant sur le bouton, le champ sera ajouté à votre formulaire (côté gauche de l'écran) avec un contenu minimal par défaut. Déplacez votre curseur sur le nouveau champ et lorsque vous verrez l'indicateur visuel que vous survolez, cliquez une fois sur le champ pour afficher ses options.
Le champ E-mail est très simple et ne nécessite qu'un seul ajustement. Sous la section Règles, marquez le champ comme Requis. Avec cette configuration en place, le formulaire de paiement ne sera pas soumis sans adresse e-mail.
Beaucoup d'entre vous voudront également ajouter des champs comme le prénom et le nom. Nous n'en discuterons pas dans cet article, mais le processus est très similaire à l'ajout du champ E-mail.
Maintenant que nous avons un champ d'adresse e-mail requis, ajoutons un champ de plus avant de passer aux champs liés aux produits.
Juste pour la structure et pour vous familiariser davantage avec Gravity Forms, nous allons ajouter un champ au formulaire appelé Section. Les sections sont un moyen simple de diviser votre formulaire en sections visuelles qui facilitent le processus de remplissage du formulaire.
Le champ Section se trouve dans la section Champs standard. Ajoutez-le à votre formulaire et développez-le pour afficher ses options.
En fonction du type de champ et du fait que nous allons ajouter un champ Produit ensuite, considérons ce champ Section comme un titre pour l'affichage du champ produit.
Ajustez les champs Libellé du champ et Description à votre convenance. Quelque chose comme « Informations sur le produit » comme Libellé du champ et tous les petits détails que vous souhaitez divulguer sur le produit lui-même comme Description.
À tout moment pendant le processus de création, vous pouvez prévisualiser la structure de votre formulaire en cliquant sur le lien Aperçu situé dans le menu de navigation juste au-dessus du constructeur de formulaire. Veuillez noter que certains champs nécessitent que vous mettiez à jour le formulaire pour prévisualiser.
L'aperçu de votre formulaire ne représente pas la façon dont il sera conçu sur le front-end. Utilisez plutôt l'aperçu pour examiner la structure et la fonctionnalité. Pour l'instant, nous n'avons rien de plus qu'un champ e-mail, un titre de section (libellé) et une description.
Si vous n'êtes pas déjà familier avec Gravity Forms, ce que vous avez fait jusqu'à présent est la façon dont vous utiliseriez le constructeur de formulaires pour tout type de formulaire que vous créez, pas seulement avec Easy Digital Downloads. Si vous n'êtes pas clair sur le fonctionnement de base du constructeur de formulaires, veuillez consulter la documentation de Gravity Forms.
À ce stade du processus, l'aperçu de votre formulaire devrait ressembler à ceci :
Avec le titre du formulaire, la description du formulaire, le champ e-mail et la section d'informations sur le produit en place, nous pouvons ajouter un produit au formulaire.
Ajout de champs de produit
Rappelez-vous, il s'agit d'un formulaire extrêmement basique et son but est de servir de caisse pour un produit particulier. Pour ceux qui préféreraient un formulaire de paiement personnalisé pour un produit spécifique plutôt que d'utiliser son bouton Ajouter au panier et le processus de paiement traditionnel, ce formulaire serait un remplacement idéal.
Cela dit, nous allons ajouter et afficher le champ Produit au formulaire à des fins d'information. Le client est informé du produit auquel le formulaire lui donnera accès, ainsi que de son prix.
Sur le côté droit de l'écran, trouvez la section Champs de tarification. Dans cette section, sélectionnez pour ajouter un nouveau champ Produit en cliquant sur le bouton intitulé Produit. Une fois ajouté, développez le champ.
Je vais vendre un produit appelé « Produit d'exemple », qui a déjà été créé en tant qu'entrée de téléchargement. Après avoir rempli les sections Libellé du champ et Description, je connecterai mon champ Produit à Easy Digital Downloads en sélectionnant « Produit d'exemple » dans le menu déroulant Connecter au téléchargement EDD.
En continuant avec les paramètres, je définirai mon Type de champ sur « Produit unique » avec un Prix de 10 $. Veuillez noter que comme je contrôle entièrement le formulaire, je dois définir le prix moi-même. Il n'est pas tiré de l'entrée de téléchargement.
Enfin, je cocherai la case Désactiver le champ de quantité et définirai les seules Règles comme Requise.
Jetons un coup d'œil à un aperçu à jour de mon formulaire de paiement personnalisé.
Avec seulement ces champs en place, vous avez créé un formulaire prêt à vendre « Produit d'exemple » à vos clients. Tout ce que vous avez à faire maintenant est d'ajouter des champs pour accepter le paiement.
Veuillez noter que l'affichage du champ Produit est facultatif. Bien que le champ doive être présent pour connecter le formulaire au produit, vous pouvez sélectionner « Masqué » comme Type de champ, ce qui inclura le champ lors de la soumission, mais le client ne verra jamais le champ lui-même.
La raison pour laquelle vous voudrez peut-être le faire est que ce formulaire de paiement peut être intégré (via un shortcode) dans une page qui donne déjà des informations importantes sur le produit, y compris le prix. Si tel est le cas, l'affichage du champ Produit dans le formulaire peut être redondant et même déroutant pour le client.
N'oubliez pas que le champ doit être présent.
À ce stade, vous devriez enregistrer votre formulaire. La prochaine étape vous obligera à visiter d'autres pages pour configurer les options de paiement. Une fois terminé, nous reviendrons sur le formulaire.
Ajout des champs de paiement
Nous sommes maintenant libres d'accepter les paiements des clients. Pour ce faire, nous devons configurer le formulaire pour accepter au moins une méthode de paiement. Comme mentionné précédemment, nous utiliserons le module complémentaire PayPal Payments Standard pour Gravity Forms afin de traiter nos paiements.
Selon la passerelle de paiement que vous choisissez, vous devrez peut-être ajouter ou non un champ direct à votre formulaire. Par exemple, si vous utilisez le module complémentaire Stripe, il ajoutera un champ Carte de crédit à l'éditeur de formulaire que vous pourrez sélectionner comme vous l'avez fait précédemment.
Cependant, le module complémentaire PayPal Payments Standard ne le fait pas. Au lieu de cela, vous devrez suivre les instructions directement de Gravity Forms pour configurer vos formulaires afin d'utiliser PayPal pour les transactions client.
Dans cet article, nous ne couvrirons pas ces détails. Ils s'appliquent à Gravity Forms, qu'il soit intégré ou non à Easy Digital Downloads. Vous voudrez donc utiliser la documentation de Gravity Forms pour trouver la documentation pertinente à vos besoins.
Complétez toutes les étapes requises pour la configuration de vos passerelles de paiement. Si un nouveau champ doit être ajouté au formulaire, faites-le en suivant les mêmes méthodes que celles décrites ci-dessus.
Ajout du montant final du paiement (total)
Lors de la configuration de votre ou vos options de paiement, il vous aurait été demandé de créer un flux pour chaque type de paiement que vous accepteriez. Les utilisateurs de PayPal Payments Standard auraient consulté cette documentation.
Lors de la création de ce flux, vous auriez dû définir le Montant du paiement pour le flux. Ce que cela signifie, c'est qu'à chaque fois que votre formulaire de paiement est soumis, le client doit payer un certain montant et le flux doit savoir d'où vous tirez ce montant.
Le paramètre Montant du paiement doit être défini pour extraire les données d'un de vos champs de formulaire qui contient la valeur totale du formulaire. Cependant, nous n'avons pas encore configuré ce champ. Enregistrez la progression de votre flux et retournez à votre formulaire enregistré afin que nous puissions ajouter le champ.
Sur le côté droit de l'écran de création de formulaire, sélectionnez pour ajouter un champ Total à votre formulaire dans la section Champs de tarification. Une fois ajouté, développez le nouveau champ.
Vous verrez qu'il n'y a pas beaucoup de paramètres. Le champ est conçu pour calculer automatiquement le total du formulaire en fonction des informations qu'il obtient des autres champs du formulaire et de l'interaction possible du client.
Avec ce champ ajouté à votre formulaire et votre formulaire mis à jour, vous pouvez maintenant définir ce champ comme le Montant du paiement dans votre flux.
Continuez à suivre le reste de la documentation Gravity Forms pour finaliser les paramètres de votre flux et enregistrer le nouveau flux.
Utiliser votre formulaire de paiement personnalisé
Maintenant que vous avez créé un formulaire de paiement personnalisé prêt à accepter les paiements, vous devez afficher votre formulaire. Gravity Forms rend cela extrêmement facile avec le shortcode [[gravityform]]. Sur n'importe quelle page, article ou type d'article personnalisé que vous souhaitez, cliquez sur le bouton Ajouter un formulaire pour ajouter un formulaire à votre contenu.
Une fois votre page enregistrée, le formulaire s'affichera sur le site et sera prêt à accepter les paiements pour le produit que vous avez configuré.
Veuillez noter que si PayPal Payments Standard est la seule passerelle que vous avez configurée, aucun texte lié à PayPal ne s'affichera sur le formulaire (sauf si vous avez ajouté du texte personnalisé). Le simple fait de remplir le formulaire et de le soumettre redirigera le client vers PayPal pour finaliser le paiement.
Exemples de logique conditionnelle
Il serait impossible de couvrir toutes les configurations de formulaire possibles dans cet unique article. Cependant, nous pouvons partager quelques exemples pour vous aider à démarrer à rendre votre formulaire plus intelligent et plus convivial.
Regardons un exemple de formulaire que nous utilisons ici sur le site Easy Digital Downloads. Pour aider les nouveaux utilisateurs à choisir les extensions dont ils ont besoin pour lancer leurs boutiques, nous avons créé le Starter Package. (Mise à jour : notre Starter Package n'est plus en ligne, car nous avons modifié nos options d'achat globales. Vous pouvez continuer à lire comme s'il existait.)
Ce formulaire autonome ne dépend pas de la fonctionnalité du panier d'achat.
Divisé en sections logiques qui incluent des sélections d'extensions, tout ce qu'un client a à faire est de sélectionner les extensions qui correspondent aux besoins de son entreprise, d'entrer ses informations personnelles et de paiement, d'accepter les conditions et de finaliser l'achat.
Non seulement le formulaire est entièrement personnalisé, mais il peut facilement être l'un des nombreux formulaires de paiement personnalisés sur le site. Avec les informations ci-dessus, vous pouvez être bien parti pour avoir exactement cela.
Packages de produits personnalisés
Sur notre formulaire Starter Package, vous avez peut-être remarqué l'utilisation de sections d'extensions ciblées qui permettent au client de choisir certains produits. Regardons spécifiquement la section Marketing.
Chaque fois qu'un utilisateur coche une case pour l'une de nos extensions marketing, l'extension est ajoutée à son package de démarrage personnalisé, modifiant ainsi le total du formulaire.
Pour y parvenir, vous devez :
- Ajoutez un nouveau champ Cases à cocher à votre formulaire. Une fois développé, trois options de case à cocher par défaut apparaîtront dans la section Choix. Si vous avez l'intention d'utiliser ce champ de case à cocher pour permettre la sélection de cinq produits, par exemple, vous devez créer cinq choix qui représentent les noms de vos cinq produits. Faites-en un champ obligatoire.
- Ajoutez un nouveau champ Produit à votre formulaire. Configurez le champ Produit pour qu'il se connecte à l'un des produits Easy Digital Downloads que vous avez référencés à partir de vos choix de cases à cocher. Dans les paramètres de l'onglet Général du Produit, définissez son Type de champ sur « Produit unique » (il ne peut pas être masqué) et donnez-lui un prix. Dans l'onglet Avancé, cochez le paramètre Activer la logique conditionnelle et configurez le champ pour qu'il ne s'affiche que si le « Choix » correct de votre champ de case à cocher à l'étape 1 est sélectionné.
- Répétez l'étape 2 pour tous les Choix créés à l'étape 1.
Ce que cela fait, c'est d'ajouter uniquement des champs Produit au formulaire lorsque leurs conditions sont remplies. Ces conditions sont vérifiées par les Choix du champ de case à cocher. Tant que ces Choix représentent vos produits et y sont liés par la logique conditionnelle des champs, les clients peuvent créer leurs propres packages personnalisés.
Sélecteur de mode de paiement
Vers la fin de notre formulaire Starter Package, nous demandons au client de sélectionner un mode de paiement. Nous acceptons les paiements via Stripe et PayPal.
Comme mentionné ci-dessus, différentes méthodes sont utilisées pour ajouter des champs au formulaire pour les informations de paiement. PayPal Payments Standard ne nécessite pas de champ, mais Stripe en nécessite plusieurs. Le champ Carte de crédit de Stripe et un champ Adresse supplémentaire doivent être ajoutés au formulaire pour traiter les paiements par carte de crédit.
Pour créer ceci, vous devez :
- Ajoutez un nouveau champ Boutons Radio à votre formulaire. Une fois développé, trois options radio par défaut apparaîtront sous la section Choix. Puisque nous permettons aux clients de choisir entre deux modes de paiement, vous devez avoir deux choix qui représentent les noms des modes de paiement. Dans notre cas, nous avons choisi Carte de crédit / débit et PayPal comme choix. Rendez ce champ obligatoire.
- Ajoutez tous les champs nécessaires pour accepter les paiements par carte de crédit selon les instructions de Gravity Forms. Configurez les champs pour collecter toutes les informations requises. Dans l'onglet Avancé de tous les champs liés aux cartes de crédit, cochez le paramètre Activer la logique conditionnelle et configurez les champs pour qu'ils ne s'affichent que si le « Choix » correct de votre champ de boutons radio à l'étape 1 est sélectionné.
- Comme PayPal ne nécessite aucun champ dans le formulaire, tout ce que vous avez à faire est d'aller dans votre Flux PayPal pour le formulaire et dans ses paramètres, cochez le paramètre Activer la logique conditionnelle et configurez le Flux pour qu'il ne soit utilisé que si le « Choix » correct de votre champ de boutons radio à l'étape 1 est sélectionné (PayPal).
Le choix vous appartient
C'est une chose difficile à écrire car une fois que vous avez saisi le concept de logique conditionnelle des champs, vous avez vraiment une toile vierge avec laquelle jouer chaque fois que vous créez un formulaire de paiement personnalisé.
Nous pouvons fournir des exemples, mais les possibilités sont infinies. La clé de tout cela est la logique conditionnelle et l'utilisation stratégique des champs Produit.
Il vous appartient de décider si vos produits nécessitent un formulaire de paiement plus spécialisé. De même, la création de quelque chose de similaire à notre Starter Package est un choix commercial que vous seul pouvez faire.
Jouez avec les fonctionnalités pour voir si cela suscite quelques idées lucratives.
Questions fréquemment posées
Puis-je utiliser Gravity Forms Checkout avec l'extension Paiements Récurrents ?
Non. Les Paiements Récurrents ne s'intègrent pas à la configuration ci-dessus.
Qu'en est-il des reçus par e-mail et de la confirmation d'achat ?
La redirection par défaut de confirmation d'achat d'Easy Digital Downloads ne s'applique plus. Cependant, Gravity Forms vous permettra de configurer un comportement de confirmation personnalisé si vous le souhaitez. Une page standard avec des liens statiques est recommandée.
Le reçu par e-mail sera toujours envoyé à l'utilisateur contenant toutes les informations relatives au produit que vous avez dans votre modèle de reçu. Ce comportement ne change pas.
Astuce : à partir d'une confirmation personnalisée que vous créez dans Gravity Forms, dirigez vos clients vers leur boîte de réception après l'achat et liez-les à des informations importantes qui pourraient minimiser la confusion.
Si je permets aux clients de créer des packages personnalisés, sont-ils traités comme des Bundles ?
La fonctionnalité de bundle principale d'Easy Digital Downloads ne s'applique pas. Si un client achète 10 produits via l'un de vos formulaires de paiement personnalisés, chaque produit est considéré comme un achat distinct.
Comment utiliser les réductions ?
Afin d'offrir des réductions aux clients utilisant le formulaire de paiement personnalisé, vous devez simplement définir les champs Produit pour qu'ils aient un prix réduit. Les clients ne pourront pas entrer de code de réduction comme avec le formulaire de paiement par défaut.
Comment styliser mes formulaires de paiement personnalisés ?
Il est important de noter que tout ce dont nous avons discuté ici concerne la construction du formulaire et sa fonctionnalité. Ce sont des éléments de formulaire génériques et doivent être stylisés par votre thème ou votre propre CSS personnalisé, comme tout autre élément HTML.
Lors du test de votre formulaire, assurez-vous de tester sa fonctionnalité. Qu'il soit agréable à regarder ou non n'est pas une indication de son fonctionnement. Comme vous pouvez l'imaginer, la création de l'affichage du Starter Package a nécessité plusieurs heures de travail de conception personnalisé.
Si vous avez des questions sur ce qui a été mentionné dans cet article, n'hésitez pas à laisser une question ci-dessous dans les commentaires.
Pour obtenir de l'aide, veuillez utiliser notre formulaire de support.
