Stripe : Styliser les champs de carte de crédit

La passerelle de paiement Stripe pour WooCommerce utilise Stripe Elements (lien disponible uniquement en anglais) pour afficher les champs de carte de crédit sur les pages de validation de commande. Cela permet de personnaliser l’expérience de validation de commande de votre boutique en stylisant les champs de carte de crédit en fonction de votre thème et de vos préférences. Tous les champs sont affichés dans des balises <iframe> pour offrir une expérience sécurisée aux clients. Étant donné que le contenu des balises iframe ne fait techniquement pas partie de votre page, il n’est pas possible d’appliquer directement des styles à ces composants à partir de votre feuille de style. La personnalisation doit être effectuée d’une autre manière.

Pure CSS

↑ Back to top

Stripe Elements offre très peu d’options de style. Par défaut, les champs affichent uniquement du texte, rien de plus. Cela signifie que toutes les personnalisations de style doivent être effectuées via CSS, y compris les couleurs d’arrière-plan, les bordures, le remplissage, les ombres, etc.

Disposition standard

↑ Back to top

En mode normal, trois champs distincts sont affichés pour la saisie des informations de carte de crédit.

Styliser tous les champs simultanément

Vous pouvez utiliser le sélecteur .wc-stripe-elements-field pour cibler tous les champs simultanément. Exemple :

.wc-stripe-elements-field {
border-color: #999;
}

 Styliser un champ individuel

Si vous souhaitez changer le style d’un seul champ, utilisez son identifiant :

Champ	Sélecteur
Numéro de carte	#stripe-card-element
Date d’expiration	#stripe-exp-element
Cryptogramme visuel	#stripe-cvc-element

Exemple :

#stripe-card-element {
margin-bottom: 1em;
}

Formulaire de paiement compact

↑ Back to top

Si vous avez activé l’option Formulaire de paiement compact dans les réglages de Stripe, tous les champs de carte de crédit seront affichés ensemble dans un seul champ. Dans ce cas, il vous suffit d’utiliser le sélecteur .wc-stripe-elements-field pour cibler le conteneur de ce champ.

Utiliser un filtre

↑ Back to top

Les sélecteurs CSS ci-dessus permettent de modifier le style des conteneurs de champ. Si vous souhaitez également modifier un élément de saisie, vous devez fournir les styles nécessaires à Stripe. Cela peut être fait en utilisant le filtre PHP wc_stripe_elements_styling. Exemple :

<?php
function my_theme_modify_stripe_fields_styles( $styles ) {
    return array(
        'base' => array(
            'iconColor'     => '#666EE8',
            'color'         => '#31325F',
            'fontSize'      => '15px',
            '::placeholder' => array(
                'color' => '#CFD7E0',
            ),
        ),
    );
}

add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

Attention :

• Les styles que vous voyez dans l’exemple sont des styles par défaut utilisés par l’extension.
• Si vous fournissez des styles personnalisés, l’extension ignorera les styles par défaut. Pour éviter cela, copiez l’exemple et modifiez-le.
• Tous les styles sont appliqués via JavaScript. Vous devez donc utiliser des noms de propriétés JavaScript au lieu de Pure CSS. Par exemple, au lieu de font-size vous devez utiliser fontSize.

Pour voir une description du tableau (structure de données) attendu, consultez la documentation Stripe – Options des éléments (lien disponible uniquement en anglais). Comme expliqué sur cette page, vous devez disposer des options suivantes : Format

array(
    [state] => array(
        [property] => [value],
        [pseudoClass] => array(
            [property] => [value],
        ),
    ),
)

 Tous les styles personnalisés doivent se trouver dans un tableau imbriqué contenant :

• L’état en tant qu’élément de premier niveau.
• Les propriétés et leurs valeurs en tant qu’éléments de deuxième niveau.
• Les pseudo-classes pour un état spécifique en tant qu’éléments de deuxième niveau, et leurs propriétés en tant qu’éléments de troisième niveau.

États

↑ Back to top

État	Description
base	Style de base. Toutes les autres variantes héritent de ce style.
complete	Appliqué lorsque l’élément a une saisie valide.
empty	Appliqué lorsque l’élément n’a pas de saisie client.
invalid	Appliqué lorsque l’élément contient des valeurs non valides.

Propriétés autorisées

↑ Back to top

color, fontFamily, fontSize, fontSmoothing, fontStyle, fontVariant, fontWeight, iconColor, lineHeight, letterSpacing, textAlign, textDecoration, textShadow, and textTransform

Pseudo-classes

↑ Back to top

hover, :focus, ::placeholder, ::selection, :-webkit-autofill, :disabled, and ::-ms-clear Exemple :

function my_theme_modify_stripe_fields_styles( $styles ) {
    return array(
        'base' => array(
            'color' => '#666666',
            'fontSize' => '15px',
            '::placeholder' => array(
                'color' => '#999999',
            ),
        ),
        'invalid' => array(
            'color' => '#ff7500',
        ),
    );
}

add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

Cet exemple modifie :

• La couleur du texte et la taille de la police dans tous les états.
• La couleur du texte des espaces réservés à l’état normal via la pseudo-classe ::placeholder.
• La couleur des textes des champs lorsqu’ils ne sont pas valides.