How can I change the style of the payment form?

Customizing the payment forms used in the Stripe WooCommerce Extension is a bit different than styling other elements of your site. This is because the payment form is served in an iframe on your site — which means that the payment form is actually hosted by Stripe and it’s embedded on your site.

You can style some of the payment form using custom CSS, you may also need to leverage custom PHP in order to achieve your goal.

Using PHP Filters

↑ Back to top

Starting with version 8.2.0, the new checkout experience payment form can be styled using the wc_stripe_upe_params function. This function leverages themes, variables, and rules from the Stripe Elements Appearance API.

Changing colors

↑ Back to top

If you wanted to change the style of the payment form so that the fields…

• Have dark-blue background color.
• Have 1px orange border.
• Use the flat theme offered by Stripe on the shortcode checkout.
• Use the night theme offered by Stripe on the Blocks checkout.

…then the following filter would help you accomplish that:

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
	/**
	 * Custom shortcode checkout styles -- Use Stripe's Flat Theme
	 */
	$stripe_params['appearance'] = (object) [
		'theme' => 'flat'
	];

	/**
	 * Custom Block checkout styles -- Use Stripe's Night Theme with custom variables + rules
	 */
	$stripe_params['blocksAppearance'] = (object) [
		'theme'     => 'night',
		'variables' => (object) [
			'colorPrimary' => '#FFA500',
		],
		'rules' => (object) [
			'.Input' => (object) [
				'backgroundColor' => '#212D63',
				'border'          => '1px solid var(--colorPrimary)',
			]
		],
	];

	return $stripe_params;
} );

Alternatively, if you wanted to use the sans-serif font family universally, you can apply the following filter:

Keep in mind:

• Selectors like colorPrimary support an allowlist of CSS properties.
  • These can be specified via camel case (e.g., backgroundColor instead of background-color).
• Rules can be applied to these classes.

Changing fonts

↑ Back to top

You can also use the wc_stripe_upe_params filter to adjust the font used in the payment elements. The fontFamily selector can be used within the above snippet to specify the desired font family to use for specific classes.

If you’d like to universally change the font for all elements and classes using the wc_stripe _upe_params function, you will have to remove the value from all elements before specifying which fontFamily value you’d like to apply.

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
	$removeFontFamily = function ( &$object ) use (&$removeFontFamily) {
		foreach ( $object as $key => &$value ) {
			if ( $key === 'fontFamily' ) {
				unset( $object->$key );
			} elseif ( is_object( $value ) ) {
				$removeFontFamily( $value );
			}
		}
	};

	// Removes all default font families set in appearance rules and sets a global fontFamily variable to `sans-serif`.
	if ( isset( $stripe_params['appearance'] ) && is_object( $stripe_params['appearance'] ) ) {
		$removeFontFamily( $stripe_params['appearance'] );
		$stripe_params['appearance']->variables = (object) [ 'fontFamily' => 'sans-serif' ];
	}

	if ( isset( $stripe_params['upeAppearance'] ) && is_object( $stripe_params['upeAppearance'] ) ) {
		$removeFontFamily( $stripe_params['upeAppearance'] );
		$stripe_params['upeAppearance']->variables = (object) [ 'fontFamily' => 'sans-serif' ];
	}

	return $stripe_params;
} );

Legacy customizations

↑ Back to top

Prior to version 8.2.0, there were some other means of modifying the checkout fields. This information is retained here for searchability.

Using custom CSS

↑ Back to top

The contents of the iframe will try to mirror the styling of your site as best as possible. However, because of how the payment forms are rendered, targeting them specifically via CSS won’t work as expected.

You can still use CSS, but you will need to target the wrapping div element to style the following properties of the payment fields:

• Background color
• Margin
• Padding
• Size

Example CSS

↑ Back to top

/* Target the Credit Card */
#stripe-card-element {
    background: #ffffff !important;
    padding: 10px 5px !important;
    margin: 5px 0px !important;
}

/* Target the Expiry Date */
#stripe-exp-element {
    background: #ffffff !important;
    padding: 10px 5px !important;
}

/* Target the CVC Code */
.woocommerce-checkout-review-order #stripe-cvc-element {
    background: #ffffff !important;
    margin: 5px 0px !important;
    padding: 10px 5px !important;
}

Styling all fields simultaneously via CSS

You can use the .wc-stripe-elements-field selector to target all of those fields simultaneously. Example:

.wc-stripe-elements-field {
    border-color: #999;
}

Styling an individual field via CSS

If you need to apply styles to an individual field, you can use its ID selector:

Field	Selector
Card Number	#stripe-card-element
Expiry Date	#stripe-exp-element
Card Code	#stripe-cvc-element

Example:

#stripe-card-element {
    margin-bottom: 1em;
}

Using PHP filters

↑ Back to top

The CSS selectors above allow you to modify the style of field wrappers. However, if you need to also change something within the actual input, you will need to provide the necessary styling via PHP. This can be done using the wc_stripe_elements_styling PHP filter.

Example filter

If you wanted to change the style of the payment form so that…

• A 15px font size is used in all states.
• A gray text color in all states.
• Placeholder text is a light gray color.
• The text color of fields are an orange color when they are invalid.

…then the following filter would help you accomplish that:

function my_theme_modify_stripe_fields_styles( $styles ) {
    return array(
        'base' => array(
            'color' => '#666666',
            'fontSize' => '15px',
            '::placeholder' => array(
                'color' => '#999999',
            ),
        ),
        'invalid' => array(
            'color' => '#ff7500',
        ),
    );
}

add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

Keep in mind:

• Styles you see in the example are default styles used by the extension.
• As soon as you provide custom styles, the extension will ignore its default ones. To avoid this, copy the example and build on it.
• All styles are applied through JavaScript, so you need to use JavaScript property names instead of pure CSS. For example, instead of font-size you should use fontSize.

Array format

To see a description of the expected array, you can review the Stripe documentation here., but the expected array needs to have the following options:

array(
    [state] => array(
        [property] => [value],
        [pseudoClass] => array(
            [property] => [value],
        ),
    ),
)

All custom styles need to be within a nested array, containing:

• State as top-level item
• Properties and their values as second level items
• Pseudo-classes for a specific state as second level items, and their properties as third-level ones

States

A state is a object that is used to contain information about the component. The following states can be used in the aforementioned array:

STATE	DESCRIPTION
base	Base style, all other variants inherit from this style
complete	Applied when the Element has valid input
empty	Applied when the Element has no customer input
invalid	Applied when the element contains invalid values

Allowed properties

• color
• fontFamily
• fontSize
• fontSmoothing
• fontStyle
• fontVariant
• fontWeight
• iconColor
• lineHeight
• letterSpacing
• textAlign
• textDecoration
• textShadow
• textTransform

Pseudo-classes

• :disabled
• :focus
• hover
• ::-ms-clear
• ::placeholder
• ::selection
• :-webkit-autofill