Personnaliser les éléments de paiement universels Stripe

Migration vers les éléments de paiement

Si vous avez utilisé notre intégration Stripe avant l’introduction des Éléments de paiement, nous vous avons donné un accès temporaire à un paramètre appelé « Mode Éléments » dans Téléchargements > Paramètres > Paiements > Stripe. Lors de la mise à jour, votre boutique restera sur les Éléments de carte et vous donnera la possibilité de passer aux Éléments de paiement uniquement après avoir confirmé que votre paiement fonctionne avec. Voici quelques personnalisations courantes que vous devrez peut-être modifier ou supprimer pour optimiser votre expérience avec les Éléments de paiement.

Modifier l’attribut ‘id’ de la cible des Éléments

Modifier l’attribut ‘id’ de la cible des Éléments
L’intégration « Éléments de carte » d’Easy Digital Downloads exigeait qu’il y ait une balise <div> avec l’id ‘edd-stripe-card-element’. Cela peut ressembler à ceci, dans vos personnalisations :

// Card Elements target div
<div id="edd-stripe-card-element" class="edd-stripe-card-element"></div>

Le nouvel Élement de paiement utilise un attribut ‘id’ différent, vous devez donc modifier cette ligne pour :

// Payment Elements target div
<div id="edd-stripe-payment-element"></div>
<p class="edds-field-spacer-shim"></p>

Le champ Nom de carte n’est plus nécessaire

Grâce au nouvel Élement de paiement, le champ nom de carte n’est plus requis. Si l’Élement de paiement de Stripe détecte que le mode de paiement choisi nécessite un nom, il en demandera un.

Plugins de concaténation de scripts et de styles

Si vous utilisiez un plugin ou une ressource pour joindre tous les fichiers Javascript ou CSS, vous voudrez vous assurer de « reconstruire » vos scripts, car le Javascript et le style CSS des éléments de carte ont changé.

Plugins ou services de mise en cache

Lors du passage à l’Élement de paiement, assurez-vous de vider tous les caches que vous pourriez avoir, y compris la mise en cache de page, la mise en cache d’objets et les services comme Cloudflare, pour vous assurer que les bons fichiers Javascript et CSS sont chargés.

Easy Digital Downloads — Stripe 2.9 ajoute la prise en charge de l’Élement de paiement de Stripe, qui permet une expérience de paiement améliorée, plus efficace et plus personnalisable. Ceci est disponible pour les utilisateurs de notre passerelle Stripe Pro, version 2.9 ou supérieure. Les nouveaux utilisateurs utiliseront automatiquement les éléments de paiement ; les utilisateurs existants qui se sont connectés à Stripe pourront opter pour cela lorsqu’ils seront prêts, ce qui leur laissera le temps de tester les personnalisations que vous avez apportées à votre paiement EDD dans un environnement local ou de staging. Si vous avez personnalisé votre modèle de paiement, vous voudrez en savoir plus sur la migration de l’ancien Élement de carte vers l’Élement de paiement.

Les filtres pour les éléments de paiement se trouvent tous dans easy-digital-downloads/includes/gateways/stripe/includes/elements/payment-elements.php dans le cœur d’EDD, alors regardez là pour le code complet et les liens vers la documentation spécifique de Stripe.

Enregistrer une police personnalisée à utiliser avec les Éléments de paiement de Stripe

Vous pouvez configurer Stripe pour utiliser une police personnalisée, même à partir de sources de polices externes telles que Google ou Adobe Fonts, avec deux filtres :

add_filter( 'edds_stripe_payment_elements_fonts', 'prefix_add_google_font_stripe' );
/**
 * Registers a custom CSS source file for Stripe to use to render custom fonts.
 *
 * @param array $fonts
 * @return array
 */
function prefix_add_google_font_stripe( $fonts ) {
	$fonts[] = array(
		'cssSrc' => 'https://fonts.googleapis.com/css2?family=Gajraj+One',
	);

	return $fonts;
}

add_filter( 'edds_stripe_payment_elements_variables', 'prefix_add_custom_font_stripe_variables' );
/**
 * Add a custom font to the Stripe variables.
 *
 * @param array $variables
 * @return array
 */
function prefix_add_custom_font_stripe_variables( $variables ) {
	$variables['fontFamily'] = 'Gajraj One';

	return $variables;
}

Il existe de nombreuses options différentes possibles à ajouter aux variables pour personnaliser chaque aspect du formulaire de paiement Stripe. Par exemple, les étiquettes du formulaire peuvent être flottantes dans les champs du formulaire, au lieu d’être au-dessus, avec ce petit filtre :

add_filter( 'edds_stripe_payment_elements_label_style', 'prefix_modify_stripe_label_style' );
/**
 * Changes the Stripe label style to floating.
 *
 * @return string
 */
function prefix_modify_stripe_label_style() {
	return 'floating';
}