Resumo de IA
Introdução
Se o seu campo Stripe Credit Card estiver usando o Elemento de Pagamento, você também pode personalizar como o botão Apple Pay e Google Pay é exibido, substituindo o objeto appearance do Stripe.
Observe que este trecho será aplicado apenas ao campo de formulário Stripe Credit Card quando o Modo de Campo de Cartão de Crédito nas Configurações do WPForms, aba Pagamentos, estiver definido como Elemento de Pagamento.
Para saber mais sobre esta opção, consulte este guia útil.
Por padrão, o campo já terá opções padrão definidas no WPForms.
Criando o formulário
Vamos começar criando um novo formulário e adicionando nossos campos. Você precisará incluir o campo Stripe Credit Card no seu formulário.
Se precisar de ajuda para criar um formulário que processe pagamentos Stripe, consulte este guia detalhado.
Para fins deste tutorial, criamos um formulário de pedido simples.
Adicionando o snippet
Agora é hora de adicionar o trecho. Se precisar de ajuda sobre como e onde adicionar trechos personalizados ao seu site, consulte este tutorial.
/**
* Customize Stripe styling when using the Payment Element
*
* @link https://wpforms.com/developers/how-to-customize-the-stripe-styling/
*/
function wpf_stripe_payment_element_appearance() {
return [
'theme' => 'stripe',
'labels' => 'floating',
'variables' => [
'fontFamily' => 'Sohne, system-ui, sans-serif',
'fontWeightNormal' => '500',
'borderRadius' => '8px',
'colorBackground' => '#0A2540',
'colorPrimary' => '#EFC078',
'accessibleColorOnColorPrimary' => '#1A1B25',
'colorText' => 'white',
'colorTextSecondary' => 'white',
'colorTextPlaceholder' => '#727F96',
'tabIconColor' => 'white',
'logoColor' => 'dark'
]
];
}
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', 'wpf_stripe_payment_element_appearance' );
Neste trecho, selecionamos o tema do Stripe e definimos os rótulos do campo como flutuantes, além de várias opções de CSS.
Agora, ao visualizar nosso formulário, você pode ver claramente as alterações que fizemos, incluindo os rótulos flutuantes no campo.
Personalizando o Botão de Solicitação de Pagamento (Apple Pay e Google Pay)
Se o seu campo de Cartão de Crédito Stripe estiver usando o Payment Element, você também pode personalizar como o botão Apple Pay e Google Pay é exibido, substituindo o objeto appearance do Stripe.
Para fazer isso, use o filtro wpforms_integrations_stripe_api_payment_intents_set_element_appearance e adicione uma entrada rules para .PaymentRequestButton. Isso permite controlar a estilização do botão, incluindo a cor do texto.
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', function ( $appearance ) {
// Define a consistent appearance structure for Stripe Elements.
$appearance = [
'rules' => [
'.PaymentRequestButton' => [
'background-color' => '#FFF',
'color' => '#FFFFFF',
'border-radius' => '4px',
'height' => '64px',
'font-family' => 'Arial, sans-serif',
'font-size' => '16px',
],
],
'variables' => [
'colorPrimary' => '#FF0000',
'fontFamily' => 'Arial, sans-serif',
],
];
return $appearance;
});
E é tudo o que você precisa para personalizar a estilização do Stripe. Gostaria de adicionar rótulos flutuantes a outros campos do formulário? Confira nosso tutorial sobre Como Criar um Formulário com Rótulos Flutuantes.