Currency Selector ElementPrivate preview

Let customers pay in their local currency with Adaptive Pricing.

The Currency Selector Element is an embeddable UI component that automatically displays prices in your customers local currency based on their location.

Note

Adaptive Pricing and the Currency Selector Element are only available when using Elements with the Checkout Sessions API.

Theme

Size

Customer Location

If you don’t see the demo, try viewing this page in a supported browser.

Note

You are responsible for complying with laws that apply to price localization in your or your customers’ regions. You must render the Currency Selector Element in your use of Adaptive Pricing with Elements. Stripe recommends you consult your legal advisor for advice specific to your business.

Appearance

Use the Appearance API to control the style of all elements. Choose a theme or update specific details.

Currency Selector toggle UI showing three variations of EU (€625.51) and US ($665.00) buttons with labeled design elements.

For instance, choose the “flat” theme and override the .ToggleItem styles.

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = {
  theme: 'flat',
  rules: {
    '.ToggleItem': {
      backgroundColor: "#000000",
      color: "#ffffff",
    }
  }
};

Design best practices

We offer a configurable Currency Selector Element for your checkout page. Follow these best practices when choosing where to place your selector:

Add the Currency Selector near where payment details are entered, ideally directly above the Payment Element, since the selected currency might affect available payment methods. If you only accept cards, you can also place the Currency Selector directly below the Payment Element.
If the Payment Element isn’t initially visible (due to multi-step flows or being lower on the page), position the Currency Selector near the total price display.
Apply these best practices to your page layouts for all screen sizes.