Personalizați elementele universale de plată Stripe

Migrarea către elementele de plată

Dacă ați folosit integrarea noastră Stripe înainte de introducerea Elementelor de Plată, v-am oferit acces temporar la o setare numită „Mod Element” în Descărcări > Setări > Plăți > Stripe. La actualizare, magazinul dvs. va rămâne la Elementele de Card și vă va oferi posibilitatea de a comuta la Elementele de Plată numai după ce ați confirmat că procesul de checkout funcționează cu acesta. Iată câteva personalizări comune pe care poate fi necesar să le modificați sau să le eliminați pentru a optimiza experiența dvs. cu Elementele de Plată.

Schimbați atributul ‘id’ al țintei Elementelor

Schimbați atributul ‘id’ al țintei Elementelor
Integrarea Easy Digital Downloads ‘Card Elements’ a necesitat existența unei etichete <div> cu id-ul ‘edd-stripe-card-element’. Poate arăta astfel, în personalizările dvs.:

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

Noul Element de Plată folosește un atribut ‘id’ diferit, deci trebuie să schimbați această linie în:

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

Câmpul Nume Card nu mai este necesar

Datorită noului Element de Plată, câmpul pentru numele cardului nu mai este obligatoriu. Dacă Elementul de Plată Stripe detectează că metoda de plată aleasă necesită un nume, va solicita unul.

Pluginuri de concatenare de scripturi și stiluri

Dacă ați folosit un plugin sau o resursă pentru a uni toate fișierele Javascript sau fișierele CSS, va trebui să vă asigurați că „reconstruiți” scripturile, deoarece stilurile Javascript și CSS pentru elementele de card s-au schimbat.

Pluginuri sau servicii de caching

La trecerea la Elementul de Plată, asigurați-vă că goliți orice cache aveți, inclusiv cache-ul paginilor, cache-ul obiectelor și servicii precum Cloudflare, pentru a vă asigura că fișierele Javascript și CSS corespunzătoare sunt încărcate.

Easy Digital Downloads — Stripe 2.9 adaugă suport pentru Elementul de Plată al Stripe, care permite o experiență de checkout îmbunătățită, mai eficientă și mai personalizabilă. Acesta este disponibil pentru utilizatorii care folosesc gateway-ul nostru Stripe Pro, versiunea 2.9 sau mai mare. Utilizatorii noi vor folosi automat elementele de plată; utilizatorii existenți care s-au conectat la Stripe vor putea opta pentru acesta atunci când sunt pregătiți, permițând timp pentru a testa orice personalizări pe care le-ați făcut la Checkout-ul dvs. EDD într-un mediu local sau de staging. Dacă ați personalizat șablonul de Checkout, va trebui să citiți mai multe despre migrarea de la Elementul de Card moștenit la Elementul de Plată.

Filtrele pentru elementele de plată se află toate în easy-digital-downloads/includes/gateways/stripe/includes/elements/payment-elements.php în nucleul EDD, deci căutați acolo pentru cod complet și linkuri către documentația specifică Stripe.

Înregistrați un Font Personalizat pentru a-l Utiliza cu Elementele de Plată Stripe

Puteți configura Stripe să utilizeze un font personalizat, chiar și din surse externe de fonturi precum Google sau Adobe Fonts, cu două filtre:

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

Există multe opțiuni diferite posibile de adăugat la variabile pentru a personaliza fiecare aspect al formularului de plată Stripe. De exemplu, etichetele formularului pot fi floating în câmpurile formularului, în loc să fie deasupra lor, cu acest filtru mic:

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