### [So passen Sie das Stripe-Styling an](https://wpforms.com/developers/how-to-customize-the-stripe-styling/)
**Veröffentlicht:** 17. November 2023
**Autor:** Umair Majeed
**Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie die Stripe-Zahlungsstile anpassen, wenn Sie das Zahlungselement für Ihr Stripe-Feld verwenden.
**Inhalt:**
## Einführung
Möchten Sie das Stripe-Styling der Elemente auf Ihren Formularen anpassen? Kein Problem! Dieses Tutorial führt Sie durch die einfachen Schritte zur Anpassung des Erscheinungsbilds Ihres **Stripe-Kreditkartenfelds** mit PHP.
Bitte beachten Sie, dass dieser Ausschnitt nur auf das **Stripe-Kreditkartenfeld** angewendet wird, wenn im Tab **Zahlungen** der WPForms-Einstellungen der **Kartenmodus** auf **Zahlungselement** gesetzt ist.
Um mehr über diese Option zu erfahren, [lesen Sie bitte diese nützliche Anleitung](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#field-modes).
Standardmäßig hat das Feld bereits Standardoptionen in WPForms.
## Erstellen des Formulars
Wir beginnen mit der Erstellung eines neuen Formulars und dem Hinzufügen unserer Felder. Sie müssen das **Stripe-Kreditkartenfeld** zu Ihrem Formular hinzufügen.
Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, das Stripe-Zahlungen verarbeitet, [lesen Sie bitte diese detaillierte Anleitung](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Stripe Pro Addon").
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 benutzerdefinierte Snippets zu Ihrer Website hinzufügen können, [lesen Sie dieses Tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "So fügen Sie benutzerdefiniertes PHP oder JavaScript für WPForms hinzu").
Stripe bietet zahlreiche Optionen zum Stylen seiner Elemente. Eine umfassendere Liste der änderbaren Elemente finden Sie in deren Dokumentation zur [Elements Appearance API](https://stripe.com/docs/elements/appearance-api). Testen Sie Ihr Formular und Ihre Änderungen sorgfältig, da einige Elemente mit dieser API möglicherweise nicht unterstützt werden.
```
/**
* Stripe-Styling anpassen, wenn das Zahlungselement verwendet wird
*
* @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 Snippet haben wir das Stripe-**Theme** ausgewählt und die Feld**beschriftungen** auf **floating** sowie verschiedene CSS-Optionen gesetzt.
Wenn wir nun unser Formular anzeigen, können wir die vorgenommenen Änderungen, einschließlich der schwebenden Beschriftungen im Feld, deutlich erkennen.
## Anpassen des Zahlungsanforderungsbuttons (Apple Pay und Google Pay)
Wenn Ihr Stripe-Kreditkartenfeld das **Zahlungselement** verwendet, können Sie auch anpassen, wie der Apple Pay- und Google Pay-Button angezeigt wird, indem Sie das `appearance`-Objekt von Stripe überschreiben.
Verwenden Sie dazu den Filter `wpforms_integrations_stripe_api_payment_intents_set_element_appearance` und fügen Sie einen `rules`-Eintrag für `.PaymentRequestButton` hinzu. Dies ermöglicht Ihnen, das Styling des Buttons zu steuern, einschließlich der Textfarbe.
```
add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', function ( $appearance ) {
// Definieren Sie eine konsistente Erscheinungsstruktur für Stripe-Elemente.
$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;
});
```
Weitere Styling-Optionen finden Sie in den Stripe-Dokumenten zur [Elements Appearance API](https://docs.stripe.com/elements/appearance-api) und zum [Payment Request Button](https://docs.stripe.com/stripe-js/elements/payment-request-button).
Das ist alles, was Sie brauchen, um das Stripe-Styling anzupassen. Möchten Sie schwebende Beschriftungen zu anderen Formularfeldern hinzufügen? Sehen Sie sich unser Tutorial [So erstellen Sie ein Formular mit schwebenden Beschriftungen](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "So erstellen Sie ein Formular mit schwebenden Beschriftungen") an.
**Kategorien:** Tutorials
**Schlagwörter:** Stripe
---