Le bloc Bouton de Paiement vous permet d'accepter les paiements Stripe directement sur n'importe quelle page SeedProd — aucune boutique WooCommerce, aucune configuration de paiement complexe requise. Connectez simplement votre compte Stripe, définissez un montant et une description, et un bouton de paiement entièrement fonctionnel apparaît sur votre page, prêt à collecter de l'argent.
Ce bloc est idéal pour vendre des produits individuels, des téléchargements numériques, des services, des billets d'événement ou des campagnes de dons sans les frais généraux d'une boutique de commerce électronique complète. Le bouton est stylisé avec le même système de conception flexible que le bloc Bouton standard de SeedProd, vous offrant des modèles, des arrière-plans dégradés, des contrôles de bordure et un support d'icônes pour qu'il corresponde parfaitement à la conception de votre page.
Ajouter le bloc Bouton de Paiement à vos pages
Suivez ces étapes pour ajouter un bloc Bouton de Paiement à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, faites glisser le bloc Bouton de Paiement dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Bouton de Paiement pour ouvrir ses paramètres. L'onglet Contenu est divisé en trois sections.
Configuration du paiement :
Avant de configurer les détails du paiement, vous devez connecter votre compte Stripe. Cliquez sur Se connecter avec Stripe pour autoriser SeedProd à traiter les paiements via votre compte. Une fois connecté, vous pouvez remplir les champs suivants :
- Montant : Entrez le montant du paiement à facturer (requis). Cette valeur est transmise à Stripe lorsque le bouton est cliqué.
- Description du paiement : Entrez une courte description de ce pour quoi le client paie (requis). Elle apparaît dans votre tableau de bord Stripe et sur le reçu du client.
- Devise du paiement : Sélectionnez la devise de la transaction dans une liste complète de devises mondiales (par défaut : USD).
- URL de succès : Entrez l'URL vers laquelle rediriger les clients après un paiement réussi, telle qu'une page de remerciement.
Bouton :
- Texte du bouton : Entrez l'étiquette principale affichée sur le bouton (par défaut : « Payer maintenant »).
- Sous-texte du bouton : Ajoutez éventuellement une ligne secondaire de texte plus petit sous l'étiquette principale du bouton.
- Alignement : Définissez l'alignement horizontal du bouton — Gauche, Centre ou Droite — avec un contrôle par appareil pour ordinateur, tablette et mobile.
- Taille : Choisissez la taille du bouton parmi Minuscule, Petit, Moyen, Grand, Très grand ou Extrêmement grand.
Icônes :
- Icône avant le texte : Sélectionnez une icône à afficher à gauche du texte du bouton à l'aide du sélecteur d'icônes.
- Icône après le texte : Sélectionnez une icône à afficher à droite du texte du bouton à l'aide du sélecteur d'icônes.
Étape 2a : Choisir un style de modèle
Dans l'onglet Templates, vous pouvez appliquer un style prédéfini à votre bouton de paiement en un seul clic. Les modèles disponibles incluent Bouton Pilule, Bouton Plat, Bouton Bleu, Bouton Vert Clair, Bouton Vert, Bouton Orange, Bouton Rouge, Bouton Jaune, Bouton Blanc, Bouton Gris et Bouton Noir. L'application d'un modèle met instantanément à jour les couleurs, la forme et le style du bouton pour correspondre au préréglage choisi.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, la section Styles vous donne un contrôle granulaire sur l'apparence visuelle du bouton :
- Typographie : Définissez la famille de polices, la taille, le poids, le style, la hauteur de ligne, l'espacement des lettres et la casse du texte du bouton.
- Style du bouton : Choisissez parmi les styles de rendu de bouton Plat, 2D, Vintage ou Fantôme.
- Couleur d'arrière-plan : Définissez la couleur d'arrière-plan du bouton pour les états normal et au survol.
- Couleur du texte du bouton : Définissez la couleur de l'étiquette du bouton pour les états normal et au survol.
- Style d'arrière-plan du bouton : Basculez entre les arrière-plans Uni et Dégradé. Le mode Dégradé expose le type (Radial/Linéaire), l'angle, la position, la première et la deuxième couleur, ainsi que leurs arrêts de localisation.
- Rembourrage vertical : Contrôlez l'espacement intérieur supérieur et inférieur du bouton.
- Rembourrage horizontal : Contrôlez l'espacement intérieur gauche et droit du bouton.
- Rayon de bordure : Arrondissez les coins du bouton en ajustant la valeur du rayon de bordure.
- Épaisseur de la bordure du bouton : Définissez l'épaisseur de la bordure autour du bouton.
- Couleur de la bordure du bouton : Choisissez la couleur de la bordure du bouton.
- Ombre du texte : Ajoutez une ombre au texte de l'étiquette du bouton en utilisant des options de taille prédéfinies (Aucune, Cheveux, Petite, Moyenne, Grande, Très grande, Extrêmement grande).
- Ombre : Ajoutez une ombre portée au bouton en utilisant les mêmes options de taille prédéfinies.
L'onglet Avancé fournit également des contrôles pour l'espacement (marge et remplissage), les attributs CSS personnalisés, la visibilité des appareils et les animations d'entrée.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Bouton de paiement et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Bouton de paiement à votre page ! Avec votre compte Stripe connecté et les détails de paiement configurés, votre page peut désormais accepter des transactions réelles sans nécessiter de panier d'achat ou de configuration e-commerce complète. Expérimentez avec les modèles, les styles de bouton et les combinaisons d'icônes pour créer un bouton de paiement qui s'intègre naturellement dans la conception de votre page et encourage les visiteurs à finaliser leur achat.