Stripe Payment Element Filters Reference

SureCart provides various JavaScript filters for customizing Stripe's Payment Element. These filters allow you to control options such as the order of payment methods, the visibility of wallet buttons like Apple Pay, and the display of mandates or legal terms.

To override Stripe's default behavior, insert the relevant snippet into your front-end script. Ensure the script runs before the Payment Element is mounted. A convenient way to implement this in WordPress is by using a snippet manager, such as the "Simple Custom CSS & JS" plugin.

By following this approach, you can easily enhance the functionality and appearance of the Payment Element to suit your specific needs.

📘

Visual Clarity:

For a visual reference, view the snippet as it appears within the plugin in this screenshot: View Screenshot

Available Filters

surecart_stripe_payment_element_payment_method_order

To reorder the payment methods displayed in Stripe's Payment Element, you can utilize JavaScript filters. This functionality is referenced in the Stripe JS Reference

wp.hooks.addFilter(
	'surecart_stripe_payment_element_payment_method_order', // Hook name.
	'testnamespace', // Any custom namespace.
	(paymentMethodOrder, checkout) => {
		return [
			'us_bank_account',
			'card',
			'wechat_pay'
		];
	}
);

surecart_stripe_payment_element_wallets

This filter enables you to control the visibility of wallets like Apple Pay and Google Pay within Stripe's Payment Element. By default, these options are displayed when feasible. More information on managing these wallet options can be found in the Stripe JS Reference.

wp.hooks.addFilter(
	'surecart_stripe_payment_element_wallets', // Hook name.
	'testnamespace', // Any custom namespace.
	(wallets, checkout) => {
		return {
			applePay: 'auto',
			googlePay: 'auto',
			link: 'auto'
		};
	}
);

surecart_stripe_payment_element_terms

This filter allows you to manage the display of mandates and other legal agreements within the Payment Element. By default, these are shown only when necessary. You can find more information on this in the Stripe JS Reference.

wp.hooks.addFilter(
	'surecart_stripe_payment_element_terms', // Hook name.
	'testnamespace', // Any custom namespace.
	(terms, checkout) => {
		return {
			card: 'never'
		};
	}
);

surecart_stripe_payment_element_fields(Upcoming)

This filter allows you to manage the display of Billing address fields of Stripe payment element Stripe JS Reference. For example by using the below fields, it will hide all of the billing details of Stripe Element View screenshot.

wp.hooks.addFilter(
  "surecart_stripe_payment_element_fields", // Hook name.
  "testnamespace", // Any custom namespace.
  (fields) => {
    return {
      billingDetails: {
        email: "never",
        address: {
          line1: "never",
          line2: "never",
          city: "never",
          state: "never",
          postalCode: "never",
          country: "never",
        },
      },
    };
  }
);

To keep any of them in Stripe element, as for example country, you can just remove that line country: 'never',then country field will be displayed on the Stripe element.