Stripe: Como Alterar o Estilo dos Campos de Cartão de Crédito

O método de pagamento Stripe para o WooCommerce usa os elementos Stripe (disponível somente em inglês) para exibir os campos de cartão de crédito em sua página de finalização de compra. Isso possibilita que você tenha a flexibilidade para personalizar sua experiência na página de finalização de compra, alterando o estilo dos campos de cartão de crédito de acordo com o seu tema e preferências.

Todos os campos são exibidos dentro de elementos <iframe> para oferecer uma experiência segura aos clientes. Como tecnicamente o conteúdo dos iframes não faz parte da sua página, não é possível aplicar diretamente os estilos nesses componentes da sua folha de estilo e isso deve ser feito de outra maneira.

Os elementos Stripe têm o mínimo de estilo possível.

Fora da caixa, os campos exibem apenas texto e nada mais. Isso significa que todos os outros estilos podem ser acessados ​​imediatamente usando CSS, incluindo as cores de fundo, bordas, preenchimento, sombras e etc.

No modo normal, você terá três campos separados para cada informação do cartão de crédito.

Como alterar o estilo de todos os campos simultaneamente

Você pode usar o seletor .wc-stripe-elements-field para selecionar todos esses campos simultaneamente. Exemplo:

.wc-stripe-elements-field {
    border-color: #999;
}

Como alterar o estilo de um campo individual

Se precisar aplicar os estilos em um campo individual, você pode usar seu identificador:

Exemplo:

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

Se você habilitou o Preenchimento em linha única do cartão de crédito nas configurações do Stripe, todos os campos de cartão de crédito serão exibidos juntos, como um único campo, em sua página. Nesse caso, você precisa usar apenas o seletor .wc-stripe-elements-field para selecionar o wrapper desse campo.

Os seletores de CSS acima permitem que você modifique o estilo dos wrappers de campo. No entanto, se precisar alterar algo na entrada atual, você também precisará fornecer os estilos necessários para o Stripe.

Isso pode ser feito usando o filtro de PHP wc_stripe_elements_styling.

Exemplo:

<?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' );

Você deve levar em consideração:

• Os estilos que você visualiza no exemplo são estilos padrão usados ​​pela extensão.
• Assim que você fornecer estilos personalizados, a extensão passará a ignorar os estilos padrões. Para evitar isso, copie o exemplo e desenvolva a partir dele.
• Todos os estilos são aplicados usando JavaScript e, portanto, você precisa usar nomes de propriedade JavaScript em vez de CSS puro. Por exemplo, em vez de font-size , você deve usar fontSize.

Para ver uma descrição do array desejado, vá para: Stripe – Opções de elemento (disponível somente em inglês). Conforme explicado nesta página, você precisa ter as seguintes opções.

    [state] => array(
        [property] => [value],
        [pseudoClass] => array(
            [property] => [value],
        ),
    ),
)

Todos os estilos personalizados precisam estar em um array aninhado, contendo:

• State definido como item de nível superior
• Propriedades e seus valores definidos como itens de segundo nível
• Pseudoclasses para um state específico definidas como itens de segundo nível e suas propriedades definidas como itens de terceiro nível

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

hover, :focus, ::placeholder, ::selection, :-webkit-autofill, :disabled e ::-ms-clear

Exemplo

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 exemplo altera:

• Cor do texto e tamanho da fonte em todos os states.
• Cor do texto dos placeholders em state normal usando a pseudoclasse ::placeholder.
• Cor do texto dos campos quando são inválidos.