La pasarela de pago Stripe para WooCommerce usa Stripe Elements (artículo disponible sólo en Inglés) para mostrar los campos de la tarjeta de crédito en tu página de pago. Esto te brinda la flexibilidad de personalizar la experiencia de pago al diseñar los campos de la tarjeta de crédito de acuerdo con tu tema y preferencias.
Todos los campos se muestran dentro de los elementos <iframe>
para brindar una experiencia segura a los clientes. Debido a que el contenido de los iframes técnicamente no es parte de tu página, no es posible aplicar estilos directamente a esos componentes de tu hoja de estilo y debe hacerse de otra manera.
CSS puro
↑ Back to topStripe Elements tiene el menor estilo posible.
Fuera de la caja, los campos solo muestran texto y nada más. Eso significa que se puede acceder inmediatamente a todos los demás estilos a través de CSS, incluidos los colores de fondo, los bordes, el relleno, las sombras, etc.
Diseño estándar
↑ Back to topEn modo normal, tendrás tres campos separados para cada detalle de la tarjeta de crédito.
Aplicar estilo a todos los campos simultáneamente
Puedes utilizar el selector .wc-stripe-elements-field
para apuntar a todos esos campos simultáneamente. Por ejemplo:
.wc-stripe-elements-field { border-color: #999; }
Aplicar estilo a un campo individual
Si necesitas aplicar estilos a un campo individual, puedes usar su identificador:
CAMPO | SELECTOR |
---|---|
Número de tarjeta | #stripe-card-element |
Fecha de caducidad | #stripe-exp-element |
Código de tarjeta | #stripe-cvc-element |
Por ejemplo:
#stripe-card-element { margin-bottom: 1em; }
Formulario de tarjeta de crédito integrado
↑ Back to topSi activaste el formulario de tarjeta de crédito integrado en los ajustes de Stripe, todos los campos de la tarjeta de crédito se mostrarán juntos como un solo campo en tu página. En este caso, solo necesitas usar el selector .wc-stripe-elements-field
code> para apuntar al contenedor de ese campo.
Usar un filtro
↑ Back to topLos selectores CSS anteriores te permiten modificar el estilo de los contenedores de campo. Sin embargo, si también necesitas cambiar algo dentro de la entrada real, debes proporcionar los estilos necesarios a Stripe.
Esto se puede hacer usando el filtro PHP wc_stripe_elements_styling
.
Por ejemplo:
<?php function my_theme_modify_stripe_fields_styles( $styles ) { return array( 'base' => array( 'iconColor' => '#666EE8', 'color' => '#31325F', 'fontSize' => '15px', '::placeholder' => array( 'color' => '#CFD7E0', ), ), ); } add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );
Ten en cuenta:
- Los estilos que ves en el ejemplo son estilos por defecto utilizados por la extensión.
- Tan pronto como proporciones estilos personalizados, la extensión ignorará los estilos por defecto. Para evitar esto, copia el ejemplo y trabaja sobre él.
- Todos los estilos se aplican a través de JavaScript, por lo que debes utilizar nombres de propiedades de JavaScript en lugar de CSS puro. Por ejemplo, en lugar de
font-size
deberías usarfontSize
.
Para ver una descripción del array esperado, ve a: Stripe – Element Options (artículo disponible sólo en Inglés). Como se explica en esa página, debes tener las siguientes opciones.
Formato
↑ Back to toparray( [state] => array( [property] => [value], [pseudoClass] => array( [property] => [value], ), ), )
Todos los estilos personalizados deben estar dentro de un array anidado que contenga:
- Estado como elemento de nivel superior
- Propiedades y sus valores como elementos de segundo nivel
- Pseudo-clases para un estado específico como elementos de segundo nivel y sus propiedades como elementos de tercer nivel
Estados
↑ Back to topESTADO | DESCRIPCIÓN |
---|---|
base |
Estilo base, todas las demás variantes heredan de este estilo |
complete |
Se aplica cuando el elemento tiene una entrada válida |
empty |
Se aplica cuando el elemento no tiene información del cliente |
invalid |
Se aplica cuando el elemento contiene valores no válidos. |
Propiedades permitidas
↑ Back to topcolor
, fontFamily
, fontSize
, fontSmoothing
, fontStyle
, fontVariant
, fontWeight
, iconColor
, lineHeight
, letterSpacing
, textAlign
, textDecoration
, textShadow
, y textTransform
Pseudo-clases
↑ Back to tophover
, :focus
, ::placeholder
, ::selection
, :-webkit-autofill
, :disabled
, y ::-ms-clear
Ejemplo
function my_theme_modify_stripe_fields_styles( $styles ) { return array( 'base' => array( 'color' => '#666666', 'fontSize' => '15px', '::placeholder' => array( 'color' => '#999999', ), ), 'invalid' => array( 'color' => '#ff7500', ), ); } add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );
Este ejemplo cambia:
- Color del texto y tamaño de fuente en todos los estados.
- Color de texto de marcadores de posición en estado normal a través de la pseudo-clase
::placeholder
. - Color del texto de los campos cuando no son válidos.