Stripe: estilo de campos de tarjetas de crédito

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.

Stripe 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.

En 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:

Por ejemplo:

#stripe-card-element {
    margin-bottom: 1em;
}

Si 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-fieldcode> para apuntar al contenedor de ese campo.

Los 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 usar fontSize.

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.

array(
    [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

color, fontFamily, fontSize, fontSmoothing, fontStyle, fontVariant, fontWeight, iconColor, lineHeight, letterSpacing, textAlign, textDecoration, textShadow, y textTransform

hover, :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.