Customizing the Stripe Elements card form

The Stripe Elements card form is loaded via JavaScript and then added to your site via an iframe. This means you cannot use normal CSS if you want to customize some of the finer details of the input fields. However, there is a filter available that allows you to customize the styling via an array of settings sent to Stripe when building the card form.

Here's a simple example for changing the font color to red:

add_filter( 'rcp_stripe_scripts', function ( $stripe_args ) {
	$stripe_args['elementsConfig']['style'] = array(
		'base' => array(
			'color' => 'red'
		)
	);
	return $stripe_args;
} );

An array of style properties and values can be added to the 'base' array.

Here's another example that changes the font size and font family:

add_filter( 'rcp_stripe_scripts', function ( $stripe_args ) {
	$stripe_args['elementsConfig']['style'] = array(
		'base' => array(
			'fontSize' => '14px',
			'fontFamily' => '"Open Sans", "Helvetica Neue", "Helvetica", sans-serif',
		)
	);
	return $stripe_args;
} );

For a full list of supported properties, see Stripe's documentation article on Element options.