# Currency Selector Element

Offrez à vos clients la possibilité de payer dans leur devise locale grâce à la fonction Adaptive Pricing.

Le composant Currency Selector Element est un composant d’interface utilisateur intégrable qui affiche automatiquement les tarifs dans la devise locale de votre client en fonction de son emplacement. Pour en savoir davantage sur l’activation du composant Currency Selector Element, consultez le [guide d’intégration](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) et le composant Currency Selector Element ne sont disponibles que si vous utilisez les Elements avec l’[API Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

Si la démonstration ne s’affiche pas, essayez d’ouvrir la page dans un [navigateur pris en charge](https://docs.stripe.com/elements/currency-selector-element.md#supported-browsers).

> Il vous incombe de respecter les lois applicables à la localisation des prix dans votre région ou dans celles de vos clients. Vous devez afficher l’élément Currency Selector lorsque vous utilisez la tarification adaptative avec Elements. Stripe vous recommande de consulter votre conseiller juridique afin d’obtenir des conseils adaptés à votre entreprise.

## Apparence

Utilisez l’[API Apparence](https://docs.stripe.com/elements/appearance-api.md) pour contrôler le style de tous les éléments. Choisissez un thème ou mettez à jour des informations spécifiques.
![L’interface utilisateur du sélecteur de devise affichant trois variantes des boutons UE (625,51 €) et US (665,00 USD) avec des éléments de design indiqués.](https://b.stripecdn.com/docs-statics-srv/assets/cse-appearance.14faf007e156254a646fcabbecbbffd1.png)

Par exemple, choisissez le thème « flat » et remplacez les styles [.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');
```

## Bonnes pratiques en matière de conception

Nous proposons un Currency Selector Element configurable pour votre page de paiement. Suivez ces bonnes pratiques lorsque vous choisissez l’emplacement de votre sélecteur&nbsp;:

- Ajoutez le sélecteur de devise près de l’endroit où les informations de paiement sont saisies, idéalement directement au-dessus du composant Payment Element, car la devise sélectionnée peut affecter les moyens de paiement disponibles. Si vous n’acceptez que les cartes, vous pouvez également placer le sélecteur de devise directement sous Payment Element.
- Si le Payment Element n’est pas visible au départ (en raison de flux à plusieurs étapes ou d’une position plus basse sur la page), placez le sélecteur de devises près de l’affichage du prix total.
- Si vous utilisez le composant [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md), nous vous recommandons de placer le composant Currency Selector Element au-dessus du composant Express Checkout Element pour que vos clients sachent dans quelle devise ils seront facturés.
- Appliquez ces bonnes pratiques à vos mises en page pour toutes les tailles d’écran.

Pour en savoir plus sur l’utilisation du composant Currency Selector Element, consultez le [guide d’intégration](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md?payment-ui=embedded-components#render-currency-selector-element).