Resumen de IA
Introducción
¿Quieres personalizar el estilo de Stripe en los elementos de tus formularios? ¡No hay problema! Este tutorial te guiará a través de los sencillos pasos para personalizar la apariencia de tu campo de Tarjeta de Crédito de Stripe usando PHP.
Ten en cuenta que este fragmento solo se aplicará al campo del formulario de Tarjeta de Crédito de Stripe cuando se utilice el Modo de Campo de Tarjeta de Crédito de los Ajustes de WPForms, en la pestaña Pagos, y se establezca en Elemento de Pago.
Para obtener más información sobre esta opción, consulta esta útil guía.
Por defecto, el campo ya tendrá opciones predeterminadas establecidas dentro de WPForms.
Creación del formulario
Comenzaremos creando un nuevo formulario y añadiendo nuestros campos. Necesitarás incluir el campo de Tarjeta de Crédito de Stripe en tu formulario.
Si necesitas ayuda para crear un formulario que procese pagos de Stripe, consulta esta guía detallada.
Para este tutorial, hemos creado un formulario de pedido sencillo.
Añadir el fragmento
Ahora es el momento de añadir el fragmento. Si necesitas ayuda sobre cómo y dónde añadir fragmentos personalizados a tu sitio, consulta este tutorial.
/**
* Customize Stripe styling when using the Payment Element
*
* @link https://wpforms.com/developers/how-to-customize-the-stripe-styling/
*/
function wpf_stripe_payment_element_appearance() {
return [
'theme' => 'stripe',
'labels' => 'floating',
'variables' => [
'fontFamily' => 'Sohne, system-ui, sans-serif',
'fontWeightNormal' => '500',
'borderRadius' => '8px',
'colorBackground' => '#0A2540',
'colorPrimary' => '#EFC078',
'accessibleColorOnColorPrimary' => '#1A1B25',
'colorText' => 'white',
'colorTextSecondary' => 'white',
'colorTextPlaceholder' => '#727F96',
'tabIconColor' => 'white',
'logoColor' => 'dark'
]
];
}
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', 'wpf_stripe_payment_element_appearance' );
En este fragmento, hemos seleccionado el tema de Stripe y hemos establecido las etiquetas del campo en flotantes, así como varias opciones de CSS.
Ahora, al ver nuestro formulario, puedes ver claramente los cambios que hemos realizado, incluidas las etiquetas flotantes en el campo.
Personalización del Botón de Solicitud de Pago (Apple Pay y Google Pay)
Si tu campo de Tarjeta de Crédito de Stripe está utilizando el Elemento de Pago, también puedes personalizar cómo se muestra el botón de Apple Pay y Google Pay sobrescribiendo el objeto appearance de Stripe.
Para ello, utiliza el filtro wpforms_integrations_stripe_api_payment_intents_set_element_appearance y añade una entrada rules para .PaymentRequestButton. Esto te permite controlar el estilo del botón, incluido el color del texto.
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', function ( $appearance ) {
// Define a consistent appearance structure for Stripe Elements.
$appearance = [
'rules' => [
'.PaymentRequestButton' => [
'background-color' => '#FFF',
'color' => '#FFFFFF',
'border-radius' => '4px',
'height' => '64px',
'font-family' => 'Arial, sans-serif',
'font-size' => '16px',
],
],
'variables' => [
'colorPrimary' => '#FF0000',
'fontFamily' => 'Arial, sans-serif',
],
];
return $appearance;
});
Y eso es todo lo que necesitas para personalizar el estilo de Stripe. ¿Te gustaría añadir etiquetas flotantes a otros campos del formulario? Consulta nuestro tutorial sobre Cómo Crear un Formulario con Etiquetas Flotantes.