Stripe Universal Payment Elements aanpassen

Migreren naar betaalelementen

Als je onze Stripe-integratie gebruikte vóór de introductie van Payment Elements, hebben we je tijdelijke toegang gegeven tot een instelling genaamd “Elements Mode” in Downloads > Instellingen > Betalingen > Stripe. Na het updaten blijft je winkel op Card Elements, en geeft je de mogelijkheid om pas over te schakelen naar Payment Elements nadat je hebt bevestigd dat je checkout hiermee werkt. Hier zijn een paar veelvoorkomende aanpassingen die je mogelijk moet wijzigen of verwijderen om je Payment Elements-ervaring te optimaliseren.

Wijzig het 'id'-attribuut van het Elements-doel

Wijzig het 'id'-attribuut van het Elements-doel
De Easy Digital Downloads 'Card Elements'-integratie vereiste dat er een <div>-tag met de id ‘edd-stripe-card-element’ was. Het kan er als volgt uitzien in je aanpassingen:

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

Het nieuwe Payment Elements gebruikt een ander 'id'-attribuut, dus je moet deze regel wijzigen naar:

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

Kaartnaamveld is niet langer nodig

Dankzij het nieuwe Payment Element is het kaartnaamveld niet langer vereist. Als Stripe's Payment Element detecteert dat de gekozen betaalmethode een naam vereist, zal het hierom vragen.

Script- en stijlconcatenatieplug-ins

Als je een plug-in of bron gebruikte om alle Javascript-bestanden of CSS-bestanden samen te voegen, wil je ervoor zorgen dat je je scripts opnieuw 'bouwt', aangezien de Javascript- en CSS-styling voor de kaartelementen is gewijzigd.

Caching plug-ins of services

Na het overschakelen naar het Payment Element, zorg ervoor dat je alle caches die je hebt leegmaakt, inclusief paginacaching, objectcaching en services zoals Cloudflare, om ervoor te zorgen dat de juiste Javascript- en CSS-bestanden worden geladen.

Easy Digital Downloads — Stripe 2.9 voegt ondersteuning toe voor Stripe's Payment Element, wat zorgt voor een verbeterde, efficiëntere en aanpasbare checkout-ervaring. Dit is beschikbaar voor gebruikers die onze Stripe Pro Gateway gebruiken, versie 2.9 of hoger. Nieuwe gebruikers zullen automatisch betalingselementen gebruiken; bestaande gebruikers die verbinding hebben gemaakt met Stripe kunnen zich aanmelden wanneer ze er klaar voor zijn, waardoor er tijd is om eventuele aanpassingen die je hebt gemaakt aan je EDD Checkout in een lokale of staging-omgeving te testen. Als je je Checkout-sjabloon hebt aangepast, wil je meer lezen over het migreren van het oude Card Element naar het Payment Element.

Filters voor de betalingselementen bevinden zich allemaal in easy-digital-downloads/includes/gateways/stripe/includes/elements/payment-elements.php in EDD core, dus kijk daar voor volledige code en links naar specifieke Stripe-documentatie.

Registreer een aangepast lettertype om te gebruiken met Stripe's Payment Elements

Je kunt Stripe zo instellen dat het een aangepast lettertype gebruikt, zelfs van externe lettertypebronnen zoals Google of Adobe Fonts, met twee filters:

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

Er zijn veel verschillende mogelijke opties om toe te voegen aan de variabelen om elk aspect van het Stripe-betalingsformulier aan te passen. De formulierlabels kunnen bijvoorbeeld zwevend zijn in de formulierinvoer, in plaats van erboven, met dit kleine filter:

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