# Bonnes pratiques d'intégration de Payment Element

Créez l'intégration de votre composant Payment Element en suivant les bonnes pratiques.

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() ;`.

Utilisez la liste de contrôle figurant sur cette page pour vous assurer que l’intégration de votre composant Payment Element est optimale. Les fonctionnalités suivantes vous permettent d’accéder à des options d’intégration supplémentaires. Par exemple, si vous utilisez des [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), vous pouvez utiliser [des règles de moyens de paiement](https://docs.stripe.com/payments/payment-method-rules.md) afin de présenter des moyens de paiement selon des critères personnalisés.

## Liste de contrôle pour l’intégration

- [ ] Choisir une mise en page
      Choisissez la mise en page du composant [Payment Element](https://docs.stripe.com/payments/payment-element.md#layout) en fonction de l’apparence de votre site, puis effectuez un test A/B pour confirmer le meilleur choix. Si vous avez plus de 4 moyens de paiement, nous vous recommandons la mise en page en accordéon.

- [ ] Ajouter des styles
      Adaptez le style du composant [Payment Element](https://docs.stripe.com/payments/payment-element.md#appearance) à l’apparence de votre site Web à l’aide de l’API Appearance. Vous pouvez appliquer ce style à tout élément que vous ajoutez à votre intégration.

- [ ] Choisir comment encaisser un paiement
      Utilisez l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) pour la plupart des flux de paiement. Elle fournit des fonctionnalités intégrées qui suppriment le code personnalisé.

      Si vous utilisez l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md), décidez de [collecter le paiement](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment) ou non avant de créer le `PaymentIntent`. Pour [accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents), créez un `PaymentIntent` avec un montant et une devise, puis confirmez-le pour effectuer le débit. Vous pouvez collecter le paiement avant ou après avoir créé le `PaymentIntent`. Collectez d’abord le paiement.

      Comparez les [API Checkout Sessions et Payment Intents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md)

- [ ] Envoyer des métadonnées
      Envoyez des [métadonnées](https://docs.stripe.com/metadata/use-cases.md) pour qu’elles apparaissent dans vos rapports. Vos métadonnées sont indexées pour vous assurer qu’elles sont consultables dans le Dashboard Stripe. Vous pouvez utiliser ces métadonnées pour rechercher et référencer les transactions.

- [ ] Utiliser la dernière version de l'API
      Vérifiez que votre intégration utilise la [dernière version de l’API](https://docs.stripe.com/upgrades.md#api-versions) disponible.

- [ ] Sélectionner les moyens de paiement que vous souhaitez afficher
      Utilisez les [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) dans le cadre de l’intégration par défaut de Stripe pour afficher de manière dynamique les moyens de paiement admissibles pour chaque client. Stripe ordonne les moyens de paiement par probabilité de conversion en fonction de facteurs tels que le montant, la devise et la localisation. Les moyens de paiement dynamiques vous permettent de :

      - De choisir les [moyens de paiement](https://stripe.com/guides/payment-methods-guide) que vos clients pourront utiliser à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
      - D’utiliser des fonctionnalités supplémentaires, telles que les [règles relatives aux modes de paiement](https://docs.stripe.com/payments/payment-method-rules.md), pour afficher les moyens de paiement en fonction de critères personnalisés.

- [ ] Tester les moyens de paiement
      Une fois l’intégration réalisée, testez et [observez la façon dont les moyens de paiement sont présentés aux clients](https://dashboard.stripe.com/settings/payment_methods/review). Dans le formulaire **Vérifier les moyens de paiement affichés**, saisissez un ID de transaction pour découvrir quels moyens de paiement étaient disponibles ou non pour cette transaction. Vous pouvez également simuler les moyens de paiement qui s’affichent dans un scénario donné en modifiant des facteurs, tels que le montant, la devise, la méthode de capture et l’éventuelle utilisation ultérieure du moyen de paiement.

- [ ] Éviter les iframes
      Le composant Payment Element contient un iframe qui envoie les informations de paiement à Stripe via une connexion HTTPS. Évitez de placer le composant Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement. Pour en savoir plus sur les questions entourant les iframes, consultez la page [Collecter les informations de paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout#collect-payment-details).

## Liste de contrôle des fonctionnalités supplémentaires

- [ ] Activer Link
      Après avoir intégré votre interface utilisateur et les moyens de paiement dynamiques, activez [Link](https://docs.stripe.com/payments/link/payment-element-link.md) dans la page [Payment Method settings page](https://dashboard.stripe.com/settings/payment_methods). Link enregistre et renseigne automatiquement de manière sécurisée les informations de paiement et de livraison des clients. Il prend en charge plusieurs moyens de paiement, notamment les cartes bancaires de crédit, les cartes bancaires de débit et les comptes bancaires américains. Pour les clients connectés utilisant déjà Link, cette fonctionnalité préremplit leurs informations, même si elles ont été enregistrées initialement sur la page de paiement d’une autre entreprise.

- [ ] Ajouter le composant Link Authentication Element
      Pour collecter et préremplir les adresses de livraison et vendre des biens physiques, nous recommandons d’utiliser le composant [Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md) afin de créer un champ unique de saisie d’e-mail permettant à la fois la collecte de l’e-mail et l’authentification Link.

- [ ] Ajouter le composant Address Element
      Le composant Address Element simplifie la collecte des informations de livraison et de facturation lors du paiement. Il s’intègre avec d’autres composants et préremplit les adresses avec Link. Il prend en charge les suggestions automatiques lors de la saisie d’une nouvelle adresse grâce à l’intégration gratuite de Google Autocomplete.

      - En mode `shipping`, les clients ont la possibilité d’utiliser leur adresse de livraison comme adresse de facturation.
      - En mode `billing`, Stripe masque les champs de facturation dans le composant Payment Element, afin que les clients n’aient à saisir leurs coordonnées qu’une seule fois.

- [ ] Ajouter le composant Payment Method Messaging Element
      Si vous décidez de proposer des options de paiement différé, nous vous recommandons d’en faire la promotion avant le paiement à l’aide du composant [Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md), afin de sensibiliser vos clients, d’augmenter la valeur de la commande et d’améliorer la conversion.

      - Vous pouvez afficher ce composant intégré unifié sur les pages d’informations produit, de panier et de paiement.
      - Cet élément est compatible avec [Affirm](https://docs.stripe.com/payments/affirm.md), [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) et [Klarna](https://docs.stripe.com/payments/klarna.md).

- [ ] Ajouter le composant Express Checkout Element
      Utilisez le [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md) pour afficher plusieurs boutons de paiement en un clic dans une seule interface utilisateur, notamment [Apple Pay](https://docs.stripe.com/apple-pay.md), [Google Pay](https://docs.stripe.com/google-pay.md), [PayPal](https://docs.stripe.com/payments/paypal.md) et [Link](https://docs.stripe.com/payments/link/express-checkout-element-link.md).

## See also

- [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout)