# Currency Selector Element

Adaptive Pricing を使用して、顧客が現地通貨で支払えるようにします。

通貨セレクター Element は、顧客の勤務地に基づいて現地通貨で価格を自動的に表示する埋め込み可能な UI コンポーネントです。通貨セレクター Element を有効にする方法の詳細については、[導入ガイド](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md?payment-ui=embedded-components#render-currency-selector-element)をご覧ください。

> [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) と通貨セレクター Element は、Elements を [Checkout Sessions API](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) とともに使用する場合にのみ使用できます。

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

> お客様または顧客の地域で価格ローカライズに適用される法律に準拠する責任があります。Elements で Adaptive Pricing を使用するには、通貨 Selector Element を表示する必要があります。貴社に特化されたアドバイスが必要な場合は、法律顧問に相談されることをお勧めします。

## デザイン

[Appearance API](https://docs.stripe.com/elements/appearance-api.md) を使用して、すべての要素のスタイルを制御します。テーマを選択するか、特定の要素を更新します。
![ラベル付きの Design Elements を持つ EU (625.51 ユーロ) とアメリカ (665.00 USD) の 3 種類のボタンを表示する通貨セレクタ切り替え UI。](https://b.stripecdn.com/docs-statics-srv/assets/cse-appearance.14faf007e156254a646fcabbecbbffd1.png)

たとえば、「フラット」のテーマを選択した後、[.ToggleItem](https://docs.stripe.com/elements/appearance-api.md#toggle) のスタイルをオーバーライドしたとします。

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = {
  theme: 'flat',
  rules: {
    '.ToggleItem': {
      backgroundColor: "#000000",
      color: "#ffffff",
    }
  }
};
const elementsOptions = { appearance };
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions
});
const currencySelectorElement = checkout.createCurrencySelectorElement()
currencySelectorElement.mount('#currency-selector-element');
```

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

決済ページ用に、自在に配置可能な Currency Selector Element を提供しています。セレクターの配置場所を決める際は、次のベストプラクティスに従ってください。

- 選択した通貨によって利用可能な決済手段に影響が及ぶ可能性があるため、Currency Selector は支払い情報を入力する場所の近く、理想としては Payment Element の真上に配置してください。カードのみを受け付ける場合は、Payment Element のすぐ下に通貨セレクターを配置することもできます。
- (マルチステップフロー、またはページ下部にあることが原因で) ページ上部に Payment Element が表示されていない場合は、Currency Selector を合計金額の近くに配置します。
- [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md) を使用している場合は、Express Checkout Element の上に Currency Selector Element を配置し、顧客が請求される通貨を把握できるようにすることをお勧めします。
- これらのベストプラクティスを、すべての画面サイズのページレイアウトに適用してください。

通貨セレクター Element の使用の詳細については、[導入ガイド](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md?payment-ui=embedded-components#render-currency-selector-element) をご覧ください。