Currency Selector Element非公開プレビュー

Adaptive Pricing で顧客が現地通貨で支払えるようにすることで、海外での収益を増やすことができます。

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

注

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

テーマ

サイズ

顧客の場所

デモが表示されない場合は、サポートされているブラウザーでこのページを表示してみてください。

注

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.

デザイン

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",
    }
  }
};

デザインのベストプラクティス

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.
これらのヒントを、すべての画面サイズのページレイアウトに適用してください。

セレクターにオプションとしてユーロと米ドルが表示されていて、ユーロが選択された状態になっており、注文のサマリーではすべての料金がユーロで表示されている。

すべきこと

通貨セレクターを Payment Element の上に配置します (ただし、すぐ下のカードのみを受け付けることもできます)。