Introducción
¿Quieres personalizar el estilo de Stripe en los elementos de tus formularios? No hay problema. Este tutorial le guiará a través de los sencillos pasos para personalizar la apariencia de su campo de tarjeta de crédito de Stripe utilizando PHP.
Tenga en cuenta que este fragmento sólo se aplicará al campo de formulario de tarjeta de crédito de Stripe cuando el modo de campo de tarjeta de crédito de la pestaña Pagos de la configuración de WPForms esté configurado como Elemento de pago.
Para saber más sobre esta opción, consulte esta útil guía.
Por defecto, el campo ya tendrá opciones predeterminadas dentro de WPForms.
Creación del formulario
Vamos a empezar creando un nuevo formulario y añadiendo nuestros campos. Tendrás que incluir el campo Tarjeta de crédito de Stripe en tu formulario.
Si necesita ayuda para crear un formulario que procese pagos con Stripe, consulte esta guía detallada.
Para el propósito de este tutorial, hemos creado un simple formulario de pedido.
Añadir el fragmento
Ahora es el momento de añadir el snippet. Si necesitas ayuda sobre cómo y dónde añadir fragmentos personalizados a tu sitio, consulta este tutorial.
Stripe tiene bastantes opciones para dar estilo a sus elementos. Para obtener una lista más completa de lo que puede cambiar, consulte su propia documentación sobre Elements Appearance API. Por favor, asegúrese de probar su formulario y los cambios, ya que algunos elementos pueden no ser compatibles con esta API.
/**
* 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 Stripe y configurado las etiquetas de campo como flotantes, así como varias opciones CSS.
Ahora cuando vemos nuestro formulario, se pueden ver claramente los cambios que hemos hecho incluyendo las etiquetas flotantes en el campo.
Y eso es todo lo que necesitas para personalizar el estilo de Stripe. ¿Quiere añadir etiquetas flotantes a otros campos del formulario? Echa un vistazo a nuestro tutorial sobre Cómo crear un formulario con etiquetas flotantes.