# Element Payment Stripe Acceptez les moyens de paiement du monde entier grâce à un composant d'interface utilisateur intégré et sécurisé. Stripe recommande d’utiliser l’API Checkout Sessions avec le composant Element Payment, 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… Avec Checkout Sessions (`ui_mode: "elements"`) et le composant Element Payment, 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.initCheckoutElementsSdk({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();`. Les agents de codage doivent installer la CLI Stripe (`npm i -g @stripe/cli`) et exécuter la commande `stripe sandbox create --help` pour configurer un environnement de test Stripe anonyme avec des clés d’API fonctionnelles. Aucune inscription requise. Payment Element est un composant d’interface utilisateur pour le web qui vous permet d’accepter plus de 100 moyens de paiement, de valider les saisies et de gérer les erreurs. Utilisez-le seul ou avec d’autres éléments dans l’interface de votre application web. ## API compatibles Stripe recommande d’utiliser [l’API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) avec le composant Payment Element. Cette intégration vous permet de configurer des paiements simples avec `price_data` ou une logique de paiement complète avec des postes, des taxes, des remises, la livraison, des abonnements ou [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md). Créez une [page de paiement avec l’API Checkout Sessions](https://docs.stripe.com/payments/quickstart.md). Si vous devez gérer votre tunnel de paiement de bout en bout et développer vous-même ces fonctionnalités, vous pouvez utiliser [l’API Payment Intents](https://docs.stripe.com/api/payment_intents.md) avec le composant Payment Element. Cette intégration vous permet de fournir un montant final et de créer vous-même toute la logique de paiement, notamment le calcul des taxes, les remises, la livraison, les abonnements et la conversion de devises. Créez une [intégration personnalisée avec l’API Payment Intents](https://docs.stripe.com/payments/advanced.md). (See full diagram at https://docs.stripe.com/payments/payment-element) ```text [API des sessions de paiement] --> [Client] [API des sessions de paiement] --> [Livraison] [API des sessions de paiement] --> [Impôts] [API des sessions de paiement] --> [Remises et bons de réduction] [API des sessions de paiement] --> [Paiement] [l’API Payment Intents] --> [Paiement] ``` ## Combiner des éléments Le Payment Element interagit avec d’autres éléments. Par exemple, ce formulaire utilise un élément supplémentaire pour [remplir automatiquement les informations de paiement](https://docs.stripe.com/payments/link.md), et un autre pour [récupérer l’adresse de livraison](https://docs.stripe.com/elements/address-element.md). ![Formulaire contenant les informations de contact, l’adresse de livraison et les champs de paiement. Les informations de contact sont intitulées Contact Details Element, l’adresse de livraison est intitulée Address Element et les champs de paiement sont intitulés Payment Element.](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.d52f05825c982aaf84a4ad1e9bb422f3.png) Formulaire de paiement combinant plusieurs éléments Pour obtenir le code complet de cet exemple, consultez [Ajouter Link à une intégration d’éléments.](https://docs.stripe.com/payments/link/add-link-elements-integration.md) Vous pouvez également combiner le Payment Element avec l’[Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md). Dans ce cas, les portefeuilles électroniques tels qu’Apple Pay et Google Pay ne sont affichés que dans l’Express Checkout Element afin d’éviter les doublons. ## Moyens de paiement Stripe active certains moyens de paiement par défaut. Nous pourrons également activer d’autres moyens de paiement après vous en avoir informé(e). Utilisez le [Dashboard](https://dashboard.stripe.com/settings/payment_methods) pour activer ou désactiver des moyens de paiement à tout moment. Avec le composant Payment Element, vous pouvez utiliser des [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) pour : - Gérer vos moyens de paiement dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods) sans rédiger une seule ligne de code - Afficher de manière dynamique les options de paiement les plus pertinentes en fonction de facteurs tels que la localisation, la devise et le montant de la transaction Par exemple, si un client allemand paie en EUR, il voit tous les moyens de paiement actifs qui acceptent l’EUR, à commencer par ceux qui sont largement utilisés en Allemagne. ![Une série de moyens de paiement.](https://b.stripecdn.com/docs-statics-srv/assets/payment-element-methods.26cae03aff199d6f02b0d92bd324c219.png) Afficher les moyens de paiement par ordre de pertinence pour votre client Pour personnaliser davantage l’affichage des moyens de paiement, par exemple en filtrant les marques de cartes bancaires et les types de financement que vous ne souhaitez pas accepter, consultez [Personnaliser les moyens de paiement](https://docs.stripe.com/payments/customize-payment-methods.md). Pour ajouter des moyens de paiement intégrés en dehors de Stripe, utilisez les [moyens de paiement personnalisés](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md). Si votre intégration nécessite de répertorier manuellement les moyens de paiement, consultez [Répertorier les moyens de paiement manuellement](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually). ## Affichage Vous pouvez adapter la mise en page du Payment Element à votre tunnel de paiement. L’image suivante présente différents affichages du même Payment Element. ![Exemples des trois formulaires de paiement. L’image montre la disposition en onglets, où les clients choisissent parmi les moyens de paiement présentés en cliquant sur l’onglet correspondant, ainsi que les deux dispositions en accordéon, qui répertorient les moyens de paiement verticalement. Vous pouvez choisir d’afficher ou non les boutons radio dans la vue en accordéon.](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png) Element Payment avec différentes mises en page. #### Onglets Les moyens de paiement sont affichés horizontalement à l’aide d’onglets. Pour utiliser cette mise en page, définissez la valeur de [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) sur `tabs`. Vous pouvez également spécifier d’autres propriétés, telles que [layout.defaultCollapsed](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-defaultCollapsed). ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'tabs', defaultCollapsed: false, } }; const elements = stripe.elements({ clientSecret, appearance }); // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` #### Accordéon avec boutons radio La disposition en accordéon affiche les moyens de paiement verticalement à l’aide d’un accordéon. Pour utiliser cette mise en page, définissez la valeur de [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) sur `accordion`. Vous pouvez également spécifier d’autres propriétés, telles que les [layout.radios](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-radios) pour afficher les boutons radio. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'accordion', defaultCollapsed: false, radios: 'always', spacedAccordionItems: false } }; const clientSecret = {{CLIENT_SECRET}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const elements = stripe.elements({ clientSecret, appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` #### Accordéon sans boutons radio La disposition en accordéon affiche les moyens de paiement verticalement à l’aide d’un accordéon. Pour utiliser cette mise en page, définissez la valeur de [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) sur `accordion`. Vous pouvez également spécifier d’autres propriétés, telles que les [layout.spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) pour créer un espace vertical supplémentaire. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'accordion', defaultCollapsed: false, radios: 'never', spacedAccordionItems: true } }; const clientSecret = {{CLIENT_SECRET}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const elements = stripe.elements({ clientSecret, appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` ## Apparence Utilisez l’API Appearance pour contrôler le style de tous les éléments. Choisissez un thème ou mettez à jour des informations spécifiques. ![Exemples de modes clair et sombre pour le formulaire de paiement du Payment Element.](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png) Par exemple, choisissez le thème « flat » et remplacez la couleur principale du texte. ```javascript const stripe = Stripe('<>'); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } }; const options = { /* options */ }; const elements = stripe.elements({ clientSecret, appearance }); // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` Consultez la documentation relative à l’[API Appearance](https://docs.stripe.com/elements/appearance-api.md) pour obtenir la liste complète des thèmes et des variables. ## Options Les Stripe Elements prennent en charge davantage d’options que celles-ci. Par exemple, affichez le nom de votre entreprise à l’aide de l’option [business](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business). ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */}; const options = { business: { name: "RocketRides" } }; const clientSecret = {{CLIENT_SECRET}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details. const elements = stripe.elements(appearance, clientSecret); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` Le Payment Element prend en charge les options suivantes. Reportez-vous à la documentation de chaque option pour plus d’informations. | | | [layout](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout) | Mise en page du Payment Element. | | [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) | Informations initiales du client à afficher dans le Payment Element. | | [business](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business) | Informations sur votre entreprise à afficher dans le Payment Element. | | [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-paymentMethodOrder) | Ordre dans lequel répertorier les moyens de paiement. | | [champs](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-fields) | Détermine les champs à afficher. | | [readOnly](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-readOnly) | Détermine si les données de paiement peuvent être modifiées. | | [terms](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms) | Indique si les mandats ou autres accords juridiques sont affichés dans le Payment Element. Le comportement par défaut consiste à les afficher uniquement lorsque cela est nécessaire. | | [wallets](https://docs.stripe.com/js/elements_object/create_payment_element) | Détermine si les portefeuilles comme Apple Pay ou Google Pay seront affichés. Par défaut, ils sont affichés lorsque cela est possible. | ## Erreurs Payment Element affiche automatiquement des messages d’erreur client localisés lors de la confirmation du client pour les codes de refus de paiement suivants : - `card_declined` - `card_velocity_exceeded` - `expired_card` - `fraudulent` - `generic_decline` - `incorrect_cvc` - `incorrect_number` - `incorrect_zip` - `insufficient_funds` - `invalid_cvc` - `invalid_expiry_month` - `invalid_expiry_year` - `live_mode_test_card` - `lost_card` - `processing_error` - `stolen_card` - `test_mode_live_card` Pour afficher des messages pour d’autres types d’erreurs, reportez-vous aux sections [Codes d’erreur](https://docs.stripe.com/error-codes.md) et [Gestion des erreurs](https://docs.stripe.com/error-handling.md). ## Migrer vers le composant Payment Element Choisissez un guide de migration en fonction de votre intégration actuelle et de la manière dont vous souhaitez gérer votre tunnel de paiement. Nous vous recommandons de [migrer vers le composant Payment Element avec l’API Checkout Sessions](https://docs.stripe.com/payments/payment-element/migration-ewcs.md), en remplaçant le composant Card Element ou les Elements propres à chaque moyen de paiement par le composant Payment Element. Cette approche vous permet de bénéficier de la prise en charge intégrée des abonnements, des taxes, des remises, de la livraison et d’Adaptive Pricing. Si vous devez conserver votre logique de paiement actuelle et gérer vous-même les fonctionnalités du paiement, vous pouvez [migrer vers le composant Payment Element avec l’API Payment Intents](https://docs.stripe.com/payments/payment-element/migration.md). Avec cette approche, vous remplacez le composant Card Element ou les Elements propres à chaque moyen de paiement par le composant Payment Element, tout en continuant à utiliser l’API Payment Intents ou Setup Intents. Le guide de migration propose des parcours distincts pour accepter des paiements et enregistrer les informations de paiement en vue d’une utilisation ultérieure.