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.

Starting with version 8.2.0 of the Stripe WooCommerce Extension, the 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.

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;
} );

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.

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;
} );