Resumo de IA
Introdução
Como Alterar a Formatação do Espaço Reservado do Stripe
Por padrão, o campo onde você insere seu cartão de crédito é estilizado com algumas formatações padrão.
Observe que este trecho só será aplicado ao campo de formulário Cartão de Crédito Stripe quando o Modo de Campo de Cartão de Crédito nas Configurações do WPForms, na guia Pagamentos, estiver definido como Elemento de Cartão.
Para saber mais sobre esta opção, consulte este guia útil.
Criando o formulário
Começaremos criando um novo formulário e adicionando um campo Cartão de Crédito Stripe ao formulário.
Se precisar de ajuda para criar este tipo de formulário, consulte esta documentação.
Depois de adicionar o campo ao formulário, selecione o campo e clique em Opções do Campo, em seguida, clique na guia Avançado e insira algum texto de Espaço reservado em Texto do Espaço Reservado do Nome no Cartão.
Adicionando o snippet
Para alterar a formatação do texto de espaço reservado, como tamanho da fonte, cor, família da fonte, etc., podemos apenas adicionar um pouco de PHP ao nosso site.
Se precisar de ajuda para adicionar snippets ao seu site, consulte este tutorial.
/*
* Update placeholder text styles on Stripe Credit Card form field
*
* @link https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/
*/
function wpf_dev_stripe_card_field_style( $element_style ) {
$element_style = [
'base' => [
'iconColor' => '#b95d52',
'fontFamily' => 'Roboto, sans-serif',
'fontSize' => '16px',
'fontWeight' => '100',
'backgroundColor' => '#f6f6f6',
'::placeholder' => [
'color' => '#b95d52',
'font-family' => 'Roboto, sans-serif',
'font-size' => '16px',
'font-weight' => '100',
]
],
];
return $element_style;
}
add_filter( 'wpforms_stripe_api_payment_intents_set_config_element_style', 'wpf_dev_stripe_card_field_style', 10, 1 );
Para uma lista completa de todas as propriedades do objeto, consulte esta documentação.
Agora, você verá que a formatação do campo Cartão de Crédito Stripe foi alterada.
Estilizando o texto de placeholder
O trecho acima irá estilizar apenas o campo real do Número do Cartão; se você quiser estilizar o texto de espaço reservado para corresponder, precisará adicionar algum CSS.
Se precisar de ajuda para adicionar CSS ao seu site, consulte este tutorial.
input.wpforms-field-stripe-credit-card-cardname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname::-moz-placeholder { /* Firefox 19+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-ms-input-placeholder { /* IE 10+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-moz-placeholder { /* Firefox 18- */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
E é tudo o que você precisa! Gostaria também de enviar metadados para o Stripe? Dê uma olhada em nosso artigo sobre Como Enviar Metadados para Pagamentos Stripe.