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