# Accepter un paiement avec Express Checkout Element Utilisez une seule intégration pour accepter les paiements par le biais de boutons de paiement en un clic. ![Express Checkout Element](https://b.stripecdn.com/docs-statics-srv/assets/link-in-express-checkout-element.67be6745e5a37c1c09074b0f43763cff.png) Le composant Element Express Checkout est une intégration permettant d’accepter des paiements via des boutons de paiement en un clic. Les moyens de paiement pris en charge incluent [Link](https://docs.stripe.com/payments/link.md), [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), [Klarna](https://docs.stripe.com/payments/klarna.md) et [Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md). Les clients voient différents boutons de paiement selon leur appareil et leur navigateur. Les appareils compatibles prennent automatiquement en charge Google Pay et Link. Vous devez effectuer des étapes supplémentaires pour prendre en charge Apple Pay et PayPal. ## Essayer la démonstration Basculez les options préconfigurées dans la démo pour modifier la couleur d’arrière-plan, la mise en page, la taille et la collecte des adresses de livraison. La démo affiche Google Pay et Apple Pay uniquement sur les plateformes où ils sont disponibles. Les boutons de moyens de paiement ne s’affichent que dans les pays où ils sont pris en charge. Si vous ne voyez pas la démo, essayez de visualiser cette page dans [un navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). | Option | Description | | --- | --- | | **Pays du marchand** | Définissez cette option avec la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) que vous utilisez pour [initialiser Stripe.js](https://docs.stripe.com/js/initializing). Pour modifier le pays, vous devez démonter l’Express Checkout Element, mettre à jour la clé publiable, puis remonter l’Express Checkout Element. | | **Couleur d’arrière-plan** | Définissez les couleurs à l’aide de l’[API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md). Les thèmes des boutons sont hérités de l’API Appearance, mais vous pouvez aussi [les définir directement lors de la création de l’Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme). | | **Taille ordinateur de bureau et mobile** | Utilisez la liste déroulante pour définir la largeur maximale en pixels de l’élément parent sur lequel l’Express Checkout Element est monté. Vous pouvez la définir sur 750 px (ordinateur de bureau) ou 320 px (mobile). | | **Max. de colonnes et max. de lignes** | Définissez ces valeurs à l’aide du paramètre [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) lorsque vous [créez le composant Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Menu de débordement** | Définissez cette option à l’aide du paramètre [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) lorsque vous [créez l’Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Collecter une adresse de livraison** | Pour collecter les informations de livraison, vous devez transmettre les options lors de la [création](https://docs.stripe.com/js/elements_object/create_express_checkout_element) de l’Express Checkout Element. En savoir plus sur [la collecte des informations des clients et l’affichage des postes de facture](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event). | # API Payment Intents Nous vous recommandons de collecter les informations de paiement avant de créer un Intent lorsque vous utilisez le composant Express Checkout Element. Si vous avez déjà effectué une intégration avec le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md), vous devrez peut-être [mettre à jour votre intégration](https://docs.stripe.com/payments/accept-a-payment-deferred.md). ## Before you begin - Ajoutez un moyen de paiement à votre navigateur. Par exemple, vous pouvez ajouter une carte à votre compte Google Pay ou à votre Apple Wallet. - Fournir votre application via HTTPS. Cette exigence s’applique à la fois en développement et en production. Vous pouvez également utiliser un service comme [ngrok](https://ngrok.com/). - [Enregistrez votre domaine](https://dashboard.stripe.com/settings/payment_method_domains) en modes *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) et production. ## Configurer Stripe [Côté serveur] Tout d’abord, [créez un compte Stripe](https://dashboard.stripe.com/register) ou [connectez-vous](https://dashboard.stripe.com/login). 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. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Activer des moyens de paiement Par défaut, Stripe utilise vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour déterminer quels moyens de paiement sont activés dans le composant Express Checkout Element. Pour autoriser des moyens de paiement spécifiques, utilisez le paramètre de moyens de paiement autorisés approprié pour votre intégration : - Si vous encaissez un paiement avant de créer un Intent, utilisez [allowedPaymentMethodTypes](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-allowedPaymentMethodTypes) dans les options de votre fournisseur Elements. - Si vous créez un Intent avant d’afficher Elements, utilisez [allowed_payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-allowed_payment_method_types) sur votre Intent. Stripe affiche automatiquement les moyens de paiement pertinents à partir des types que vous spécifiez. ### Moyens de paiement pris en charge Apple Pay et Google Pay sont automatiquement activés lorsque vous utilisez le type de moyen de paiement `card`. Lorsque vous utilisez Link, vous devez également transmettre le type de moyen de paiement `card`. | Nom du moyen de paiement | Paramètres de l’API Payment Method | | ------------------------ | ---------------------------------- | | Apple Pay | `card` | | Google Pay | `card` | | Link | `link, card` | | PayPal | `paypal` | | Amazon Pay | `amazon_pay` | | Klarna | `klarna` | ## Configurer Stripe Elements [Côté client] #### HTML + JS L’Express Checkout Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js en l’ajoutant entre les balises head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot, ni en héberger de copie. ```html Checkout ``` Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement : ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` Créez ensuite une instance d’Elements avec un [mode](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-mode) (paiement, configuration ou abonnement), un [montant](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-amount) et une [devise](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-currency). Ces valeurs déterminent les moyens de paiement qui seront présentés à votre client. Reportez-vous à l’étape suivante pour découvrir davantage d’options d’Elements. ```javascript const options = { mode: 'payment', amount: 1099, currency: 'usd', // Customizable by using the Appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form. const elements = stripe.elements(options); ``` #### React L’Express Checkout Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Pour utiliser le composant Element Express Checkout, enveloppez le composant de votre page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#elements-provider). Appelez `loadStripe` avec votre clé publiable et transmettez la `Promise` renvoyée au fournisseur `Elements`. Le fournisseur `Elements` accepte également le mode (paiement, configuration ou abonnement), le montant et la devise. De nombreux moyens de paiement, dont Apple Pay et Google Pay, utilisent ces valeurs dans leur interface utilisateur. Reportez-vous à l’étape suivante pour découvrir davantage d’options d’Elements. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutPage from './CheckoutPage'; // Make sure to call `loadStripe` outside of a component's render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { mode: 'payment', amount: 1099, currency: 'usd', // Customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ## Optional: Options d'éléments supplémentaires [Côté client] L’[objet Elements](https://docs.stripe.com/js/elements_object/create_without_intent) accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, l’Express Checkout Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la [prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md). Assurez-vous que les options Elements que vous fournissez (telles que `captureMethod`, `setupFutureUsage` et `paymentMethodOptions`) correspondent aux paramètres équivalents que vous transmettez lors de la création et de la confirmation de l’Intent. Des paramètres incohérents peuvent entraîner un comportement inattendu ou des erreurs. Si votre intégration affiche le composant Element Payment avant de créer un Intent, nous supprimons la vérification par micro-dépôt pour les comptes bancaires aux États-Unis lorsque le montant du paiement est égal à 0. | Propriété | Type | Description | Obligatoire | | ---------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `mode` | - `payment` - `setup` - `subscription` | Indique si l’Express Checkout Element est utilisé avec un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) ou un *abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis). | Oui | | `currency` | `string` | La devise du montant à facturer au client. | Oui | | `amount` | `number` | Le montant à débiter au client, indiqué dans les interfaces utilisateur Apple Pay, Google Pay ou BNPL. | Pour les modes `payment` et `subscription` | | `setupFutureUsage` | - `off_session` - `on_session` | Indique que vous avez l’intention d’effectuer des paiements ultérieurs avec les informations de paiement collectées par l’Express Checkout Element. Non pris en charge pour Klarna utilisant l’Express Checkout Element. | Non | | `captureMethod` | - `automatic` - `automatic_async` - `manual` | Détermine à quel moment capturer les fonds sur le compte du client. | Non | | `onBehalfOf` | `string` | Connect uniquement. L’ID de compte Stripe qui correspond à l’entreprise de référence. Consultez les [cas d’usage](https://docs.stripe.com/connect/charges.md) pour déterminer si cette option est pertinente pour votre intégration. | Non | | `allowedPaymentMethodTypes` | `string[]` | Une liste des types de moyens de paiement à autoriser. À partir de cette liste, Stripe affiche automatiquement les moyens de paiement pertinents. Vous pouvez omettre ce paramètre et gérer plutôt vos moyens de paiement dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). | Non | | `paymentMethodConfiguration` | `string` | La [configuration des moyens de paiement](https://docs.stripe.com/api/payment_method_configurations.md) à utiliser lors de la gestion de vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Si aucune configuration n’est spécifiée, votre configuration par défaut sera utilisée. | Non | | `paymentMethodCreation` | `manual` | Autorise la création d’objets PaymentMethod à partir de l’instance Elements à l’aide de [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements). | Non | | `paymentMethodOptions` | `{us_bank_account: {verification_method: string}}` | Options de vérification pour le moyen de paiement `us_bank_account`. Accepte les mêmes méthodes de vérification que les [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method). | Non | | `paymentMethodOptions` | `{card: {installments: {enabled: boolean}}}` | Permet d’activer manuellement l’interface utilisateur de sélection de plans de versements par carte bancaire, le cas échéant, lorsque vous ne gérez pas vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Vous devez définir `mode=’payment’` *et* spécifier explicitement `allowedPaymentMethodTypes`. Sinon, une erreur est générée. Incompatible avec `paymentMethodCreation=’manual’`. | Non | | `paymentMethodOptions` | `{[paymentMethod]: {setup_future_usage: string}}` | Vous permet de spécifier `setup_future_usage` pour les seuls moyens de paiement prenant en charge la réutilisation. Uniquement applicable lorsque `le mode` est `paiement`. La valeur de chaque moyen de paiement doit correspondre au `payment_method_options[paymentMethod][setup_future_usage]` correspondant sur le PaymentIntent lors de la confirmation. Consultez la [documentation Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions) pour connaître les moyens de paiement et valeurs pris en charge. | Non | ## Créer et intégrer l'Express Checkout Element [Côté client] L’Express Checkout Element contient une balise iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit également commencer par `https://` et non `http://`. #### HTML + JS L’Express Checkout Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement. ```html
``` Après le chargement du formulaire, créez une instance du composant Element Express Checkout et montez-la sur le nœud DOM du conteneur. Transmettez `emailRequired: true` afin que les wallets, tels qu’Apple Pay et Google Pay, affichent un champ d’e-mail lors du paiement. Ces wallets ne partagent pas l’e-mail du client par défaut. Cette option garantit que vous recevez l’e-mail dans le rappel `onConfirm`, obligatoire pour les e-mails de confirmation de commande, les entrées et les recherches de clients existants. ```javascript // Create and mount the Express Checkout Element const expressCheckoutElement = elements.create('expressCheckout', { emailRequired: true }); expressCheckoutElement.mount('#express-checkout-element'); ``` #### React Ajoutez le composant `ExpressCheckoutElement` à votre page de paiement. Transmettez `emailRequired: true` dans la propriété `options` afin que les wallets, tels qu’Apple Pay et Google Pay, affichent un champ d’e-mail lors du paiement. Ces wallets ne partagent pas l’e-mail du client par défaut. Cette option garantit que vous recevez l’e-mail dans le rappel `onConfirm`, obligatoire pour les e-mails de confirmation de commande, les entrées et les recherches de clients existants. ```jsx import React from 'react'; import {ExpressCheckoutElement} from '@stripe/react-stripe-js'; const CheckoutPage = () => { const options = { emailRequired: true }; return (
); }; ``` ## Collecter les informations des clients et afficher des postes de facture [Côté client] Transmettez les options lors de la [création](https://docs.stripe.com/js/elements_object/create_express_checkout_element) de l’Express Checkout Element. #### HTML + JS ### Collecter les informations du payeur Définissez `emailRequired: true` pour collecter les e-mails, et `phoneNumberRequired: true` pour collecter les numéros de téléphone. La valeur `billingAddressRequired` par défaut dépend de votre intégration : - Si vous transmettez `allowedShippingCountries`, `phoneNumberRequired`, `shippingAddressRequired`, `emailRequired`, `applePay`, `lineItems`, or `business` lors de la création du composant Element Express, la valeur `billingAddressRequired` est définie sur false par défaut. - Sinon, la valeur `billingAddressRequired` est définie sur true par défaut. ```javascript elements.create('expressCheckout', { emailRequired: true, phoneNumberRequired: true }); ``` PayPal ne fournit généralement pas le numéro de téléphone du client. S’il n’est pas fourni, l’événement confirm contient une chaîne vide pour la propriété [phone](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event#express_checkout_element_on_confirm-handler-billingDetails-phone). Si vous avez besoin du numéro de téléphone du client, le composant Element Express Checkout n’affiche pas le bouton PayPal sauf si cette information est disponible. ### Collecter les informations de livraison Définissez `shippingAddressRequired: true` et transmettez un tableau de [shippingRates](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-shippingRates). ```javascript elements.create('expressCheckout', { shippingAddressRequired: true, allowedShippingCountries: ['US'], shippingRates: [ { id: 'free-shipping', displayName: 'Free shipping', amount: 0, deliveryEstimate: { maximum: {unit: 'day', value: 7}, minimum: {unit: 'day', value: 5} } }, ] }); ``` Écoutez l’[événement shippingaddresschange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingaddresschange_event) pour détecter lorsqu’un client sélectionne une adresse de livraison. Vous devez appeler `resolve` ou `reject` si vous choisissez de gérer cet événement. > #### Confidentialité de l'adresse de livraison > > Pour préserver la confidentialité, les navigateurs peuvent anonymiser l’adresse de livraison en supprimant les informations sensibles qui ne sont pas nécessaires pour calculer les frais d’expédition. Selon le pays, certains champs peuvent être manquants ou partiellement expurgés. Par exemple, l’adresse de livraison aux États-Unis ne peut contenir qu’une ville, un État et un code postal. L’adresse de livraison complète apparaît dans l’objet [événement de confirmation](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event#express_checkout_element_on_confirm-handler-shippingAddress) une fois l’achat confirmé dans l’interface de paiement du navigateur. ```javascript expressCheckoutElement.on('shippingaddresschange', async (event) => { const response = await fetch('/calculate-shipping', { data: JSON.stringify({ shippingAddress: event.address }) }); const result = await response.json(); event.resolve({ lineItems: result.updatedLineItems, }); }); ``` Écoutez l’[événement shippingratechange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event) pour détecter lorsqu’un client sélectionne un tarif de livraison. Vous devez appeler `resolve` ou `reject` si vous choisissez de gérer cet événement. ```javascript expressCheckoutElement.on('shippingratechange', async (event) => { const response = await fetch('/calculate-and-update-amount', { data: JSON.stringify({ shippingRate: event.shippingRate }) }); const result = await response.json(); elements.update({amount: result.amount}) event.resolve({ lineItems: result.updatedLineItems, }); }); ``` Écoutez l’[événement cancel](https://docs.stripe.com/js/elements_object/express_checkout_element_cancel_event) pour détecter si un client quitte l’interface de paiement. Réinitialisez le montant au montant initial. ```javascript expressCheckoutElement.on('cancel', () => { elements.update({amount: 1099}) }); ``` ### Afficher les postes de facture Transmettez un tableau de [lineItems](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-lineItems) : ```javascript elements.create('expressCheckout', { lineItems: [ { name: 'Sample item', amount: 1000 }, { name: 'Tax', amount: 100 }, { name: 'Shipping cost', amount: 1000 } ] }); ``` ### Configurer l'interface Apple Pay Découvrez comment configurer l’interface Apple Pay. ### Transactions initiées par le marchand (MIT) Pour prendre en charge les paiements récurrents, les paiements différés ou les recharges automatiques une fois que votre client a payé avec Apple Pay, demandez le [type de token de marchand](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=ece#configure-apple-pay-merchant-tokens) correspondant. Les tokens de commerçant Apple Pay permettent de maintenir la continuité des paiements lorsque les clients changent d’appareil. #### React ### Collecter les informations du payeur Définissez `emailRequired: true` pour collecter les e-mails, et `phoneNumberRequired: true` pour collecter les numéros de téléphone. La valeur `billingAddressRequired` par défaut dépend de votre intégration : - Si vous transmettez `allowedShippingCountries`, `phoneNumberRequired`, `shippingAddressRequired`, `emailRequired`, `applePay`, `lineItems`, or `business` lors de la création du composant Element Express, la valeur `billingAddressRequired` est définie sur false par défaut. - Sinon, la valeur `billingAddressRequired` est définie sur true par défaut. ```jsx const options = { emailRequired: true, phoneNumberRequired: true }; ``` ### Collecter les informations de livraison Définissez `shippingAddressRequired: true` et transmettez un tableau de [shippingRates](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-shippingRates) : ```jsx const options = { emailRequired: true, phoneNumberRequired: true, shippingAddressRequired: true, allowedShippingCountries: ['US'], shippingRates: [ { id: 'free-shipping', displayName: 'Free shipping', amount: 0, deliveryEstimate: { maximum: {unit: 'day', value: 7}, minimum: {unit: 'day', value: 5} } }, ] }; ``` Écoutez l’[événement shippingaddresschange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingaddresschange_event) pour détecter lorsqu’un client sélectionne une adresse de livraison. Vous devez appeler `resolve` ou `reject` si vous choisissez de gérer cet événement. ```jsx const onShippingAddressChange = async ({resolve, address}) => { const response = await fetch('/calculate-shipping', { data: JSON.stringify({ shippingAddress: address }) }); const result = await response.json(); resolve({ lineItems: result.updatedLineItems, }); }; ``` Écoutez l’[événement shippingratechange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event) pour détecter lorsqu’un client sélectionne un tarif de livraison. Vous devez appeler `resolve` ou `reject` si vous choisissez de gérer cet événement. ```jsx const onShippingRateChange = async ({resolve, shippingRate}) => { const response = await fetch('/calculate-and-update-amount', { data: JSON.stringify({ shippingRate: shippingRate }) }); const result = await response.json(); elements.update({amount: result.amount}) resolve({ lineItems: result.updatedLineItems, }); }; ``` Écoutez l’[événement cancel](https://docs.stripe.com/js/elements_object/express_checkout_element_cancel_event) pour détecter si un client quitte l’interface de paiement. Réinitialisez le montant au montant initial. ```jsx const onCancel = () => { elements.update({amount: 1099}) }; ``` Ajoutez les gestionnaires d’événements lors de la création de l’Element. ```jsx ``` ### Afficher les postes de facture Transmettez un tableau de [lineItems](https://docs.stripe.com/js/elements_object/express_checkout_element_click_event#express_checkout_element_on_click-handler-resolve-lineItems). ```jsx const options = { lineItems: [ { name: 'Sample item', amount: 1000 }, { name: 'Tax', amount: 100 }, { name: 'Shipping cost', amount: 1000 } ] }; ``` ### Configurer l'interface Apple Pay Découvrez comment configurer l’interface Apple Pay. ### Transactions initiées par le marchand (MIT) Nous proposons des options spécifiques à configurer pour Apple Pay. Définissez l’[option](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-applePay-recurringPaymentRequest) `applePay.recurringPaymentRequest` permettant de spécifier une demande de configuration d’un paiement récurrent. Lorsqu’il est spécifié, Apple Pay émet un [token de marchand](https://developer.apple.com/apple-pay/merchant-tokens/) et permet au client de gérer les moyens de paiement pour un paiement récurrent. ```jsx const options = { applePay: { recurringPaymentRequest: { paymentDescription: 'My subscription', managementURL: 'https://example.com/billing', regularBilling: { amount: 2500, label: 'Monthly subscription fee', recurringPaymentIntervalUnit: 'month', recurringPaymentIntervalCount: 1, }, } } }; ``` ## Optional: Écouter l’événement availablepaymentmethodschange [Côté client] Une fois ajouté, le composant Element Express Checkout n’affichera pas les boutons pendant une brève période. Pour animer l’Element lorsque les boutons apparaissent, écoutez l’[événement availablepaymentmethodschange](https://docs.stripe.com/js/elements_object/express_checkout_element_availablepaymentmethodschange_event). Examinez la valeur `paymentMethods` pour déterminer quels boutons s’affichent dans le composant Element Express Checkout, le cas échéant. #### HTML + JS ```javascript // Optional: If you're doing custom animations, hide the Element const expressCheckoutDiv = document.getElementById('express-checkout-element'); expressCheckoutDiv.style.visibility = 'hidden'; expressCheckoutElement.on('availablepaymentmethodschange', ({paymentMethods}) => { if (!paymentMethods) { // No buttons will show } else { // Optional: Animate in the Element expressCheckoutDiv.style.visibility = 'initial'; } }); ``` #### React ```jsx import React, {useState} from 'react'; import {ExpressCheckoutElement} from '@stripe/react-stripe-js'; import {onConfirm} from './confirmHandler'; const CheckoutPage = () => { // Optional: If you're doing custom animations, hide the Element const [visibility, setVisibility] = useState('hidden'); const onAvailablePaymentMethodsChange = ({paymentMethods}) => { if (!paymentMethods) { // No buttons will show } else { // Optional: Animate in the Element setVisibility('initial'); } }; return (
); }; ``` ## Optional: Contrôle de l'affichage des boutons de paiement [Côté client] Vous pouvez gérer les moyens de paiement qui apparaissent dans le composant Express Checkout Element de plusieurs manières : - Dans les [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) du Dashboard Stripe. - En utilisant la [propriété paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) pour désactiver les boutons de paiement. L’utilisation de cette propriété vous permet de mieux contrôler ce que voient vos clients. Le composant Express Checkout Element affiche Apple Pay ou Google Pay lorsque le client se trouve sur une plateforme prise en charge et qu’il dispose d’une carte active. Si vous souhaitez toujours afficher Apple Pay et Google Pay même lorsque le client n’a pas de carte active, vous pouvez également configurer cette fonction avec `paymentMethods`. ## Optional: Styliser le bouton [Côté client] Vous pouvez [styliser](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme) chaque bouton de moyen de paiement différemment. Pour des exemples de thèmes et de types de boutons, consultez les ressources de [Google](https://developers.google.com/pay/api/web/guides/resources/customize) et d’[Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons). Vous pouvez également utiliser la variable `borderRadius` dans l’[API Appearance](https://docs.stripe.com/elements/appearance-api.md?platform=web#commonly-used-variables) : #### HTML + JS ```javascript const appearance = { variables: { // This controls the border-radius of the rendered Express Checkout Element borderRadius: '4px', } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance}); elements.create('expressCheckout', { // Specify a type per payment method // Defaults to 'buy' for Google, 'plain' for Apple, and 'paypal' for PayPal buttonType: { googlePay: 'checkout', applePay: 'check-out', paypal: 'buynow', }, // Specify a theme per payment method // Default theme is based on appearance API settings buttonTheme: { applePay: 'white-outline' }, // Height in pixels. Defaults to 44. The width is always '100%'. buttonHeight: 55 }); ``` #### React ```jsx const options = { mode: 'payment', amount: 1099, currency: 'usd', appearance: { variables: { // This controls the border-radius of the rendered Express Checkout Element borderRadius: '4px' } } }; const expressCheckoutOptions = { // Specify a type per payment method // Defaults to 'buy' for Google and 'plain' for Apple buttonType: { googlePay: 'checkout', applePay: 'check-out' }, // Specify a theme per payment method // Default theme is based on appearance API settings buttonTheme: { applePay: 'white-outline' }, // Height in pixels. Defaults to 44. The width is always '100%'. buttonHeight: 55 }; ``` Transmettez ces `options` lors de la création de l’Element et du fournisseur `Elements`. ```jsx ``` ## Optional: Créer un ConfirmationToken [Côté client] Lorsque le client autorise un paiement, vous pouvez créer un *ConfirmationToken* (ConfirmationTokens help capture data from your client, such as your customer's payment instruments and shipping address, and are used to confirm a PaymentIntent or SetupIntent) à envoyer à votre serveur afin de lancer un processus de validation supplémentaire ou de logique métier avant confirmation. Vous devez immédiatement utiliser le ConfirmationToken créé pour confirmer un PaymentIntent ou un SetupIntent. #### HTML + JS ```javascript const handleError = (error) => { const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } expressCheckoutElement.on('confirm', async (event) => { ... const {error: submitError} = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create a ConfirmationToken using the details collected by the Express Checkout Element const {error, confirmationToken} = await stripe.createConfirmationToken({ elements, params: { payment_method_data: { billing_details: { name: 'Jenny Rosen', } }, return_url: 'https://example.com/order/123/complete' } }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(error); return; } // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken const res = await fetch('/create-intent', { method: 'POST', body: confirmationToken.id }); const {client_secret: clientSecret} = await res.json(); // Confirm the PaymentIntent const {error: confirmError} = await stripe.confirmPayment({ clientSecret, confirmParams: { confirmation_token: confirmationToken.id }, }); if (confirmError) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(confirmError); } else { // The payment UI automatically closes with a success animation. // Your customer is redirected to your `return_url`. } }); ``` #### React ```jsx import React, { useState } from 'react'; import {useStripe, useElements, ExpressCheckoutElement} from '@stripe/react-stripe-js'; const CheckoutPage = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(); const onConfirm = async (event) => { if (!stripe) { // Stripe.js hasn't loaded yet. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error: submitError} = await elements.submit(); if (submitError) { setErrorMessage(submitError.message); return; } // Create a ConfirmationToken using the details collected by the Express Checkout Element const {error, confirmationToken} = await stripe.createConfirmationToken({ elements, params: { payment_method_data: { billing_details: { name: 'Jenny Rosen', }, }, return_url: 'https://example.com/order/123/complete', } }); if (error) { // This point is only reached if there's an immediate error when // creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete) setErrorMessage(error.message); } // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken const res = await fetch('/create-intent', { method: 'POST', body: confirmationToken.id }); const {client_secret: clientSecret} = await res.json(); // Confirm the PaymentIntent const {error: confirmError} = await stripe.confirmPayment({ clientSecret, confirmParams: { confirmation_token: confirmationToken.id }, }); if (confirmError) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) setErrorMessage(confirmError.message); } else { // The payment UI automatically closes with a success animation. // Your customer is redirected to your `return_url`. } }; return (
{errorMessage &&
{errorMessage}
}
); }; ``` ## Créer un PaymentIntent [Côté serveur] Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus. Créez un PaymentIntent sur votre serveur avec un montant et une devise. Ces informations doivent correspondre à celles définies sur l’instance `stripe.elements` à l’[étape 3](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#set-up-elements). Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela empêchera les clients malintentionnés de fixer leurs propres tarifs. #### Accounts v2 #### Ruby ```ruby require 'stripe' # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. Stripe.api_key = '<>' post '/create-intent' do # If you used a Tax Calculation, optionally recalculate taxes # confirmation_token = Stripe::ConfirmationToken.retrieve(params[:confirmation_token_id]) # summarized_payment_details = summarize_payment_details(confirmation_token) intent = Stripe::PaymentIntent.create({ # To allow saving and retrieving payment methods, provide the Account ID. customer_account: customer_account.id, # If you used a Tax Calculation, use its `amount_total`. # amount: summarized_payment_details.amount_total, amount: 1099, currency: 'usd', # Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, # If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax. # hooks: { # inputs: { # tax: { # calculation: tax_calculation.id # } # } #} }, #{ # stripe_version: '2025-09-30.preview' } ) {client_secret: intent.client_secret}.to_json end ``` #### Customers v1 #### Ruby ```ruby require 'stripe' # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. client = Stripe::StripeClient.new('<>') post '/create-intent' do # If you used a Tax Calculation, optionally recalculate taxes # confirmation_token = client.v1.confirmation_tokens.retrieve(params[:confirmation_token_id]) # summarized_payment_details = summarize_payment_details(confirmation_token) intent = client.v1.payment_intents.create({ # To allow saving and retrieving payment methods, provide the Customer ID. customer: customer.id, # If you used a Tax Calculation, use its `amount_total`. # amount: summarized_payment_details.amount_total, amount: 1099, currency: 'usd', # Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, # If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax. # hooks: { # inputs: { # tax: { # calculation: tax_calculation.id # } # } #} }, #{ # stripe_version: '2025-09-30.preview' } ) {client_secret: intent.client_secret}.to_json end ``` Le PaymentIntent renvoyé inclut une *clé secrète* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) à utiliser côté client pour mener à bien le processus de paiement en toute sécurité, plutôt que de transmettre l’objet PaymentIntent dans son intégralité. Vous pouvez utiliser différentes approches pour transmettre cette clé secrète côté client. ## Envoyer le paiement à Stripe [Côté client] Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour finaliser le paiement à l’aide des informations de l’Express Checkout Element. > #### Montants automatiques > > Pour Amazon Pay, Klarna et PayPal, le montant confirmé dans le PaymentIntent doit correspondre au montant préautorisé par le client. Si les montants ne correspondent pas, le paiement est refusé. Lorsqu’un client paie avec un moyen de paiement par wallet, tel qu’Apple Pay ou Google Pay, le composant Express Checkout Element donne la priorité aux informations de facturation fournies par le wallet plutôt qu’aux éventuels `billing_details` que vous transmettez dans `confirmParams.payment_method_data`. Seuls les champs que le wallet ne renseigne pas utilisent les `billing_details` que vous fournissez. Ce comportement diffère de celui du composant Payment Element, où les `billing_details` transmis dans `confirmParams` remplacent les valeurs fournies par le wallet. Pour accéder aux informations de facturation collectées par le wallet, utilisez l’objet `billingDetails` renvoyé dans [l’événement confirm](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event). Fournissez une [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur une fois le paiement effectué. Votre utilisateur peut être redirigé vers un site intermédiaire avant d’être redirigé vers la `return_url`. Payments redirige immédiatement l’utilisateur vers la `return_url` lorsqu’un paiement aboutit. Si vous ne souhaitez pas effectuer de redirection une fois le paiement effectué, vous pouvez définir la [redirection](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) sur `if_required`. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés. #### HTML + JS ```javascript const handleError = (error) => { const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } expressCheckoutElement.on('confirm', async (event) => { const {error: submitError} = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create the PaymentIntent and obtain clientSecret const res = await fetch('/create-intent', { method: 'POST', }); const {client_secret: clientSecret} = await res.json(); const {error} = await stripe.confirmPayment({ // `elements` instance used to create the Express Checkout Element elements, // `clientSecret` from the created PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(error); } else { // The payment UI automatically closes with a success animation. // Your customer is redirected to your `return_url`. } }); ``` #### React ```jsx import React from 'react'; import {useStripe, useElements, ExpressCheckoutElement} from '@stripe/react-stripe-js'; const CheckoutPage = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(); const onConfirm = async (event) => { if (!stripe) { // Stripe.js hasn't loaded yet. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error: submitError} = await elements.submit(); if (submitError) { setErrorMessage(submitError.message); return; } // Create the PaymentIntent and obtain clientSecret const res = await fetch('/create-intent', { method: 'POST', }); const {client_secret: clientSecret} = await res.json(); // Confirm the PaymentIntent using the details collected by the Express Checkout Element const {error} = await stripe.confirmPayment({ // `elements` instance used to create the Express Checkout Element elements, // `clientSecret` from the created PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) setErrorMessage(error.message); } else { // The payment UI automatically closes with a success animation. // Your customer is redirected to your `return_url`. } }; return (
{errorMessage &&
{errorMessage}
}
); }; ``` ## Tester l'intégration Avant de passer en mode production, [testez](https://docs.stripe.com/testing.md) l’intégration de chaque moyen de paiement. Pour déterminer la compatibilité d’un moyen de paiement avec un navigateur, consultez les [navigateurs pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). Si vous utilisez Express Checkout Element dans un iframe, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de cet iframe doit être défini sur `payment *`. #### Link > Ne stockez pas de données d’utilisateur réelles sur des comptes *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link. En effet, ces données sont à considérer comme publiques étant donné que vos comptes test sont associés à votre clé publiable. Link prend en charge les cartes de crédit, les cartes de débit et les achats éligibles effectués depuis un compte bancaire américain. Vous pouvez créer des comptes environnement de test pour Link à l’aide d’une adresse e-mail valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes environnement de test : | Valeur | Résultat | | ----------------------------------------------------------- | -------------------------------------------- | | Tout autre ensemble de 6 chiffres non listé ci-dessous | Opération réussie | | 000001 | Erreur, code non valide | | 000002 | Erreur, code expiré | | 000003 | Erreur, nombre maximal de tentatives dépassé | #### Portefeuilles > #### Tests régionaux > > Les comptes Stripe en Inde ne prennent pas en charge Google Pay. Pour les comptes Stripe basés en dehors de l’Inde, les utilisateurs dont l’adresse IP se situe en Inde peuvent tester Google Pay en environnement de test, mais ne peuvent pas utiliser Google Pay en mode production. Apple Pay ne s’affiche pas pour les adresses IP situées en Inde, quel que soit le mode utilisé. ### Apple Pay Il n’est pas possible d’enregistrer les informations des cartes de test Stripe dans Apple Pay. Néanmoins, Stripe reconnaît l’utilisation de vos [clés API](https://docs.stripe.com/keys.md) de test et renvoie un token de carte de test valide. Ce token vous permet de réaliser des paiements à l’aide d’une carte en mode production sans qu’elle soit débitée. Assurez-vous d’utiliser un [domaine enregistré](https://docs.stripe.com/payments/payment-methods/pmd-registration.md), d’utiliser un [navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) et d’avoir une carte active enregistrée dans votre wallet Apple Pay. Vous pouvez également définir l’option [paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) `applePay` sur `always` pour supprimer l’exigence d’une carte enregistrée active. ### Google Pay Il n’est pas possible d’enregistrer les informations des cartes de test Stripe dans Google Pay. Néanmoins, Stripe reconnaît l’utilisation de vos clés API de test et renvoie un token de carte de test valide. Ce token vous permet de réaliser des paiements tests à l’aide d’une carte en mode production sans qu’elle soit débitée. Vous pouvez également utiliser le [jeu de cartes de test](https://developers.google.com/pay/api/web/guides/resources/test-card-suite) de Google Pay pour tester votre intégration. Assurez-vous d’être sur un [domaine enregistré](https://docs.stripe.com/payments/payment-methods/pmd-registration.md), dans un [navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) et d’avoir une carte active enregistrée dans votre portefeuille Google Pay. Sinon, définissez l’option `googlePay` des [paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) sur `always` pour ne pas avoir à enregistrer de carte. ### PayPal Pour tester votre intégration PayPal : 1. Créez un [compte d’environnement de test](https://developer.paypal.com/dashboard/accounts), en vous assurant que vous êtes en mode environnement de test. 2. Cliquez sur le bouton **PayPal** dans Express Checkout Element et utilisez l’adresse e-mail et le mot de passe générés à partir du compte d’environnement de test pour vous connecter. Vous ne pouvez pas utiliser un compte PayPal personnel dans un environnement de test. 3. Si ce n’est pas déjà fait, [enregistrez](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) votre domaine. #### Amazon Pay Pour créer un compte en mode environnement de test pour Amazon Pay : 1. Cliquez sur le bouton Amazon Pay en mode environnement de test. 2. Cliquez sur **Créer votre compte Amazon**. 3. Utilisez votre compte en mode environnement de test pour tester votre intégration à l’aide de vos [clés API](https://docs.stripe.com/keys.md) de test. Utilisez les cartes suivantes pour simuler des paiements dans l’environnement de test Amazon Pay : | Carte | Résultat | | ------------------------------ | ----------------- | | Discover se terminant par 9424 | Opération réussie | | Visa se terminant par 1111 | Opération réussie | | Visa se terminant par 0701 | 3D Secure | | Amex se terminant par 0005 | Refuser | | JCB se terminant par 0000 | Refuser | #### Klarna Klarna exige [l’enregistrement de domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). > Klarna utilise des cookies pour le suivi des sessions. Pour tester différents emplacements clients, déconnectez-vous de l’environnement de test Klarna de la session précédente et utilisez les déclencheurs pertinents. Nous avons réuni ci-dessous des données de test pour les pays pris en charge. Dans un environnement de test, Klarna s’appuie sur l’adresse e-mail fournie pour approuver ou refuser une transaction. #### Australie | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 10/07/1970 | 03-05-1994 | | Prénom | Test | John | | Nom | Person-au | snow | | Rue | Wharf St | Silverwater Rd | | Numéro de rue | 4 | 1-5 | | Code postal | 4877 | 2128 | | Ville | Port Douglas | Silverwater | | Région | QLD | NSW | | Téléphone | +61473752244 | +61473763254 | | Adresse e-mail | customer@email.au | customer+denied@email.au | #### Autriche | | Approuvé | Refusé | | ----------------- | ------------------ | ------------------------ | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-at | Person-at | | E-mail | customer@email.at | customer+denied@email.at | | Rue | Mariahilfer Straße | Mariahilfer Straße | | Numéro de rue | 47 | 47 | | Ville | Vienne | Vienne | | Code postal | 1060 | 1060 | | Téléphone | +4306762600456 | +4306762600745 | #### Belgique | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-be | Person-be | | E-mail | customer@email.be | customer+denied@email.be | | Rue | Grote Markt | Grote Markt | | Numéro de rue | 1 | 1 | | Ville | Bruxelles | Bruxelles | | Code postal | 1 000 | 1 000 | | Téléphone | +32485121291 | +32485212123 | #### Canada | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-ca | Person-ca | | Rue | 2693 Byron Rd | 2693 Byron Rd | | Code postal | V7H 1L9 | V7H 1L9 | | Ville | North Vancouver | North Vancouver | | Région | BC | BC | | Téléphone | +15197438620 | +15197308624 | | Adresse e-mail | customer@email.ca | customer+denied@email.ca | #### République tchèque | | Approuvé | Refusé | | ----------------- | ----------------------- | ------------------------ | | Date de naissance | 01-01-1970 | 27-06-1992 | | Prénom | Test | Test | | Nom | Person-cz | Person-cz | | E-mail | customer@email.cz | customer+denied@email.cz | | Rue | Zazvorkova 1480/11 | Zázvorkova 1480/11 | | Code postal | 155 00 | 155 00 | | Ville | Prague | PRAHA 13 | | Téléphone | +420771613715 | +420771623691 | #### Danemark | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 01-01-1980 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-dk | Person-dk | | E-mail | customer@email.dk | customer+denied@email.dk | | Rue | Dantes Plads | Nygårdsvej | | Numéro de rue | 7 | 65 | | Ville | København Ø | København Ø | | Code postal | 1556 | 2100 | | Téléphone | +4542555628 | +4552555348 | #### Finlande | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 01-01-1999 | 01-01-1999 | | Prénom | Test | Person FI | | Nom | Person-fi | Test | | E-mail | customer@email.fi | customer+denied@email.fi | | Rue | Mannerheimintie | Mannerheimintie | | Numéro de rue | 34 | 34 | | Ville | Helsinki | Helsinki | | Code postal | 00100 | 00100 | | Téléphone | +358401234567 | +358401234568 | #### France | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 10-07-1990 | 10-07-1990 | | Lieu de naissance | Paris | Paris | | Prénom | Test | Test | | Nom | Person-fr | Person-fr | | E-mail | customer@email.fr | customer+denied@email.fr | | Rue | rue La Fayette | rue La Fayette | | Numéro de rue | 33 | 33 | | Ville | Paris | Paris | | Code postal | 75009 | 75009 | | Téléphone | +33689854321 | +33687984322 | #### Allemagne | | Approuvé | Refusé | | ----------------- | --------------------- | ------------------------ | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Mock | Test | | Nom | Mock | Person-de | | E-mail | customer@email.de | customer+denied@email.de | | Rue | Neue Schönhauser Str. | Neue Schönhauser Str. | | Numéro de rue | 2 | 2 | | Ville | Berlin | Berlin | | Code postal | 10178 | 10178 | | Téléphone | +49017614284340 | +49017610927312 | #### Grèce | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Numéro fiscal | 090000045 | 090000045 | | Date de naissance | 01-01-1960 | 11-11-1970 | | Prénom | Test | Test | | Nom | Person-gr | Test-gr | | E-mail | customer@email.gr | customer+denied@email.gr | | Rue | Kephisias | Baralo | | Numéro de rue | 37 | 56 | | Code postal | 151 23 | 123 67 | | Ville | Athina | Athina | | Téléphone | +306945553624 | +306945553625 | #### Irlande | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-ie | Person-ie | | E-mail | customer@email.ie | customer+denied@email.ie | | Rue | King Street South | King Street South | | Numéro de rue | 30 | 30 | | Ville | Dublin | Dublin | | Code EIR | D02 C838 | D02 C838 | | Téléphone | +353855351400 | +353855351401 | #### Italie | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 01-01-1980 | 01-01-1980 | | Prénom | Test | Test | | Nom | Person-it | Person-it | | E-mail | customer@email.it | customer+denied@email.it | | Code fiscal | RSSBNC80A41H501B | RSSBNC80A41H501B | | Rue | Via Enrico Fermi | Via Enrico Fermi | | Numéro de rue | 150 | 150 | | Ville | Rome | Rome | | Code postal | 00146 | 00146 | | Téléphone | +393339741231 | +393312232389 | #### Pays-Bas | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-nl | Person-nl | | E-mail | customer@email.nl | customer+denied@email.nl | | Rue | Osdorpplein | Osdorpplein | | Numéro de rue | 137 | 137 | | Ville | Amsterdam | Amsterdam | | Code postal | 1068 SR | 1068 SR | | Téléphone | +31689124321 | +31632167678 | #### Nouvelle-Zélande | | Approuvé | Refusé | | ----------------- | ------------------------ | ------------------------ | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-nz | Person-nz | | Rue | Mount Wellington Highway | Mount Wellington Highway | | Numéro de rue | 286 | 286 | | Code postal | 6011 | 6011 | | Ville | Auckland | Wellington | | Téléphone | +6427555290 | +642993007712 | | Adresse e-mail | customer@email.nz | customer+denied@email.nz | #### Norvège | | Approuvé | Refusé | | ----------------- | ----------------------------- | ------------------------ | | Date de naissance | 01-08-1970 | 01-08-1970 | | Prénom | Jane | Test | | Nom | Test | Person-no | | E-mail | customer@email.no | customer+denied@email.no | | Numéro personnel | NO1087000571 | NO1087000148 | | Rue | Edvard Munchs Plass | Sæffleberggate | | Numéro de rue | 1 | 56 | | Ville | Oslo | Oslo | | Code postal | 0194 | 0563 | | Téléphone | +4740123456 | +4740123457 | #### Pologne | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 05-05-1967 | 05-05-1967 | | Prénom | Test | Test | | Nom | Person-pl | Person-pl | | Rue | Ul. Górczewska | Ul. Górczewska | | Numéro de rue | 124 | 124 | | Code postal | 01-460 | 01-460 | | Ville | Varsovie | Varsovie | | Téléphone | +48795222223 | +48795223325 | | E-mail | customer@email.pl | customer+denied@email.pl | #### Portugal | | Approuvé | Refusé | | ----------------- | ---------------------------------- | ---------------------------------- | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-pt | Person-pt | | Rue | Avenida Dom João II | Avenida Dom João II | | Numéro de rue | 40 | 40 | | Code postal | 1990-094 | 1990-094 | | Ville | Lisbonne | Lisbonne | | Téléphone | +351935556731 | +351915593837 | | E-mail | customer@email.pt | customer+denied@email.pt | #### Roumanie | | Approuvé | Refusé | | --------------------------------------- | ----------------- | ------------------------ | | Date de naissance | 25-12-1970 | 25-12-1970 | | Prénom | Test | Test | | Nom | Person-ro | Person-ro | | E-mail | customer@email.ro | customer+denied@email.ro | | Rue | Drumul Taberei | Drumul Taberei | | Numéro de rue | 35 | 35 | | Ville | Bucarest | Bucarest | | Secteur | Sectorul 6 | Sectorul 6 | | Code postal | 061357 | 061357 | | Téléphone | +40741209876 | +40707127444 | | Numéro d’identification personnel (CNP) | 1701225193558 | | #### Espagne | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | DNI/NIE | 99999999R | 99999999R | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-es | Person-es | | E-mail | customer@email.es | customer+denied@email.es | | Rue | C. de Atocha | C. de Atocha | | Numéro de rue | 27 | 27 | | Ville | Madrid | Madrid | | Code postal | 28012 | 28012 | | Téléphone | +34672563009 | +34682425101 | #### Suède | | Approuvé | Refusé | | ----------------- | ---------------------------- | ------------------------ | | Date de naissance | 21-03-1941 | 28-10-1941 | | Prénom | Alice | Test | | Nom | Test | Person-se | | E-mail | customer@email.se | customer+denied@email.se | | Rue | Södra Blasieholmshamnen | Karlaplan | | Numéro de rue | 2 | 3 | | Ville | Stockholm | Stockholm | | Code postal | 11 148 | 11 460 | | Téléphone | +46701740615 | +46701740620 | #### Suisse | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 01-01-1990 | 01-01-2000 | | Prénom | Accepté | Client | | Nom | Person-ch | Person-ch | | Rue | Augustinergasse | Bahnhofstrasse | | Numéro de rue | 2 | 77 | | Code postal | 4051 | 8001 | | Ville | Bâle | Zürich | | Téléphone | +41758680000 | +41758680001 | | E-mail | customer@email.ch | customer+denied@email.ch | #### Royaume-Uni | | Approuvé | Refusé | | ----------------- | --------------------- | ------------------------ | | Date de naissance | 10/07/1970 | 10/07/1970 | | Prénom | Test | Test | | Nom | Person-uk | Person-uk | | E-mail | customer@email.uk | customer+denied@email.uk | | Rue | New Burlington Street | New Burlington Street | | Numéro de rue | 10 | 10 | | Appartement | Apt 214 | Apt 214 | | Code postal | W1S 3BE | W1S 3BE | | Ville | Londres | Londres | | Téléphone | +447755564318 | +447355505530 | #### États-Unis | | Approuvé | Refusé | | ----------------- | ----------------- | ------------------------ | | Date de naissance | 07-10-1970 | 07-10-1970 | | Prénom | Test | Test | | Nom | Person-us | Person-us | | E-mail | customer@email.us | customer+denied@email.us | | Rue | Amsterdam Ave | Amsterdam Ave | | Numéro de rue | 509 | 509 | | Ville | New York | New York | | État | New York | New York | | Code postal | 10024-3941 | 10024-3941 | | Téléphone | +13106683312 | +13106354386 | ### Authentification à deux facteurs Tout numéro à six chiffres forme un code d’authentification à deux facteurs valide. Utilisez `999999`pour que l’authentification échoue. ### Mode de remboursement Dans le flux Klarna, vous pouvez utiliser les valeurs de test suivantes pour essayer divers types de remboursements : | Type | Valeur | | ----------------------- | ------------------------------------------------------------------------------------------------------------ | | Prélèvement automatique | DE11520513735120710131 | | Virement bancaire | Banque de démonstration | | Carte bancaire | - Numéro : 4111 1111 1111 1111 - CVV : 123 - Date d’expiration : toute date future valide | | Carte de débit | - Numéro : 4012 8888 8888 1881 - CVV : 123 - Date d’expiration : toute date future valide | ## Optional: Utilisez l'Express Checkout Element avec Stripe Connect Les plateformes *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) qui créent des paiements directs ou ajoutent le token à un objet customer sur le compte connecté doivent effectuer des actions supplémentaires. 1. Sur votre front-end, avant de créer le composant `ExpressCheckoutElement`, définissez l’option `stripeAccount` sur l’instance Stripe : ```javascript const stripe = Stripe('<>', { apiVersion: "2026-09-30.endive", stripeAccount: '{{CONNECTED_ACCOUNT_ID}}', }); ``` 2. [Enregistrez tous les domaines](https://docs.stripe.com/payments/payment-methods/pmd-registration.md?dashboard-or-api=api#register-your-domain-while-using-connect) sur lesquels vous prévoyez d’afficher le composant Express Checkout Element. ## Optional: Ajoutez des moyens de paiement personnalisés [Côté client] Vous pouvez ajouter des boutons de moyen de paiement personnalisés à la ligne de boutons du composant Element Express Checkout, où ils apparaissent à côté des wallets tels qu’Apple Pay et Google Pay. Pour ajouter des moyens de paiement personnalisés, configurez l’option `customPaymentMethods` lorsque vous créez votre instance Elements. Pour consulter le guide d’intégration complet, voir [Ajouter des moyens de paiement personnalisés](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md). ## Divulguer Stripe à vos clients Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre [Centre de confidentialité](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe). ## See also - [Stripe Elements](https://docs.stripe.com/payments/elements.md) - [Collecter les informations de paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md) - [Finaliser des paiements sur le serveur](https://docs.stripe.com/payments/finalize-payments-on-the-server.md)