Comment ajouter des boutons de paiement Stripe simples à vos tableaux de prix dans Divi

Stripe est une solution de traitement des paiements extrêmement flexible pour les entreprises en ligne, en particulier si vous êtes un développeur averti en technologie. Mais, si vous n'êtes pas un développeur et que vous souhaitez toujours utiliser Stripe pour vendre quelques produits en ligne, il existe des moyens simples de le faire. En fait, avec quelques extraits de code (ou un simple plugin), vous pouvez ajouter des boutons de paiement Stripe à votre site Web en un clin d'œil.

Dans ce tutoriel, je vais vous montrer comment ajouter des boutons de paiement Stripe à votre site Web Divi à l'aide du plugin Stripe Payments for WordPress. Je vais même vous montrer comment styliser vos boutons pour qu'ils correspondent à votre mise en page Divi.

Commençons!

Aperçu

Voici un aperçu des boutons de paiement Stripe que nous allons créer dans ce tutoriel.

Commencer

Pour ce tutoriel de cas d'utilisation, vous aurez besoin des éléments suivants :

• Le Thème Divi (installé et actif)
• Un compte Stripe
• Le plugin Stripe Payments pour WordPress de WP Simply Pay (installé et actif)
• Nous utiliserons également une mise en page de tarification des produits numériques disponible GRATUITEMENT dans Divi Builder

À propos du plugin

