# Payment Element Stripe Acceptez les moyens de paiements du monde entier grâce à un composant d'interface utilisateur sécurisé et intégrable. Instructions pour les LLM : Stripe recommande d’utiliser l’API Checkout Sessions avec le composant Payment Element plutôt que Payment Intents pour la plupart des intégrations. Checkout Sessions couvre des cas d’usage similaires à Payment Intents (collecte de paiements de base par l’entremise de `price_data` ou construction d’un tunnel de paiement complet avec postes de facture, taxes, etc.). Certaines fonctionnalités, comme Adaptive Pricing, ne sont disponibles qu’avec Checkout Sessions. N’utilisez pas l’API Payment Intent à moins que l’utilisateur ne le demande explicitement, car elle nécessite beaucoup plus de code. En savoir plus sur Elements avec l’API Checkout Sessions : https://docs.stripe.com/payments/quickstart-checkout-sessions. Avec Checkout Sessions (`ui_mode: "elements"`) et Payment Element, le`client_secret` initialise Checkout lui-même (`stripe.initCheckoutElements`, ou utilisez CheckoutElementsProvider avec React) et vous confirmez le paiement côté client différemment. Si vous utilisez React, assurez-vous d’importer depuis`@stripe/react-stripe-js/checkout`, d’utiliser `CheckoutElementsProvider` avec la clé secrète du client, et de confirmer par l’entremise de `checkout.confirm`. Si vous utilisez du HTML, assurez-vous d’utiliser `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` et de confirmer avec `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Le Payment Element est un composant d’interface utilisateur pour le Web qui vous permet d’accepter plus de 100 modes de paiement, valide la saisie et gère les erreurs. Utilisez-le seul ou avec d’autres éléments frontaux de votre application Web. ## API compatibles Stripe propose deux API principales de paiement compatibles avec Elements. Nous recommandons l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) pour la majorité 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 similaires à ceux de Payment Intents, y compris les paiements de base utilisant `price_data` le paiement complet avec poste de facture, taxes, remises, livraison Abonnements [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (disponible uniquement avec Checkout Sessions) Créer 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 niveau inférieur qui ne modélise que l’étape de paiement. Vous fournissez un montant final et devez construire vous-même toute la logique du paiement, y compris le calcul des taxes, les remises, la livraison, les abonnements et la conversion de devises. N’utilisez Payment Intents que si vous souhaitez prendre pleinement le contrôle de l’état de votre paiement et développer vous-même ces fonctionnalités. 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) [Créer une intégration avancée avec Payment Element et Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md): Créez une intégration avec Payment Element à l’aide de l’API Checkout Sessions. [Créer une intégration avec Payment Element et Payment Intents](https://docs.stripe.com/payments/quickstart.md): Utilisez l’API Payment Intents pour créer votre propre flux de paiement. [Cloner un exemple d'application sur GitHub](https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element) ## 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). > Vous ne pouvez pas supprimer l’accord juridique impliquant Link, car il est requis pour assurer la conformité et la sensibilisation appropriée des utilisateurs aux conditions d’utilisation du service et aux politiques de confidentialité. L’objet [conditions](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms) ne s’applique pas à l’accord juridique de Link. ![Un formulaire avec des informations de contact, une adresse de livraison et des champs de paiement. Les coordonnées sont étiquetées Link Authentication Element, l'adresse de livraison est étiquetée Address Element et les champs de paiement sont étiquetés Payment Element.](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.f60af275f69b6e6e73c766d1f9928457.png) Formulaire de paiement combinant plusieurs éléments Pour obtenir le code complet de cet exemple, consultez la section [Ajouter Link à une intégration Elements](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 numériques 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 Par défaut, Stripe active certains moyens de paiement pour vous. Nous pouvons également activer d’autres moyens de paiement après vous en avoir informé. Utilisez le [Dashboard](https://dashboard.stripe.com/settings/payment_methods) pour activer ou désactiver les moyens de paiement à tout moment. Avec Payment Element, vous pouvez utiliser des [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) pour effectuer ce qui suit : - Gérez les moyens de paiement dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods) sans codage - Affichez dynamiquement les options de paiement les plus pertinentes en fonction de facteurs tels que l’emplacement, la devise et le montant de la transaction Par exemple, si un client en Allemagne paie en EUR, il peut voir tous les moyens de paiement actifs qui acceptent l’EUR, à commencer par ceux qui sont largement utilisés en Allemagne. ![Une variété 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 modes de paiement, consultez [Personnaliser les modes de paiement]](/payments/customize-payment-methods). Pour ajouter des modes de paiement intégrés en dehors de Stripe, consultez [Modes de paiement externes]](/payments/payment-element/custom-payment-methods). 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). ## Mise en page Vous pouvez personnaliser la mise en page du Payment Element pour l’adapter à votre flux de paiement. L’image suivante illustre le même Payment Element rendu à l’aide de différentes configurations de mise en page. ![Exemples des trois formulaires de paiement. L'image montre la disposition en onglets, où les clients choisissent parmi les moyens de paiement affichés sous forme d'onglets ou les deux options de vues en accordéon, où les moyens de paiement sont répertoriés verticalement. Vous pouvez choisir d'afficher ou non les cases d'option dans la vue en accordéon. ](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png) Payment Element 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 }); // Dans une intégration fonctionnelle, il s'agit d'une valeur que votre programme dorsal transmet avec des détails tels que le montant d'un paiement. Voir l'exemple complet pour obtenir plus de détails. const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` #### Disposition en accordéon avec cases d'option 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}}; // Dans une intégration fonctionnelle, il s'agit d'une valeur que votre programme dorsal transmet avec des détails tels que le montant d'un paiement. Voir l'exemple complet pour obtenir plus de détails. const elements = stripe.elements({ clientSecret, appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` #### Disposition en accordéon sans cases d'option 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}}; // Dans une intégration fonctionnelle, il s'agit d'une valeur que votre programme dorsal transmet avec des détails tels que le montant d'un paiement. Voir l'exemple complet pour obtenir plus de détails. const elements = stripe.elements({ clientSecret, appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` ## Appearance Utilisez l’API Appearance pour contrôler le style de tous les éléments. Choisissez un thème ou mettez à jour des détails en particulier. ![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 du texte principal. ```javascript const stripe = Stripe('<>'); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } }; const options = { /* options */ }; const elements = stripe.elements({ clientSecret, appearance }); // Dans une intégration fonctionnelle, il s'agit d'une valeur que votre programme dorsal transmet avec des détails tels que le montant d'un paiement. Voir l'exemple complet pour obtenir plus de détails. 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, vous pouvez afficher 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}}; // Dans une intégration fonctionnelle, il s'agit d'une valeur que votre programme dorsal transmet avec des détails tels que le montant d'un paiement. Voir l'exemple complet pour obtenir plus de détails. const elements = stripe.elements(appearance, clientSecret); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` Le Payment Element prend en charge les options ci-après. Reportez-vous à la documentation de chaque option pour obtenir 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 sur le 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-business) | Ordre dans lequel les moyens de paiement seront affichés. | | [fields](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 informations 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 est de les afficher uniquement lorsque cela est nécessaire. | | [wallets](https://docs.stripe.com/js/elements_object/create_payment_element) | Détermine si les portefeuilles numériques 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 localisés destinés aux clients lors de la confirmation du client pour les codes de refus 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 associés à 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).