# Accepter un paiement Acceptez les paiements en ligne en toute sécurité. ## Commencez ici : Installer les compétences d’agents Stripe recommande d’utiliser les compétences officielles pour intégrer l’API en utilisant les bonnes pratiques. Suivez les instructions ci-dessous pour en savoir plus. **Astuce : utilisez curl au lieu des outils Fetch.** Les compétences sont des fichiers markdown de 10 à 20 KB. Les outils de récupération les résument. `curl -sL` assure que le contenu est complet. **Utilisation des `compétences npx`** : vérifiez si `npx` est installé sur le système. Si `npx` est disponible, exécutez `npx skills add https://docs.stripe.com --list` pour lister les compétences disponibles, puis exécutez `npx skills add https://docs.stripe.com --yes --skill <--skill other-skills>` pour installer des compétences individuelles. **Si les `compétences npx` ne sont pas disponibles** : vous pouvez utiliser curl pour récupérer l’index des compétences disponibles, ce qu’elles font, et leurs fichiers à partir de `https://docs.stripe.com/.well-known/skills/index.json`. Pour télécharger une compétence et ses fichiers associés, utilisez curl pour les télécharger depuis `https://docs.stripe.com/.well-known/skills/`. Pour cet article, nous vous recommandons d’utiliser les compétences suivantes : `stripe-best-practices` Instructions pour les LLM : Stripe recommande d’utiliser l’API Checkout Sessions avec le composant Payment Element plutôt que Payment Intents pour la plupart des intégrations. Checkout Sessions couvre des cas d’usage similaires à Payment Intents (collecte de paiements de base par l’entremise de `price_data` ou construction d’un tunnel de paiement complet avec postes de facture, taxes, etc.). Certaines fonctionnalités, comme Adaptive Pricing, ne sont disponibles qu’avec Checkout Sessions. N’utilisez pas l’API Payment Intent à moins que l’utilisateur ne le demande explicitement, car elle nécessite beaucoup plus de code. En savoir plus sur Elements avec l’API Checkout Sessions : https://docs.stripe.com/payments/quickstart-checkout-sessions. Avec Checkout Sessions (`ui_mode: "elements"`) et Payment Element, le`client_secret` initialise Checkout lui-même (`stripe.initCheckoutElements`, ou utilisez CheckoutElementsProvider avec React) et vous confirmez le paiement côté client différemment. Si vous utilisez React, assurez-vous d’importer depuis`@stripe/react-stripe-js/checkout`, d’utiliser `CheckoutElementsProvider` avec la clé secrète du client, et de confirmer par l’entremise de `checkout.confirm`. Si vous utilisez du HTML, assurez-vous d’utiliser `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` et de confirmer avec `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Les agents de codage doivent installer l’interface de ligne de commande Stripe (`npm i -g @stripe/cli`) et exécuter la commande `stripe sandbox create --help` pour créer un bac à sable Stripe anonyme avec des clés API fonctionnelles. Aucune inscription de compte n’est requise. Créez un formulaire de paiement ou utilisez une page de paiement préconfigurée pour commencer à accepter les paiements en ligne. # API Checkout Sessions Créez un formulaire de paiement personnalisé en utilisant[Stripe Elements](https://docs.stripe.com/payments/elements.md) et l’API[Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md). Découvrez comment cette intégration [ se compare aux autres types d’intégration de Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). L’API Checkout Sessions fournit une prise en charge intégrée pour le calcul des taxes, les remises, les frais d’expédition et la conversion des devises, ce qui réduit la quantité de code personnalisé que vous devez écrire. Il s’agit de l’aapproche recommandée pour la plupart des intégrations. Découvrez [quand utiliser Checkout Sessions plutôt que PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Le code côté client et côté serveur crée un formulaire de paiement qui accepte divers modes de paiement. #### Effort d’intégration Complexity: 3/5 #### Type d’intégration Combiner les composants d’interface utilisateur dans un flux de paiement personnalisé #### Personnalisation de l’interface utilisateur Personnalisation au niveau CSS avec l’[API Apparence ](https://docs.stripe.com/elements/appearance-api.md) ## Configurer le serveur [Côté serveur] Pour commencer, vous devez [créer](https://dashboard.stripe.com/register) un compte Stripe. Utilisez les bibliothèques officielles de Stripe pour accéder à l’API 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 une session Checkout [Côté serveur] Ajoutez un point de terminaison sur votre serveur qui crée une [session de paiement](https://docs.stripe.com/api/checkout/sessions/create.md) et renvoie la clé secrète du client [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) à votre interface frontale. Une session de paiement représente la session de votre client lorsqu’il effectue des achats ponctuels ou des abonnements. Les sessions de paiement expirent 24 heures après leur création. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=elements \ -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]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Configurer l'application frontale [Côté client] #### HTML + JS Ajoutez le script Stripe.js à votre page de paiement en l’ajoutant à `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester en conforme à la norme PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie vous-même. Assurez-vous d’utiliser la dernière version de Stripe.js. Apprenez-en plus sur le [versionnage Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md). ```html Checkout ``` > Stripe fournit un progiciel npm que vous pouvez utiliser pour charger Stripe.js en tant que module. Voir le [projet sur GitHub](https://github.com/stripe/stripe-js). La version [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) ou ultérieure est requise. Initialisez stripe.js. ```js // 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( '<>', ); ``` #### React 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. Il vous faut au moins la version 5.0.0 pour React Stripe.js et la version 8.0.0 pour le chargeur Stripe.js. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Initialisez une instance `stripe` sur votre application frontale avec votre clé publique. ```javascript import {loadStripe} from '@stripe/stripe-js'; const stripe = loadStripe("<>"); ``` ## Initialiser Checkout [Côté client] #### HTML + JS Appelez [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) en transmettant `clientSecret`. `initCheckoutElementsSdk` renvoie un objet [Paiement](https://docs.stripe.com/js/custom_checkout) qui contient les données de la session Paiement et les méthodes pour le mettre à jour. Consultez les paramètres `total` et`lineItems` de[actions.getSession()](https://docs.stripe.com/js/custom_checkout/session), et affichez-les dans votre interface utilisateur. Cela vous permet d’activer de nouvelles fonctionnalités avec un minimum de modifications de code. Par exemple, l’ajout de [prix manuels en devises](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) ne nécessite aucune modification de l’interface utilisateur si vous affichez le`total`. ```html
``` ```javascript const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const session = loadActionsResult.actions.getSession(); const checkoutContainer = document.getElementById('checkout-container'); checkoutContainer.append(JSON.stringify(session.lineItems, null, 2)); checkoutContainer.append(document.createElement('br')); checkoutContainer.append(`Total: ${session.total.total.amount}`); } ``` #### React Clôturez votre inscription avec le composant [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), en transmettant `clientSecret` et l’instance `stripe`. ```jsx import React from 'react'; import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; import CheckoutForm from './CheckoutForm'; const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const App = () => { return ( ); }; export default App; ``` Accédez à l’objet [Checkout](https://docs.stripe.com/js/custom_checkout) dans votre composant du formulaire de paiement en utilisant le point d’ancrage`useCheckoutElements()`. L’objet`Checkout` contient les données de la session Checkout et les méthodes pour les mettre à jour. Consultez les paramètres `total` et`lineItems` de l’objet`Checkout` et affichez-les dans votre interface utilisateur. Cela permet d’activer des fonctionnalités avec un minimum de modifications de code. Par exemple, l’ajout de [prix manuels en devises](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) ne nécessite aucune modification de l’interface utilisateur si vous affichez le `total`. ```jsx import React from 'react'; import {useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckoutElements(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount}
); }; ``` ## Collecter l'adresse courriel du client [Côté client] #### HTML + JS Vous devez fournir une adresse de courriel valide lorsque vous effectuez une session de paiement. Utilisez le [composant Element Contact Details](https://docs.stripe.com/js/custom_checkout/create_contact_details_element) pour collecter l’adresse courriel de votre client. Il gère pour vous la collecte et la validation des adresses courriel, et aide les clients à se connecter à Link. Vous pouvez également : - Transmettez [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (pour les clients représentés sous forme d’objets `Account` configurés par le client) ou [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (pour les clients représentés sous forme d’objets `Customer`) lors de la création de la session Checkout. Stripe valide les adresses courriel fournies de cette manière. - Ces champs préremplissent la session avec une adresse courriel que les clients ne peuvent pas modifier sur la page de paiement. Si vous souhaitez préremplir la session avec une adresse de courriel modifiable, utilisez [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) lors de l’initialisation de la page de paiement. - Transmettez une adresse courriel que vous avez déjà validée dans [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) ou [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm). ```html
``` ```javascript const contactDetailsElement = checkout.createContactDetailsElement(); contactDetailsElement.mount("#contact-details-element"); ``` #### React Vous devez fournir une adresse de courriel valide lorsque vous effectuez une session de paiement. Utilisez le [composant Element Contact Details](https://docs.stripe.com/js/react_stripe_js/checkout/contact_details_element) pour collecter l’adresse courriel de votre client. Il gère pour vous la collecte et la validation des adresses courriel, et aide les clients à se connecter à Link. Vous pouvez également : - Transmettez [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (pour les clients représentés sous forme d’objets `Account` configurés par le client) ou [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (pour les clients représentés sous forme d’objets `Customer`) lors de la création de la session Checkout. Stripe valide les adresses courriel fournies de cette manière. - Ces champs préremplissent la session avec une adresse courriel que les clients ne peuvent pas modifier sur la page de paiement. Si vous souhaitez préremplir la session avec une adresse de courriel modifiable, utilisez [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) lors de l’initialisation de la page de paiement. - Transmettez une adresse courriel que vous avez déjà validée dans [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) ou [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm). ```jsx import {ContactDetailsElement} from '@stripe/react-stripe-js/checkout'; // Inside your CheckoutForm component: ``` ## Collectez les informations de paiement [Côté client] Collectez les informations de paiement du 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 simplifie la collecte des informations de paiement pour divers modes de paiement. Le Payment Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Évitez de placer le Payment Element dans une autre balise iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour obtenir la confirmation du paiement. Si vous choisissez d’utiliser un iframe et souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de iframe doit être défini sur égal à `"payment *"`. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par`https://` rather plutôt que `http://` for. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de [l’activer](https://docs.stripe.com/security/guide.md#tls) lorsque tout est prêt pour accepter des paiements réels. #### HTML + JS Tout d’abord, créez un élément DOM de conteneur pour monter le [Payment Element](https://docs.stripe.com/payments/payment-element.md). Créez ensuite une instance du `Payment Element` à l’aide de [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) et montez-la en faisant appel à [element.mount](https://docs.stripe.com/js/element/mount), en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur. ```html
``` ```javascript const paymentElement = checkout.createPaymentElement(); paymentElement.mount('#payment-element'); ``` Consultez la [documentation Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) pour voir les options prises en charge. Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) de tous les composants Elements en transmettant [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) lors de l’initialisation de Checkout sur l’application frontale. #### React Installez le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md) dans le composant [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ```jsx import React from 'react';import {PaymentElement, useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckoutElements(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount} ); }; export default CheckoutForm; ``` Consultez la [documentation Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) pour voir les options prises en charge. Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) des composants Element en transmettant [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) au [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ## Envoyer le paiement [Côté client] #### HTML + JS Lancez un bouton **Payer** qui appelle la [confirmation](https://docs.stripe.com/js/custom_checkout/confirm) de l’instance `Checkout` pour envoyer le paiement. ```html
``` ```js const checkout = stripe.initCheckoutElementsSdk({clientSecret}); checkout.on('change', (session) => { document.getElementById('pay-button').disabled = !session.canConfirm; }); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const button = document.getElementById('pay-button'); const errors = document.getElementById('confirm-errors'); button.addEventListener('click', () => { // Clear any validation errors errors.textContent = ''; actions.confirm().then((result) => { if (result.type === 'error') { errors.textContent = result.error.message; } }); }); } ``` #### React Lancez un bouton **Payer** qui appelle la [confirmation](https://docs.stripe.com/js/custom_checkout/confirm) de [l’instance CheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) pour envoyer le paiement. ```jsx import React from 'react'; import {useCheckoutElements} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckoutElements(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); if (checkoutState.type !== "success") { return null; } const handleClick = () => { setLoading(true);checkoutState.checkout.confirm().then((result) => { if (result.type === 'error') { setError(result.error) } setLoading(false); }) }; return (
{error &&
{error.message}
}
) }; export default PayButton; ``` ## Testez votre intégration 1. Accédez à votre page de paiement. 2. Remplissez les informations de paiement à l’aide d’un moyen de paiement figurant dans le tableau suivant. Pour les paiements par carte : - Saisissez une date ultérieure pour l’expiration de la carte. - Saisissez un numéro à 3 chiffres du CVC. - Saisissez un code postal de facturation. 3. Envoyer le paiement à Stripe. 4. Accédez au Dashboard et cherchez le paiement sur la [page Transactions](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si votre paiement a été effectué, vous le verrez dans cette liste. 5. Cliquez sur votre paiement pour afficher davantage de détails, comme les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour [traiter la commande](https://docs.stripe.com/checkout/fulfillment.md). #### Cartes | Numéro de carte | Scénario | Comment tester | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Le paiement par carte est réussi et ne nécessite pas d’authentification. | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. | | 4000002500003155 | Le paiement par carte requiert une *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 ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. | | 4000000000009995 | La carte est refusée avec un code de refus de type `insufficient_funds`. | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. | | 6205500000000000004 | Le numéro de carte UnionPay a une longueur variable de 13 à 19 chiffres. | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. | #### Portefeuilles | Moyen de paiement | Scénario | Comment tester | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Le montant dû est réglé par un mode de paiement avec redirection et à [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Choisissez un moyen de paiement avec redirection, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Finaliser le paiement test** sur la page de redirection. | #### Redirections vers l'institution financière | Moyen de paiement | Scénario | Comment tester | | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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` et BSB `000000`. Le PaymentIntent confirmé passe initialement à `processing`, puis passe à l’état de `succeeded` 3 minutes plus tard. | | Prélèvement automatique BECS | Le paiement de votre client échoue avec le code `account_closed`. | Remplissez le formulaire à l’aide du numéro de compte `111111113` et BSB `000000`. | | Bancontact, EPS, iDEAL, et Przelewy24 | Votre client ne parvient pas à s’authentifier sur la page de redirection en utilisant un moyen de paiement avec redirection et à notification immédiate. | Choisissez un moyen de paiement avec redirection, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Faire échouer le paiement test** sur la page de redirection. | | Pay by Bank | Le montant dû est réglé par un mode de paiement avec redirection et à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Choisissez le moyen de paiement, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Finaliser le paiement test** sur la page qui s’affiche. | | Pay by Bank | Votre client ne parvient pas à s’authentifier sur la page de redirection en utilisant un moyen de paiement avec redirection et à notification différée. | Choisissez le moyen de paiement, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Faire échouer le paiement test** sur la page qui s’affiche. | | BLIK | Les paiements BLIK échouent de différentes manières : des échecs immédiats (par exemple, le code est expiré ou non valide), des erreurs retardées (refus de la banque) ou des dépassements de délai (le client n’a pas répondu à temps). | Utilisez des modèles de courriel pour [simuler les différents échecs.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Prélèvements bancaires | Moyen de paiement | Scénario | Comment tester | | ---------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Prélèvement automatique 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 processing, puis à l’état succeeded trois minutes plus tard. | | Prélèvement automatique SEPA | L’état du PaymentIntent de votre client passe de `processing` à `requires_payment_method`. | Remplissez le formulaire en utilisant le numéro de compte `AT861904300235473202`. | #### Bons d'achat | Moyen de paiement | Scénario | Comment tester | | ----------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Votre client paie avec un bon d’achat Boleto ou OXXO. | Sélectionnez Boleto ou OXXO comme moyen de paiement, puis envoyez le paiement. Fermez la boîte de dialogue qui s’affiche. | Consultez la section [Test](https://docs.stripe.com/testing.md) pour obtenir des informations supplémentaires sur la manière de tester votre intégration. ## Optional: Créer des produits et des prix Avant de créer une session de paiement, vous pouvez créer des *Produits* (Products represent what your business sells—whether that's a good or a service) et des *Prix* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) à l’avance. Utilisez des produits pour représenter différents biens physiques ou niveaux de service, et des *Prix* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) pour représenter le prix de chaque produit. Vous pouvez [configurer votre session de paiement](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) pour accepter des pourboires et des dons, ou vendre des produits et services à prix libre. Par exemple, vous pouvez créer un T-shirt en tant que produit au prix de 20 USD. Cela vous permet de mettre à jour et d’ajouter des prix sans avoir à modifier les détails de vos produits sous-jacents. Vous pouvez créer des produits et des prix avec le Dashboard ou l’API Stripe. En savoir plus sur [le fonctionnement des produits et des tarifs](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API L’API ne nécessite que d’un attribut `name` pour créer un [produit](https://docs.stripe.com/api/products.md). Checkout affiche les paramètres `name`, `description` et `images` du produit que vous fournissez. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` Ensuite, créez un objet [Price](https://docs.stripe.com/api/prices.md) pour définir le montant à débiter pour votre produit. Cela inclut le coût du produit et la devise à utiliser. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d "product={{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Copiez en mode production les produits créés en bac à sable afin de ne pas avoir à les recréer. Dans la vue détaillée du produit dans le Dashboard, cliquez sur **Copier en mode production** dans le coin supérieur droit. Vous pouvez copier plusieurs fois le même produit de bac à sable vers le mode production. Chaque copie crée un produit distinct en mise en production, et les mises à jour ultérieures du produit de bac à sable ne s’appliquent pas aux copies existantes en mode production. Assurez-vous que vous êtes dans un bac à sable en cliquant sur **Bacs à sable** dans le sélecteur de compte du Dashboard. Ensuite, déterminez les articles à vendre. Pour créer un nouveau produit et un nouveau tarif : - Accédez à la section [Produits](https://dashboard.stripe.com/test/products) du Dashboard. - Cliquez sur **Ajouter un produit**. - Sélectionnez **Une fois** lors de la définition du prix. Checkout affiche le nom, la description et les images du produit que vous fournissez. Chaque prix que vous créez dispose d’un ID. Lorsque vous créez une session Checkout, faites référence à l’ID du prix et à la quantité. Si vous vendez dans plusieurs devises, affichez votre prix *multi-devise* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Checkout [détermine automatiquement la devise locale du client](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) et présente cette devise si le prix le prend en charge. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=elements \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Remplir automatiquement les données du client [Côté serveur] Si vous avez déjà recueilli l’adresse courriel de votre client et que vous souhaitez la faire remplir automatiquement dans la session Checkout, transmettez le paramètre [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) lors de la création de la session. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode "customer_email=customer@example.com" \ -d ui_mode=elements \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Enregistrer les informations du moyen de paiement Découvrez comment [accepter un paiement et enregistrer les informations de paiement de votre client ](https://docs.stripe.com/payments/save-during-payment.md) pour de futurs achats. ## Optional: Écouter les modifications apportées à la session Checkout ### Écouter les modifications apportées à la session Checkout Vous pouvez écouter les modifications apportées à la [session Checkout](https://docs.stripe.com/api/checkout/sessions.md) au moyen d’un écouteur d’événements ajouté sur l’événement `change` avec [checkout.on](https://docs.stripe.com/js/custom_checkout/change_event). #### HTML + JS ```javascript checkout = stripe.initCheckoutElementsSdk({ clientSecret: promise, elementsOptions: { appearance }, }); checkout.on('change', (session) => { // Handle changes to the checkout session }); ``` #### React ```jsx import React from 'react'; import { useCheckoutElements } from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckoutElements(); if (checkoutState.type === 'success') { checkoutState.checkout.on('change', (session) => { // Handle changes to the checkout session }); } }; ``` ## Optional: Recueillir les adresses de facturation et de livraison ## Recueillir une adresse de facturation Par défaut, une session Checkout recueille les informations de facturation minimales requises pour le paiement au moyen du Payment Element. ### Utilisation du composant Billing Address Element Vous pouvez recueillir des adresses de facturation complètes à l’aide du composant Billing Address Element. Tout d’abord, transmettez [billing_address_collection=required](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) lors de la création de la session Checkout. #### HTML + JS Créez un élément DOM de conteneur pour monter le composant Billing Address Element. Créez ensuite une instance du composant Billing Address Element à l’aide de [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) et montez-la en faisant appel à [element.mount](https://docs.stripe.com/js/element/mount), en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur. ```html
``` ```javascript const billingAddressElement = checkout.createBillingAddressElement(); billingAddressElement.mount('#billing-address'); ``` Le composant Billing Address Element prend en charge les propriétés suivantes : - [personnes-ressources](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [affichage](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) #### React Installez le composant `BillingAddressElement` dans le composant `CheckoutElementsProvider`. ```jsx import React from 'react'; import {BillingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
) }; ``` Le composant Billing Address Element prend en charge les propriétés suivantes : - [personnes-ressources](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [affichage](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) ### Utilisation d’un formulaire personnalisé Vous pouvez créer votre propre formulaire pour recueillir les adresses de facturation. - Si votre page de paiement comporte une étape de collecte d’adresse distincte avant la confirmation, appelez [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address)lorsque votre client envoie l’adresse. - Vous pouvez également soumettre l’adresse lorsque votre client clique sur le bouton « Payer » et transmettre [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) à [confirmer](https://docs.stripe.com/js/custom_checkout/confirm). ### Recueillir des adresses de facturation partielles Pour recueillir des adresses de facturation partielles, telles que le pays et le code postal, transmettez [billing_address_collection=auto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection). Lors de la collecte d’adresses de facturation partielles, vous devez [recueillir les adresses manuellement](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). Par défaut, le Payment Element recueille automatiquement les informations de facturation minimales requises pour le paiement. Pour éviter la double collecte des informations de facturation, transmettez [fields.billingDetails=never](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) lors de la création du Payment Element. Si vous avez l’intention de recueillir uniquement un sous-ensemble d’informations de facturation (telles que le nom du client), transmettez uniquement `never` pour les champs que vous avez l’intention de collecter vous-même. ## Recueillir une adresse de livraison Pour recueillir l’adresse de livraison d’un client, transmettez le paramètre [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) lors de la création de la session Checkout. Lorsque vous obtenez une adresse de livraison, vous devez également préciser les pays vers lesquels vous souhaitez autoriser la livraison. Configurez la propriété [allowed_countries](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection-allowed_countries) avec un tableau de [codes pays ISO à deux lettres](https://www.nationsonline.org/oneworld/country_code_list.htm). ### Comment utiliser le composant Shipping Address Element Vous pouvez recueillir des adresses de livraison complètes à l’aide du composant Shipping Address Element. #### HTML + JS Créez un élément DOM de conteneur pour monter le composant Shipping Address Element. Créez ensuite une instance du Shipping Address Element à l’aide de [checkout.createShippingAddressElement](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element) et montez-la en appelant [element.mount](https://docs.stripe.com/js/element/mount), en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur. ```html
``` ```javascript const shippingAddressElement = checkout.createShippingAddressElement(); shippingAddressElement.mount('#shipping-address'); ``` Le composant Shipping Address Element prend en charge les options suivantes : - [personnes-ressources](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [affichage](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) #### React Installez le composant `ShippingAddressElement` dans le composant `CheckoutElementsProvider`. ```jsx import React from 'react'; import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
) }; ``` Le composant Shipping Address Element prend en charge les propriétés suivantes : - [personnes-ressources](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [affichage](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) ### Écouter les modifications apportées à la session Checkout Vous pouvez écouter les modifications apportées à la [session Checkout](https://docs.stripe.com/api/checkout/sessions.md) au moyen d’un écouteur d’événements pour gérer les changements liés à l’adresse. #### HTML + JS Utilisez l’[objet Session](https://docs.stripe.com/js/custom_checkout/session_object) pour afficher le montant de la livraison dans votre formulaire de paiement. ```html

