Introdução
Quer personalizar o estilo do Stripe nos elementos dos seus formulários? Não tem problema! Este tutorial irá guiá-lo através dos passos simples para personalizar a aparência do seu campo de cartão de crédito Stripe usando PHP.
Por favor, note que este snippet só será aplicado ao campo de formulário do cartão de crédito Stripe quando usar 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 esta opção, consulte este guia útil.
Por defeito, o campo já terá opções predefinidas no WPForms.
Criar o formulário
Vamos começar por criar um novo formulário e adicionar os nossos campos. Terá de incluir o campo Cartão de crédito Stripe no seu formulário.
Se precisar de ajuda para criar um formulário que processe pagamentos Stripe, consulte este guia detalhado.
Para efeitos deste tutorial, criámos um formulário de encomenda simples.
Adicionar 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 os seus elementos. Para obter uma lista mais completa do que pode alterar, consulte a documentação da API Elements Appearance. Certifique-se de que testa o seu formulário e as alterações, pois alguns elementos podem não ser suportados por esta 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' );
Neste snippet, selecionámos o tema Stripe e definimos as etiquetas de campo como flutuantes, bem como várias opções CSS.
Agora, quando visualizamos o nosso formulário, pode ver claramente as alterações que efectuámos, incluindo as etiquetas flutuantes no campo.
E é tudo o que precisa para personalizar o estilo do Stripe. Gostaria de adicionar etiquetas flutuantes a outros campos de formulário? Consulte o nosso tutorial sobre Como criar um formulário com etiquetas flutuantes.