Resumo de IA
Introdução
Quer personalizar o estilo do Stripe nos elementos dos seus formulários? Sem problema! Este tutorial irá guiá-lo através dos passos simples para personalizar a aparência do seu campo Cartão de Crédito Stripe usando PHP.
Por favor, note que este snippet 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 Definições do WPForms, no separador Pagamentos, 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.
Criação do formulário
Vamos começar por criar um novo formulário e adicionar os nossos campos. Precisará 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, por favor consulte este guia detalhado.
Para efeitos deste tutorial, criámos um formulário de encomenda simples.
Adição do trecho de código
Agora é hora de adicionar o snippet. Se precisar de ajuda sobre como e onde adicionar snippets personalizados ao seu site, por favor veja 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 snippet, selecionámos o tema do Stripe e definimos os rótulos do campo como flutuantes, bem como várias opções de CSS.
Agora, ao visualizar o nosso formulário, pode ver claramente as alterações que fizemos, incluindo os rótulos flutuantes no campo.
Personalizar o Botão de Pedido de Pagamento (Apple Pay e Google Pay)
Se o seu campo Cartão de Crédito Stripe estiver a usar o Elemento de Pagamento, também pode personalizar como o botão Apple Pay e Google Pay é exibido, substituindo o objeto appearance do Stripe.
Para fazer isto, use o filtro wpforms_integrations_stripe_api_payment_intents_set_element_appearance e adicione uma entrada rules para .PaymentRequestButton. Isto permite-lhe controlar o estilo 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 precisa para personalizar o estilo do Stripe. Gostaria de adicionar rótulos flutuantes a outros campos do formulário? Consulte o nosso tutorial sobre Como Criar um Formulário com Rótulos Flutuantes.