1. Documentation
  2. Documentação em Português
  3. 4. Vender Produtos
  4. Método de Pagamento
  5. Stripe (Português)

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.

Nota: Este é um documento a nível de Desenvolvedor. Não podemos fornecer suporte para personalizações de acordo com nossa Política de Suporte (disponível somente em inglês) . Caso você não estiver familiarizado com o código/modelos e com a resolução de possíveis conflitos, selecione um WooExpert ou Desenvolvedor (disponível somente em inglês) para obter assistência.

CSS puro ↑ Back to top

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.

Layout padrão ↑ Back to top

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:

CAMPOSELETOR
Número do cartão#stripe-card-element
Data de validade#stripe-exp-element
Código de segurança do cartão#stripe-cvc-element

Exemplo:

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

Preenchimento em linha única do cartão de crédito ↑ Back to top

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.

Como usar um filtro ↑ Back to top

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.

Formato ↑ Back to top

    [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

States ↑ Back to top

STATEDESCRIÇÃO
baseEstilo básico, todas as outras variantes são herdadas deste estilo
completeAplicado quando o elemento tem uma entrada válida
emptyAplicado quando o elemento não tem uma entrada do cliente
invalidAplicado quando o elemento contém valores inválidos

Propriedades permitidas ↑ Back to top

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

Pseudoclasses ↑ Back to top

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.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment