# Enregistrer le moyen de paiement d'un client sans effectuer de paiement Apprenez à enregistrer un moyen de paiement et à le débiter plus tard. # API Checkout Sessions > This is a API Checkout Sessions for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=embedded-components. L’API [Checkout Sessions`en configuration`mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) vous permet d’enregistrer les détails de paiement d’un client sans paiement initial. Cette fonction est utile si vous souhaitez accueillir des clients dès maintenant, configurer leurs paiements et les débiter ultérieurement à l’aide de l’API Payment Intents, lorsqu’ils ne sont pas en ligne. Utilisez cette intégration pour configurer des paiements récurrents ou créer des paiements ponctuels dont le montant doit être déterminé ultérieurement, généralement après la réception de votre service par le client. > #### Transactions en présence de la carte > > Les transactions effectuées par carte bancaire, telles que la [collecte des informations de carte via le terminal Stripe](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md) utilisent un processus différent pour l’enregistrement du moyen de paiement. ## Conformité Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles du réseau en vigueur. Ces exigences s’appliquent en général si vous souhaitez enregistrer un moyen de paiement pour une utilisation future, par exemple en l’affichant dans Checkout pour un achat ultérieur ou en débitant ce moyen de paiement lorsque le client n’utilise pas activement votre site internet ou votre application. Ajoutez à votre site ou application des conditions précisant comment vous comptez enregistrer les moyens de paiement et permettant aux clients d’y consentir. Lorsque vous enregistrez un moyen de paiement, vous ne pouvez l’utiliser que pour l’usage spécifique prévu dans vos conditions. Pour débiter un moyen de paiement lorsque le client est hors ligne et l’enregistrer comme option pour de futurs achats, assurez-vous de recueillir explicitement le consentement du client pour cet usage spécifique. Par exemple, incluez une case à cocher « Enregistrer mon moyen de paiement pour une utilisation ultérieure » afin de recueillir ce consentement. Pour facturer un client lorsqu’il n’est pas en ligne, assurez-vous que vos conditions incluent les éléments suivants : - Le consentement du client vous autorisant à initier un paiement ou une série de paiements en son nom pour les transactions spécifiées. - Le calendrier et la fréquence prévus des paiements (par exemple, s’il s’agit de versements échelonnés, de paiements d’abonnements ou de recharges ponctuelles). - La façon dont vous déterminez le montant à payer. - Vos conditions d’annulation, si le moyen de paiement est utilisé dans le cadre d’un abonnement. Veillez à conserver une trace écrite de l’acceptation de ces conditions par votre client. > Si vous devez utiliser la confirmation manuelle côté serveur ou si votre intégration nécessite de présenter les moyens de paiement séparément, consultez notre [guide alternatif](https://docs.stripe.com/payments/save-and-reuse-cards-only.md). ## 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). 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' ``` ## Créer un client [Côté serveur] Pour configurer un moyen de paiement pour des paiements futurs, vous devez l’associer à un objet représentant votre client. Lorsque votre client crée un compte ou effectue sa première transaction avec votre entreprise, créez soit un objet [Account](https://docs.stripe.com/api/v2/core/accounts/create.md) configuré pour le client avec l’API Accounts v2, soit un objet [Customer](https://docs.stripe.com/api/customers/create.md) avec l’API Customers. > #### Utiliser l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à l’aperçu Accounts v2, > > Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md). #### Accounts v2 ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-04-22.preview" ``` #### Customers v1 ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` ## Utiliser le mode de configuration [Côté serveur] Créez une session Checkout avec [mode=setup](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode). ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=setup \ -d ui_mode=elements \ -d currency=usd ``` ## Associer le moyen de paiement à un client [Côté serveur] Si vous n’avez pas créé la session Checkout avec un client existant, utilisez l’identifiant du *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) pour [associer](https://docs.stripe.com/api/payment_methods/attach.md) le moyen de paiement à un client. Sinon, le moyen de paiement est automatiquement associé au client que vous avez fourni lors de la création de la session Checkout. #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" ``` ## Récupérer le moyen de paiement [Côté serveur] Une fois que le client a terminé avec succès sa session Checkout, traitez le webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). Récupérez l’objet Session dans le webhook, puis procédez comme suit : - Obtenez la valeur de la clé [setup_intent](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-setup_intent), qui est l’identifiant SetupIntent créé lors de la session Checkout. - Utilisez l’identifiant SetupIntent pour [récupérer](https://docs.stripe.com/api/setup_intents/retrieve.md) l’objet SetupIntent. L’objet renvoyé contient un identifiant [payment_method](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-payment_method) que vous pouvez associer à un client à l’étape suivante. En savoir plus sur la [configuration des webhooks](https://docs.stripe.com/webhooks.md). ## Débiter ultérieurement le moyen de paiement enregistré [Côté serveur] Après avoir rattaché le PaymentMethod à un client, vous pouvez effectuer un paiement *hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) à l’aide d’un [ PaymentIntent ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method). - Définissez soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) sur l’ID d’un objet `Account`, soit [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) sur l’ID d’un objet `Customer`, et définissez [payment_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method) sur l’ID d’un objet `PaymentMethod`. - Définissez [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) sur `true` pour indiquer que le client n’est pas dans votre tunnel de paiement lors d’une tentative de paiement et qu’il ne peut pas réaliser une demande d’authentification faite par un partenaire, tel qu’un émetteur de carte bancaire, une banque ou une autre institution de paiement. Si, pendant votre tunnel de paiement, un partenaire demande l’authentification, Stripe demandera des exemptions en utilisant les informations du client provenant d’une transaction *on-session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Si les conditions d’exemption ne sont pas respectées, le PaymentIntent peut générer une erreur. - Attribuez la valeur `true` à la propriété [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) du PaymentIntent, ce qui entraîne une confirmation immédiate lors de la création du PaymentIntent. #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "payment_method={{PAYMENTMETHOD_ID}}" \ -d off_session=true \ -d confirm=true ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "customer={{CUSTOMER_ID}}" \ -d "payment_method={{PAYMENTMETHOD_ID}}" \ -d off_session=true \ -d confirm=true ``` Si une tentative de paiement échoue, la requête renvoie également un code d’état HTTP 402 et l’état du PaymentIntent est *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Informez votre client qu’il doit revenir dans votre application (par exemple, en envoyant un e-mail ou une notification dans l’application) et redirigez-le vers une nouvelle session Checkout afin qu’il sélectionne un autre moyen de paiement. #### Accounts v2 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=1099" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=elements \ --data-urlencode "return_url=https://example.com/return" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=1099" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d ui_mode=elements \ --data-urlencode "return_url=https://example.com/return" ``` # API Setup Intents > This is a API Setup Intents for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=elements. L’[API Setup Intents](https://docs.stripe.com/api/setup_intents.md) vous permet d’enregistrer les données de paiement d’un client sans paiement initial. Cette fonction est utile si vous souhaitez configurer des paiements dès l’inscription de vos clients afin de les débiter plus tard, lorsqu’ils sont hors ligne. Utilisez cette intégration pour configurer des paiements récurrents ou pour créer des paiements ponctuels dont le montant doit être déterminé ultérieurement, généralement après réception du service par votre client. > #### Transactions avec présentation de la carte > > Les transactions avec présentation de la carte, telles que la collecte des informations de carte via Stripe Terminal, utilisent un processus différent pour enregistrer le moyen de paiement. Pour en savoir plus, consultez [la documentation de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md). ## Conformité Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles du réseau en vigueur. Ces exigences s’appliquent généralement si vous souhaitez enregistrer le moyen de paiement de votre client pour une utilisation ultérieure, par exemple en affichant le moyen de paiement dans le tunnel de paiement pour un achat futur ou en débitant ce moyen de paiement lorsque le client n’utilise pas activement votre site Web ou votre application. Ajoutez à votre site Web ou à votre application des conditions indiquant comment vous prévoyez d’enregistrer les informations de paiement et qui permettent à vos clients de choisir cette option. Lorsque vous enregistrez un moyen de paiement, vous ne pouvez l’utiliser que pour l’usage spécifique prévu dans vos conditions. Pour débiter un moyen de paiement lorsque le client est hors ligne et l’enregistrer comme option pour de futurs achats, assurez-vous de recueillir explicitement le consentement du client pour cet usage spécifique. Par exemple, incluez une case à cocher « Enregistrer mon moyen de paiement pour une utilisation ultérieure » afin de recueillir ce consentement. Pour facturer vos clients lorsqu’ils ne sont pas en ligne, incluez les éléments suivants dans vos conditions : - Le consentement du client vous autorisant à déclencher un paiement ou une série de paiements en son nom pour les transactions spécifiées - Le calendrier et la fréquence prévus des paiements (par exemple, si les paiements concernent des versements échelonnés, des paiements d’abonnement ou des recharges non programmées). - La façon dont vous déterminez le montant du paiement. - Votre politique d’annulation, si le moyen de paiement est utilisé dans le cadre d’un abonnement Veillez à conserver une trace écrite de l’acceptation de ces conditions par votre client. > Si vous devez utiliser la confirmation manuelle côté serveur ou si votre intégration nécessite de présenter les moyens de paiement séparément, consultez cet [autre guide](https://docs.stripe.com/payments/save-and-reuse-cards-only.md). ## 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). 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' ``` ## Activez les moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer 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). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Créer un objet Customer [Côté serveur] Pour configurer un moyen de paiement pour des paiements futurs, vous devez l’associer à un objet représentant votre client. Lorsque votre client crée un compte ou effectue sa première transaction avec votre entreprise, créez soit un objet [Account](https://docs.stripe.com/api/v2/core/accounts/create.md) configuré pour le client avec l’API Accounts v2, soit un objet [Customer](https://docs.stripe.com/api/customers/create.md) avec l’API Customers. > #### Utiliser l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à l’aperçu Accounts v2, > > Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md). ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` ## Créer un SetupIntent [Côté serveur] > Si vous souhaitez afficher le Payment Element sans créer au préalable de SetupIntent, consultez la page [Collecter les informations de paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=setup). Un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) est un objet qui représente votre intention de configurer le moyen de paiement d’un client en vue de paiements futurs. Les moyens de paiement présentés aux clients lors du processus de paiement sont également inclus dans le `SetupIntent`. Vous pouvez soit laisser Stripe utiliser directement les moyens de paiement définis dans les paramètres de votre Dashboard, soit les répertorier manuellement. À moins que votre intégration ne nécessite une option basée sur du code pour proposer des moyens de paiement, Stripe recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les moyens de paiement et d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Les moyens de paiement qui augmentent le taux de conversion et qui sont les plus adaptés à la devise et au lieu de résidence des clients sont prioritaires. Ceux de moindre priorité sont masqués dans un menu déroulant. #### Gérer les moyens de paiement depuis le Dashboard Certains moyens de paiement ne peuvent pas être enregistrés en vue de prochains paiements, et ne sont donc pas proposés aux clients lorsque ceux-ci configurent des paiements futurs. Pour plus d’informations sur la gestion des moyens de paiement, consultez les [options d’intégration des moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md). Vous pouvez créer un SetupIntent avec le paramètre `automatic_payment_methods` activé, et le SetupIntent sera alors créé à l’aide des moyens de paiement configurés dans le Dashboard. La spécification du paramètre `automatic_payment_methods` est facultative, car Stripe active sa fonctionnalité par défaut dans la dernière version de l’API. Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère l’affichage des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. #### Accounts v2 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "automatic_payment_methods[enabled]=true" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d "automatic_payment_methods[enabled]=true" ``` #### Répertorier les moyens de paiement manuellement Créez un SetupIntent sur votre serveur avec la liste des [moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) que vous souhaitez prendre en charge. #### Accounts v2 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d "payment_method_types[]=bancontact" \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=ideal" ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/setup_intents \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "payment_method_types[]=bancontact" \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=ideal" ``` ### Récupérer la clé secrète du client Le SetupIntent contient 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 finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client. #### Application monopage Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction `fetch` du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client : #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the SetupIntent {client_secret: intent.client_secret}.to_json end ``` Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client : ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Rendu côté serveur Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur. Ajoutez le [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du SetupIntent : #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the SetupIntent erb :checkout end ``` > #### Utilisation de Radar > > Par défaut, [Radar](https://docs.stripe.com/radar.md) n’intervient pas lorsque vous enregistrez le moyen de paiement d’un client sans effectuer un premier paiement. Si vous souhaitez l’activer par défaut, accédez aux [paramètres Radar](https://dashboard.stripe.com/settings/radar) et activez **Utiliser Radar sur les moyens de paiement enregistrés pour une utilisation ultérieure**. ## Collecter les informations de paiement [Côté client] Vous pouvez à présent collecter les informations de paiement de votre client à l’aide du [Payment Element](https://docs.stripe.com/payments/payment-element.md). Le composant Payment Element est un composant préconfiguré de l’interface utilisateur qui facilite cette collecte pour de nombreux moyens de paiement. Le composant Payment Element contient un iframe qui envoie des 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 commencer par `https://` et non `http://`. Vous pouvez tester votre intégration sans cela, mais pensez à [activer le protocole HTTPS](https://docs.stripe.com/security/guide.md#tls) au moment de commencer à accepter des paiements réels. #### HTML + JS ### Configurer Stripe.js Le Payment Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant au `head` votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme aux normes PCI. N’incluez pas le script dans un lot et n’en hébergez pas 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('<>'); ``` ### Ajouter le Payment Element à votre page de configuration du paiement Le Payment Element doit avoir un emplacement dédié sur votre page qui configure le paiement. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement : ```html
``` Lors du chargement du formulaire précédent, créez une instance du Payment Element et montez-la sur le nœud DOM conteneur. Lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create), transmettez la [clé secrète du client](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) définie à l’étape précédente dans `options` : ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements using the SetupIntent's client secretconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` Le composant Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de renseigner toutes les informations de paiement nécessaires. ### Personnaliser l’apparence Personnalisez le composant Payment Element pour qu’il corresponde au design de votre site en transmettant l’[objet appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) dans`options` lors de la création de l’instance `elements`. Stripe Elements est une collection de composants d’interface utilisateur à intégrer. Pour personnaliser davantage la forme de votre site ou collecter différentes informations clients, parcourez la [documentation Elements](https://docs.stripe.com/payments/elements.md). ### Demander un token de marchand Apple Pay Si vous acceptez les paiements Apple Pay, nous vous recommandons de configurer [option](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) `applePay` afin de modifier ce qui s’affiche dans l’interface Apple Pay. Ce faisant, les [merchant tokens](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) d’Apple Pay seront utilisés. L’exemple suivant illustre une configuration pour un paiement prévu le 5 janvier 2030. Cette information apparaîtra dans l’interface Apple Pay. ```javascript const paymentElement = elements.create('payment', { applePay: { deferredPaymentRequest: { paymentDescription: 'My deferred payment', managementURL: 'https://example.com/billing', deferredBilling: { amount: 2500, label: 'Deferred Fee', deferredPaymentDate: new Date('2030-01-05') }, } }, // Other options }); ``` #### React ### Configurer 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 ``` ### Ajouter et configurer le fournisseur Elements sur votre page qui configure le paiement Pour utiliser le Payment Element, incluez le composant de votre page de configuration du paiement dans un [fournisseur Element](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publique, puis transmettez au fournisseur `Elements` l’attribut `Promise` renvoyé ainsi que la [clé secrète du client](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) de l’étape précédente en tant qu’`options` au fournisseur `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 SetupForm from './SetupForm'; // 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 = { // passing the SetupIntent's client secret clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Ajouter le composant Payment Element Utilisez le composant `PaymentElement` pour créer votre formulaire : ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const SetupForm = () => { return (
); }; export default SetupForm; ``` Stripe Elements est un ensemble de composants d’interface utilisateur modulables. Pour personnaliser davantage votre formulaire ou collecter d’autres informations client, consultez la [documentation relative à Elements](https://docs.stripe.com/payments/elements.md). Le composant Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de renseigner toutes les informations de paiement nécessaires. ### Personnaliser l’apparence Personnalisez le Payment Element pour qu’il corresponde à l’apparence de votre site en ajoutant l’[objet Appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) dans `options` lors de la création du fournisseur `Elements`. ### Demander un token de marchand Apple Pay Si vous acceptez les paiements Apple Pay, nous vous recommandons de configurer [option](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) `applePay` afin de modifier ce qui s’affiche dans l’interface Apple Pay. Ce faisant, les [merchant tokens](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) d’Apple Pay seront utilisés. L’exemple suivant illustre une configuration pour un paiement prévu le 5 janvier 2030. Cette information apparaîtra dans l’interface Apple Pay. ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const SetupForm = () => { const options = { applePay: { deferredPaymentRequest: { paymentDescription: 'My deferred payment', managementURL: 'https://example.com/billing', deferredBilling: { amount: 2500, label: 'Deferred Fee', deferredPaymentDate: new Date('2030-01-05') }, } }, // Other options }; return (
); }; export default SetupForm; ``` ### Configurer la devise Lorsque vous utilisez SetupIntents avec [automatic_payment_methods](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-automatic_payment_methods), vous pouvez spécifier la devise à la [création du Payment Element](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-currency). Le composant Payment Element affiche les moyens de paiement activés compatibles avec la devise fournie. Pour plus d’informations, consultez la [documentation dédiée au composant Payment Element](https://docs.stripe.com/payments/payment-methods/integration-options.md). ### Collecter les adresses Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez : - Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible. - Recueillez l’adresse à l’aide de votre propre formulaire personnalisé. ## Optional: Link in your checkout page [Côté client] Permettez à vos clients de payer plus rapidement en utilisant [Link](https://docs.stripe.com/payments/link.md) dans le [composant Element Payment](https://docs.stripe.com/payments/payment-element.md). Vous pouvez remplir automatiquement les informations pour tout client connecté utilisant déjà Link, même s’il a initialement enregistré ses informations avec Link auprès d’une autre entreprise. L’intégration par défaut du composant Element Payment inclut une invite Link dans le formulaire de carte bancaire. Pour gérer Link dans le composant Element Payment, accédez à vos [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). ![Authenticate or enroll with Link directly in the Payment Element during checkout](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png) Collectez l’adresse e-mail d’un client pour l’authentification ou l’inscription Link ### Options d’intégration L’intégration de Link au composant Element Payment peut se faire de deux façons. Parmi celles-ci, Stripe recommande de transmettre l’adresse e-mail d’un client au composant Element Payment, le cas échéant. N’oubliez pas de tenir compte du fonctionnement de votre tunnel de paiement lorsque vous choisissez l’une des options suivantes : | Option d’intégration | Tunnel de paiement | Description | | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Transmettre l’adresse e-mail d’un client au Payment Element (Recommended) | - Votre client saisit son adresse e-mail avant d’accéder à la page de paiement (lors d’une précédente étape de création de compte, par exemple). - Vous préférez utiliser votre propre champ de saisie de l’adresse e-mail | Transmettez par voie programmatique l’adresse e-mail d’un client au composant Element Payment. Dans ce scénario, le client s’identifie directement auprès de Link dans le formulaire de paiement au lieu d’utiliser un composant d’interface utilisateur distinct. | | Recueillir l’adresse e-mail d’un client dans le Payment Element | - Vos clients peuvent choisir de saisir leur adresse e-mail et de s’identifier ou de s’inscrire auprès de Link directement dans le composant Element Payment lors du paiement. - Aucune modification du code n’est nécessaire. | Si un client ne s’est pas inscrit auprès de Link et qu’il choisit un moyen de paiement pris en charge dans le composant Element Payment, il est invité à enregistrer ses informations à l’aide de Link. Pour ceux qui sont déjà inscrits, Link renseigne automatiquement leurs informations de paiement. | Utilisez le paramètre [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) pour transmettre l’adresse e-mail d’un client au Payment Element. ```javascript const paymentElement = elements.create('payment', { defaultValues: { billingDetails: { email: 'foo@bar.com', } }, // Other options }); ``` Pour plus d’informations, lisez comment [créer une page de paiement personnalisée qui inclut Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md). ## Optional: Enregistrer et récupérer les moyens de paiement des clients Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la [fonctionnalité d’enregistrement des moyens de paiement](https://docs.stripe.com/payments/save-customer-payment-methods.md), qui permet à Payment Element de : - De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré - Enregistrer les moyens de paiement lorsque les clients y consentent - Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats - [Mise à jour automatique des cartes perdues ou expirées](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) lorsque les clients les remplacent ![Le composant Payment Element et une case à cocher pour le moyen de paiement enregistré](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png) Enregistrez les moyens de paiement. ![Le composant Payment Element avec un moyen de paiement enregistré sélectionné](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png) Réutilisez un moyen de paiement précédemment enregistré. ### Activer l’enregistrement du moyen de paiement dans le composant Payment Element Créez une [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) sur votre serveur en fournissant l’ID du client (en utilisant soit `customer` pour un objet `Customer`, soit `customer_account` pour un objet `Account` configuré pour le client) et en activant le composant [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) pour votre session. Configurez les [fonctionnalités](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) affiche une case à cocher qui permet aux clients d’enregistrer leurs informations de paiement pour une utilisation ultérieure. Vous pouvez définir `setup_future_usage` sur un PaymentIntent ou une Checkout Session pour déroger au comportement par défaut d’enregistrement des moyens de paiement. Cela permet d’enregistrer automatiquement le moyen de paiement pour une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer. Si vous prévoyez de définir `setup_future_usage`, ne définissez pas `payment_method_save_usage` dans la même transaction de paiement, car cela provoque une erreur d’intégration. > #### Utiliser l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à l’aperçu Accounts v2, > > Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md). #### Accounts v2 #### Ruby ```ruby # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. client = Stripe::StripeClient.new('<>') post '/create-intent-and-customer-session' do intent = client.v1.setup_intents.create({ automatic_payment_methods: {enabled: true}, customer_account: {{CUSTOMER_ACCOUNT_ID}}, }) customer_session = client.v1.customer_sessions.create({ customer_account: {{CUSTOMER_ACCOUNT_ID}}, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end ``` #### Customers v1 #### Ruby ```ruby # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. client = Stripe::StripeClient.new('<>') post '/create-intent-and-customer-session' do intent = client.v1.setup_intents.create({ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, customer: {{CUSTOMER_ID}}, }) customer_session = client.v1.customer_sessions.create({ customer: {{CUSTOMER_ID}}, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end ``` Votre instance Elements utilise la *clé secrète du client* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de la session Client pour accéder aux moyens de paiement enregistrés de ce client. [Gérez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative. Créez l’instance Elements à l’aide des clés secrètes du client pour le SetupIntent et la session Client. Ensuite, utilisez cette instance d’Elements pour créer un Payment Element. ```javascript // Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` Lors de la confirmation du SetupIntent, Stripe.js contrôle automatiquement le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement. ### Détecter la sélection d’un moyen de paiement enregistré Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement `change` du composant Element Payment, qui contient le moyen de paiement sélectionné. ```javascript paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } }) ``` ## Envoyer les données de paiement à Stripe [Côté client] Utilisez [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) pour finaliser la configuration à l’aide des données collectées par le Payment Element. Ajoutez une [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) à cette fonction pour que Stripe puisse rediriger l’utilisateur une fois la configuration terminée. Nous pouvons le rediriger en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant de le rediriger vers la `return_url`. Si votre client enregistre les données de sa carte, nous le redirigeons immédiatement vers la `return_url` une fois la configuration finalisée. Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte, vous pouvez configurer la [redirection](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect) sur `if_required`. Seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmSetup({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/account/payments/setup-complete', } }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Pour appeler [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si vous préférez les composants de classe traditionnels aux hooks, vous pouvez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const SetupForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return null; } const {error} = await stripe.confirmSetup({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/account/payments/setup-complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ) }; export default SetupForm; ``` Assurez-vous que `return_url` correspond à une page de votre site internet qui [fournit l’état](https://docs.stripe.com/payments/payment-intents/verifying-status.md)du `SetupIntent`. Stripe fournit les paramètres de requête d’URL suivants pour vérifier l’état lorsque nous redirigeons le client vers l’URL de retour `return_url`. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez `return_url`, et ils persistent tout au long du processus de redirection. | Paramètre | Description | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | `setup_intent` | L’identifiant unique du `SetupIntent`. | | `setup_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) de l’objet `SetupIntent`. | Vous pouvez utiliser [stripe.retrieveSetupIntent](https://docs.stripe.com/js/setup_intents/retrieve_setup_intent) pour récupérer le `SetupIntent` à l’aide du paramètre de requête `setup_intent_client_secret`. Une confirmation réussie du `SetupIntent` enregistre l’ID du `PaymentMethod` résultant (dans `result.setupIntent.payment_method`) sur l’objet `Account` ou `Customer` configuré fourni. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('{PUBLISHABLE_KEY}'); // Retrieve the "setup_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'setup_intent_client_secret' ); // Retrieve the SetupIntent stripe.retrieveSetupIntent(clientSecret).then(({setupIntent}) => { const message = document.querySelector('#message') // Inspect the SetupIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (setupIntent.status) { case 'succeeded': { message.innerText = 'Success! Your payment method has been saved.'; break; } case 'processing': { message.innerText = "Processing payment details. We'll update you when processing is complete."; break; } case 'requires_payment_method': { message.innerText = 'Failed to process payment details. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; } } }); ``` #### React ```jsx // PaymentStatus.jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "setup_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'setup_intent_client_secret' ); // Retrieve the SetupIntent stripe .retrieveSetupIntent(clientSecret) .then(({setupIntent}) => { // Inspect the SetupIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (setupIntent.status) { case 'succeeded': setMessage('Success! Your payment method has been saved.'); break; case 'processing': setMessage("Processing payment details. We'll update you when processing is complete."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Failed to process payment details. Please try another payment method.'); break; } }); }, [stripe]); return message }; export default PaymentStatus; ``` > Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine `stripe.com` à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble. ## Débiter ultérieurement le moyen de paiement enregistré [Côté serveur] > #### Conformité > > Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles du réseau en vigueur. Lorsque vous présentez au client final des moyens de paiement précédemment utilisés en vue d’effectuer ses prochains achats, assurez-vous de lister les moyens de paiement pour lesquels vous avez obtenu le consentement du client à l’enregistrement des informations de paiement aux fins des futurs achats. Le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) vous permet de différencier les moyens de paiement associés au client qui peuvent ou non être présentés pour les achats futurs. Pour trouver un moyen de paiement à débiter, listez les moyens de paiement associés à votre client. Cet exemple liste des cartes bancaires, mais vous pouvez lister tout [type](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge. > #### Utiliser l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à l’aperçu Accounts v2, > > Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md). #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Lorsque vous êtes prêt à débiter votre client *hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), utilisez l’ID du `Customer` ou de l’`Account` configuré par le client ainsi que l’ID du `PaymentMethod` pour créer un `PaymentIntent` avec le montant et la devise du paiement. Définissez quelques autres paramètres pour effectuer le paiement hors session : - Définissez [off_session](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-off_session) sur true pour indiquer que le client n’est pas dans votre tunnel de paiement et ne peut pas répondre aux demandes d’authentification. Si, pendant votre tunnel de paiement, un partenaire (tel qu’un émetteur de cartes bancaires ou une banque) demande une authentification, Stripe sollicite des exemptions en utilisant les informations client issues d’une transaction précédente *pendant en session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Si les conditions d’exemption ne sont pas remplies, le `PaymentIntent` peut générer une erreur. - Définissez [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) sur true pour déclencher la confirmation immédiatement lors de la création du `PaymentIntent`. - Définissez [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du `PaymentMethod`. - Selon la manière dont vous représentez les clients dans votre intégration, définissez soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) sur l’ID de l’objet `Account` configuré pour le client, soit [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID de l’objet `Customer`. #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer={{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` Lorsqu’une tentative de paiement échoue, la requête échoue également avec un code d’état HTTP 402. L’état du PaymentIntent est *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Vous devez inviter votre client à revenir dans votre application pour finaliser le paiement (par e-mail ou par une notification dans l’application par exemple). Vérifiez le code de l’[erreur](https://docs.stripe.com/api/errors/handling.md) levée par l’API Library Stripe. Si le paiement a échoué en raison d’un code de refus de paiement [authentication_required](https://docs.stripe.com/declines/codes.md), utilisez la clé secrète du client du PaymentIntent refusée avec confirmPayment pour permettre au client d’authentifier le paiement. ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ // The client secret of the PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` > L’exécution de la méthode `stripe.confirmPayment` peut prendre plusieurs secondes. Pendant ce temps, bloquez le renvoi de votre formulaire et affichez un indicateur d’attente. Si vous recevez une erreur, montrez-la au client, réactivez le formulaire et masquez l’indicateur d’attente. Si le client doit effectuer des actions supplémentaires pour mener à bien le paiement, comme une authentification, Stripe.js le guide tout au long de ce processus. Si le paiement a échoué pour d’autres raisons, par exemple parce que les fonds sont insuffisants, dirigez votre client vers une page de paiement sur laquelle il pourra spécifier un autre moyen de paiement. Vous pouvez ensuite réutiliser l’objet PaymentIntent existant pour retenter de réaliser le paiement avec les nouvelles données de paiement. ## Tester l'intégration Utilisez les informations de paiement et la page de redirection test pour vérifier votre intégration. Cliquez sur les onglets ci-après pour obtenir des informations sur chacun des moyens de paiement. #### Cartes bancaires | Moyen de paiement | Scénario | Méthode de test | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Carte bancaire | La configuration de la carte aboutit et ne requiert aucune *authentification* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4242 4242 4242 4242` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0025 0000 3155` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte exige une authentification pour la configuration initiale et pour les paiements suivants. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0027 6000 3184` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte est refusée durant la configuration. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro `4000 0000 0000 9995` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | #### Virements avec redirection bancaire | Moyen de paiement | Scénario | Méthode de test | | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Bancontact | Votre client définit le prélèvement automatique SEPA comme moyen de paiement pour les prochaines transactions à l’aide de Bancontact. | Saisissez un nom quelconque sur le formulaire Bancontact, puis cliquez sur **Autoriser la configuration test** sur la page de redirection. | | Bancontact | Votre client ne parvient pas à s’authentifier sur la page de redirection Bancontact. | Saisissez un nom quelconque sur le formulaire Bancontact, puis cliquez sur **Faire échouer la configuration test** sur la page de redirection. | | Prélèvement automatique BECS | Le montant dû est réglé par prélèvement automatique BECS. | Remplissez le formulaire en utilisant le numéro de compte `900123456`. Le `PaymentIntent` confirmé passe d’abord à l’état `processing`, puis à l’état `succeeded` 3 minutes plus tard. | | Prélèvement automatique BECS | Le paiement de votre client échoue avec un code d’erreur `account_closed`. | Remplissez le formulaire à l’aide du numéro de compte `111111113`. | | iDEAL | Votre client définit le [prélèvement automatique SEPA](https://docs.stripe.com/payments/sepa-debit.md) comme moyen de paiement pour les prochaines transactions à l’aide d’iDEAL. | Saisissez un nom et une banque quelconques sur le formulaire iDEAL, puis cliquez sur **Autoriser la configuration test** sur la page de redirection. | | iDEAL | Votre client ne parvient pas à s’authentifier sur la page de redirection iDEAL. | Sélectionnez une banque quelconque et saisissez n’importe quel nom sur le formulaire iDEAL, puis cliquez sur **Faire échouer la configuration test** sur la page de redirection. | #### Prélèvements bancaires | Moyen de paiement | Scénario | Méthode de test | | ---------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Prélèvement automatique SEPA | Le montant dû est réglé par prélèvement automatique SEPA. | Remplissez le formulaire en utilisant le numéro de compte `AT321904300235473204`. Le `PaymentIntent` confirmé passe d’abord à l’état `processing`, puis à l’état `succeeded` 3 minutes plus tard. | | Prélèvement automatique SEPA | Le `PaymentIntent` de votre client passe de l’état `processing` à l’état `requires_payment_method`. | Remplissez le formulaire à l’aide du numéro de compte `AT861904300235473202`. | ### Tester le traitement d’un PaymentMethod enregistré de type prélèvement automatique SEPA La confirmation du `SetupIntent` à l’aide d’iDEAL, Bancontact ou Sofort génère un [prélèvement automatique SEPA](https://docs.stripe.com/payments/sepa-debit.md) *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs). Le prélèvement automatique SEPA est un moyen de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification) qui passe par un état intermédiaire `processing`, avant d’évoluer quelques jours plus tard vers l’état `succeeded` ou `requires_payment_method`. #### Adresse e-mail Configurez le paramètre `payment_method.billing_details.email` sur l’une des valeurs suivantes afin de tester les changements d’état du `PaymentIntent`. Au début de l’adresse e-mail, vous pouvez inclure votre propre texte suivi d’un tiret bas. Par exemple, ``test_1_generatedSepaDebitIntentsFail@example.com`donne lieu à un PaymentMethod de prélèvement automatique SEPA qui échoue systématiquement en cas d'utilisation avec un`PaymentIntent`. | Adresse e-mail | Description | | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | `generatedSepaDebitIntentsSucceed@example.com` | L’état du `PaymentIntent` passe de `processing` à `succeeded`. | | `generatedSepaDebitIntentsSucceedDelayed@example.com` | L’état du `PaymentIntent` passe de `processing` à `succeeded` après trois minutes. | | `generatedSepaDebitIntentsFail@example.com` | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method`. | | `generatedSepaDebitIntentsFailDelayed@example.com` | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method` après trois minutes. | | `generatedSepaDebitIntentsSucceedDisputed@example.com` | L’état du `PaymentIntent` passe de `processing` à `succeeded`, mais un litige est créé immédiatement. | | `generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com` | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method` avec un code d’échec `insufficient_funds`. | #### PaymentMethod Utilisez ces PaymentMethods pour tester les changements d’état du `PaymentIntent`. Ces tokens sont utiles pour les tests automatiques, car ils associent immédiatement le PaymentMethod au SetupIntent sur le serveur. | Moyen de paiement | Description | | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | `pm_bancontact_generatedSepaDebitIntentsSucceed` | L’état du `PaymentIntent` passe de `processing` à `succeeded`. | | `pm_bancontact_generatedSepaDebitIntentsSucceedDelayed` | L’état du `PaymentIntent` passe de `processing` à `succeeded` après trois minutes. | | `pm_bancontact_generatedSepaDebitIntentsFail` | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method`. | | `pm_bancontact_generatedSepaDebitIntentsFailDelayed` | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method` après trois minutes. | | `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed` | L’état du `PaymentIntent` passe de `processing` à `succeeded`, mais un litige est créé immédiatement. | | `pm_bancontact_generatedSepaDebitIntentsFailsDueToInsufficientFunds` | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method` avec un code d’échec `insufficient_funds`. | ## Optional: Personnaliser la mise en page [Côté client] Vous pouvez adapter la mise en page du composant Payment Element (en accordéon ou en onglets) à votre interface de paiement. Pour plus d’informations sur chacune des propriétés, consultez la section [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options). #### Accordéon Vous pouvez commencer à utiliser les fonctionnalités de mise en page en transmettant un `type` de mise en page et d’autres propriétés facultatives lors de la création du Payment Element : ```javascript const paymentElement = elements.create('payment', { layout: { type: 'accordion', defaultCollapsed: false, radios: 'always', spacedAccordionItems: false } }); ``` #### Onglets ### Spécifier la mise en page Définissez la valeur de mise en page sur `tabs` (onglets). Vous avez également la possibilité de spécifier d’autres propriétés, notamment celles figurant dans l’exemple suivant : ```javascript const paymentElement = elements.create('payment', { layout: { type: 'tabs', defaultCollapsed: false, } }); ``` L’image suivante illustre différents affichages du même composant Element Payment correspondant à différentes configurations de mise en page : ![Trois expériences de formulaire de paiement](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png) Mise en page du composant Element Payment ## Optional: Apple Pay et Google Pay [Côté client] Lorsque vous [activez les paiements par carte](https://docs.stripe.com/payments/save-and-reuse.md?platform=web&ui=elements#create-intent), nous affichons Apple Pay et Google Pay pour les clients dont l’environnement répond aux [conditions d’affichage du wallet](https://docs.stripe.com/testing/wallets.md). Pour accepter des paiements via ces wallets, vous devez également : - Activez-les dans les [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Apple Pay est activé par défaut. - [Enregistrez votre domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). > #### Tests régionaux > > Stripe Elements ne prend pas en charge Google Pay ou Apple Pay pour les comptes et clients Stripe en Inde. Par conséquent, vous ne pouvez pas tester votre intégration Google Pay ou Apple Pay si l’adresse IP du testeur se trouve en Inde, même si le compte Stripe est basé en dehors de l’Inde. ## 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 - [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md) - [Enregistrer les données de paiement pour les réutiliser](https://docs.stripe.com/payments/save-during-payment.md) - [L’API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md) - [Envoyer des facteurs de risque complets](https://docs.stripe.com/radar/optimize-risk-factors.md)