# Enregistrer le moyen de paiement d'un client sans effectuer de paiement Découvrez comment enregistrer un mode de paiement et le débiter ultérieurement. # 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 dans le mode `setup`](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) vous permet d’enregistrer les informations 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 à l’aide de l’API Payment Intents 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 par carte > > Les transactions par carte, telles que [la collecte des informations de carte via Stripe Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md), utilisent un processus différent pour enregistrer le mode de paiement. ## Conformité Vous êtes responsable de votre conformité à toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client. Ces exigences s’appliquent généralement si vous souhaitez enregistrer le mode de paiement de votre client pour une utilisation future, comme en affichant le mode de paiement d’un client dans le flux de paiement pour un achat futur ou en le facturant lorsqu’il n’utilise pas activement votre site Web ou votre application. Ajoutez des conditions à votre site Web ou à votre application qui indiquent comment vous prévoyez enregistrer les informations du mode de paiement et permettez aux clients de donner leur consentement. Lorsque vous enregistrez un mode de paiement, vous ne pouvez l’utiliser que pour l’usage précis mentionnés dans vos conditions. Pour facturer un mode de paiement lorsqu’un client est hors ligne et l’enregistrer comme option pour des prochains achats, assurez-vous de recueillir explicitement le consentement du client pour cet usage précis. Par exemple, ajoutez une case à cocher indiquant « Enregistrer mon moyen de paiement pour une utilisation ultérieure » pour recueillir le consentement du client. Pour facturer un client lorsqu’il est hors ligne, assurez-vous que vos conditions comprennent les éléments suivants : - Le consentement du client vous autorisant à prélever un paiement ou une série de paiements en son nom pour des transactions spécifiques. - Le calendrier et la fréquence des paiements prévus (par exemple, si les frais concernent des versements échelonnés, des paiements d’abonnement ou des recharges non planifiées). - La façon dont vous déterminez le montant du paiement. - Vos conditions d’annulation, si le mode de paiement est un service d’abonnement. Assurez-vous de conserver une trace de l’accord écrit de votre client à ces conditions. > Si vous devez utiliser la confirmation manuelle côté serveur ou si votre intégration nécessite la présentation de modes de paiement distincts, consultez notre [guide des solutions de remplacement](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 à votre compte](https://dashboard.stripe.com/login). Utilisez nos bibliothèques officielles pour accéder à l’API de 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 mode de paiement en vue de futurs paiements, 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 [Customer](https://docs.stripe.com/api/v2/core/accounts/create.md) configuré pour le client à l’aide de l’API Accounts v2, soit un objet [Customer](https://docs.stripe.com/api/customers/create.md) à l’aide de l’API Clients. > #### Utilisez l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à la version bêta d’Accounts v2, > > For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects. #### 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 de paiement 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 mode de paiement au client [Côté serveur] Si vous n’avez pas créé la session de paiement avec un client existant, utilisez l’ID 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 mode de paiement à un client. Sinon, le mode de paiement est automatiquement associé au client que vous avez fourni lors de la création de la session de paiement. #### 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 mode de paiement [Côté serveur] Une fois que le client a terminé sa session de paiement, 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 correspond à l’ID SetupIntent créé pendant la session de paiement. - Utilisez l’ID SetupIntent ID pour [récupérer](https://docs.stripe.com/api/setup_intents/retrieve.md) l’objet SetupIntent. L’objet renvoyé contient un ID [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 mise en place de webhooks](https://docs.stripe.com/webhooks.md). ## Débiter le moyen de paiement ultérieurement [Côté serveur] Après avoir associé le PaymentMethod à un client, vous pouvez effectuer un paiement *off-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 `Account` soit [client](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) sur l’ID `Customer`, et définissez [payment_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method) sur l’ID `PaymentMethod`. - Assignez la valeur [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) à `true` afin d’indiquer que le client n’est pas dans votre flux de paiement lors d’une tentative de paiement et ne peut pas répondre à une demande d’authentification faite par un partenaire, comme un émetteur de cartes, une institution financière ou un autre établissement financier. Si, au cours de votre flux de paiement, un partenaire demande une authentification, Stripe demandera des exemptions à l’aide des informations client provenant d’une transaction effectuée *pendant une session précédente* (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. - Assignez la valeur [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) à la propriété `true` du PaymentIntent, ce qui aura pour effet de générer une confirmation immédiate lorsque vous créez le 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 échoue également avec un code d’état HTTP 402. L’état de l’objet PaymentIntent est alors *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Invitez votre client à revenir dans votre application (par courriel ou via une notification dans l’application, par exemple) et redirigez votre client vers une nouvelle session de paiement afin qu’il sélectionne un autre mode 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 informations 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 mode 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 toutes les lois, réglementations et règles du réseau applicables. Ces exigences s’appliquent généralement si vous souhaitez enregistrer le mode de paiement de votre client pour une utilisation ultérieure, par exemple en affichant le mode de paiement au client dans le flux de paiement pour un achat futur ou en débitant le client lorsqu’il n’utilise pas activement votre site Web ou votre application. Ajoutez à votre site Web ou à votre application des conditions qui indiquent comment vous prévoyez d’enregistrer les informations du mode de paiement et autorisez les clients à s’inscrire. Lorsque vous enregistrez un mode de paiement, vous ne pouvez l’utiliser que pour l’usage précis que vous avez prévu dans vos conditions. Pour débiter un mode de paiement lorsqu’un client est hors ligne et l’enregistrer comme option pour des achats futurs, assurez-vous de recueillir explicitement le consentement du client pour cet usage précis. Par exemple, ajoutez une case à cocher indiquant « Enregistrer mon mode de paiement pour une utilisation ultérieure » pour recueillir le consentement du client. Pour les facturer lorsqu’ils sont hors ligne, assurez-vous que vos conditions comprennent les éléments suivants : - Que le client accepte que vous préleviez un paiement ou une série de paiements en son nom pour des transactions spécifiées. - Le calendrier et la fréquence des paiements prévus (par exemple, si les frais concernent des versements planifiés, des paiements d’abonnement ou des recharges non planifiées). - La façon dont vous déterminez le montant du paiement. - Vos conditions d’annulation, si le moyen de paiement est un service d’abonnement. Assurez-vous de conserver une trace de l’accord écrit de votre client à ces conditions. > Si vous devez utiliser la confirmation manuelle côté serveur ou si votre intégration nécessite de présenter les modes 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 à votre compte](https://dashboard.stripe.com/login). Utilisez nos bibliothèques officielles pour accéder à l’API de 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 les moyens de paiement Accédez aux [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 et les autres modes de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres modes de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des modes 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 modes de paiement, et notre [page de tarification](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Créer un client [Côté serveur] Pour configurer un mode de paiement en vue de futurs paiements, 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 [Customer](https://docs.stripe.com/api/v2/core/accounts/create.md) configuré pour le client à l’aide de l’API Accounts v2, soit un objet [Customer](https://docs.stripe.com/api/customers/create.md) à l’aide de l’API Clients. > #### Utilisez l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à la version bêta d’Accounts v2, > > For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects. ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` ## Créer un SetupIntent [Côté serveur] > Si vous souhaitez présenter le Payment Element sans créer d’abord de SetupIntent, consultez la section [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 au cours 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 à partir du Dashboard Certains moyens de paiement ne peuvent pas être enregistrés en vue de paiements futurs, et ne sont donc pas proposés aux clients lorsque ceux-ci configurent des paiements futurs. Pour en savoir plus 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 éventuellement créer un SetupIntent dont l’option `automatic_payment_methods` est activée, et le SetupIntent est créé à l’aide des moyens de paiement que vous avez configurés dans le Dashboard. Dans la dernière version de l’API, la définition du paramètre `automatic_payment_methods` est facultative, car Stripe active sa fonctionnalité par défaut. Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux 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" ``` #### Lister manuellement les moyens de paiement Créez un SetupIntent sur votre serveur avec une 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 L’objet SetupIntent comprend une *clé secrète du client* (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)) utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au côté client. #### Application monopage Récupérez la clé secrète du client à partir d’un point de terminaison sur votre serveur, en utilisant la fonction `fetch` du navigateur. Cette approche est préférable si votre côté client est une application d’une page, en particulier si celle-ci a été créée avec un cadre d’application frontal récent comme React. Créez le point de terminaison du serveur pour récupérer 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 ``` Ensuite, récupérez la clé secrète du client avec 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 du client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer au navigateur. Ajoutez le champ [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) dans votre formulaire de paiement. Dans le 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 > > Lors de l’enregistrement du moyen de paiement d’un client sans paiement initial, [Radar](https://docs.stripe.com/radar.md) n’agit pas sur le SetupIntent par défaut. Si vous souhaitez activer cette option par défaut, accédez aux [paramètres de 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 Payment Element est un composant d’interface utilisateur préconfiguré qui facilite la collecte des informations de paiement pour de nombreux moyens de paiement. Le composant Payment Element contient un iframe qui envoie de manière sécurisée des informations de paiement à Stripe au moyen d’une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans le faire, mais n’oubliez pas d’[activer le protocole HTTPS](https://docs.stripe.com/security/guide.md#tls) lorsque vous êtes prêt(e) à 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 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('<>'); ``` ### Ajouter le Payment Element à votre page de configuration des paiements Le Payment Element doit avoir un emplacement dédié sur votre page de configuration des paiements. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement : ```html
``` Une fois le chargement du formulaire précédent effectué, créez une instance du Payment Element et intégrez-la au nœud DOM du conteneur. 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 les `options` lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create) : ```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 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 remplir toutes les informations de paiement nécessaires. ### Personnaliser l’apparence Personnalisez le composant Element de paiement pour qu’il corresponde au design de votre site en transmettant l’[objet d’apparence](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) dans les `options` lors de la création de l’instance des `éléments`. Stripe Elements est un ensemble de composants d’interface utilisateur prêts à l’emploi. Pour personnaliser davantage votre formulaire ou collecter des renseignements sur les clients, consultez la [documentation Elements](https://docs.stripe.com/payments/elements.md). ### Demander le jeton marchand d’Apple Pay Si vous acceptez les paiements Apple Pay, nous vous recommandons de configurer l’option [l’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. Cela permet d’utiliser les [merchant tokens](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) Apple Pay. L’exemple suivant montre une configuration pour un paiement qui commence le 5 janvier 2030. Ces informations seront reflétées 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 à votre page de configuration des paiements Pour utiliser le composant Payment Element, incluez le composant de votre page de configuration des paiements 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’élément `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 comme `options` pour le 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 une collection de composants d’interface utilisateur prêts à l’emploi. Pour personnaliser davantage votre formulaire ou collecter différentes informations du client, parcourez la [documentation sur Elements](https://docs.stripe.com/payments/elements.md). Le 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 remplir toutes les informations de paiement nécessaires. ### Personnaliser l’apparence Personnalisez le Payment Element pour l’adapter à l’apparence de votre site en transmettant l’[objet Appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) dans les `options` lors de la création du fournisseur `Elements`. ### Demander le jeton marchand d’Apple Pay Si vous acceptez les paiements Apple Pay, nous vous recommandons de configurer l’option [l’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. Cela permet d’utiliser les [merchant tokens](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) Apple Pay. L’exemple suivant montre une configuration pour un paiement qui commence le 5 janvier 2030. Ces informations seront reflétées 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 une 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 indiquer la devise lors de 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 qui prennent en charge la devise fournie. Pour en savoir plus, consultez [la documentation relative au composant Payment Element](https://docs.stripe.com/payments/payment-methods/integration-options.md). ### Collecter les adresses Par défaut, le composant Element Paiement collecte uniquement les détails de l’adresse de facturation nécessaires. Certains comportements, tels que le [calcul de la taxe](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des détails d’expédition, nécessite l’adresse complète de votre client. Vous pouvez : - Utilisez le composant [Element Adresse](https://docs.stripe.com/elements/address-element.md) pour profiter des fonctionnalités de saisie semi-automatique et de localisation pour collecter l’adresse complète de votre client. Cela permet d’assurer le calcul de taxe le plus précis possible. - Collectez les coordonnées à 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 [](https://docs.stripe.com/payments/link.md) dans le [composant Element Payment](https://docs.stripe.com/payments/payment-element.md). Vous pouvez saisir automatiquement les informations de tout client connecté qui utilise déjà qu’il ait ou non initialement enregistré ses informations dans Link auprès d’une autre entreprise. L’intégration par défaut du composant Element Payment inclut un lien d’invitation Link dans le formulaire de carte. Pour gérer dans le composant Payment Element, accédez à vos [paramètres des modes 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) Collecter l’adresse de courriel d’un client pour l’authentification ou l’inscription à Link ### Options d’intégration Il existe deux façons d’intégrer Link au composant Element Payment. Parmi ceux-ci, Stripe recommande de transmettre l’adresse de courriel du client au composant Element Payment si disponible. N’oubliez pas de tenir compte du fonctionnement de votre flux de paiement lorsque vous choisissez entre ces options : | Option intégration | Flux de paiement | Description | | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Passez l’adresse de courriel d’un client au composant Element Paiement (Recommended) | - Votre client saisit son adresse de courriel avant d’atterrir sur la page de paiement (par exemple, lors d’une étape de création de compte précédente). - Vous préférez utiliser votre propre champ de saisie pour l’adresse de courriel. | Transmettez par voie programmatique une adresse de courriel client au composant Element Payment. Dans ce scénario, un client s’authentifie directement auprès de Link dans le formulaire de paiement au lieu d’un composant d’interface utilisateur distinct. | | Collectez l’adresse de courriel d’un client dans le composant Element Paiement | - Vos clients peuvent choisir de saisir leur courriel et de s’identifier ou de s’inscrire avec Link directement dans le composant Payment Element pendant le paiement. - Aucun changement de codage n’est requis. | Si un client ne s’est pas inscrit avec et qu’il choisit un mode de paiement pris en charge dans le composant Element Payment, il sera invité à enregistrer ses informations à l’aide de . Pour les clients déjà inscrits, renseigne automatiquement leurs informations de paiement. | Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) pour transmettre l’adresse de courriel d’un client au composant Element Paiement. ```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 modes de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la [fonctionnalité d’enregistrement des modes de paiement](https://docs.stripe.com/payments/save-customer-payment-methods.md), qui permet au Payment Element : - Inviter les acheteurs à consentir à enregistrer un moyen de paiement - Enregistrer les moyens de paiement lorsque les acheteurs donnent leur consentement - Afficher aux acheteurs les moyens de paiement enregistrés pour leurs prochains 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 mode de paiement enregistré](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png) Enregistrez les modes de paiement. ![Le composant Payment Element avec un mode de paiement enregistré sélectionné](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png) Réutilisez un mode de paiement précédemment enregistré. ### Activer l’enregistrement du moyen de paiement dans le Payment Element Créez une [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) sur votre serveur en fournissant l’ID du client (à l’aide soit du `customer` pour un objet `Customer`, soit du `customer_account` pour un objet `Account` configuré par 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) de mode de paiement enregistrées 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 le paramètre `setup_future_usage` sur un objet PaymentIntent ou une session de paiement pour remplacer le comportement par défaut concernant l’enregistrement des modes de paiement. Cela garantit que le mode de paiement sera automatiquement enregistré pour une utilisation future, 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 provoquerait une erreur d’intégration. > #### Utilisez l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à la version bêta d’Accounts v2, > > For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects. #### 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 CustomerSession pour accéder aux modes de paiement enregistrés de ce client. [Traitez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session CustomerSession. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session CustomerSession à l’instance Elements, car ceci est facultatif. Créez l’instance Elements à l’aide des clés secrètes du client pour le SetupIntent et la CustomerSession. Ensuite, utilisez cette instance 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 lorsqu’un moyen de paiement enregistré est sélectionné, écoutez l’événement `change` de Payment Element, qui est rempli avec 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 informations de paiement à Stripe [Côté client] Utilisez [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) pour effectuer la configuration à l’aide des informations collectées par le Payment Element. Fournissez une [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) à cette fonction afin que Stripe puisse rediriger l’utilisateur une fois la configuration terminée. Nous pouvons d’abord le rediriger vers un site intermédiaire, comme une page d’autorisation bancaire, avant de le rediriger vers `return_url`. Si votre client enregistre ses informations de carte, nous le redirigerons immédiatement vers l’URL de retour `return_url` lorsque la configuration est réussie. Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte, vous pouvez définir [la redirection](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect) à `if_required`. De cette manière, 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) à partir de 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 le `return_url` correspond à une page de votre site Web qui [indique 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 `return_url`. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez `return_url`. Ces derniers 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` en utilisant la requête `setup_intent_client_secret`. La confirmation réussie du `SetupIntent` enregistre l’ID `PaymentMethod` résultant (dans `result.setupIntent. paiement_method`) pour la configuration client fournie`Account` ou`Client`. #### 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 toutes les lois, réglementations et règles du réseau applicables. Lorsque vous présentez au client final des modes de paiement précédemment utilisés en vue d’effectuer des achats futurs, assurez-vous de répertorier les modes de paiement pour lesquels vous avez obtenu le consentement du client afin d’enregistrer les informations du mode de paiement pour cette utilisation future spécifique. Pour différencier les modes de paiement associés aux clients qui peuvent ou non être présentés au client final en tant que mode de paiement enregistré pour des achats futurs, utilisez le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Pour trouver un mode de paiement à débiter, répertoriez les modes de paiement associés à votre client. Cet exemple liste des cartes, mais vous pouvez répertorier tout [type](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge. > #### Utilisez l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à la version bêta d’Accounts v2, > > For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects. #### 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’identifiant du `Customer` ou de `l’Account` configuré par le client, ainsi que l’identifiant du `PaymentMethod`, pour créer un `PaymentIntent` avec le montant et la devise du paiement. Définissez également quelques paramètres supplémentaires 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 présent dans votre processus de paiement afin de répondre à d’éventuelles demandes d’authentification. Si, pendant votre processus de paiement, un partenaire (comme un émetteur de carte ou une banque) demande une authentification, Stripe demande des exemptions en utilisant les informations client issues d’une transaction précédente *avec 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 renvoyer une erreur. - Définissez [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) sur « true » pour déclencher immédiatement la confirmation lors de la création du `PaymentIntent`. - Définissez le [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du `PaymentMethod`. - Selon la façon 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 du `compte` configuré par le client, soit [client](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID du `Customer`. #### Comptes 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 ``` #### Clients 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 et l’état du PaymentIntent est *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11) Vous devez demander à votre client de revenir à votre application pour finaliser le paiement (par exemple, en envoyant un courriel ou une notification dans l’application). Vérifiez le code de l’[erreur](https://docs.stripe.com/api/errors/handling.md) créé par la bibliothèque d’API de 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é 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 finaliser 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 le solde est insuffisant, dirigez votre client vers une page de paiement sur laquelle il pourra saisir un nouveau moyen de paiement. Vous pouvez ensuite réutiliser l’objet PaymentIntent existant pour réessayer le paiement avec les informations du nouveau moyen de paiement. ## Tester l'intégration Utilisez les informations de paiement et la page de redirection test afin de vérifier votre intégration. Cliquez sur les onglets ci-après pour obtenir des informations sur chacun des moyens de paiement. #### Cartes | Moyen de paiement | Scénario | Méthode de test | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Carte de crédit | 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 de crédit en saisissant le numéro de carte de crédit `4242 4242 4242 4242` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. | | Carte de crédit | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants. | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0025 0000 3155` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. | | Carte de crédit | La carte exige une authentification pour la configuration initiale et pour les paiements suivants. | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0027 6000 3184` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. | | Carte de crédit | La carte est refusée durant la configuration. | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0000 0000 9995` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. | #### Redirections vers l'institution financière | Moyen de paiement | Scénario | Méthode de test | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Bancontact | Votre client définit le prélèvement 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 à l’aide du numéro de compte `900123456`. Le `PaymentIntent` confirmé passe d’abord à l’état `traitement`, puis à l’état `réussi` 3 minutes plus tard. | | Prélèvement automatique BECS | Le paiement é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 mode de paiement pour les prochaines transactions à l’aide d’iDEAL. | Saisissez un nom et une institution financière quelconque 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 institution financière 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 SEPA | Le montant dû est réglé par prélèvement SEPA. | Remplissez le formulaire à l’aide du numéro de compte `AT321904300235473204`. Le `PaymentIntent` confirmé passe d’abord à l’état `traitement`, puis à l’état `réussi` 3 minutes plus tard. | | Prélèvement SEPA | L’état du `PaymentIntent` de votre client passe de `traitement` à `requires_payment_method`. | Remplissez le formulaire en utilisant le numéro de compte `AT861904300235473202`. | ### Tester le traitement d’un PaymentMethod enregistré de type prélèvement SEPA La confirmation du `SetupIntent` via iDEAL, Bancontact ou Sofort génère un [prélèvement 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 SEPA est un mode de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification) qui passe à l’état intermédiaire `traitement` avant de basculer quelques jours plus tard à l’état `réussi` ou à l’état `requires_payment_method`. #### Adresse de courriel 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 de courriel, 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 SEPA qui échoue systématiquement en cas d’utilisation avec un `PaymentIntent`. | Adresse de courriel | Description | | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | `generatedSepaDebitIntentsSucceed@example.com` | L’état du `PaymentIntent` passe de `processing` à `succeeded`. | | `generatedSepaDebitIntentsSucceedDelayed@example.com` | L’état du `PaymentIntent` passe de `processing` à `succeeded` au bout de 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` au bout de 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 le code d’échec `insufficient_funds`. | #### PaymentMethod Utilisez ces PaymentMethods pour tester les changements d’état du `PaymentIntent` . Ces jetons 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` au bout de 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` au bout de 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 le code d’échec `insufficient_funds`. | ## Optional: Personnaliser la mise en page [Côté client] Vous pouvez personnaliser la mise en page du Payment Element (accordéon ou onglets) pour l’adapter à votre interface de paiement. Pour obtenir 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 ### Préciser la mise en page Définissez la valeur de la mise en page sur `tabs`. Vous avez également la possibilité de préciser d’autres propriétés, telles que celles de l’exemple suivant : ```javascript const paymentElement = elements.create('payment', { layout: { type: 'tabs', defaultCollapsed: false, } }); ``` L’image suivante est le même Payment Element rendu à l’aide de 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) Mises en page de Payment Element ## 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 portefeuille](https://docs.stripe.com/testing/wallets.md). Pour accepter les paiements à partir de ces portefeuilles, vous devez également : - Activez-les dans vos [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 les 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 est en Inde, même si le compte Stripe est hébergé en dehors de l’Inde. ## Présenter les informations de Stripe à vos clients Stripe recueille des informations sur les interactions des clients avec Elements pour vous fournir des services, prévenir la fraude et améliorer ses services. Cela inclut l’utilisation de témoins et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une seule session de paiement. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour permettre à Stripe d’utiliser les données de cette manière. Pour en savoir plus, rendez-vous sur 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 informations de paiement lors du paiement](https://docs.stripe.com/payments/save-during-payment.md) - [L’API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md) - [Envoyer tous les facteurs de risque](https://docs.stripe.com/radar/optimize-risk-factors.md)