Personalizar los elementos de pago universales de Stripe

Migración a Elementos de Pago

Si utilizaste nuestra integración de Stripe antes de la introducción de los Elementos de Pago, te hemos dado acceso temporal a una configuración llamada "Modo de Elementos" en Descargas > Ajustes > Pagos > Stripe. Al actualizar, tu tienda permanecerá en Elementos de Tarjeta y te permitirá cambiar a Elementos de Pago solo después de que hayas confirmado que tu proceso de pago funciona con ellos. Aquí tienes un par de personalizaciones comunes que podrías necesitar cambiar o eliminar para optimizar tu experiencia con los Elementos de Pago.

Cambiar el atributo 'id' del destino de los Elementos

Cambiar el atributo 'id' del destino de los Elementos
La integración de "Elementos de Tarjeta" de Easy Digital Downloads requería que hubiera una etiqueta <div> con el id 'edd-stripe-card-element'. Podría verse así en tus personalizaciones:

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

El nuevo Elemento de Pago utiliza un atributo 'id' diferente, por lo que necesitas cambiar esta línea a:

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

El campo Nombre de Tarjeta ya no es necesario

Gracias al nuevo Elemento de Pago, el campo del nombre de la tarjeta ya no es obligatorio. Si el Elemento de Pago de Stripe detecta que el método de pago elegido requiere un nombre, lo solicitará.

Plugins de concatenación de scripts y estilos

Si estabas utilizando un plugin o recurso para unir todos los archivos Javascript o archivos CSS, querrás asegurarte de "recompilar" tus scripts, ya que el Javascript y el estilo CSS para los elementos de tarjeta han cambiado.

Plugins o servicios de caché

Al cambiar al Elemento de Pago, asegúrate de vaciar cualquier caché que tengas, incluyendo la caché de página, la caché de objetos y servicios como Cloudflare, para garantizar que se cargan los archivos Javascript y CSS correctos.

Easy Digital Downloads — Stripe 2.9 añade soporte para el Elemento de Pago de Stripe, que permite una experiencia de pago mejorada, más eficiente y más personalizable. Esto está disponible para los usuarios que utilizan nuestra Pasarela Pro de Stripe, versión 2.9 o superior. Los nuevos usuarios utilizarán automáticamente los elementos de pago; los usuarios existentes que se hayan conectado a Stripe podrán optar por participar cuando estén listos, lo que les dará tiempo para probar cualquier personalización que hayan realizado en su EDD Checkout en un entorno local o de prueba. Si has personalizado tu plantilla de Checkout, querrás leer más sobre la migración del Elemento de Tarjeta heredado al Elemento de Pago.

Los filtros para los elementos de pago se encuentran todos en easy-digital-downloads/includes/gateways/stripe/includes/elements/payment-elements.php en el núcleo de EDD, así que busca allí el código completo y los enlaces a la documentación específica de Stripe.

Registrar una fuente personalizada para usar con los Elementos de Pago de Stripe

Puedes configurar Stripe para usar una fuente personalizada, incluso de fuentes externas como Google Fonts o Adobe Fonts, con dos filtros:

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

Hay muchas opciones diferentes posibles para añadir a las variables para personalizar cada aspecto del formulario de pago de Stripe. Por ejemplo, las etiquetas del formulario pueden estar flotando en los campos del formulario, en lugar de encima de ellos, con este pequeño 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';
}