Personalizza gli elementi di pagamento universali di Stripe

Migrazione a Payment Element

Se hai utilizzato la nostra integrazione Stripe prima dell'introduzione di Payment Element, ti abbiamo concesso l'accesso temporaneo a un'impostazione chiamata "Modalità Elementi" in Download > Impostazioni > Pagamenti > Stripe. Dopo l'aggiornamento, il tuo negozio rimarrà su Elementi Carta, e ti darà la possibilità di passare a Payment Element solo dopo aver confermato che il tuo checkout funziona con esso. Ecco un paio di personalizzazioni comuni che potresti dover modificare o rimuovere per ottimizzare la tua esperienza con Payment Element.

Modifica l'attributo 'id' del target degli Elementi

Modifica l'attributo 'id' del target degli Elementi
L'integrazione Easy Digital Downloads 'Card Elements' richiedeva un tag <div> con l'id ‘edd-stripe-card-element’. Potrebbe apparire così, nelle tue personalizzazioni:

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

Il nuovo Payment Element utilizza un 'id' diverso, quindi devi cambiare questa riga in:

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

Il campo Nome Carta non è più necessario

Grazie al nuovo Payment Element, il campo del nome della carta non è più richiesto. Se il Payment Element di Stripe rileva che il metodo di pagamento scelto richiede un nome, ne richiederà uno.

Plugin di concatenazione di script e stili

Se stavi utilizzando un plugin o una risorsa per unire tutti i file Javascript o CSS, vorrai assicurarti di 'ricostruire' i tuoi script, poiché il Javascript e lo stile CSS per gli elementi della carta sono cambiati.

Plugin o servizi di caching

Dopo essere passato a Payment Element, assicurati di svuotare tutte le cache che potresti avere, inclusa la cache delle pagine, la cache degli oggetti e servizi come Cloudflare, per garantire che vengano caricati i file Javascript e CSS corretti.

Easy Digital Downloads — Stripe 2.9 aggiunge il supporto per il Payment Element di Stripe, che consente un'esperienza di checkout migliorata, più efficiente e più personalizzabile. Questo è disponibile per gli utenti che utilizzano il nostro Stripe Pro Gateway, versione 2.9 o superiore. I nuovi utenti utilizzeranno automaticamente i payment element; gli utenti esistenti che si sono collegati a Stripe potranno scegliere di attivarli quando saranno pronti, concedendo tempo per testare eventuali personalizzazioni apportate al tuo EDD Checkout in un ambiente locale o di staging. Se hai personalizzato il tuo modello di Checkout, ti consigliamo di leggere di più sulla migrazione dal legacy Card Element al Payment Element.

I filtri per i payment element si trovano tutti in easy-downloads/includes/gateways/stripe/includes/elements/payment-elements.php nel core di EDD, quindi cerca lì per il codice completo e i link alla documentazione specifica di Stripe.

Registra un Font Personalizzato da Utilizzare con i Payment Element di Stripe

Puoi configurare Stripe per utilizzare un font personalizzato, anche da fonti di font esterne come Google o Adobe Fonts, con due filtri:

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;
}

Ci sono molte opzioni diverse possibili da aggiungere alle variabili per personalizzare ogni aspetto del modulo di pagamento Stripe. Ad esempio, le etichette del modulo possono essere fluttuanti negli input del modulo, invece che sopra di essi, con questo piccolo filtro:

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';
}