Introduction
Vous souhaitez personnaliser le style Stripe sur les éléments de vos formulaires ? Pas de problème ! Ce tutoriel vous guidera à travers les étapes simples de la personnalisation de l'apparence de votre champ de carte de crédit Stripe en utilisant PHP.
Veuillez noter que ce snippet ne sera appliqué au champ de formulaire Stripe Credit Card que lorsque le mode de champ Credit Card de l'onglet Payments de WPForms Settings est réglé sur Payment Element.
Pour en savoir plus sur cette option, veuillez consulter ce guide utile.
Par défaut, le champ aura déjà des options par défaut définies dans WPForms.
Création du formulaire
Nous allons commencer par créer un nouveau formulaire et y ajouter nos champs. Vous devez inclure le champ Stripe Credit Card dans votre formulaire.
Si vous avez besoin d'aide pour créer un formulaire qui traitera les paiements Stripe, veuillez consulter ce guide détaillé.
Pour les besoins de ce tutoriel, nous avons créé un formulaire de commande simple.
Ajout du snippet
Il est maintenant temps d'ajouter le snippet. Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets personnalisés à votre site, veuillez consulter ce tutoriel.
Stripe dispose d'un grand nombre d'options pour styliser ses éléments. Pour une liste plus complète de ce que vous pouvez modifier, veuillez consulter leur propre documentation sur Elements Appearance API. Veillez à tester votre formulaire et vos modifications car certains éléments peuvent ne pas être pris en charge par cette API.
/**
* Customize Stripe styling when using the Payment Element
*
* @link https://wpforms.com/developers/how-to-customize-the-stripe-styling/
*/
function wpf_stripe_payment_element_appearance() {
return [
'theme' => 'stripe',
'labels' => 'floating',
'variables' => [
'fontFamily' => 'Sohne, system-ui, sans-serif',
'fontWeightNormal' => '500',
'borderRadius' => '8px',
'colorBackground' => '#0A2540',
'colorPrimary' => '#EFC078',
'accessibleColorOnColorPrimary' => '#1A1B25',
'colorText' => 'white',
'colorTextSecondary' => 'white',
'colorTextPlaceholder' => '#727F96',
'tabIconColor' => 'white',
'logoColor' => 'dark'
]
];
}
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', 'wpf_stripe_payment_element_appearance' );
Dans cet extrait, nous avons sélectionné le thème Stripe et défini les étiquettes de champ comme flottantes, ainsi que diverses options CSS.
Maintenant, lorsque nous affichons notre formulaire, vous pouvez clairement voir les changements que nous avons apportés, y compris les étiquettes flottantes sur le champ.
Et c'est tout ce dont vous avez besoin pour personnaliser le style Stripe. Vous souhaitez ajouter des étiquettes flottantes à d'autres champs de formulaire ? Consultez notre tutoriel sur la création d'un formulaire avec des étiquettes flottantes.