### [Cómo personalizar el estilo de Stripe](https://wpforms.com/developers/how-to-customize-the-stripe-styling/)
**Publicado:** 17 de noviembre de 2023
**Autor:** Umair Majeed
**Extracto:** Este tutorial te mostrará cómo personalizar los estilos de pago de Stripe cuando uses el elemento de pago para tu campo de Stripe.
**Contenido:**
## 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 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 obtener más información sobre esta opción, [consulta esta útil guía](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#field-modes).
Por defecto, el campo ya tendrá opciones predeterminadas establecidas dentro de WPForms.
## Creación del formulario
Comenzaremos creando un nuevo formulario y agregando 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](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Complemento Pro de Stripe").
Para el propósito de este tutorial, hemos creado un formulario de pedido simple.
## Agregar el fragmento
Ahora es el momento de agregar el fragmento. Si necesitas ayuda sobre cómo y dónde agregar fragmentos personalizados a tu sitio, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo agregar PHP o JavaScript personalizado para WPForms").
Stripe tiene bastantes opciones para estilizar sus elementos. Para una lista más completa de lo que puedes cambiar, consulta su propia documentación sobre la [API de apariencia de elementos](https://stripe.com/docs/elements/appearance-api). Asegúrate de probar tu formulario y los cambios, ya que es posible que algunos elementos no sean compatibles con esta API.
```
/**
* Personalizar el estilo de Stripe al usar el Elemento de Pago
*
* @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 hemos configurado las **etiquetas** del campo como **flotantes**, además de varias opciones de CSS.
Ahora, cuando veamos nuestro formulario, podremos 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 hacer esto, usa el filtro `wpforms_integrations_stripe_api_payment_intents_set_element_appearance` y agrega 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 una estructura de apariencia consistente para los elementos de Stripe.
$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;
});
```
Para opciones de estilo adicionales, consulta la documentación de Stripe para la [API de apariencia de elementos](https://docs.stripe.com/elements/appearance-api) y el [Botón de solicitud de pago](https://docs.stripe.com/stripe-js/elements/payment-request-button).
Y eso es todo lo que necesitas para personalizar el estilo de Stripe. ¿Te gustaría agregar etiquetas flotantes a otros campos del formulario? Consulta nuestro tutorial sobre [Cómo crear un formulario con etiquetas flotantes](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "Cómo crear un formulario con etiquetas flotantes").
**Categorías:** Tutoriales
**Etiquetas:** Stripe
---