Introdução
Deseja personalizar o estilo do Stripe nos elementos de seus formulários? Não tem problema! Este tutorial o guiará pelas etapas simples de personalização da aparência do campo de cartão de crédito do Stripe usando PHP.
Observe que esse snippet só será aplicado ao campo de formulário Cartão de crédito do Stripe quando o Modo de campo de cartão de crédito da guia Pagamentos das configurações do WPForms estiver definido como Elemento de pagamento.
Para saber mais sobre essa 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 em seu formulário.
Se precisar de ajuda para criar um formulário que processe os pagamentos do Stripe, consulte este guia detalhado.
Para fins deste tutorial, criamos um formulário de pedido simples.
Adicionando o snippet
Agora é hora de adicionar o snippet. Se precisar de ajuda para saber como e onde adicionar snippets personalizados ao seu site, consulte este tutorial.
O Stripe tem várias opções para estilizar seus elementos. Para obter uma lista mais abrangente sobre o que você pode alterar, consulte a própria documentação da API Elements Appearance. Certifique-se de testar seu formulário e suas alterações, pois alguns elementos podem não ser compatíveis com essa API.
/**
* 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' );
Nesse snippet, selecionamos o tema Stripe e definimos os rótulos de campo como flutuantes, bem como várias opções de CSS.
Agora, quando visualizamos nosso formulário, você pode ver claramente as alterações que fizemos, incluindo os rótulos flutuantes no campo.
E isso é tudo o que você precisa para personalizar o estilo do Stripe. Gostaria de adicionar rótulos flutuantes a outros campos de formulário? Confira nosso tutorial sobre Como criar um formulário com rótulos flutuantes.