Comment personnaliser le style de Stripe

Introduction

Vous souhaitez personnaliser le style Stripe des é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.

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é.

Pour les besoins de ce tutoriel, nous avons créé un simple formulaire de commande.

Ajout du snippet

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.

/**
 * 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 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 la façon dont le bouton Apple Pay et Google Pay est affiché 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 ) {
    // 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. Souhaitez-vous ajouter des étiquettes flottantes à d'autres champs de formulaire ? Consultez notre tutoriel sur Comment créer un formulaire avec des étiquettes flottantes.