Riassunto AI
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 del modulo Carta di Credito Stripe quando si utilizza la Modalità Campo Carta di Credito dalle Impostazioni di WPForms, scheda Pagamenti, impostata su Elemento di Pagamento.
Per saperne di più su questa opzione, consulta questa utile guida.
Per impostazione predefinita, il campo avrà già 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 sul tuo modulo.
Se hai bisogno di aiuto nella creazione di un modulo che elabori i pagamenti Stripe, dai un'occhiata a questa guida dettagliata.
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.
/**
* 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' );
In questo snippet, abbiamo selezionato il tema Stripe theme e impostato le etichette dei campi labels su floating, oltre a varie opzioni CSS.
Ora, quando visualizziamo il nostro modulo, puoi vedere chiaramente le modifiche che abbiamo apportato, comprese le etichette flottanti sul campo.
Personalizzazione del pulsante di 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 ) {
// 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 questo è tutto ciò che ti serve per personalizzare lo stile di Stripe. Vuoi aggiungere etichette flottanti ad altri campi del modulo? Dai un'occhiata al nostro tutorial su Come creare un modulo con etichette flottanti.