Currency Selector ElementPrivate preview

Let customers pay in their local currency with Adaptive Pricing to increase international revenue.

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 localisation 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 toggle interface displaying two options: selected €57.81 (EU flag) and unselected $60.00 (US flag), labeled as 'ToggleItem'.

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, as the selected currency might affect available payment methods.
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 tips to your page layouts for all screen sizes.

A selector showing Euros and US Dollars as options, with Euros selected, and the order summary showing all prices in Euros.

Do

Place the Currency Selector above the Payment Element, unless only accepting cards in which case directly below is also an option.