Einführung
Möchten Sie das Stripe-Styling für die Elemente in Ihren Formularen anpassen? Kein Problem! Dieses Tutorial führt Sie durch die einfachen Schritte zur Anpassung des Erscheinungsbildes Ihres Stripe-Kreditkartenfeldes mit PHP.
Bitte beachten Sie, dass dieses Snippet wird nur auf die Stripe Kreditkarte Formularfeld angewendet werden, wenn die Kreditkarte Feldmodus aus dem WPForms Einstellungen Zahlungen Registerkarte auf Payment Element eingestellt ist.
Weitere Informationen zu dieser Option finden Sie in diesem nützlichen Leitfaden.
Standardmäßig wird das Feld bereits Standardoptionen innerhalb von WPForms eingestellt.
Erstellen des Formulars
Wir beginnen damit, ein neues Formular zu erstellen und unsere Felder hinzuzufügen. Sie müssen das Feld für die Stripe-Kreditkarte in Ihr Formular aufnehmen.
Wenn Sie Hilfe bei der Erstellung eines Formulars benötigen, das Stripe-Zahlungen verarbeiten kann, lesen Sie bitte diese ausführliche Anleitung.
Für dieses Tutorial haben wir ein einfaches Bestellformular erstellt.
Hinzufügen des Snippets
Jetzt ist es an der Zeit, das Snippet hinzuzufügen. Wenn Sie Hilfe benötigen, wie und wo Sie Ihrer Website benutzerdefinierte Snippets hinzufügen können, lesen Sie bitte dieses Tutorial.
Stripe bietet eine ganze Reihe von Optionen für die Gestaltung seiner Elemente. Eine umfassendere Liste dessen, was Sie ändern können, finden Sie in der eigenen Dokumentation zur Elements Appearance API. Bitte stellen Sie sicher, dass Sie Ihr Formular und Ihre Änderungen testen, da einige Elemente möglicherweise nicht von dieser API unterstützt werden.
/**
* 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 diesem Schnipsel haben wir das Stripe-Thema ausgewählt und die Feldbeschriftungen auf fließend sowie verschiedene CSS-Optionen eingestellt.
Wenn wir nun unser Formular anzeigen, können Sie die Änderungen, die wir vorgenommen haben, deutlich sehen, einschließlich der schwebenden Beschriftungen der Felder.
Und das ist alles, was Sie brauchen, um das Stripe-Styling anzupassen. Möchten Sie anderen Formularfeldern schwebende Beschriftungen hinzufügen? Sehen Sie sich unser Tutorial zum Erstellen eines Formulars mit schwebenden Beschriftungen an.