Customize Stripe Universal Payment Elements

Migrating to Payment Elements

If you used our Stripe integration before the introduction of Payment Elements, we’ve given you temporary access to a setting called “Elements Mode” in Downloads > Settings > Payments > Stripe. Upon updating, your store will remain on Card Elements, and give you the ability to switch to Payment Elements only after you’ve confirmed your checkout works with it. Here are a couple of common customizations that you may need to change or remove to optimize your Payment Elements experience.

Change the ‘id’ attribute of the Elements target

Change the ‘id’ attribute of the Elements target
The Easy Digital Downloads ‘Card Elements’ integration required that there be a <div> tag with the id ‘edd-stripe-card-element’. It may look like this, in your customizations:

// Card Elements target div
<div id="edd-stripe-card-element" class="edd-stripe-card-element"></div>

The new Payment Elements uses a different ‘id’ attribute, so you need to change this line to:

// Payment Elements target div
<div id="edd-stripe-payment-element"></div>
<p class="edds-field-spacer-shim"></p>

Card Name field is no longer necessary

Thanks to the new Payment Element, the card name field is no longer required. If Stripe’s Payment Element detects that the chosen payment method requires a name, it will ask for one.

Script and styles concatenation plugins

If you were using a plugin or resource to join all Javascript files or CSS files, you will want to ensure that you ‘rebuild’ your scripts, as the Javascript and CSS Styling for the card elements has changed.

Caching plugins or services

Upon changing to the Payment Element, ensure that you flush any caches you may have, including page caching, object caching, and services like Cloudflare, to ensure that the proper Javascript and CSS files are being loaded.

Easy Digital Downloads — Stripe 2.9 adds support for Stripe’s Payment Element, which allow for an improved, more efficient, and more customizable checkout experience. This is available to users using our Stripe Pro Gateway, version 2.9 or greater. New users will automatically use payment elements; existing users who have connected to Stripe will be able to opt in when they are ready, allowing time to test any customizations you’ve made to your EDD Checkout in a local or staging environment. If you have customized your Checkout template, you will want to read more about migrating from the legacy Card Element to the Payment Element.

Filters for the payment elements are all in easy-digital-downloads/includes/gateways/stripe/includes/elements/payment-elements.php in EDD core, so look there for full code and links to specific Stripe documentation.

With our Payment Element integration, we’ve been able to allow full customization of

Register a Custom Font to Use with Stripe’s Payment Elements

You can set Stripe up to use a custom font, even from external font sources such as Google or Adobe Fonts, with two filters:

add_filter( 'edds_stripe_payment_elements_fonts', 'prefix_add_google_font_stripe' );
/**
 * Registers a custom CSS source file for Stripe to use to render custom fonts.
 *
 * @param array $fonts
 * @return array
 */
function prefix_add_google_font_stripe( $fonts ) {
	$fonts[] = array(
		'cssSrc' => 'https://fonts.googleapis.com/css2?family=Gajraj+One',
	);

	return $fonts;
}

add_filter( 'edds_stripe_payment_elements_variables', 'prefix_add_custom_font_stripe_variables' );
/**
 * Add a custom font to the Stripe variables.
 *
 * @param array $variables
 * @return array
 */
function prefix_add_custom_font_stripe_variables( $variables ) {
	$variables['fontFamily'] = 'Gajraj One';

	return $variables;
}

There are many different possible options to add to the variables to customize every aspect of the Stripe payment form. For example, the form labels can be floating in the form inputs, instead of above them, with this small filter:

add_filter( 'edds_stripe_payment_elements_label_style', 'prefix_modify_stripe_label_style' );
/**
 * Changes the Stripe label style to floating.
 *
 * @return string
 */
function prefix_modify_stripe_label_style() {
	return 'floating';
}