Dostosuj elementy płatności Stripe Universal

Migracja do elementów płatności

Jeśli korzystałeś z naszej integracji Stripe przed wprowadzeniem elementów płatności, tymczasowo przyznaliśmy Ci dostęp do ustawienia o nazwie „Tryb elementów” w sekcji Pobrane > Ustawienia > Płatności > Stripe. Po aktualizacji Twój sklep pozostanie przy elementach karty i umożliwi Ci przełączenie się na elementy płatności dopiero po potwierdzeniu, że Twój proces płatności z nimi działa. Oto kilka typowych dostosowań, które być może będziesz musiał zmienić lub usunąć, aby zoptymalizować swoje doświadczenie z elementami płatności.

Zmień atrybut „id” celu elementów

Zmień atrybut „id” celu elementów
Integracja Easy Digital Downloads „Elementy karty” wymagała istnienia tagu <div> z identyfikatorem „edd-stripe-card-element”. Może to wyglądać tak w Twoich dostosowaniach:

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

Nowe elementy płatności używają innego atrybutu „id”, więc musisz zmienić tę linię na:

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

Pole nazwy karty nie jest już potrzebne

Dzięki nowemu elementowi płatności pole nazwy karty nie jest już wymagane. Jeśli element płatności Stripe wykryje, że wybrana metoda płatności wymaga podania nazwy, poprosi o nią.

Wtyczki do łączenia skryptów i stylów

Jeśli używałeś wtyczki lub zasobu do łączenia wszystkich plików Javascript lub CSS, będziesz chciał upewnić się, że „przebudowałeś” swoje skrypty, ponieważ stylizacja Javascript i CSS dla elementów karty uległa zmianie.

Wtyczki lub usługi buforowania

Po przejściu na element płatności upewnij się, że wyczyściłeś wszystkie buforowania, które możesz mieć, w tym buforowanie stron, buforowanie obiektów i usługi takie jak Cloudflare, aby zapewnić ładowanie odpowiednich plików Javascript i CSS.

Easy Digital Downloads — Stripe 2.9 dodaje obsługę Elementu Płatności Stripe, który umożliwia ulepszone, bardziej wydajne i bardziej konfigurowalne doświadczenie płatności. Jest to dostępne dla użytkowników korzystających z naszej bramki Stripe Pro, wersji 2.9 lub nowszej. Nowi użytkownicy automatycznie skorzystają z elementów płatności; istniejący użytkownicy, którzy połączyli się ze Stripe, będą mogli wybrać tę opcję, gdy będą gotowi, co pozwoli na przetestowanie wszelkich dostosowań wprowadzonych w procesie płatności EDD w środowisku lokalnym lub stagingowym. Jeśli dostosowałeś swój szablon procesu płatności, zapoznaj się z informacjami na temat migracji z poprzedniego Elementu Karty do Elementu Płatności.

Filtry dla elementów płatności znajdują się w pliku easy-digital-downloads/includes/gateways/stripe/includes/elements/payment-elements.php w rdzeniu EDD, więc szukaj tam pełnego kodu i linków do konkretnej dokumentacji Stripe.

Zarejestruj niestandardową czcionkę do użycia z elementami płatności Stripe

Możesz skonfigurować Stripe do używania niestandardowej czcionki, nawet z zewnętrznych źródeł czcionek, takich jak Google Fonts lub Adobe Fonts, za pomocą dwóch filtrów:

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

Istnieje wiele różnych możliwych opcji do dodania do zmiennych, aby dostosować każdy aspekt formularza płatności Stripe. Na przykład etykiety formularza mogą być pływające w polach formularza, zamiast nad nimi, za pomocą tego małego filtra:

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