### [Comment personnaliser le style Stripe](https://wpforms.com/developers/how-to-customize-the-stripe-styling/)
**Publié le :** 17 novembre 2023
**Auteur :** Umair Majeed
**Extrait :** Ce tutoriel vous montrera comment personnaliser les styles de paiement Stripe lorsque vous utilisez l'élément de paiement pour votre champ Stripe.
**Contenu :**
## 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 pour personnaliser l'apparence de votre champ **Carte de crédit Stripe** en utilisant PHP.
Veuillez noter que cet extrait ne sera appliqué qu'au champ de formulaire **Carte de crédit Stripe** lorsque le **Mode de champ de carte de crédit** de l'onglet **Paiements** des paramètres WPForms est défini sur **Élément de paiement**.
Pour en savoir plus sur cette option, [veuillez consulter ce guide utile](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#field-modes).
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 ajouter nos champs. Vous devrez inclure le champ **Carte de crédit Stripe** sur votre formulaire.
Si vous avez besoin d'aide pour créer un formulaire qui traitera les paiements Stripe, [veuillez consulter ce guide détaillé](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Stripe Pro Addon").
Pour les besoins de ce tutoriel, nous avons créé un simple formulaire de commande.
## Ajout de l'extrait
Il est maintenant temps d'ajouter l'extrait. Si vous avez besoin d'aide sur comment et où ajouter des extraits personnalisés à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Comment ajouter du PHP ou du JavaScript personnalisé pour WPForms").
Stripe propose de nombreuses options pour styliser ses éléments. Pour une liste plus complète de ce que vous pouvez modifier, veuillez consulter leur propre documentation sur l'[API d'apparence des éléments](https://stripe.com/docs/elements/appearance-api). Assurez-vous de tester votre formulaire et vos modifications, car certains éléments peuvent ne pas être pris en charge par cette API.
```
/**
* Personnaliser le style Stripe lors de l'utilisation de l'élément de paiement
*
* @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** du champ sur **flottantes**, ainsi que diverses options CSS.
Maintenant, lorsque nous visualisons 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 l'**Élément de paiement**, vous pouvez également personnaliser l'affichage du bouton Apple Pay et Google Pay en remplaçant l'objet `appearance` de Stripe.
Pour ce faire, utilisez le filtre `wpforms_integrations_stripe_api_payment_intents_set_element_appearance` et ajoutez une entrée `rules` 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 ) {
// Définir une structure d'apparence cohérente pour les éléments Stripe.
$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;
});
```
Pour des options de style supplémentaires, consultez la documentation de Stripe pour l'[API d'apparence des éléments](https://docs.stripe.com/elements/appearance-api) et le [bouton de demande de paiement](https://docs.stripe.com/stripe-js/elements/payment-request-button).
Et voilà tout ce qu'il faut pour personnaliser le style Stripe. Souhaitez-vous ajouter des étiquettes flottantes à d'autres champs de formulaire ? Consultez notre tutoriel sur [Comment créer un formulaire avec des étiquettes flottantes](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "Comment créer un formulaire avec des étiquettes flottantes").
**Catégories :** Tutoriels
**Tags :** Stripe
---