Stripe Payments pour WordPress par WP Simply Pay est un plugin qui vous permet de commencer à collecter des paiements par carte de crédit avec Stripe en utilisant une simple intégration de shortcode. Vous pouvez en fait créer des formulaires de paiement et des boutons de paiement manuellement sans utiliser le plugin, mais comme ce plugin facilite les choses et offre quelques fonctionnalités pratiques (comme les pages de confirmation de paiement et d'échec de paiement), j'ai pensé que c'était plus utile à long terme . J'utiliserai la version GRATUITE Lite du plugin pour ce tutoriel. La version pro du plugin vous donnera plus de contrôle sur le style de vos formulaires ainsi que la prise en charge d'éléments tels que les champs personnalisés, les montants personnalisés et les fonctionnalités d'abonnement.

Configurer des formulaires Stripe avec le plugin

Une fois le plugin installé et actif, accédez à Simple Pay Lite > Paramètres . Ensuite, sous l'onglet Stripe Keys, vous devrez entrer les clés API de votre compte Stripe. Pour les besoins de ce tutoriel, je n'utiliserai que les clés de test, mais vous devrez vous assurer et activer votre compte Stripe et générer des clés API en direct si vous souhaitez commencer à collecter de l'argent réel.

Vous pouvez trouver vos clés API en vous connectant à votre compte Stripe et en cliquant sur Développeurs > Clés API .

Vous devrez copier à la fois la clé publiable et la clé secrète dans les paramètres du plug-in.

Passez maintenant à l'onglet général. Là, vous pourrez désigner une page de réussite de paiement et une page d'échec de paiement. Vous remarquerez que le plugin a déjà créé ces pages pour vous. Mais comme le contenu de la page est généré par un shortcode, vous pouvez en fait ajouter ces shortcodes à n'importe quel module Divi sur n'importe quelle mise en page Divi pour créer des versions personnalisées de ces pages. Pour l'instant, gardez simplement ces pages par défaut en place et poursuivez la configuration.

Définissez le style du bouton de paiement sur « aucun (hériter du thème) ». Tout cela ne fait que retirer le css utilisé pour styliser le bouton à rayures bleues par défaut. Cela rendra les choses un peu plus propres lorsque nous ajouterons notre propre CSS personnalisé pour styliser le bouton dans Divi.

Ensuite, enregistrez les modifications.

Sous l'onglet de confirmation de paiement, vous pouvez utiliser les balises de modèle disponibles pour personnaliser le message et les informations affichés par le shortcode dans votre page de confirmation de paiement. Mais pour ce tutoriel, je vais juste laisser le message par défaut.

Créer des formulaires de paiement Stripe

Les formulaires de paiement sont en réalité des boutons de paiement Stripe qui génèrent un formulaire de paiement contextuel qui permet aux utilisateurs de finaliser un achat sans jamais quitter la page. Par conséquent, vous devrez créer un nouveau formulaire de paiement pour chaque produit ou service que vous vendez. Dans ce cas d'utilisation, nous allons créer trois formulaires de paiement pour trois produits fictifs.

Pour créer un nouveau formulaire de paiement, accédez au tableau de bord WordPress et accédez à Simple Pay Lite > Ajouter un nouveau.

Donnez un titre au formulaire de paiement (ce titre ne sera pas affiché au début).

Ensuite, sous l'onglet Options de paiement, entrez un montant unique.

Ensuite, cliquez sur l'onglet Affichage du formulaire sur la page et remplacez le texte du bouton de paiement par défaut par « Acheter maintenant » (ou ce que vous voulez). Vous pouvez également choisir le texte de traitement du bouton de paiement.

Sous l'onglet Checkout Overlay Display, mettez à jour les éléments suivants :

Nom de la compagnie
Description de l'article
URL du logo/image
Activer Se souvenir de moi : OUI

Ces options déterminent ce qui est affiché dans la fenêtre contextuelle du formulaire de paiement pour ce produit particulier.

Une fois que vous avez terminé, assurez-vous de publier/mettre à jour le formulaire de paiement.

Vous devrez éventuellement copier le Shortcode du formulaire de paiement situé en haut à droite de la page Modifier le formulaire de paiement afin de le coller dans votre mise en page Divi.

Mais pour l'instant, vous pouvez continuer le même processus pour créer deux autres formulaires de paiement, chacun avec sa propre description de l'article, son logo/image et son montant.

Une fois tous vos formulaires de paiement créés, vous pouvez visiter vos formulaires de paiement en accédant à Simple Pay Lite > Formulaires de paiement. Là, vous aurez un accès facile aux shortcodes.

Ajouter des boutons de paiement Stripe à votre mise en page Divi

Sans les codes abrégés des formulaires de paiement Stripe prêts à l'emploi, nous devons maintenant mettre en place notre mise en page Divi. Pour ce faire, créez une nouvelle page, donnez un titre à votre page et cliquez pour utiliser le Divi Builder.

Sélectionnez ensuite l'option « Choisir une mise en page prédéfinie ».

Ouvrez le pack Digital Product Layout et cliquez pour utiliser la page Digital Product Pricing.

Une fois la mise en page chargée sur la page, publiez la page, puis cliquez pour créer le front-end.

Dans un onglet séparé, revenez à la page des formulaires de paiement et saisissez le shortcode que vous souhaitez ajouter au tableau des prix.

Revenez ensuite à votre présentation de page de tarification et ouvrez les paramètres du tableau de tarification pour l'un des tableaux de tarification de la présentation.

Retirez le texte du bouton (vous n'en avez pas besoin puisque le shortcode servira de bouton), puis collez le shortcode sous le contenu dans la zone de contenu.

Vous verrez un bouton sans style avec le texte « mode de test » mis en évidence sous le bouton. Le bouton n'a pas de style car nous avons sélectionné l'option d'utiliser les styles de thème pour le bouton au lieu du bouton bleu par défaut. Le texte du mode test est simplement là pour vous rappeler que vous n'utilisez pas de formulaire de paiement dynamique. Le texte du mode test disparaîtra évidemment une fois les clés API en direct utilisées.

Ensuite, continuez le même processus de copie et de collage des deux autres codes courts de formulaire de paiement dans les deux tableaux de tarification restants.

Testez l'un des boutons pour vous assurer que la superposition du formulaire de paiement fonctionne correctement. Ça devrait ressembler à ça…

Malheureusement, cette version du plugin ne vous permet pas de personnaliser la superposition du formulaire de paiement au-delà du style par défaut que vous voyez. Mais la fonctionnalité est là et dans de nombreux cas, vous n'aurez pas besoin de ce style supplémentaire. Cependant, vous pouvez styliser ces boutons !

Styliser les boutons de paiement Stripe pour qu'ils correspondent à la mise en page

Pour styliser les boutons de paiement Stripe, nous allons ajouter du CSS personnalisé aux paramètres de notre page. Tout d'abord, nous devons déterminer quel sélecteur nous allons utiliser pour styliser le bouton. Vous pouvez le trouver en utilisant les outils de développement de votre navigateur. Faites un clic droit sur le bouton Stripe et sélectionnez "Inspecter". Dans le code html, vous pouvez voir que le bouton a une classe css "simpay-payment-btn".

C'est le sélecteur dont nous avons besoin pour cibler le style du bouton.

Si nous voulons faire correspondre le style de nos boutons de paiement Stripe avec les boutons utilisés sur notre mise en page prédéfinie, nous pouvons inspecter l'un des boutons Divi déjà stylisés sur la page pour obtenir le code CSS dont nous avons besoin.

Ouvrez maintenant les paramètres de la page et ajoutez le CSS personnalisé suivant sous l'onglet Avancé :

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

C'est ça! Voyons le résultat final.

Personnalisation de vos pages de confirmation de paiement et d'échec de paiement

N'oubliez pas que puisque le plugin génère votre confirmation de paiement et le contenu de votre page d'échec de paiement à l'aide d'un shortcode, vous pouvez ajouter ce shortcode à n'importe quelle mise en page Divi, puis utiliser les paramètres intégrés de Divi pour styliser le texte comme vous le souhaitez.

Ceci est utile pour faire correspondre les styles de ces pages avec votre site Web sans avoir à recourir à un CSS personnalisé.

Dernières pensées

Stripe peut être une solution extrêmement pratique pour collecter des paiements en ligne. Et, avec le plugin Simple Payments for WordPress, vous pouvez obtenir la fonctionnalité de base de Stripe Checkout sur votre site Divi en quelques minutes. De plus, si vous profitez des mises en page prédéfinies de Divi, vous pouvez ajouter et styliser vos boutons de paiement Stripe pour qu'ils correspondent à votre mise en page simplement en copiant et en collant le code CSS déjà créé pour vous. Le résultat est un outil de traitement des paiements entièrement fonctionnel et sécurisé qui peut collecter les paiements des visiteurs sans qu'ils aient à quitter la page.

N'hésitez pas à explorer d'autres façons d'accepter les paiements Stripe sur votre site WordPress.

J'espère que vous trouverez ce tutoriel utile et j'ai hâte de vous entendre dans les commentaires.

À votre santé!