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.
Remarque : Cette documentation est de niveau développeur. Veuillez noter que les personnalisations ne sont pas prises en charge par notre Politique d’assistance (lien disponible uniquement en anglais). Si vous ne maîtrisez pas les méthodes de personnalisation des codes/modèles et les protocoles de dépannage de conflits, veuillez contacter un WooExpert ou un Développeur (lien disponible uniquement en anglais) pour obtenir de l’aide.

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.
Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.