Stripe.js testing assistant

You can use the Stripe.js testing assistant to set up your integration.

The testing assistant appears on the bottom right of the page.

The testing assistant appears on your website on any page with Elements loaded in a sandbox and doesn’t appear in live mode. The testing assistant provides tools that allow you to:

• Provide autofill shortcuts for payment methods and payment scenarios
• Highlight integration errors, warnings, and optimizations
• Simulate your customer’s location to see which payment methods you display to customers around the world
• Customize your Elements appearance in real time using the Appearance API

Elements autofill

The testing assistant automatically shows payment method presets for the payment methods included in your integration. You can use these presets to autofill the Payment Element for different payment scenarios.

Use the payment method presets to autofill Elements.

For example, you can select Magic Fill to autofill all Elements present on the page at the same time.

Integration insights

The testing assistant highlights integration errors and warnings to help you follow best practices. It also suggests optimization techniques to help manage your integration’s effectiveness, such as using dynamic payment methods if you aren’t already doing so.

View integration errors and warnings

Elements inspector

The Elements inspector helps you debug your integration by displaying real-time information about payment method availability, Adaptive Pricing, and your payment method configuration. For example, you can use the Elements inspector to troubleshoot why specific payment methods aren’t appearing for your customers or why Adaptive Pricing isn’t active.

You can also simulate your customer’s location to see how your integration behaves for customers around the world.

Debug your integration with the Elements inspector

Appearance editor

The testing assistant includes an Appearance API editor that you can use to customize the look and feel of your Elements integration in real time. Instead of editing your code and refreshing the page to see changes, you can use the editor to experiment with your Appearance API configuration directly in your browser.

Customize your Appearance API configuration in real time

When you open the Appearance editor, the testing assistant automatically detects the Appearance API configuration active on your page. You can then use the editor to:

• Modify variables such as colors, font sizes, and spacing using interactive controls
• Preview your changes on your Elements integration in real time
• Export the updated Appearance API configuration as a code snippet to use in your integration

Hide the testing assistant

By default, Stripe automatically enables the testing assistant for integrations using Elements with the Checkout Sessions API or for those using Elements with the Payment Intents API on Clover version or later.

To hide the testing assistant, set the developerTools.assistant.enabled option to false when you set up Elements.

const stripe = new Stripe(publicKey, {
  developerTools: {
    assistant: {
      enabled: false,
    },
  },
});