Stripe-Styling anpassen

Einleitung

Möchten Sie das Stripe-Styling der Elemente auf Ihren Formularen anpassen? Kein Problem! Diese Anleitung führt Sie durch die einfachen Schritte zur Anpassung des Erscheinungsbilds Ihres Stripe-Kreditkartenfelds mit PHP.

Standardmäßig sind im Feld bereits Standardoptionen in WPForms festgelegt.

Erstellung 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.

Für dieses Tutorial haben wir ein einfaches Bestellformular erstellt.

Hinzufügen des Snippets

Jetzt ist es an der Zeit, den Ausschnitt hinzuzufügen. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefinierte Ausschnitte zu Ihrer Website hinzufügen können, sehen Sie sich bitte dieses Tutorial an.

/**
 * 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 Ausschnitt haben wir das Stripe-Theme ausgewählt und die Feldlabels auf floating gesetzt, sowie verschiedene CSS-Optionen.

Wenn wir uns nun unser Formular ansehen, können Sie die vorgenommenen Änderungen, einschließlich der schwebenden Labels 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 wpforms_integrations_stripe_api_payment_intents_set_element_appearance-Filter und fügen Sie einen rules-Eintrag für .PaymentRequestButton hinzu. Dies ermöglicht Ihnen die Steuerung des Button-Stylings, einschließlich der Textfarbe.

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;

});

Und das ist alles, was Sie benötigen, um das Stripe-Styling anzupassen. Möchten Sie schwebende Labels zu anderen Formularfeldern hinzufügen? Sehen Sie sich unser Tutorial So erstellen Sie ein Formular mit schwebenden Labels an.