Résumé IA
Introduction
Souhaitez-vous modifier le style du texte d'espace réservé du champ de saisie Carte de crédit Stripe avec WPForms ? En utilisant un petit extrait PHP et également du CSS personnalisé, vous pouvez facilement modifier le style du texte d'espace réservé. Dans ce tutoriel, nous vous guiderons à travers chaque étape.
Par défaut, le champ dans lequel vous saisissez votre carte de crédit est stylisé avec une mise en forme par défaut.
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 des paramètres WPForms, onglet Paiements, est défini sur Élément de carte.
Pour en savoir plus sur cette option, veuillez consulter ce guide utile.
Création du formulaire
Nous commencerons par créer un nouveau formulaire et ajouter un champ Carte de crédit Stripe au formulaire.
Si vous avez besoin d'aide pour créer ce type de formulaire, veuillez consulter cette documentation.
Une fois que vous avez ajouté le champ au formulaire, sélectionnez le champ et cliquez sur Options du champ, puis cliquez sur l'onglet Avancé et saisissez du texte dans Espace réservé pour le champ Texte d'espace réservé du nom sur la carte.
Ajout du snippet
Afin de modifier le style du texte d'espace réservé tel que la taille de la police, la couleur, la famille de polices, etc., nous pouvons simplement ajouter un peu de PHP à notre site.
Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.
/*
* Update placeholder text styles on Stripe Credit Card form field
*
* @link https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/
*/
function wpf_dev_stripe_card_field_style( $element_style ) {
$element_style = [
'base' => [
'iconColor' => '#b95d52',
'fontFamily' => 'Roboto, sans-serif',
'fontSize' => '16px',
'fontWeight' => '100',
'backgroundColor' => '#f6f6f6',
'::placeholder' => [
'color' => '#b95d52',
'font-family' => 'Roboto, sans-serif',
'font-size' => '16px',
'font-weight' => '100',
]
],
];
return $element_style;
}
add_filter( 'wpforms_stripe_api_payment_intents_set_config_element_style', 'wpf_dev_stripe_card_field_style', 10, 1 );
Pour une liste complète de toutes les propriétés d'objet, veuillez consulter cette documentation.
Maintenant, vous verrez que le style du champ Carte de crédit Stripe a changé.
Styliser le texte d'espace réservé
L'extrait ci-dessus ne stylisera que le champ réel du Numéro de carte. Si vous souhaitez styliser le texte d'espace réservé pour qu'il corresponde, vous devrez ajouter du CSS.
Si vous avez besoin d'aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.
input.wpforms-field-stripe-credit-card-cardname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname::-moz-placeholder { /* Firefox 19+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-ms-input-placeholder { /* IE 10+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-moz-placeholder { /* Firefox 18- */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
Et c'est tout ce dont vous avez besoin ! Souhaitez-vous également envoyer des métadonnées à Stripe ? Jetez un œil à notre article sur Comment envoyer des métadonnées aux paiements Stripe.