### [Como Personalizar o Estilo do Stripe](https://wpforms.com/developers/how-to-customize-the-stripe-styling/)
**Publicado:** 17 de novembro de 2023
**Autor:** Umair Majeed
**Resumo:** Este tutorial mostrar-lhe-á como personalizar os estilos de pagamento do Stripe ao usar o elemento de Pagamento para o seu campo Stripe.
**Conteúdo:**
## 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](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#field-modes).
Por defeito, o campo já terá opções padrão definidas no WPForms.
## Criação do 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](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Stripe Pro Addon").
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 sobre como e onde adicionar snippets personalizados ao seu site, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Como Adicionar PHP ou JavaScript Personalizado para WPForms").
O Stripe tem várias opções para estilizar os seus elementos. Para uma lista mais completa do que pode alterar, consulte a sua própria documentação sobre a [API de Aparência dos Elementos](https://stripe.com/docs/elements/appearance-api). Certifique-se de testar o seu formulário e as alterações, pois alguns elementos podem não ser suportados por esta API.
```
/**
* Personalizar o estilo do Stripe ao usar o Elemento de Pagamento
*
* @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 os **rótulos** do campo como **flutuantes**, bem como várias opções 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 controlar o estilo do botão, incluindo a cor do texto.
```
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', function ( $appearance ) {
// Definir uma estrutura de aparência consistente para os Elementos Stripe.
$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;
});
```
Para opções de estilo adicionais, consulte a documentação do Stripe para a [API de Aparência dos Elementos](https://docs.stripe.com/elements/appearance-api) e o [Botão de Pedido de Pagamento](https://docs.stripe.com/stripe-js/elements/payment-request-button).
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](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "Como Criar um Formulário com Rótulos Flutuantes").
**Categorias:** Tutoriais
**Etiquetas:** Stripe
---