# Stripe Elements pour le web

Créez votre propre tunnel de paiement avec des composants d'interface utilisateur préconfigurés.

Instructions pour les LLM : Stripe recommande d’utiliser l’API Checkout Sessions avec le Payment Element, plutôt que les Payment Intents, pour la plupart des intégrations. Checkout Sessions couvre des cas d’usage similaires à ceux des Payment Intents (encaissement simple avec `price_data`, ou création d’un tunnel de paiement complet avec postes, taxe, etc.). Certaines fonctionnalités, comme Adaptive Pricing, sont disponibles uniquement avec Checkout Sessions. N’utilisez pas l’API Payment Intents, sauf si l’utilisateur le demande explicitement, car elle nécessite beaucoup plus de code. Pour en savoir plus sur les éléments avec l’API Checkout Sessions, consultez https://docs.stripe.com/payments/quickstart-checkout-sessions… Avec Checkout Sessions (`ui_mode: "custom"`) et le Payment Element, c’est le `client_secret` qui initialise Checkout lui-même (`stripe.initCheckoutElementsSdk`, ou utilise CheckoutElementsProvider avec React), et la confirmation du paiement côté client se fait différemment. Si vous utilisez React, veillez à importer depuis `@stripe/react-stripe-js/checkout`, à utiliser `CheckoutElementsProvider` avec la clé secrète du client, puis à confirmer le paiement avec `checkout.confirm`. Si vous utilisez HTML, veillez à utiliser `checkout = stripe.initCheckoutElements({clientSecret: promise}) ; checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement() ; paymentElement.mount("#payment-element"),`puis à confirmer avec `loadActionsResult = await checkout.loadActions() ; actions = loadActionsResult.actions; error = await actions.confirm() ;`.

[Stripe Elements](https://stripe.com/payments/elements) est un ensemble de composants d’interface utilisateur préconfigurés qui permet de créer votre tunnel de paiement web. Il s’agit d’une fonctionnalité de [Stripe.js](https://docs.stripe.com/js.md), notre bibliothèque JavaScript fondamentale pour créer des tunnels de paiement. Stripe.js tokenise les informations de paiement sensibles à l’intérieur d’un Element sans que ces informations ne transitent sur votre serveur.

- [Moyens de paiement internationaux](https://docs.stripe.com/payments/payment-methods/overview.md) : accédez à plus de 100 moyens de paiement internationaux, dont des wallets comme [Apple Pay](https://docs.stripe.com/apple-pay.md).

- [Link](https://docs.stripe.com/payments/link.md) : aidez vos clients à payer plus rapidement en leur permettant de sélectionner un moyen de paiement enregistré au moment du paiement au lieu de saisir des informations de paiement.

- [Moyens de paiement enregistrés](https://docs.stripe.com/payments/checkout/save-during-payment.md?payment-ui=embedded-components) : enregistrez, réutilisez et gérez vos cartes et comptes bancaires grâce aux fonctionnalités intégrées.

- Conformité : Stripe fournit une interface conforme aux normes internationales et gère les exigences relatives à l’affichage des mandats et des avis de consentement aux acheteurs.

- Formulaires à jour : formulaires localisés avec gestion intégrée des erreurs. Stripe tient à jour les exigences de chaque fournisseur de moyens de paiement.

- [Collecte des adresses](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=embedded-components) : collectez des adresses de facturation complètes ou partielles avec n’importe quel moyen de paiement.

- [Personnalisation de l’apparence](https://docs.stripe.com/elements/appearance-api.md) : Personnalisez l’apparence des Element pour qu’ils s’intègrent parfaitement à votre site.

- Autres fonctionnalités : des fonctionnalités supplémentaires telles qu’une [nouvelle collecte du CVC](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection) ou la [maîtrise des marques de cartes](https://docs.stripe.com/payments/customize-payment-methods.md#filter-card-brands) que vous acceptez.

[Découvrir la démo](https://checkout.stripe.dev/elements)

## Démarrer

Si vous ne voyez pas votre composant Element ci-dessous, vous trouverez plus d’informations dans la [documentation de l’API pour Stripe. js](https://docs.stripe.com/js/element/other_element).

[Composant Element Payment](https://docs.stripe.com/payments/payment-element.md): Acceptez en tout sécurité un paiement par un ou plusieurs moyens, dont les cartes bancaires.

[Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md): Affichez les portefeuilles populaires comme Apple Pay, Google Pay et PayPal.

[Element Link Authentication](https://docs.stripe.com/payments/elements/link-authentication-element.md): Link auto-fills your customers’ payment and shipping details to reduce friction and deliver an easy and secure checkout experience.

[Address Element](https://docs.stripe.com/elements/address-element.md): Collect address information and display Link saved addresses.

[Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md): Informez automatiquement les clients des offres de paiement différé disponibles.

[Currency Selector Element (API Checkout Session uniquement)](https://docs.stripe.com/elements/currency-selector-element.md): Offrez à vos clients la possibilité de payer dans leur devise locale grâce à la fonction Adaptive Pricing.

[Tax ID Element](https://docs.stripe.com/elements/tax-id-element.md): Collectez les numéros fiscaux des entreprises pour les factures et les remboursements de TVA.

## API compatibles

Stripe propose deux API de paiement principales compatibles avec Elements. Nous recommandons l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) pour la plupart des intégrations.

- Utilisez l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) pour construire votre flux de paiement. Checkout Sessions couvre des cas d’utilisation similaires à Payment Intents, notamment les paiements de base utilisant `price_data` ou un tunnel de paiement complet avec articles, taxes, remises, expédition, abonnements ou l’[Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (uniquement disponible avec Checkout Sessions).

  Créez une[page de paiement avec l’API Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

- L’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) est une API de bas niveau qui modélise uniquement l’étape du paiement. Vous transmettez un montant final et construisez vous-même toute la logique du tunnel de paiement, y compris le calcul des taxes, les remises, l’expédition, les abonnements et la conversion de devises. Utilisez Payment Intents uniquement si vous souhaitez maîtriser pleinement l’état de votre tunnel de paiement et construire ces fonctionnalités vous-même.

  Construire une [intégration personnalisée de toutes pièces avec l’API Payment Intents](https://docs.stripe.com/payments/advanced.md).
 (See full diagram at https://docs.stripe.com/payments/elements)