Totals

``` ```javascript const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const subtotal = document.getElementById('subtotal'); const shipping = document.getElementById('shipping'); const total = document.getElementById('total'); checkout.on('change', (session) => { subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`; shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`; total.textContent = `Total: ${session.total.total.amount}`; }); ``` #### React Utilisez [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) pour afficher les frais d’expédition dans votre formulaire de paiement. ```jsx import React from 'react'; import {useCheckoutElements, ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckoutElements(); if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (

Checkout Summary

{checkoutState.type === 'success' && ( <> 
              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}

Totals

              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}
)}
) }; ``` ### Synchroniser les adresses de facturation et de livraison Lorsque vous utilisez à la fois un composant Element Billing Address et un composant Element Adresse de livraison, vous pouvez afficher une case à cocher qui permet aux clients de synchroniser leurs adresses Billing et de livraison. #### HTML + JS Passez l’option [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) dans `elementsOptions` lors de l’initialisation du paiement pour configurer le composant Element Address qui affiche la case à cocher. ```javascript const checkout = stripe.initCheckoutElementsSdk({ clientSecret, elementsOptions: { syncAddressCheckbox: 'shipping', }, }); ``` #### React Transmettez l’option [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) dans `elementsOptions` au `CheckoutElementsProvider` pour configurer le composant Element Address qui affiche la case à cocher. ```jsx promise, elementsOptions: { syncAddressCheckbox: 'shipping', }, }} > ``` Définissez la valeur sur `'Billing'` ou `'shipping'` pour choisir le composant Element Address qui affiche la case à cocher. Définissez-la sur `'none'` pour masquer la case à cocher ou laissez ce champ vide pour utiliser la valeur par défaut (`'billing'`). ### Utiliser un formulaire personnalisé Vous pouvez créer votre propre formulaire pour recueillir les adresses de livraison. - Si votre page de paiement comporte une étape de collecte d’adresse distincte avant la confirmation, appelez [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) lorsque votre client envoie l’adresse. - Sinon, vous pouvez soumettre l’adresse lorsque votre client clique sur le bouton « Payer » et transmettre [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) à [confirmer](https://docs.stripe.com/js/custom_checkout/confirm). ## Optional: Séparer l'autorisation et la capture [Côté serveur] Stripe prend en charge les paiements par carte en deux étapes, ce qui vous permet d’abord d’autoriser une carte, puis de capturer les fonds plus tard. Lorsque Stripe autorise un paiement, l’émetteur de la carte garantit les fonds et place une retenue correspondant au montant du paiement sur la carte du client. Vous disposez ensuite d’un certain délai pour capturer les fonds, [selon la carte](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations). Si vous ne capturez pas le paiement avant l’expiration de l’autorisation, le paiement est annulé et l’émetteur libère les fonds retenus. La séparation de l’autorisation et de la capture est utile si vous devez réaliser des actions supplémentaire entre la confirmation de la solvabilité du client et la collecte du paiement. Par exemple, si vous vendez des articles dont le stock est limité, vous pouvez devoir vérifier que l’article acheté par votre client avec Checkout est toujours disponible avant de capturer le paiement et de traiter la commande. Pour ce faire, procédez comme suit : 1. Confirmez que Stripe a autorisé le moyen de paiement du client. 2. Consultez votre système de gestion d’inventaire pour vous assurer que l’article est toujours disponible. 3. Mettez à jour votre système de gestion d’inventaire pour indiquer qu’un client a acheté l’article. 4. Capturez le paiement du client. 5. Indiquez au client si l’achat a réussi sur votre page de confirmation. Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) à `manual` lorsque vous créez la session Checkout. Ainsi, Stripe autorise uniquement le montant sur la carte du client. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_intent_data[capture_method]=manual" \ -d return_url={{RETURN_URL}} \ -d ui_mode=elements ``` Pour capturer un paiement non capturé, vous pouvez utiliser le [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) ou le point de terminaison de [capture](https://docs.stripe.com/api/payment_intents/capture.md). La capture de paiements par voie programmatique implique d’accéder au PaymentIntent créé lors de la session Checkout, que vous pouvez obtenir à l’aide de l’objet [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Gestion des comptes clients [Aucun codage requis] Laissez vos clients [gérer](https://docs.stripe.com/customer-management.md) leurs propres comptes en partageant un lien vers votre *portail client* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). Le portail client permet aux clients de se connecter avec leur adresse courriel pour gérer leurs abonnements, mettre à jour leurs modes de paiement et plus encore. ## Optional: Traitement des commandes Découvrez comment [recevoir une notification par voie programmatique](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) lorsqu’un client effectue un paiement. ## See also - [Ajouter des rabais pour les paiements uniques](https://docs.stripe.com/payments/advanced/discounts.md) - [Collecter les taxes](https://docs.stripe.com/tax/checkout/elements.md) - [Activer les quantités ajustables des postes de facture](https://docs.stripe.com/payments/advanced/adjustable-quantity.md) - [Ajouter des boutons en un clic](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components) - [Exemple de projet sur GitHub](https://github.com/stripe-samples/accept-a-payment/tree/main/elements-with-checkout-sessions)