Unable to apply dark mode styling to Stripe payment form (WooCommerce Stripe Gat

Hi team,

I’m having trouble customizing the appearance of the Stripe payment form on my checkout page. I’m using the WooCommerce Stripe Gateway plugin and want the form to match my site’s dark theme.

I’ve tried multiple approaches, including the suggestions in the official documentation, but nothing seems to work. The Stripe form fields (card number, expiration, CVC) are rendered inside iframes, so my CSS and theme PHP hooks don’t affect them.

Example of the PHP code I’ve tried in my theme’s functions.php:

add_filter( ‘wc_stripe_upe_params’, function( $params ) {
if ( ! is_admin() ) {
$params[‘blocksAppearance’] = [
‘variables’ => [
‘fontFamily’ => ‘Arial, sans-serif’,
‘fontSize’ => ’16px’,
‘colorBackground’ => ‘#1e1e1e’,
‘colorText’ => ‘#ffffff’,
‘colorPlaceholder’ => ‘#aaaaaa’,
‘colorBorder’ => ‘#333333’,
‘colorDanger’ => ‘#ff6b6b’,
],
];
}
return $params;
});

add_action(‘init’, function() {
if ( ! is_admin() ) {
delete_transient( ‘wcpay_upe_appearance’ );
delete_transient( ‘wcpay_upe_appearance_theme’ );
}
});

Despite adding this code and clearing transients, the payment form still shows the default light styling.
Any help would be greatly appreciated!

Attachments:

You must be logged in to view attached files.

Just inspect stripe payment block with dev tools and find css classes.. and use custom css to override.. do not forget to use !important

Hello,

Can you please share the page URL so I can check and give you a possible solution?

Best Regards,

https://gluckart.space/checkout

After adding the product you will be able to get to the checkout page

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

/* Style the payment box container */
.payment_methods .payment_box {
    background-color: #1e1e1e !important; /* Dark background */
    border: 1px solid #333333 !important;
    border-radius: 8px;
    padding: 20px;
    color: #ffffff !important;
}

/* Stripe iframe wrapper (container around card fields) */
.payment_methods .StripeElement,
.payment_methods .wc-stripe-elements-field {
    background-color: #2a2a2a !important;
    border: 1px solid #444444 !important;
    border-radius: 6px;
    padding: 12px;
    color: #ffffff !important;
}

/* Label text above Stripe fields */
.payment_methods label {
    color: #ffffff !important;
}

Best Regards,

Thanks! The code you shared worked for styling the two boxes of the payment gateway form.

However, I’m also wondering how to apply some styles to the main Stripe form container itself, the one shown in the screenshot. Thanks again!

Attachments:

You must be logged in to view attached files.

Fixed the problem, thank you

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts