Stripe Universal Payment Elements anpassen

Migration zu Zahlungselementen

Wenn Sie unsere Stripe-Integration vor der Einführung von Payment Elements verwendet haben, haben wir Ihnen vorübergehend Zugriff auf eine Einstellung namens „Elements Mode“ unter Downloads > Einstellungen > Zahlungen > Stripe gewährt. Nach der Aktualisierung bleibt Ihr Shop bei Card Elements und gibt Ihnen die Möglichkeit, zu Payment Elements zu wechseln, sobald Sie bestätigt haben, dass Ihre Kasse damit funktioniert. Hier sind einige gängige Anpassungen, die Sie möglicherweise ändern oder entfernen müssen, um Ihre Payment Elements-Erfahrung zu optimieren.

Ändern Sie das „id“-Attribut des Elements-Ziels

Ändern Sie das „id“-Attribut des Elements-Ziels
Die Easy Digital Downloads „Card Elements“-Integration erforderte ein <div>-Tag mit der id „edd-stripe-card-element“. Es könnte in Ihren Anpassungen so aussehen:

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

Das neue Payment Elements verwendet eine andere „id“-Attribut, daher müssen Sie diese Zeile ändern zu:

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

Kartenname-Feld ist nicht mehr erforderlich

Dank des neuen Payment Elements ist das Feld für den Kartennamen nicht mehr erforderlich. Wenn das Payment Element von Stripe erkennt, dass die gewählte Zahlungsmethode einen Namen erfordert, wird danach gefragt.

Skript- und Stil-Verkettungs-Plugins

Wenn Sie ein Plugin oder eine Ressource verwendet haben, um alle JavaScript-Dateien oder CSS-Dateien zusammenzufügen, stellen Sie sicher, dass Sie Ihre Skripte „neu erstellen“, da sich die JavaScript- und CSS-Stile für die Kartenelemente geändert haben.

Caching-Plugins oder -Dienste

Stellen Sie nach der Umstellung auf das Payment Element sicher, dass Sie alle Caches leeren, die Sie möglicherweise haben, einschließlich Seiten-Caching, Objekt-Caching und Dienste wie Cloudflare, um sicherzustellen, dass die richtigen JavaScript- und CSS-Dateien geladen werden.

Easy Digital Downloads – Stripe 2.9 fügt Unterstützung für Stripe’s Payment Element hinzu, das eine verbesserte, effizientere und anpassbarere Checkout-Erfahrung ermöglicht. Dies ist für Benutzer verfügbar, die unser Stripe Pro Gateway, Version 2.9 oder höher, verwenden. Neue Benutzer verwenden automatisch Payment Elements; bestehende Benutzer, die sich mit Stripe verbunden haben, können sich bei Bedarf dafür entscheiden und haben so Zeit, alle Anpassungen zu testen, die Sie an Ihrem EDD-Checkout in einer lokalen oder Staging-Umgebung vorgenommen haben. Wenn Sie Ihre Checkout-Vorlage angepasst haben, sollten Sie mehr über die Migration vom alten Card Element zum Payment Element lesen.

Filter für die Payment Elements befinden sich alle in easy-digital-downloads/includes/gateways/stripe/includes/elements/payment-elements.php im EDD-Kern. Schauen Sie dort nach dem vollständigen Code und Links zur spezifischen Stripe-Dokumentation.

Registrieren einer benutzerdefinierten Schriftart für die Verwendung mit Stripe’s Payment Elements

Sie können Stripe so einrichten, dass eine benutzerdefinierte Schriftart verwendet wird, auch von externen Schriftquellen wie Google oder Adobe Fonts, mit zwei Filtern:

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

Es gibt viele verschiedene Möglichkeiten, die Variablen anzupassen, um jeden Aspekt des Stripe-Zahlungsformulars anzupassen. Zum Beispiel können die Formularbeschriftungen in den Formulareingaben schwebend sein, anstatt darüber, mit diesem kleinen 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';
}