### [How to Customize the Stripe Styling](https://wpforms.com/developers/how-to-customize-the-stripe-styling/)

**Published:** November 17, 2023
**Author:** Umair Majeed

**Excerpt:** This tutorial will show you how to customize the Stripe Payment styles when using the Payment element for your Stripe field. 

**Content:**

## Introduction

Want to customize the Stripe styling on the elements on your forms? No problem! This tutorial will walk you through the simple steps of customizing the appearance of your **Stripe Credit Card** field using PHP.

Please note that this snippet will only be applied to the **Stripe Credit Card** form field when using the **Credit Card Field Mode** from the WPForms Settings **Payments** tab is set to **Payment Element**.

To learn more about this option, [please see this useful guide](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#field-modes).

By default, the field will already have default options set within WPForms.

![Stripe styling default](https://wpforms.com/wp-content/uploads/2023/11/stripe-payment-before.jpg)## Creating the form

We’re going to begin by creating a new form and adding our fields. You’ll need to include the **Stripe Credit Card** field on your form.

If you need help in creating a form that will process Stripe payments, [please checkout this detailed guide](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Stripe Pro Addon").

For the purpose of this tutorial, we’ve created a simple order form.

![add a Stripe Credit Card field to your form](https://wpforms.com/wp-content/uploads/2023/11/wpforms-add-stripe-field.jpg)## Adding the snippet

Now it’s time to add the snippet. If you need help with how and where to add custom snippets to your site, [please see this tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

Stripe has quite a few options for styling their elements. For a more comprehensive list on what you can change, please see their own documentation on [Elements Appearance API](https://stripe.com/docs/elements/appearance-api). Please be sure to test your form and changes as some elements may not be supported with this API.

```

/**
 * 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 this snippet, we’ve selected the Stripe **theme** and set the field **labels** to **floating** as well as various CSS options.

Now when we view our form, you can clearly see the changes we’ve made including the floating labels on the field.

![after adding the snippet you can now see the changes you've made](https://wpforms.com/wp-content/uploads/2023/11/wpforms-payment-after.jpg)## Customizing the Payment Request Button (Apple Pay and Google Pay)

If your Stripe Credit Card field is using the **Payment Element**, you can also customize how the Apple Pay and Google Pay button is displayed by overwriting Stripe’s `appearance` object.

To do this, use the `wpforms_integrations_stripe_api_payment_intents_set_element_appearance` filter and add a `rules` entry for `.PaymentRequestButton`. This lets you control the button’s styling, including the text color.

```

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;

});
```

![](https://wpforms.com/wp-content/uploads/2023/11/stripe-card-customization-1024x529.png)For additional styling options, see Stripe’s docs for the [Elements Appearance API](https://docs.stripe.com/elements/appearance-api) and the [Payment Request Button](https://docs.stripe.com/stripe-js/elements/payment-request-button).

And that’s all you need to customize the Stripe styling. Would you like to add floating labels to other form fields? Check out our tutorial on [How to Create a Form With Floating Labels](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "How to Create a Form With Floating Labels").

**Categories:** Tutorials

**Tags:** Stripe

---