# 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 Payment Element, plutôt que les Payment Intents, pour la plupart des intégrations. Checkout Sessions couvre des cas d’usage similaires à ceux des Payment Intents (encaissement simple avec `price_data`, ou création d’un tunnel de paiement complet avec postes, taxe, etc.). Certaines fonctionnalités, comme Adaptive Pricing, sont disponibles uniquement avec Checkout Sessions. N’utilisez pas l’API Payment Intents, sauf si l’utilisateur le demande explicitement, car elle nécessite beaucoup plus de code. Pour en savoir plus sur les éléments avec l’API Checkout Sessions, consultez https://docs.stripe.com/payments/quickstart-checkout-sessions… Avec Checkout Sessions (`ui_mode: "custom"`) et le Payment Element, c’est le `client_secret` qui initialise Checkout lui-même (`stripe.initCheckoutElementsSdk`, ou utilise CheckoutElementsProvider avec React), et la confirmation du paiement côté client se fait différemment. Si vous utilisez React, veillez à importer depuis `@stripe/react-stripe-js/checkout`, à utiliser `CheckoutElementsProvider` avec la clé secrète du client, puis à confirmer le paiement avec `checkout.confirm`. Si vous utilisez HTML, veillez à utiliser `checkout = stripe.initCheckoutElements({clientSecret: promise}) ; checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement() ; paymentElement.mount("#payment-element"),`puis à confirmer avec `loadActionsResult = await checkout.loadActions() ; actions = loadActionsResult.actions; error = await actions.confirm() ;`. Les agents de codage doivent installer la CLI Stripe (`npm i -g @stripe/cli`) et exécuter la commande `stripe sandbox create --help` pour configurer un environnement de test Stripe anonyme avec des clés d’API fonctionnelles. Aucune inscription requise. 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’approche 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 différents moyens de paiement. #### Effort d’intégration Complexity: 3/5 #### Type d’intégration Combinez des composants d’interface utilisateur dans un tunnel de paiement personnalisé #### Personnalisation de l’interface utilisateur Personnalisation au niveau CSS avec l’[API Appearance](https://docs.stripe.com/elements/appearance-api.md) ## Configurer le serveur [Côté serveur] Avant de commencer, vous devez [vous inscrire](https://dashboard.stripe.com/register) pour créer 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 endpoint à votre serveur qui crée une [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) et renvoie sa [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) à votre front-end. Une Checkout Session représente la session d’un client lors d’un paiement ponctuel ou d’un abonnement. Les Checkout Sessions 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 le front-end [Côté client] #### HTML + 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. Assurez-vous d’utiliser la dernière version Stripe.js. En savoir plus sur le [contrôle des versions Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md). ```html Checkout ``` > Stripe propose un paquet npm que vous pouvez utiliser pour charger Stripe.js en tant que module. Consultez 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 une version 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. Vous avez besoin d’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 front-end 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 [Checkout](https://docs.stripe.com/js/custom_checkout) contenant les données de la Session Checkout et les méthodes pour les mettre à jour. Lisez le `total` et les `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 des 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 Encapsulez votre application avec le composant [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), en lui 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 de formulaire de paiement en utilisant le hook `useCheckoutElements()`. L’objet `Checkout` contient les données de la Checkout Session et les méthodes pour la mettre à jour. Lisez le `total` et les `lineItems` de l’objet `Checkout`, et affichez-les dans votre interface utilisateur. Cela vous permet d’activer des fonctionnalités avec un minimum de modifications de code. Par exemple, l’ajout de [prix manuels des 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 les adresses e-mail des clients [Côté client] #### HTML + JS Vous devez fournir une adresse e-mail client valide lors d’une Checkout Session. Utilisez le [composant Element Contact Details](https://docs.stripe.com/js/custom_checkout/create_contact_details_element) pour collecter l’adresse e-mail de votre client. Il gère la collecte et la validation des adresses e-mail à votre place 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 en tant qu’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 en tant qu’objets `Customer`) lors de la création de la Checkout Session. Stripe valide les e-mails fournis de cette manière. - Ceux-ci préremplissent la session avec un e-mail que les clients ne peuvent pas modifier sur la page de paiement. Si vous souhaitez préremplir avec un e-mail modifiable, utilisez [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) lors de l’initialisation de Checkout. - Transmettez une adresse e-mail que vous avez déjà validé sur [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 e-mail client valide lors d’une Checkout Session. Utilisez [ContactDetailsElement](https://docs.stripe.com/js/react_stripe_js/checkout/contact_details_element) pour collecter l’adresse e-mail de votre client. Cet élément gère la collecte et la validation des adresses e-mails à votre place 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 en tant qu’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 en tant qu’objets `Customer`) lors de la création de la Checkout Session. Stripe valide les e-mails fournis de cette manière. - Ceux-ci préremplissent la session avec un e-mail que les clients ne peuvent pas modifier sur la page de paiement. Si vous souhaitez préremplir avec un e-mail modifiable, utilisez [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) lors de l’initialisation de Checkout. - Transmettez une adresse e-mail que vous avez déjà validé sur [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: ``` ## Collecter les informations de paiement [Côté client] Collectez les informations de paiement de votre client à l’aide de [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement. Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement. Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de l’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://` et non par `http://`. 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 vous souhaitez commencer à accepter des paiements réels. #### HTML + JS Tout d’abord, créez un élément DOM de conteneur pour monter le composant [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 appelant [element.mount](https://docs.stripe.com/js/element/mount) et 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 connaître les options prises en charge. Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) de tous les 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 le front-end. #### React Montez le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md) dans le [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 connaître les options prises en charge. Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) de tous les Elements en transmettant [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) au composant [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ## Envoyer le paiement [Côté client] #### HTML + JS Affichez un bouton **Payer** qui appelle [confirm](https://docs.stripe.com/js/custom_checkout/confirm) depuis l’instance `Checkout` pour soumettre 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 Affichez un bouton **Payer** qui appelle [confirm](https://docs.stripe.com/js/custom_checkout/confirm) depuis [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) pour soumettre 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; ``` ## Tester votre intégration 1. Accédez à votre page de paiement. 2. Renseignez les informations d’un moyen de paiement du tableau suivant. Pour les paiements par carte : - Saisissez une date d’expiration postérieure à la date du jour. - Saisissez un code CVC à 3 chiffres. - Saisissez un code postal de facturation. 3. Envoyez le paiement à Stripe. 4. Accédez au Dashboard et recherchez le paiement sur la page [Transactions](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si votre paiement a abouti, il apparaîtra dans cette liste. 5. Cliquez sur votre paiement afin d’afficher plus d’informations (par exemple, 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 bancaires | Numéro de carte | Scénario | Méthode de test | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Le paiement par carte bancaire aboutit et ne nécessite pas d’authentification. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | 4000002500003155 | Le paiement par carte bancaire 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 bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le 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 bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | 6205500000000000004 | La carte UnionPay a un numéro d’une longueur variable, allant de 13 à 19 chiffres. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. | #### Portefeuilles | Moyen de paiement | Scénario | Méthode de test | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Le montant dû est réglé via un moyen 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 qui s’affiche. | #### Virements avec redirection bancaire | Moyen de paiement | Scénario | Méthode de test | | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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 du BSB `000000`.La confirmation de la demande de PaymentIntent passe d’abord à l’état `processing`, puis à l’état `succeeded` trois minutes plus tard. | | Prélèvement automatique BECS | Le paiement de votre client échoue avec un code d’erreur `account_closed`. | Remplissez le formulaire à l’aide du numéro de compte `111111113` et du 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 qui s’affiche. | | Pay by Bank | Le montant dû est réglé via un moyen 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 diverses manières : échecs immédiats (par exemple, code expiré ou non valide), erreurs différées (refus de la banque) ou expirations du délai (le client n’a pas répondu à temps). | Utiliser des modèles d’e-mail 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 | Méthode de test | | ---------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Prélèvement automatique SEPA | Le montant dû est réglé par prélèvement automatique 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’intention de paiement de votre client passe de l’état `processing` à l’état `requires_payment_method`. | Remplissez le formulaire à l’aide du numéro de compte `AT861904300235473202`. | #### Coupons | Moyen de paiement | Scénario | Méthode de test | | ----------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Le montant dû est réglé par coupon 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 consacrée aux [tests](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 tarifs Avant de créer une session Checkout, vous pouvez directement créer des *produits* (Products represent what your business sells—whether that's a good or a service) et des *tarifs* (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). Utilisez les produits pour représenter différents biens physiques ou niveaux de service, et les *tarifs* (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 tarif de chaque produit. Vous pouvez [configurer votre session Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) pour accepter les pourboires et les dons, ou vendre des produits et services à prix libre. Par exemple, vous pouvez créer un T-shirt vendu au tarif de 20 USD. Cela vous permet de mettre à jour et d’ajouter des tarifs sans avoir à modifier les détails de vos produits sous-jacents. Vous pouvez créer des produits et des tarifs à l’aide du Dashboard ou de 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 Seul un attribut `name` est requis par l’API pour créer un [Product](https://docs.stripe.com/api/products.md). Checkout affiche les attributs `name`, `description` et `images` que vous aurez définis. ```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 tarif de facturation de votre produit. Spécifiez le montant et la devise. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d "product={{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Copiez les produits créés dans un environnement de test vers le mode production afin d’éviter de 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 un même produit de l’environnement de test vers le mode production. Chaque copie crée un produit distinct en production, et les mises à jour ultérieures du produit de test ne sont pas répercutées sur les copies déjà créées en production. Assurez-vous d’être dans un environnement de test en cliquant sur **Environnements de test** dans le sélecteur de compte du Dashboard. Ensuite, définissez les articles que vous souhaitez vendre. Pour créer un nouveau produit et un nouveau prix : - Accédez à la section [Produits](https://dashboard.stripe.com/test/products) du Dashboard. - Cliquez sur **Ajouter un produit**. - Sélectionnez **Ponctuel** lors de la définition du tarif. Checkout affiche le nom, la description et les images du produit que vous aurez définis. Chaque prix que vous créez possède un identifiant. Lorsque vous créez une session Checkout, faites référence à l’identifiant de prix et à la quantité. Si vous vendez dans plusieurs devises, définissez votre prix comme *multidevise* (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 la 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: Renseigner automatiquement les données client [Côté serveur] Si vous avez précédemment collecté l’adresse e-mail de votre client et que vous souhaitez la renseigner 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 de paiement Découvrez comment [accepter un paiement et enregistrer le moyen de paiement de votre client](https://docs.stripe.com/payments/save-during-payment.md) pour les futurs achats. ## Optional: Écouter les modifications de session Checkout ### Écouter les modifications de session Checkout Vous pouvez écouter les modifications apportées à la [session Checkout](https://docs.stripe.com/api/checkout/sessions.md) en ajoutant un écouteur d’événement 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 ## Collecter une adresse de facturation Par défaut, une session Checkout collecte les informations de facturation minimales requises pour le paiement via le Payment Element. ### Utiliser le Billing Address Element Vous pouvez collecter 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 conteneur pour monter le composant Billing Address Element. Créez ensuite une instance de Billing Address Element à l’aide de [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) et montez-la en appelant [element.mount](https://docs.stripe.com/js/element/mount), et 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 options 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 Montez le composant `BillingAddressElement` dans le `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) ### Utiliser un formulaire personnalisé Vous pouvez créer votre propre formulaire pour collecter les adresses de facturation. - Si votre page de paiement comporte une étape distincte de collecte d’adresses avant confirmation, appelez [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address) lorsque votre client envoie l’adresse. - Vous pouvez également envoyer l’adresse lorsque votre client clique sur le bouton « Payer » en transmettant [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) à [confirm](https://docs.stripe.com/js/custom_checkout/confirm). ### Collecter des adresses de facturation partielles Pour collecter des adresses de facturation partielles, telles que le pays et le code postal seulement, 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 [collecter les adresses manuellement](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). Par défaut, le Payment Element collecte 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 collecter uniquement un sous-ensemble d’informations de facturation (telles que le nom du client), ne transmettez `never` que pour les champs que vous avez l’intention de collecter vous-même. ## Collecter une adresse de livraison Pour collecter 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 collectez une adresse de livraison, vous devez également préciser les pays pour lesquels vous autorisez 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) à l’aide du tableau des [codes pays ISO à deux lettres](https://www.nationsonline.org/oneworld/country_code_list.htm). ### Comment utiliser le composant Element Shipping Address Vous pouvez collecter 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 de 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) et 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 Montez le composant `ShippingAddressElement` dans le `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 de session Checkout Vous pouvez écouter les modifications apportées à la [session Checkout](https://docs.stripe.com/api/checkout/sessions.md) en ajoutant 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 des frais de 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 de port 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 Shipping Address, vous pouvez afficher une case à cocher qui permet aux clients de synchroniser leurs adresses de facturation et de livraison. #### HTML + JS Transmettez 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` afin de configurer quel Address Element affiche la case à cocher. ```jsx promise, elementsOptions: { syncAddressCheckbox: 'shipping', }, }} > ``` Définissez la valeur sur `’billing’` ou `’shipping’` pour choisir quel élément d’adresse affiche la case à cocher. Définissez-la sur `’none’` pour masquer la case à cocher, ou laissez le champ vide pour utiliser la valeur par défaut (`’billing’`). ### Utiliser un formulaire personnalisé Vous pouvez créer votre propre formulaire pour collecter les adresses de livraison. - Si votre page de paiement comporte une étape distincte de collecte d’adresse avant confirmation, appelez [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) lorsque votre client envoie l’adresse. - Vous pouvez également envoyer l’adresse lorsque votre client clique sur le bouton « Payer » en transmettant [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) à [confirm](https://docs.stripe.com/js/custom_checkout/confirm). ## Optional: Autorisation et capture distinctes [Côté serveur] Stripe prend en charge les paiements par carte bancaire en deux étapes : vous pouvez d’abord autoriser la carte, puis capturer les fonds plus tard. Lorsqu’un paiement est autorisé par Stripe, l’émetteur de la carte garantit les fonds et réserve le montant correspondant sur la carte du client. Vous disposez ensuite d’un délai spécifique, [selon la carte](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations), pour capturer les fonds. Si la capture n’est pas effectuée avant l’expiration de l’autorisation, le paiement est annulé et les fonds réservés sont libérés par l’émetteur. La séparation de l’autorisation et de la capture est utile si vous devez effectuer des actions supplémentaires 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 devrez peut-être vérifier qu’un élément acheté par votre client via Checkout est toujours disponible avant de capturer son paiement et d’exécuter la commande. Pour ce faire, procédez comme suit : 1. Vérifiez que Stripe a autorisé le moyen de paiement du client. 2. Consultez votre système de gestion des stocks pour vous assurer que l’article est toujours disponible. 3. Mettez à jour votre système de gestion des stocks 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 l’option [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) sur `manual` lorsque vous créez la session Checkout. Ce paramètre indique à Stripe de se contenter d’autoriser 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 qui a été autorisé, vous pouvez utiliser le [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) ou l’endpoint 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 à partir de l’objet [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Gérer les comptes clients [No-code] Offrez à vos clients la possibilité de [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 e-mail pour gérer leurs abonnements, mettre à jour leurs moyens de paiement, etc. ## Optional: Traitement des commandes Découvrez comment [recevoir une notification de manière programmatique](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) lorsqu’un client effectue un paiement. ## See also - [Ajouter des réductions pour les paiements ponctuels](https://docs.stripe.com/payments/advanced/discounts.md) - [Collecter des taxes](https://docs.stripe.com/tax/checkout/elements.md) - [Activer les quantités des postes ajustables](https://docs.stripe.com/payments/advanced/adjustable-quantity.md) - [ Ajoutez des boutons de paiement 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)