Résumé de l'IA
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.
/**
* 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.
Personnalisation du bouton de demande de paiement (Apple Pay et Google Pay)
Si votre champ Carte de crédit Stripe utilise le Élément de paiement, vous pouvez également personnaliser l'affichage des boutons Apple Pay et Google Pay en remplaçant le fichier Stripe. appearance objet.
Pour ce faire, utilisez la commande wpforms_integrations_stripe_api_payment_intents_set_element_appearance filtrer et ajouter un rules entrée pour .PaymentRequestButton. Cela vous permet de contrôler le style du bouton, y compris la couleur du texte.
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', function ( $appearance ) {
// Define a consistent appearance structure for Stripe Elements.
$appearance = [
'rules' => [
'.PaymentRequestButton' => [
'background-color' => '#FFF',
'color' => '#FFFFFF',
'border-radius' => '4px',
'height' => '64px',
'font-family' => 'Arial, sans-serif',
'font-size' => '16px',
],
],
'variables' => [
'colorPrimary' => '#FF0000',
'fontFamily' => 'Arial, sans-serif',
],
];
return $appearance;
});
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.