### [Come personalizzare lo stile di Stripe](https://wpforms.com/developers/how-to-customize-the-stripe-styling/)
**Pubblicato:** 17 novembre 2023
**Autore:** Umair Majeed
**Estratto:** Questo tutorial ti mostrerà come personalizzare gli stili di pagamento di Stripe quando utilizzi l'elemento di pagamento per il tuo campo Stripe.
**Contenuto:**
## Introduzione
Vuoi personalizzare lo stile di Stripe sugli elementi dei tuoi moduli? Nessun problema! Questo tutorial ti guiderà attraverso i semplici passaggi per personalizzare l'aspetto del tuo campo **Carta di Credito Stripe** utilizzando PHP.
Si prega di notare che questo snippet verrà applicato solo al campo modulo **Carta di Credito Stripe** quando la **Modalità Campo Carta di Credito** dalle Impostazioni di WPForms nella scheda **Pagamenti** è impostata su **Elemento di Pagamento**.
Per saperne di più su questa opzione, [consulta questa utile guida](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#field-modes).
Per impostazione predefinita, il campo avrà già le opzioni predefinite impostate all'interno di WPForms.
## Creazione del modulo
Inizieremo creando un nuovo modulo e aggiungendo i nostri campi. Dovrai includere il campo **Carta di Credito Stripe** nel tuo modulo.
Se hai bisogno di aiuto nella creazione di un modulo che elabori i pagamenti Stripe, [consulta questa guida dettagliata](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Stripe Pro Addon").
Ai fini di questo tutorial, abbiamo creato un semplice modulo d'ordine.
## Aggiunta dello snippet
Ora è il momento di aggiungere lo snippet. Se hai bisogno di aiuto su come e dove aggiungere snippet personalizzati al tuo sito, [consulta questo tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzato per WPForms").
Stripe offre diverse opzioni per lo styling dei suoi elementi. Per un elenco più completo di ciò che puoi modificare, consulta la loro documentazione sull'[API di aspetto degli elementi](https://stripe.com/docs/elements/appearance-api). Assicurati di testare il tuo modulo e le modifiche, poiché alcuni elementi potrebbero non essere supportati da questa API.
```
/**
* Personalizza lo stile di Stripe quando si utilizza l'Elemento di 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' );
```
In questo snippet, abbiamo selezionato il **tema** Stripe e impostato le **etichette** dei campi su **fluttuanti**, oltre a varie opzioni CSS.
Ora, quando visualizziamo il nostro modulo, puoi vedere chiaramente le modifiche che abbiamo apportato, comprese le etichette fluttuanti sul campo.
## Personalizzazione del pulsante Richiesta di Pagamento (Apple Pay e Google Pay)
Se il tuo campo Carta di Credito Stripe utilizza l'**Elemento di Pagamento**, puoi anche personalizzare come viene visualizzato il pulsante Apple Pay e Google Pay sovrascrivendo l'oggetto `appearance` di Stripe.
Per fare ciò, utilizza il filtro `wpforms_integrations_stripe_api_payment_intents_set_element_appearance` e aggiungi una voce `rules` per `.PaymentRequestButton`. Questo ti consente di controllare lo stile del pulsante, incluso il colore del testo.
```
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', function ( $appearance ) {
// Definisci una struttura di aspetto coerente per gli elementi 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;
});
```
Per opzioni di stile aggiuntive, consulta la documentazione di Stripe per l'[API di aspetto degli elementi](https://docs.stripe.com/elements/appearance-api) e il [Pulsante Richiesta di Pagamento](https://docs.stripe.com/stripe-js/elements/payment-request-button).
E questo è tutto ciò che ti serve per personalizzare lo stile di Stripe. Vuoi aggiungere etichette fluttuanti ad altri campi del modulo? Dai un'occhiata al nostro tutorial su [Come creare un modulo con etichette fluttuanti](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "Come creare un modulo con etichette fluttuanti").
**Categorie:** Tutorial
**Tag:** Stripe
---