When you integrate Stripe with WooCommerce, the default payment form often looks out of place compared to the rest of your website’s design. Thankfully, Stripe provides a powerful Appearance API that lets you fully customize the look and feel of the Payment Element—from colors and fonts to borders and spacing.
If you’re using the official WooCommerce Stripe Payment Gateway plugin, you can easily inject custom appearance settings using the wc_stripe_upe_params filter. Below, I’ll show you exactly how to do it.
The Snippet
Add the following code to your theme’s functions.php file or in a custom plugin:
add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
$stripe_params['appearance'] = (object) [
'theme' => 'none',
'variables' => (object) [
'colorPrimary' => '#4CAF50',
'colorTextSecondary'=> '#ffffff',
'colorText' => '#ffffff',
'colorDanger' => '#e63946',
'borderRadius' => '8px',
'fontSizeBase' => '16px',
'fontSizeSm' => '16px',
'spacingUnit' => '6px',
'fontFamily' => '"Roboto", Sans-serif',
],
'rules' => (object) [
'.Label' => (object) [
'color' => '#ffffff',
],
'.Input' => (object) [
'color' => '#000000',
'backgroundColor' => '#ffffff',
],
'.Select' => (object) [
'color' => '#000000',
],
'.CheckboxLabel' => (object) [
'color' => '#ffffff',
'fontSize' => '16px',
],
'.TermsText' => (object) [
'color' => '#ffffff',
'fontSize' => '14px',
],
'.Link' => (object) [
'color' => '#ffffff',
'textDecoration' => 'underline',
],
'.Block' => (object) [
'backgroundColor' => 'transparent',
'border' => '1px solid #ffffff33',
],
],
];
return $stripe_params;
} );
What This Does
-
Theme: By setting
'theme' => 'none', you start with a blank canvas (instead of Stripe’s default theme). -
Variables: Define your global design values, such as:
-
Primary button color (
#4CAF50) -
Text and secondary text colors (
#ffffff) -
Font family (
Roboto, sans-serif) -
Spacing, border radius, and font sizes
-
-
Rules: Target specific Stripe elements like
.Label,.Input,.CheckboxLabel, and.Linkto fine-tune styling.
Example: Before vs. After
- Before: Stripe’s default form with plain white fields and gray labels.
- After: A fully branded payment form with your custom colors, fonts, and spacing — blending seamlessly with your WooCommerce checkout page.
Why Customize the Stripe Payment Form?
- Brand Consistency – Your checkout should feel like part of your website, not a third-party widget.
- Better UX – Matching typography, colors, and spacing improves readability and trust.
- Increased Conversions – A professional-looking checkout builds credibility and reduces drop-offs.
Final Thoughts
Customizing the Stripe Payment Element in WooCommerce is easier than most think. With just a few lines of code, you can transform the default form into a seamless, branded experience that matches your website design.
If you’re already using WooCommerce and Stripe, I highly recommend giving this snippet a try. Your customers will notice the difference!
