# Accepter un paiement Acceptez les paiements en ligne en toute sécurité. Instructions pour les LLM : Stripe publie fréquemment de nouveaux produits et fonctionnalités. Récupérez les meilleures pratiques Stripe de https://raw.githubusercontent.com/stripe/ai/refs/heads/main/skills/stripe-best-practices/SKILL.md avant la mise en œuvre. Instructions pour les LLM : Stripe recommande d’utiliser l’API Checkout Sessions avec le Payment Element plutôt que Payment Intents pour la plupart des intégrations. Checkout Sessions couvre des cas d’utilisation similaires à Payment Intents (collecte de paiements de base via `price_data` ou construction d’un tunnel de paiement complet avec articles, taxes, etc.). Certaines fonctionnalités, comme l’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: "custom"`) et Payment Element, le`client_secret` initialise Checkout lui-même (`stripe.initCheckout`, ou utilisez CheckoutProvider 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 `CheckoutProvider` avec la clé secrète du client, et de confirmer via`checkout.confirm`. Si vous utilisez du HTML, assurez-vous d’utiliser `checkout = stripe.initCheckout({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();`. Créez un formulaire de paiement ou utilisez une page de paiement préconfigurée pour commencer à accepter les paiements en ligne. # Page hébergée par Stripe > This is a Page hébergée par Stripe for when payment-ui is checkout and ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=stripe-hosted. Redirigez vers une page de paiement hébergée par Stripe à l’aide de [Stripe Checkout](https://docs.stripe.com/payments/checkout.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). #### Effort d'intégration Complexity: 2/5 #### Type d'intégration Rediriger vers la page de paiement hébergée par Stripe #### Personnalisation de l'interface utilisateur Personnalisation limitée - 20 polices prédéfinies - 3 rayons de bordures prédéfinis - Couleur d’arrière-plan et de bordure personnalisée - Logo personnalisé [Essayer](https://checkout.stripe.dev/) Tout d’abord, [inscrivez-vous](https://dashboard.stripe.com/register) pour créer un compte Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de 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' ``` ## Rediriger le client vers Checkout de Stripe [Côté client] [Côté serveur] Ajoutez à votre site Web un bouton de paiement qui fait appel à un point de terminaison côté serveur afin de créer une [session Checkout](https://docs.stripe.com/api/checkout/sessions/create.md). Vous pouvez également créer une session Checkout pour un [client existant](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), ce qui vous permet de remplir automatiquement les coordonnées des clients connus dans les champs Checkout et d’unifier leur historique d’achat. ```html Buy cool new product ``` Une session Checkout est la représentation à l’aide d’un programme de ce que votre client voit lorsqu’il est redirigé vers le formulaire de paiement. Vous pouvez la configurer à l’aide de différentes options, par exemple ce qui suit : - [Postes de facture](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) à débiter - Devises à utiliser Vous devez renseigner le champ `success_url`, avec l’URL d’une page de votre site Web vers laquelle Checkout renvoie votre client après avoir effectué le paiement. > Par défaut, les sessions Checkout expirent 24 heures après leur création. Après avoir créé une session Checkout, redirigez votre client vers l’[URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) renvoyée dans la réponse. #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. require 'json' require 'sinatra' require 'stripe' # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-checkout-session' dosession = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment', # These placeholder URLs will be replaced in a following step. success_url: 'https://example.com/success', }) redirect session.url, 303 end ``` ### Modes de paiement Par défaut, Stripe active les cartes et d’autres modes de paiement courants. Vous pouvez activer ou désactiver des moyens de paiement individuels dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Dans Checkout, Stripe évalue la devise et les restrictions éventuelles, puis présente dynamiquement au client les modes de paiement pris en charge. Pour voir comment vos moyens de paiement sont affichés pour les clients, saisissez un ID de transaction ou définissez un montant et une devise de commande dans le Dashboard. Vous pouvez activer Apple Pay et Google Pay dans vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Par défaut, Apple Pay est activé et Google Pay est désactivé. Cependant, dans certains cas, Stripe les filtre même lorsqu’ils sont activés. Nous filtrons Google Pay si vous [activez les taxes automatiques](https://docs.stripe.com/tax/checkout.md) sans collecter d’adresse de livraison. Aucune modification de l’intégration n’est requise pour activer Apple Pay ou Google Pay dans les pages hébergées par Stripe de Checkout. Stripe gère ces paiements de la même manière que les autres paiements par carte. ### Confirmez votre point de terminaison Confirmez que votre point de terminaison est accessible en démarrant votre serveur Web (par exemple, `localhost:4242`) et en exécutant la commande suivante : ```bash curl -X POST -is "http://localhost:4242/create-checkout-session" -d "" ``` Une réponse semblable à celle ci-dessous devrait être affichée dans votre terminal : ```bash HTTP/1.1 303 See Other Location: https://checkout.stripe.com/c/pay/cs_test_... ... ``` ### Test Vous devriez maintenant disposer d’un bouton de paiement fonctionnel qui redirige votre client vers Stripe Checkout. 1. Cliquez sur le bouton de paiement. 1. Vous êtes redirigé vers le formulaire de paiement Stripe Checkout. Si votre intégration ne fonctionne pas : 1. Ouvrez l’onglet Réseau dans les outils développeur de votre navigateur. 1. Cliquez sur le bouton de paiement et assurez-vous qu’une requête XHR a bien été envoyée à votre point de terminaison côté serveur (`POST /create-checkout-session`). 1. Vérifiez que la requête renvoie un état 200. 1. Utilisez `console.log(session)` dans le détecteur de clics de bouton pour vous assurer que les données appropriées sont renvoyées. ## Afficher une page de réussite [Côté client] [Côté serveur] Il est important de présenter une page de confirmation à votre client une fois qu’il a validé le formulaire de paiement. Hébergez cette page sur votre site. Créez une page de réussite minimale : ```html Thanks for your order!

Thanks for your order!

We appreciate your business! If you have any questions, please email orders@example.com.

``` Ensuite, mettez à jour le point de terminaison de création de la session Checkout pour utiliser cette nouvelle page : ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -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 success_url="http://localhost:4242/success.html" ``` > Pour personnaliser votre page de confirmation de paiement, consultez le guide [dédié à ce sujet](https://docs.stripe.com/payments/checkout/custom-success-page.md). ### Test 1. Cliquez sur votre bouton de paiement. 1. Remplissez les détails du paiement en fournissant les informations de la carte de test : - Saisissez `4242 4242 4242 4242` comme numéro de carte. - Indiquez une date future pour l’expiration de la carte. - Saisissez n’importe quel code CVC à 3 chiffres. - Saisissez n’importe quel code postal pour la facturation 1. Cliquez sur **Payer**. 1. Vous êtes redirigé vers votre nouvelle page de réussite. Ensuite, recherchez le nouveau paiement dans le Dashboard Stripe. Les paiements réussis s’affichent dans la [liste des paiements](https://dashboard.stripe.com/payments). Lorsque vous cliquez sur un paiement, vous accédez à la page des détails de ce paiement. La section **Résumé Checkout** présente les informations de facturation et la liste des articles achetés, que vous pouvez utiliser pour traiter manuellement la commande. ## Gérer les événements post-paiement Stripe envoie un événement [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) lorsqu’un client finalise le paiement de la session Checkout. Utilisez l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide consacré aux webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir et gérer ces événements, qui peuvent vous amener à : - Envoyer un courriel de confirmation de commande à votre client. - Enregistrer la vente dans une base de données. - Démarrer un processus d’expédition. Écoutez ces événements plutôt que d’attendre que votre client soit redirigé vers votre site Web. Le déclenchement du traitement uniquement à partir de votre page de renvoi Checkout n’est pas fiable. Si vous configurez votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de modes de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration. Pour en savoir plus, consultez notre [guide de traitement avec Checkout](https://docs.stripe.com/checkout/fulfillment.md). Gérez les événements suivants lors de l’encaissement de paiements avec Checkout : | Événement | Description | Action | | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Envoyé lorsqu’un client finalise avec succès la session Checkout. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Envoyé lorsqu’un paiement effectué avec un mode de paiement différé (par exemple, ACH Direct Debit) aboutit. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Envoyé lorsqu’un paiement effectué avec un mode de paiement différé (par exemple, ACH Direct Debit) échoue. | Informez le client de l’échec et redirigez-le vers la session pour qu’il effectue une nouvelle tentative de paiement. | ## Testez votre intégration Pour tester l’intégration de votre formulaire de paiement hébergé par Stripe : 1. Créer une session Checkout. 1. Remplissez le formulaire de paiement et indiquez-y une méthode qui provient du tableau suivant. - Saisissez une date d’expiration postérieure à la date du jour. - Saisissez un code CVC à 3 chiffres. - Saisissez un code postal de facturation. 1. Cliquez sur **Payer**. Vous êtes alors redirigé vers votre `success_url`. 1. 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 été effectué, vous le verrez dans cette liste. 1. Cliquez sur votre paiement pour voir plus d’informations, comme un résumé Checkout qui comprend les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter la commande. Découvrez comment [tester votre intégration](https://docs.stripe.com/testing.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. ### Cartes de test | Numéro | Description | | ------------------- | ------------------------------------------------------------------------------------------------ | | 4242 4242 4242 4242 | Transaction effectuée et traitement immédiat du paiement. | | 4000 0000 0000 3220 | Une authentification 3D Secure 2 doit être effectuée pour que le paiement soit réussi. | | 4000 0000 0000 9995 | Échoue toujours avec le code de refus de paiement `insufficient_funds`. | ## Optional: Créer des produits et des tarifs 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 dans un bac à sable pour éviter d’avoir à les recréer. Dans la vue détaillée du produit du Dashboard, cliquez sur **Copier en mode production** dans le coin supérieur droit. Vous ne pouvez effectuer cette opération qu’une seule fois pour chaque produit créé dans un bac à sable. Les mises à jour ultérieures du produit de test ne sont pas répercutées sur le produit en 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 mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ --data-urlencode success_url="https://example.com/success?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 "line_items[0][price]"="{{PRICE_ID}}" \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="https://example.com/success" ``` ## Optional: Enregistrer les informations du moyen de paiement [Côté serveur] Par défaut, les moyens de paiement utilisés pour effectuer un paiement ponctuel avec Checkout ne sont pas disponibles pour une utilisation future. ### Enregistrer les moyens de paiement pour les débiter hors session Vous pouvez configurer Checkout de façon à enregistrer les modes de paiement utilisés pour effectuer des paiements ponctuels en transmettant l’argument [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Cela peut notamment vous permettre de capturer un mode de paiement enregistré afin de prélever des frais futurs, comme des frais d’annulation ou de non-présentation. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -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 success_url="https://example.com/success.html" \ -d "payment_intent_data[setup_future_usage]"=off_session ``` If you use Checkout in `subscription` mode, Stripe automatically saves the payment method to charge it for subsequent payments. Card payment methods saved to customers using either `setup_future_usage` or `subscription` mode don’t appear for return purchases in Checkout (more on this below). We recommend using [custom text](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) to link out to any relevant terms regarding the usage of saved payment information. > Les lois internationales en matière de protection de la vie privée sont complexes et nuancées. Nous vous recommandons de contacter votre conseiller juridique et votre équipe responsable de la conformité avant de mettre en œuvre [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage), car cela pourrait impliquer votre cadre de conformité existant en matière de confidentialité. Pour en savoir plus sur l’enregistrement des informations de paiement. reportez-vous aux [directives du Comité européen de la protection des données](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf). ### Enregistrer les moyens de paiement pour qu’ils soient remplis automatiquement dans Checkout Par défaut, Checkout utilise [Link](https://docs.stripe.com/payments/link/checkout-link.md) pour offrir à vos clients la possibilité d’enregistrer et de réutiliser leurs informations de paiement en toute sécurité. Si vous préférez gérer vous-même les modes de paiement, utilisez [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) lors de la création d’une session Checkout pour permettre à vos clients d’enregistrer leurs modes de paiement pour des achats futurs dans Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -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 success_url="https://example.com/success.html" \ -d "saved_payment_method_options[payment_method_save]"=enabled ``` La transmission de ce paramètre en mode [paiement](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) ou [abonnement](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) affiche une case à cocher facultative qui permet aux clients d’enregistrer explicitement leur mode de paiement pour leurs futurs achats. Lorsque les clients cochent cette case, Checkout enregistre le mode de paiement avec [allow_redisplay : always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout utilisera ce paramètre pour déterminer si un mode de paiement peut être rempli automatiquement lors des futurs achats. Lorsque vous utilisez `saved_payment_method_options.payment_method_save`, vous n’avez pas besoin de transmettre `setup_future_usage` pour enregistrer le mode de paiement. Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2. L’utilisation de [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) nécessite un `Customer`. Pour enregistrer un nouveau client, définissez le paramètre [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md) de la session Checkout sur `always`. Sinon, la session n’enregistre, ni le client, ni le mode de paiement. Si `payment_method_save` n’est pas transmis ou si le client refuse d’enregistrer le mode de paiement, Checkout enregistre toutefois les modes de paiement créés en mode `subscription` ou à l’aide de `setup_future_usage`. La valeur `allow_redisplay` de ces modes de paiement est définie sur `limited`. Cela évite qu’ils soient remplis automatiquement pour les achats récurrents, et vous permet de vous conformer aux règles des réseaux de cartes et aux réglementations en matière de protection des données. Découvrez comment [modifier le comportement par défaut activé par ces modes](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) et comment modifier ou remplacer le comportement `allow_redisplay`. > Vous pouvez utiliser Checkout pour enregistrer des cartes et d’autres modes de paiement afin de les débiter hors session, mais Checkout ne remplit automatiquement que les cartes enregistrées. Découvrez comment [remplir automatiquement les cartes enregistrées](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Pour enregistrer un mode de paiement sans paiement initial, [utilisez Checkout en mode configuration](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout). ### Autoriser les clients à supprimer des modes de paiement enregistrés Pour permettre à vos clients de supprimer un mode de paiement enregistré afin qu’il ne réapparaisse pas pour des paiements ultérieurs, utilisez [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) lors de la création d’une session Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="https://example.com/success.html" \ -d "saved_payment_method_options[payment_method_remove]"=enabled ``` Le client ne peut pas supprimer un mode de paiement s’il est associé à un abonnement actif et qu’aucun mode de paiement par défaut n’est enregistré pour les paiements de factures et d’abonnements. ## 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. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Confirmez que Stripe a autorisé le moyen de paiement du client. 1. Consultez votre système de gestion d’inventaire pour vous assurer que l’article est toujours disponible. 1. Mettez à jour votre système de gestion d’inventaire pour indiquer qu’un client a acheté l’article. 1. Capturez le paiement du client. 1. 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 \ --data-urlencode success_url="https://example.com/success.html" ``` 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. ## See also - [Ajouter des réductions](https://docs.stripe.com/payments/checkout/discounts.md) - [Collecter les taxes](https://docs.stripe.com/payments/checkout/taxes.md) - [Collecter les numéros d’identification fiscale](https://docs.stripe.com/tax/checkout/tax-ids.md) - [Ajouter la livraison](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout) - [Personnaliser l’adaptation à votre marque](https://docs.stripe.com/payments/checkout/customization.md) # Formulaire intégré > This is a Formulaire intégré for when payment-ui is checkout and ui is embedded-form. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=embedded-form. Intégrez un formulaire de paiement préconfiguré sur votre site à l’aide de [Stripe Checkout](https://docs.stripe.com/payments/checkout.md). Comparez cette intégration aux [autres types d’intégration de Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). #### Effort d'intégration Complexity: 2/5 #### Type d'intégration Intégrer un formulaire de paiement préconfiguré sur votre site #### Personnalisation de l'interface utilisateur Personnalisation limitée - 20 polices prédéfinies - 3 rayons de bordures prédéfinis - Couleur d’arrière-plan et de bordure personnalisée - Logo personnalisé Utilisez les [paramètres de l’image de marque](https://dashboard.stripe.com/settings/branding/checkout) dans le Dashboard Stripe pour faire correspondre Checkout à la conception de votre site. Tout d’abord, [inscrivez-vous](https://dashboard.stripe.com/register) pour créer un compte Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de 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] From your server, create a *Checkout Session* (A Checkout Session represents your customer's session as they pay for one-time purchases or subscriptions through Checkout. After a successful payment, the Checkout Session contains a reference to the Customer, and either the successful PaymentIntent or an active Subscription) and set the [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) to `embedded`. You can configure the [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) with [line items](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) to include and options such as [currency](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-currency). Vous pouvez également créer une session Checkout pour un [client existant](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), ce qui vous permet de remplir automatiquement les coordonnées des clients connus dans les champs Checkout et d’unifier leur historique d’achat. Pour rediriger les clients vers une page personnalisée que vous hébergez sur votre site Web, précisez l’adresse URL de cette page dans le paramètre [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Incluez la variable de modèle `{CHECKOUT_SESSION_ID}` dans l’URL pour récupérer l’état de la session sur la page de retour. Checkout remplace automatiquement la variable par l’ID de session Checkout avant la redirection. En savoir plus sur la [configuration de la page](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=embedded-form#return-page) de retour et d’autres options pour [personnaliser le comportement](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form) de redirection. Après avoir créé la session Checkout, utilisez le `client_secret` retourné dans la réponse pour [charger Checkout](https://docs.stripe.com/payments/accept-a-payment.md#mount-checkout). #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. require 'json' require 'sinatra' require 'stripe' # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment',ui_mode: 'embedded',return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}' }) {clientSecret: session.client_secret}.to_json end ``` ## Monter Checkout [Côté client] #### HTML + JS Checkout est disponible dans [Stripe.js](https://docs.stripe.com/js.md). Intégrez le script Stripe.js à votre page en l’ajoutant à l’en-tête de votre fichier HTML. Ensuite, créez un nœud DOM vide (conteneur) à utiliser lors du montage. ```html

``` Initialisez Stripe.js avec votre clé API publique. Créez une fonction asynchrone `fetchClientSecret` qui envoie une requête à votre serveur pour créer la session Checkout et récupérer la clé secrète du client. Transmettez cette fonction dans `options` lorsque vous créez l’instance Checkout : ```javascript // Initialize Stripe.js const stripe = Stripe('<>'); initialize(); // Fetch Checkout Session and retrieve the client secret async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Initialize Checkout const checkout = await stripe.initEmbeddedCheckout({ fetchClientSecret, }); // Mount Checkout checkout.mount('#checkout'); } ``` #### React Installez [react-stripe-js](https://docs.stripe.com/sdks/stripejs-react.md) et le chargeur Stripe.js à partir de npm : ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Pour utiliser le composant Checkout intégré, créez un `EmbeddedCheckoutProvider`. Effectuez un appel `loadStripe` avec votre clé API publiable et transmettez l’objet `Promise` renvoyé au fournisseur. Créez une fonction asynchrone `fetchClientSecret` qui envoie une requête à votre serveur pour créer la session Checkout et récupérer la clé secrète du client. Transmettez cette fonction dans la propriété `options` acceptée par le fournisseur. ```jsx import * as React from 'react'; import {loadStripe} from '@stripe/stripe-js'; import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_123'); const App = () => { const fetchClientSecret = useCallback(() => { // Create a Checkout Session return fetch("/create-checkout-session", { method: "POST", }) .then((res) => res.json()) .then((data) => data.clientSecret); }, []); const options = {fetchClientSecret}; return (

) } ``` Checkout est affiché dans une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. > Évitez de placer Checkout dans une autre balise iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour obtenir la confirmation du paiement. ### Personnaliser l’apparence Personnalisez Checkout pour qu’il corresponde à la conception de votre site en définissant la couleur d’arrière-plan, la couleur des boutons, la taille de la bordure et les polices dans les [paramètres de marque](https://dashboard.stripe.com/settings/branding) de votre compte. Par défaut, Checkout est rendu sans rembourrage ou marge externe. Nous vous recommandons d’utiliser un élément conteneur tel qu’un div pour appliquer la marge souhaitée (par exemple, 16 pixels de tous les côtés). ## Afficher une page de retour Une fois que votre client a effectué une tentative de paiement, Stripe le redirige vers une page de retour que vous hébergez sur votre site. Lors de la création de la session Checkout, vous avez spécifié l’URL de la page de retour dans le paramètre [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). En savoir plus sur les autres options pour [personnaliser le comportement de redirection](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form). Lors de l’affichage de votre page de retour, récupérez l’état de la session Checkout à l’aide de l’ID de session Checkout qui figure dans l’URL. Gérez le résultat en fonction de l’état de la session comme suit : - `complete` : le paiement a été effectué. Utilisez les informations de la session Checkout pour afficher une page de confirmation de paiement. - `open` : le paiement a échoué ou a été annulé. Chargez Checkout à nouveau afin que votre client puisse réessayer. #### Ruby ```ruby get '/session-status' do session = Stripe::Checkout::Session.retrieve(params[:session_id]) {status: session.status, customer_email: session.customer_details.email}.to_json end ``` ```javascript const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout } else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page } ``` #### Moyens de paiement basés sur la redirection Lors du paiement, certains moyens de paiement redirigent le client vers une page intermédiaire, telle qu’une page d’autorisation bancaire. Lorsqu’il a terminé de remplir cette page, Stripe le redirige vers votre page de retour. En savoir plus sur les [modes de paiement avec redirection et le comportement de redirection](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form#redirect-based-payment-methods). ## Gérer les événements post-paiement Stripe envoie un événement [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) lorsqu’un client finalise le paiement de la session Checkout. Utilisez l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide consacré aux webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir et gérer ces événements, qui peuvent vous amener à : - Envoyer un courriel de confirmation de commande à votre client. - Enregistrer la vente dans une base de données. - Démarrer un processus d’expédition. Écoutez ces événements plutôt que d’attendre que votre client soit redirigé vers votre site Web. Le déclenchement du traitement uniquement à partir de votre page de renvoi Checkout n’est pas fiable. Si vous configurez votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de modes de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration. Pour en savoir plus, consultez notre [guide de traitement avec Checkout](https://docs.stripe.com/checkout/fulfillment.md). Gérez les événements suivants lors de l’encaissement de paiements avec Checkout : | Événement | Description | Action | | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Envoyé lorsqu’un client finalise avec succès la session Checkout. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Envoyé lorsqu’un paiement effectué avec un mode de paiement différé (par exemple, ACH Direct Debit) aboutit. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Envoyé lorsqu’un paiement effectué avec un mode de paiement différé (par exemple, ACH Direct Debit) échoue. | Informez le client de l’échec et redirigez-le vers la session pour qu’il effectue une nouvelle tentative de paiement. | ## Testez votre intégration Pour tester l’intégration de votre formulaire de paiement intégré : 1. Créez une session de paiement intégrée et montez le formulaire de paiement sur votre page. 1. Remplissez le formulaire de paiement et indiquez-y un moyen de paiement qui provient du tableau ci-dessous. - Saisissez une date d’expiration postérieure à la date du jour. - Saisissez un code CVC à 3 chiffres. - Saisissez un code postal de facturation. 1. Cliquez sur **Payer**. Vous êtes alors redirigé vers votre `return_url`. 1. Accédez au Dashboard et cherchez le paiement sur la[Page des transactions](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si votre paiement a réussi, il apparaîtra dans cette liste. 1. Cliquez sur votre paiement pour voir plus d’informations, comme un résumé Checkout qui comprend les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter la commande. Découvrez [comment tester votre intégration](https://docs.stripe.com/testing.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: Ajouter d'autres moyens de paiement Par défaut, Checkout [prend en charge de nombreux modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods). Vous devez prendre des mesures supplémentaires pour activer et afficher certains modes de paiement, comme Apple Pay, Google Pay et les modes de paiement fractionné. ### Apple Pay et Google Pay Pour accepter les paiements provenant d’Apple Pay et de Google Pay, vous devez effectuer ce qui suit : - Activez-les dans vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Apple Pay est activé par défaut. - Utilisez votre application via HTTPS en mode développement et production. - [Enregistrez votre domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - Utilisez votre application au moyen de HTTPS en mode développement et production. Vous pouvez utiliser un service comme [ngrok](https://ngrok.com/) en vue de réaliser des tests locaux de votre application. De plus, une session Checkout n’affiche le bouton Apple Pay pour les clients que lorsque *toutes* les conditions suivantes sont remplies : - L’appareil du client exécute macOS version 17 ou iOS version 17 (ou des versions ultérieures). - Le client utilise le navigateur Safari. - Le client a enregistré une carte valide auprès d’Apple Pay. Une session Checkout n’affiche le bouton Google Pay pour les clients que lorsque *all* des conditions suivantes sont remplies : - L’appareil du client fonctionne avec la version Chrome 61 ou une version plus récente. - Le client a enregistré une carte valide auprès de Google Pay. > #### Tests régionaux > > Stripe Checkout ne prend pas en charge Apple Pay ou Google Pay pour les comptes ou les clients Stripe en Inde. Si votre adresse IP est en Inde, vous ne pourrez pas tester votre intégration Apple Pay ou Google Pay, même si le compte Stripe est hébergé en dehors de l’Inde. ## Optional: Créer des produits et des tarifs 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 dans un bac à sable pour éviter d’avoir à les recréer. Dans la vue détaillée du produit du Dashboard, cliquez sur **Copier en mode production** dans le coin supérieur droit. Vous ne pouvez effectuer cette opération qu’une seule fois pour chaque produit créé dans un bac à sable. Les mises à jour ultérieures du produit de test ne sont pas répercutées sur le produit en 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 mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` ## Optional: Remplir automatiquement les données du client [Côté serveur] Si vous avez déjà collecté l’adresse courriel de votre client et que vous souhaitez la faire remplir automatiquement dans une 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 Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode customer_email="customer@example.com" \ -d "line_items[0][price]"="{{PRICE_ID}}" \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` ## Optional: Enregistrer les informations du moyen de paiement [Côté serveur] Par défaut, les moyens de paiement utilisés pour effectuer un paiement ponctuel avec Checkout ne sont pas disponibles pour une utilisation future. ### Enregistrer les moyens de paiement pour les débiter hors session Vous pouvez configurer Checkout de façon à enregistrer les modes de paiement utilisés pour effectuer des paiements ponctuels en transmettant l’argument [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Cela peut notamment vous permettre de capturer un mode de paiement enregistré afin de prélever des frais futurs, comme des frais d’annulation ou de non-présentation. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -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 \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "payment_intent_data[setup_future_usage]"=off_session ``` If you use Checkout in `subscription` mode, Stripe automatically saves the payment method to charge it for subsequent payments. Card payment methods saved to customers using either `setup_future_usage` or `subscription` mode don’t appear for return purchases in Checkout (more on this below). We recommend using [custom text](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) to link out to any relevant terms regarding the usage of saved payment information. > Les lois internationales en matière de protection de la vie privée sont complexes et nuancées. Nous vous recommandons de contacter votre conseiller juridique et votre équipe responsable de la conformité avant de mettre en œuvre [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage), car cela pourrait impliquer votre cadre de conformité existant en matière de confidentialité. Pour en savoir plus sur l’enregistrement des informations de paiement. reportez-vous aux [directives du Comité européen de la protection des données](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf). ### Enregistrer les moyens de paiement pour qu’ils soient remplis automatiquement dans Checkout Par défaut, Checkout utilise [Link](https://docs.stripe.com/payments/link/checkout-link.md) pour offrir à vos clients la possibilité d’enregistrer et de réutiliser leurs informations de paiement en toute sécurité. Si vous préférez gérer vous-même les modes de paiement, utilisez [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) lors de la création d’une session Checkout pour permettre à vos clients d’enregistrer leurs modes de paiement pour des achats futurs dans Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -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 \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "saved_payment_method_options[payment_method_save]"=enabled ``` La transmission de ce paramètre en mode [paiement](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) ou [abonnement](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) affiche une case à cocher facultative qui permet aux clients d’enregistrer explicitement leur mode de paiement pour leurs futurs achats. Lorsque les clients cochent cette case, Checkout enregistre le mode de paiement avec [allow_redisplay : always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout utilisera ce paramètre pour déterminer si un mode de paiement peut être rempli automatiquement lors des futurs achats. Lorsque vous utilisez `saved_payment_method_options.payment_method_save`, vous n’avez pas besoin de transmettre `setup_future_usage` pour enregistrer le mode de paiement. Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2. L’utilisation de [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) nécessite un `Customer`. Pour enregistrer un nouveau client, définissez le paramètre [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md) de la session Checkout sur `always`. Sinon, la session n’enregistre, ni le client, ni le mode de paiement. Si `payment_method_save` n’est pas transmis ou si le client refuse d’enregistrer le mode de paiement, Checkout enregistre toutefois les modes de paiement créés en mode `subscription` ou à l’aide de `setup_future_usage`. La valeur `allow_redisplay` de ces modes de paiement est définie sur `limited`. Cela évite qu’ils soient remplis automatiquement pour les achats récurrents, et vous permet de vous conformer aux règles des réseaux de cartes et aux réglementations en matière de protection des données. Découvrez comment [modifier le comportement par défaut activé par ces modes](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) et comment modifier ou remplacer le comportement `allow_redisplay`. > Vous pouvez utiliser Checkout pour enregistrer des cartes et d’autres modes de paiement afin de les débiter hors session, mais Checkout ne remplit automatiquement que les cartes enregistrées. Découvrez comment [remplir automatiquement les cartes enregistrées](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Pour enregistrer un mode de paiement sans paiement initial, [utilisez Checkout en mode configuration](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout). ### Autoriser les clients à supprimer des modes de paiement enregistrés Pour permettre à vos clients de supprimer un mode de paiement enregistré afin qu’il ne réapparaisse pas pour des paiements ultérieurs, utilisez [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) lors de la création d’une session Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "saved_payment_method_options[payment_method_remove]"=enabled ``` Le client ne peut pas supprimer un mode de paiement s’il est associé à un abonnement actif et qu’aucun mode de paiement par défaut n’est enregistré pour les paiements de factures et d’abonnements. ## 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: 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. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Confirmez que Stripe a autorisé le moyen de paiement du client. 1. Consultez votre système de gestion d’inventaire pour vous assurer que l’article est toujours disponible. 1. Mettez à jour votre système de gestion d’inventaire pour indiquer qu’un client a acheté l’article. 1. Capturez le paiement du client. 1. 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 ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` 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: Traitement des commandes Découvrez comment [recevoir une notification par voie programmatique](https://docs.stripe.com/checkout/fulfillment.md) chaque fois qu’un client effectue un paiement. ## See also - [Ajouter des réductions](https://docs.stripe.com/payments/checkout/discounts.md) - [Collecter les taxes](https://docs.stripe.com/payments/checkout/taxes.md) - [Collecter les numéros d’identification fiscale](https://docs.stripe.com/tax/checkout/tax-ids.md) - [Ajouter la livraison](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout) - [Personnaliser l’adaptation à votre marque](https://docs.stripe.com/payments/checkout/customization.md) # API Checkout Sessions > This is a API Checkout Sessions for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout. 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=custom \ -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 Appel [initCheckout](https://docs.stripe.com/js/custom_checkout/init), en transmettant à `clientSecret`. `initCheckout` 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. 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.initCheckout({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 [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), en transmettant `clientSecret` et l’instance `stripe`. ```jsx import React from 'react'; import {CheckoutProvider} 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`useCheckout()`. 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 {useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (

); } if (checkoutState.type === 'error') { return (

Error: {checkoutState.error.message}

); } return ( ); }; ``` ## 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. Ces instructions créent une saisie par courriel et utilisent le paramètre [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) à partir de l’objet `Checkout`. Vous pouvez également : - Transmettez le champ [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) ou [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) lors de la création de la session Checkout. Stripe valide les courriels fournis de cette manière. - Transmettez un courriel que vous avez déjà validé sur [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm). ```html

``` ```javascript const checkout = stripe.initCheckout({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const emailInput = document.getElementById('email'); const emailErrors = document.getElementById('email-errors'); emailInput.addEventListener('input', () => { // Clear any validation errors emailErrors.textContent = ''; }); emailInput.addEventListener('blur', () => { const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => { if (result.error) { emailErrors.textContent = result.error.message; } }); }); } ``` #### React Vous devez fournir une adresse de courriel valide lorsque vous effectuez une session de paiement. Ces instructions créent une saisie par courriel et utilisent le paramètre [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) à partir de l’objet `Checkout`. Vous pouvez également : - Transmettez le champ [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) ou [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) lors de la création de la session Checkout. Stripe valide les courriels fournis de cette manière. - Transmettez une adresse de courriel que vous avez déjà validée dans le champ [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm). ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const EmailInput = () => { const checkoutState = useCheckout(); const [email, setEmail] = React.useState(''); const [error, setError] = React.useState(null); if (checkoutState.type === 'loading') { return (

); } else if (checkoutState.type === 'error') { return (

Error: {checkoutState.error.message}

); } const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => { if (result.type === 'error') { setError(result.error); } }) }; const handleChange = (e) => { setError(null); setEmail(e.target.value); }; return (

Email {error &&

{error.message}

}

); }; export default EmailInput; ``` ## 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 [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ```jsx import React from 'react';import {PaymentElement, useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (

); } 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) d’Elements en transmettant [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) au [CheckoutProvider](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.initCheckout({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 Checkout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) pour envoyer le paiement. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckout(); 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. 1. 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. 1. Envoyer le paiement à Stripe. 1. 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. 1. 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 dans un bac à sable pour éviter d’avoir à les recréer. Dans la vue détaillée du produit du Dashboard, cliquez sur **Copier en mode production** dans le coin supérieur droit. Vous ne pouvez effectuer cette opération qu’une seule fois pour chaque produit créé dans un bac à sable. Les mises à jour ultérieures du produit de test ne sont pas répercutées sur le produit en 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=custom \ -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=custom \ -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.initCheckout({ clientSecret: promise, elementsOptions: { appearance }, }); checkout.on('change', (session) => { // Handle changes to the checkout session }); ``` #### React ```jsx import React from 'react'; import { useCheckout } from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); 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 `CheckoutProvider`. ```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 `CheckoutProvider`. ```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.initCheckout({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 [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) pour afficher les frais d’expédition dans votre formulaire de paiement. ```jsx import React from 'react'; import {useCheckout, ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); 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.initCheckout({ 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 `CheckoutProvider` 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. ### 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. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Confirmez que Stripe a autorisé le moyen de paiement du client. 1. Consultez votre système de gestion d’inventaire pour vous assurer que l’article est toujours disponible. 1. Mettez à jour votre système de gestion d’inventaire pour indiquer qu’un client a acheté l’article. 1. Capturez le paiement du client. 1. 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=custom ``` 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 réductions pour les paiements ponctuels](https://docs.stripe.com/payments/checkout/discounts.md?payment-ui=embedded-components) - [Percevoir les taxes](https://docs.stripe.com/payments/checkout/taxes.md?payment-ui=embedded-components) - [Activer les quantités ajustables des postes de facture](https://docs.stripe.com/payments/checkout/adjustable-quantity.md?payment-ui=embedded-components) - [Ajouter des boutons en un clic](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components) # API Payment Intents > This is a API Payment Intents for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=paymentintents. Créez un formulaire de paiement personnalisé en utilisant [Stripe Elements](https://docs.stripe.com/payments/elements.md) et [l’API Payment Intents](https://docs.stripe.com/api/payment_intents.md). Découvrez comment cette intégration se [compare aux autres types](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability) d’intégration de Stripe. L’API Payment Intents est une API de niveau inférieur que vous pouvez utiliser pour créer votre propre flux de paiement, mais elle nécessite beaucoup plus de code et un entretien continu. Nous recommandons [Payment Element avec Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) pour la plupart des intégrations, car elle couvre des flux de paiement similaires à ceux de Payment Intents. Apprenez-en plus sur [quand utiliser Payment 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: 4/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) > #### Vous souhaitez utiliser Stripe Tax, les réductions, l'expédition ou la conversion de devises? > > Stripe a développé une intégration pour le composant Payment Element qui gère pour vous les taxes, les réductions, les frais de livraison et la conversion des devises. Pour en savoir plus, consultez le [guide dédié à la création d’une page de paiement](https://docs.stripe.com/payments/quickstart-checkout-sessions.md). ## Configurer Stripe [Côté serveur] Tout d’abord, [créez un compte Stripe](https://dashboard.stripe.com/register) ou [connectez-vous à votre compte](https://dashboard.stripe.com/login). Utilisez nos bibliothèques officielles pour accéder à l’API de Stripe depuis votre application : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Créer un PaymentIntent [Côté serveur] > Si vous souhaitez présenter le Payment Element avant de créer un PaymentIntent, consultez la page [Collecter les informations de paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). L’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) représente votre intention d’encaisser le paiement d’un client et suit les tentatives de débit et changements d’état tout au long du processus de paiement. Un aperçu détaillé de l'intégration des paiements décrite dans le présent document. (See full diagram at https://docs.stripe.com/payments/accept-a-payment) ### Créer le PaymentIntent Créez un PaymentIntent sur votre serveur avec les attributs [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) et [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). Dans la dernière version de l’API, la définition du paramètre `automatic_payment_methods` est facultative, car Stripe active sa fonctionnalité par défaut. Vous pouvez gérer les modes de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des modes de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux de paiement. Stripe utilise vos [paramètres de modes de paiement](https://dashboard.stripe.com/settings/payment_methods) pour afficher les modes de paiement que vous avez activés. Pour voir comment vos modes de paiement apparaissent aux clients, saisissez un ID de transaction ou définissez un montant et des devises de commande dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Pour rectification, répertoriez manuellement ceux que vous souhaitez activer à l’aide de l’attribut [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=true ``` > Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malveillants puissent définir leurs propres prix. ### Récupérer la clé secrète du client L’objet PaymentIntent comprend une *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au côté client. #### Application monopage Récupérez la clé secrète du client à partir d’un point de terminaison sur votre serveur, en utilisant la fonction `fetch` du navigateur. Cette approche est préférable si votre côté client est une application d’une page, en particulier si celle-ci a été créée avec un cadre d’application frontal récent comme React. Créez le point de terminaison du serveur pour récupérer la clé secrète du client : #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Ensuite, récupérez la clé secrète du client avec JavaScript côté client: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Rendu côté serveur Transmettez la clé secrète du client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer au navigateur. Ajoutez le champ [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dans votre formulaire de paiement. Dans le code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent : #### Ruby ```erb ``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Collecter 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 ### Configurer Stripe.js Le composant Payment Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie. ```html Checkout ``` Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement : ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Ajouter le Payment Element à votre page de paiement Le Payment Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneurs) vide avec un ID unique dans votre formulaire de paiement : ```html ``` Une fois le formulaire précédent chargé, créez une instance du Payment Element et intégrez-la au nœud DOM du conteneur. Transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’étape précédente dans les `options` lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create) : Manipulez la clé secrète du client avec prudence, car elle peut finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne l’exposez à personne d’autre que votre client. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Configurer Stripe.js Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm : ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Ajouter le fournisseur Elements à votre page de paiement et le configurer Pour utiliser le composant Payment Element, intégrez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publiable et transmettez l’élément `Promise` renvoyé au fournisseur `Elements`. Transmettez également la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’étape précédente en tant que `options`, toujours au fournisseur `Elements`. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Ajouter le composant Payment Element Utilisez le composant `PaymentElement` pour créer votre formulaire : ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (

); }; export default CheckoutForm; ``` Stripe Elements est une collection de composants d’interface utilisateur prêts à l’emploi. Pour personnaliser davantage votre formulaire ou collecter différentes informations du client, consultez la [documentation sur Elements](https://docs.stripe.com/payments/elements.md). Le Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de remplir toutes les informations de paiement nécessaires. ### Personnaliser l’apparence Personnalisez le Payment Element pour l’adapter à l’apparence de votre site en transmettant l’[objet Appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) dans les `options` lors de la création du fournisseur `Elements`. ### Collecter les adresses Par défaut, le composant Element Paiement collecte uniquement les détails de l’adresse de facturation nécessaires. Certains comportements, tels que le [calcul de la taxe](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des détails d’expédition, nécessite l’adresse complète de votre client. Vous pouvez : - Utilisez le composant [Element Adresse](https://docs.stripe.com/elements/address-element.md) pour profiter des fonctionnalités de saisie semi-automatique et de localisation pour collecter l’adresse complète de votre client. Cela permet d’assurer le calcul de taxe le plus précis possible. - Collectez les coordonnées à l’aide de votre propre formulaire personnalisé. ### Demander le jeton marchand d’Apple Pay Si vous avez configuré votre intégration pour qu’elle [accepte les paiements Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), nous vous recommandons de configurer l’interface Apple Pay pour renvoyer un jeton marchand pour activer les transactions initiées par le marchand (MIT). [Requête du type de jeton marchand](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) approprié dans Payment Element. ## Optional: Enregistrer et récupérer les moyens de paiement des clients Vous pouvez configurer le composant Payment Element de façon à enregistrer les modes de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la [fonctionnalité d’enregistrement des modes de paiement](https://docs.stripe.com/payments/save-customer-payment-methods.md), qui permet au Payment Element : - Inviter les acheteurs à consentir à enregistrer un moyen de paiement - Enregistrer les moyens de paiement lorsque les acheteurs donnent leur consentement - Afficher aux acheteurs les moyens de paiement enregistrés pour leurs prochains achats - [Mise à jour automatique des cartes perdues ou expirées](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) lorsque les clients les remplacent ![Le composant Payment Element et une case à cocher pour le mode de paiement enregistré](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png) Enregistrez les modes de paiement. ![Le composant Payment Element avec un mode de paiement enregistré sélectionné](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png) Réutilisez un mode de paiement précédemment enregistré. ### Activer l’enregistrement du moyen de paiement dans le Payment Element Lors de la création d’un [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) sur votre serveur, vous créez également une session [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) fournissant un [ID d’objet Customer](https://docs.stripe.com/api/customers/object.md#customer_object-id) et activant le composant [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) pour votre session. Configurez les [fonctionnalités](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) des modes de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) vous permet d’afficher une case à cocher invitant les clients à enregistrer leurs informations de paiement pour une utilisation ultérieure. Vous pouvez spécifier `setup_future_usage` sur un PaymentIntent ou une session Checkout pour remplacer le comportement par défaut à l’enregistrement d’un mode de paiement. Ainsi, vous enregistrez automatiquement le mode de paiement en vue d’une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer. > Autoriser les clients à retirer les modes de paiement qu’ils ont enregistrés via l’activation de [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove) a une incidence sur les abonnements qui dépendent de ce mode de paiement. Le retrait du mode de paiement dissocie le [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) de cet objet [Customer](https://docs.stripe.com/api/customers.md). #### Ruby ```ruby # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-intent-and-customer-session' do intent = Stripe::PaymentIntent.create({ amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, customer: {{CUSTOMER_ID}}, }) customer_session = Stripe::CustomerSession.create({ customer: {{CUSTOMER_ID}}, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end ``` Votre instance Elements utilise la *clé secrète du client* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de la session CustomerSession pour accéder aux modes de paiement enregistrés de ce client. [Traitez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session CustomerSession. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session CustomerSession à l’instance Elements, car ceci est facultatif. Créez l’instance Elements à l’aide des clés secrètes du client pour le PaymentIntent et la CustomerSession. Ensuite, utilisez cette instance Elements pour créer un Payment Element. ```javascript // Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` Lors de la confirmation du PaymentIntent, Stripe.js contrôle automatiquement le paramètre [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) sur le PaymentIntent et le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement. ### Exiger la récupération du CVC Vous pouvez également spécifier `require_cvc_recollection` [lors de la création du PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) afin d’exiger à nouveau la collecte du CVC lorsque le client paie par carte. ### Détecter la sélection d’un moyen de paiement enregistré Pour contrôler le contenu dynamique lorsqu’un moyen de paiement enregistré est sélectionné, écoutez l’événement `change` de Payment Element, qui est rempli avec le moyen de paiement sélectionné. ```javascript paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } }) ``` ## Optional: Lien sur votre page de paiement [Côté client] Utilisez [Link](https://docs.stripe.com/payments/link.md) dans le [Payment Element](https://docs.stripe.com/payments/payment-element.md) pour permettre à vos clients de payer plus rapidement. Vous pouvez remplir automatiquement les informations de tout client connecté qui utilise déjà Link, qu’il ait initialement enregistré ou non ses informations dans Link avec une autre entreprise. L’intégration du composant Payment Element inclut par défaut une invite Link dans le formulaire de paiement par carte. Pour gérer Link dans le composant Payment Element, rendez-vous dans vos [paramètres des modes de paiement](https://dashboard.stripe.com/settings/payment_methods). ![Authentifiez-vous ou inscrivez-vous avec Link directement dans Payment Element lors du paiement](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png) Recueillir l’adresse de courriel d’un client pour l’authentification ou l’inscription à Link ### Options d’intégration Il existe deux façons d’intégrer Link au Payment Element. Parmi ceux-ci, Stripe recommande de transmettre l’adresse de courriel du client au Payment si disponible. N’oubliez pas de tenir compte du fonctionnement de votre processus de paiement lorsque vous choisissez entre ces options : | Option intégration | Flux de paiement | Description | | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Passez l’adresse de courriel d’un client au composant Element Paiement (Recommended) | - Votre client saisit son adresse de courriel avant d’atterrir sur la page de paiement (par exemple, lors d’une étape de création de compte précédente). - Vous préférez utiliser votre propre champ de saisie pour l’adresse de courriel. | Transmettez par programmation une adresse de courriel client au Payment Element. Dans ce scénario, un client s’authentifie directement auprès de Link dans le formulaire de paiement au lieu d’un composant d’interface utilisateur distinct. | | Collectez l’adresse de courriel d’un client dans le composant Element Paiement | - Vos clients peuvent choisir de saisir leur courriel et de s’identifier ou de s’inscrire avec Link directement dans le composant Element Paiement pendant le paiement. - Aucun changement de codage n’est requis. | Si un client ne s’est pas inscrit avec Link et qu’il choisit un moyen de paiement pris en charge dans le Payment Element, il sera invité à enregistrer ses informations à l’aide de Link. Pour les clients déjà inscrits, Link renseigne automatiquement leurs informations de paiement. | Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) pour transmettre l’adresse de courriel d’un client au composant Element Paiement. ```javascript const paymentElement = elements.create('payment', { defaultValues: { billingDetails: { email: 'foo@bar.com', } }, // Other options }); ``` Pour plus d’informations, lisez comment [construire une page de paiement personnalisée qui inclut Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md). ## Optional: Récupérer des mises à jour à partir du serveur [Côté client] Vous pouvez mettre à jour les attributs du PaymentIntent après la présentation du Payment Element, tels que le [montant](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (par exemple, les codes de réduction ou les frais de livraison). Vous pouvez [mettre à jour le PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) sur votre serveur, puis appeler [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) pour faire figurer le nouveau montant dans le Payment Element. Cet exemple vous montre comment créer le point de terminaison du serveur qui met à jour le montant sur le PaymentIntent : #### Ruby ```ruby get '/update' do intent = Stripe::PaymentIntent.update( '{{PAYMENT_INTENT_ID}}', {amount: 1499}, ) {status: intent.status}.to_json end ``` Cet exemple vous montre comment mettre à jour l’interface utilisateur pour refléter ces modifications côté client : ```javascript (async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })(); ``` ## Envoyer le paiement à Stripe [Côté client] Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour finaliser le paiement à l’aide des informations du Payment Element. Ajoutez une [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur une fois le paiement effectué. Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page `return_url`. Une fois que le paiement par carte a fonctionné, le client est immédiatement redirigé vers la page `return_url`. Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte après la finalisation, vous pourrez définir la [redirection](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) à `if_required`. De cette manière, seuls les clients qui choisissent un mode de paiement avec redirection seront redirigés. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Pour appeler [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si vous préférez les composants de classe traditionnels aux hooks, vous pouvez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (

{/* Show error message to your customers */} {errorMessage &&

{errorMessage}

} ); }; export default CheckoutForm; ``` Veillez à ce que le paramètre `return_url` corresponde à une page de votre site Web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page `return_url`, nous fournissons les paramètres de requête d’URL suivants : | Paramètre | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | L’identifiant unique du `PaymentIntent`. | | `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. | > Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine `stripe.com` à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble. Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’[état du PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) pour déterminer ce qui doit être présenté à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez l’objet `return_url`. Ils seront conservés tout au long du processus de redirection. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ## Gérer les événements post-paiement [Côté serveur] Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide sur les webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison. Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration. En plus de gérer l’événement `payment_intent.succeeded`, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element : | Événement | Description | Action | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Envoyé lorsqu’un client a effectué un paiement. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Envoyé lorsqu’un client a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend un prélèvement bancaire. Il est suivi par un événement `payment_intent.succeeded` ou `payment_intent.payment_failed`. | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, nous vous recommandons de traiter la commande sans attendre que le paiement soit effectué. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Envoyé lorsqu’un client tente d’effectuer un paiement, mais que le paiement échoue. | Si un paiement passe de l’état `processing` à l’état `payment_failed`, proposez au client de retenter le paiement. | ## Testez votre intégration Pour tester votre intégration de paiement personnalisée : 1. Créez un Payment Intent et récupérez la clé secrète du client. 1. Remplissez le formulaire de paiement et indiquez-y une méthode qui provient du tableau suivant. - Saisissez une date d’expiration postérieure à la date du jour. - Saisissez un code CVC à 3 chiffres. - Saisissez un code postal de facturation. 1. Soumettez le paiement à Stripe. Vous êtes alors redirigé vers votre `return_url`. 1. 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 été effectué, vous le verrez dans cette liste. 1. Cliquez sur votre paiement pour voir plus d’informations, comme les informations de facturation et la liste des articles achetés. Vous pouvez utiliser ces informations pour traiter la commande. Découvrez comment [tester votre intégration](https://docs.stripe.com/testing.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: Ajouter d'autres moyens de paiement Le Payment Element [prend en charge de nombreux moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) par défaut. Vous devez prendre des mesures supplémentaires pour activer et faire afficher certains moyens de paiement. ### Affirm Pour commencer à utiliser Affirm, vous devez l’activer dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Lorsque vous créez un PaymentIntent avec le moyen de paiement Affirm, vous devez inclure une [adresse de livraison](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Cet exemple suggère de transmettre les informations de livraison sur le client après que le client [ait sélectionné son moyen de paiement](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). En savoir plus sur l’utilisation de [Affirm](https://docs.stripe.com/payments/affirm.md) avec Stripe. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point is reached if there's an immediate error when // confirming the payment. Show error to your customer (for example, // payment details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, // payment details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (

{/* Show error message to your customers */} {errorMessage &&

{errorMessage}

} ) }; export default CheckoutForm; ``` #### Tester Affirm Apprenez comment tester différents scénarios à l’aide du tableau suivant : | Scénario | Comment tester | | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | Le paiement de votre client avec Affirm aboutit. | Remplissez le formulaire (en prenant soin d’indiquer une adresse de livraison) et authentifiez le paiement. | | Votre client ne parvient pas à s’authentifier sur la page de redirection Affirm. | Remplissez le formulaire, puis cliquez sur **Faire échouer le paiement test** sur la page de redirection. | ### Afterpay (Clearpay) Lorsque vous créez un PaymentIntent avec Afterpay comme moyen de paiement, vous devez inclure une [adresse de livraison](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). En savoir plus sur l’utilisation de [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) avec Stripe. Vous pouvez gérer les modes de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des modes de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux de paiement. L’exemple ci-dessous utilise l’attribut [automatic_payment_methods](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-automatic_payment_methods-enabled), mais vous pouvez répertorier `afterpay_clearpay` avec les [types de modes de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). Dans la dernière version de l’API, la définition du paramètre `automatic_payment_methods` est facultative, car Stripe active sa fonctionnalité par défaut. Quelle que soit l’option que vous choisissez, assurez-vous d’activer Afterpay Clearpay dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=true \ -d "shipping[name]"="Jenny Rosen" \ -d "shipping[address][line1]"="1234 Main Street" \ -d "shipping[address][city]"="San Francisco" \ -d "shipping[address][state]"=CA \ -d "shipping[address][country]"=US \ -d "shipping[address][postal_code]"=94111 ``` #### Tester les paiements avec Afterpay (Clearpay) Apprenez comment tester différents scénarios à l’aide du tableau suivant : | Scénario | Comment tester | | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | Votre client paie avec Afterpay sans problème. | Remplissez le formulaire (en prenant soin d’indiquer une adresse de livraison) et authentifiez le paiement. | | Votre client ne parvient pas à s’authentifier sur la page de redirection Afterpay. | Remplissez le formulaire, puis cliquez sur **Faire échouer le paiement test** sur la page de redirection. | ### Apple Pay et Google Pay Lorsque vous [activez les paiements par carte](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), nous affichons Apple Pay et Google Pay pour les clients dont l’environnement répond aux [conditions d’affichage du portefeuille](https://docs.stripe.com/testing/wallets.md). Pour accepter les paiements à partir de ces portefeuilles, vous devez également : - Activez-les dans vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Apple Pay est activé par défaut. - Utilisez votre application via HTTPS en mode développement et production. - [Enregistrez votre domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - [Récupérez les mises à jour depuis le serveur](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) si vous mettez à jour le montant d’un [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) pour synchroniser le mode de paiement du portefeuille numérique. > #### Tests régionaux > > Stripe Elements ne prend pas en charge Google Pay ou Apple Pay pour les comptes et les clients Stripe en Inde. Par conséquent, vous ne pouvez pas tester votre intégration Google Pay ou Apple Pay si l’adresse IP du testeur est en Inde, même si le compte Stripe est hébergé en dehors de l’Inde. Pour en savoir plus sur l’utilisation de [Apple Pay](https://docs.stripe.com/apple-pay.md) et [Google Pay](https://docs.stripe.com/google-pay.md) avec Stripe. ### Prélèvement automatique ACH Lorsque vous utilisez l’Element Payment avec le prélèvement automatique ACH comme moyen de paiement, procédez comme suit : 1. Créer un [objet Customer](https://docs.stripe.com/api/customers.md). ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` 1. Spécifiez l’ID du client lors de la création du `PaymentIntent`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d setup_future_usage=off_session \ -d customer={{CUSTOMER_ID}} \ -d "payment_method_types[]"=us_bank_account ``` 1. Sélectionner une [méthode de vérification](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method) Lorsque vous utilisez le moyen de paiement par prélèvement automatique ACH avec le Payment Element, vous ne pouvez sélectionner que `automatic` ou `instant`. En savoir plus sur l’utilisation du [prélèvement automatique ACH](https://docs.stripe.com/payments/ach-direct-debit.md) avec Stripe. #### Tester le prélèvement automatique ACH | Scénario | Comment tester | | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Votre client paie avec un compte bancaire américain par vérification immédiate sans problème. | Sélectionnez **Compte bancaire américain** et remplissez le formulaire. Cliquez sur l’institution de test. Pour associer votre compte bancaire, suivez les instructions affichées dans la fenêtre modale. Enfin, cliquez sur le bouton de paiement. | | Votre client paie avec un compte bancaire américain par microdépôts sans problème. | Select **US bank account** and fill out the form. Click **Enter bank details manually instead**. Follow the instructions on the modal to link your bank account. You can use these [test account numbers](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Click your payment button. | | Votre client ne parvient pas à terminer le processus de liaison du compte bancaire. | Sélectionnez **Compte bancaire américain** et cliquez sur l’institution de test ou sur **Saisir les coordonnées bancaires manuellement**. Fermez la fenêtre modale sans la remplir. | ### BLIK Lorsque vous utilisez le Payment Element avec BLIK, l’utilisateur peut fermer la fenêtre modale pour autoriser le paiement dans son application. Cela déclenche une redirection vers votre `return_url` et ne renvoie pas l’utilisateur vers la page de paiement. En savoir plus sur l’utilisation de [BLIK](https://docs.stripe.com/payments/blik.md) avec Stripe. Pour gérer les situations où des utilisateurs ferment des boîtes de dialogue modales, accédez au gestionnaire côté serveur de votre `return_url`, et vérifiez si le paramètre `status` a pour valeur `succeeded` ou `requires_action` (ce qui signifie que le client a fermé la boîte de dialogue sans effectuer le paiement), puis traitez chaque cas comme il convient. ### Moyens de paiement par code QR Lorsque vous utilisez le Payment Element avec un moyen de paiement par code QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), l’utilisateur peut fermer la fenêtre de dialogue sur laquelle est affichée le code. Cette action entraîne une redirection vers votre page `return_url` et non pas vers la page de paiement. Pour gérer les situations où des utilisateurs ferment des boîtes de dialogue modales du code QR, accédez au gestionnaire côté serveur de votre `return_url`, et vérifiez si le paramètre `status` a pour valeur `succeeded` ou `requires_action` (ce qui signifie que le client a fermé la boîte de dialogue sans effectuer le paiement), puis traitez chaque cas comme il convient. Vous pouvez également empêcher la redirection automatique vers votre page `return_url` en transmettant le paramètre facultatif avancé [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), qui permet d’éviter toute redirection après la fermeture de la fenêtre modale du code QR. ### Paiement en espèces par application Le Payment Element affiche un formulaire dynamique différemment sur le Web de bureau ou le Web mobile, car il utilise différentes méthodes d’authentification du client. En savoir plus sur l’utilisation de [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) avec Stripe. #### Élément de l'application Web mobile Cash App Pay est un moyen de paiement basé sur la redirection vers le Web mobile. Il redirige votre client vers Cash App en mode production ou vers une page de paiement test dans un environnement de test. Une fois le paiement effectué, il est redirigé vers l’URL `return_url`, que vous ayez défini `redirect=if_required` ou non. #### Élément d'application Web de bureau Cash App Pay est un moyen de paiement par code QR sur le Web, où l’élément de paiement affiche un modal de code QR. Votre client doit numériser le code QR à l’aide d’une application de numérisation de code QR ou de l’application mobile Cash App. En mode production, il redirige le client vers l’URL `return_url` dès qu’il est redirigé vers l’application Cash. En mode test, il peut approuver ou refuser le paiement avant d’être redirigé vers l’URL `return_url`. Les clients peuvent également fermer la fenêtre modale de code QR avant d’effectuer le paiement, ce qui déclenche une redirection vers votre URL `return_url`. Assurez-vous que le `return_url` correspond à une page de votre site Web pour inspecter le `status` du Payment Intent. Le `status` du Payment Intent peut être `succeeded`, `failed` ou `requires_action` (par exemple, le client a fermé le modal sans numériser le code QR). Vous pouvez également prévenir la redirection automatique vers votre `return_url` en transmettant le paramètre facultatif avancé `redirect=if_required`, qui empêche la redirection lors de la fermeture d’une fenêtre modale de code QR. ### PayPal Pour utiliser PayPal, assurez-vous que vous êtes sur un [domaine enregistré](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). ## Présenter les informations de Stripe à vos clients Stripe recueille des informations sur les interactions des clients avec Elements pour vous fournir des services, prévenir la fraude et améliorer ses services. Cela inclut l’utilisation de témoins et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une seule session de paiement. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour permettre à Stripe d’utiliser les données de cette manière. Pour en savoir plus, rendez-vous sur notre [centre de confidentialité](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe). ## See also - [Stripe Elements](https://docs.stripe.com/payments/elements.md) - [Configurer des paiements ultérieurs](https://docs.stripe.com/payments/save-and-reuse.md) - [Enregistrer les informations de paiement lors du paiement](https://docs.stripe.com/payments/save-during-payment.md) - [Calculez la taxe de vente, TPS et TVA dans votre flux de paiement](https://docs.stripe.com/tax/custom.md) # Intégration dans l'application pour iOS > This is a Intégration dans l'application pour iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=ios. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Intégrez l’interface utilisateur de paiement préconfigurée de Stripe au processus de paiement de votre application iOS avec la classe [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Consultez notre exemple d’intégration [sur GitHub](https://github.com/stripe/stripe-ios/tree/master/Example/PaymentSheet%20Example). ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). ### Côté serveur Pour cette intégration, votre serveur doit disposer de points de terminaison qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre serveur : #### 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' ``` ### Côté client La [trousse SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est à code source libre et [possède une documentation complète](https://stripe.dev/stripe-ios/index.html). Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures. #### Swift Package Manager Pour installer la trousse SDK, suivez les étapes ci-après : 1. Dans Xcode, sélectionnez **File** (Fichier) > **Add Package Dependencies…** (Ajouter des dépendances de paquet…), puis saisissez `https://github.com/stripe/stripe-ios-spm` comme URL du référentiel. 1. Sélectionnez la dernière version dans notre [page des versions](https://github.com/stripe/stripe-ios/releases). 1. Ajoutez le produit **StripePaymentSheet** à la [cible de votre application](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Si vous n’avez pas de fichier [Podfile](https://guides.cocoapods.org/syntax/podfile.html), exécutez la commande suivante pour en créer un : ```bash pod init ``` 1. Ajoutez cette ligne à votre `Podfile` : ```podfile pod 'StripePaymentSheet' ``` 1. Exécutez la commande suivante : ```bash pod install ``` 1. À partir de maintenant, n’oubliez pas d’utiliser le fichier `.xcworkspace`, au lieu de `.xcodeproj`, pour ouvrir votre projet dans Xcode. 1. Pour mettre à jour ultérieurement la trousse SDK vers la version la plus récente, il vous suffit d’exécuter : ```bash pod update StripePaymentSheet ``` #### Carthage 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Ajoutez cette ligne à votre `Cartfile`: ```cartfile github "stripe/stripe-ios" ``` 1. Suivez les [instructions d’installation de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Veillez à intégrer tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking). 1. Pour mettre à jour ultérieurement la trousse SDK vers la version la plus récente, exécutez la commande suivante ; ```bash carthage update stripe-ios --platform ios ``` #### Cadre manuel 1. Accédez à notre [page des versions GitHub](https://github.com/stripe/stripe-ios/releases/latest), puis téléchargez et décompressez **Stripe.xcframework.zip**. 1. Faites glisser **StripePaymentSheet.xcframework** vers la section **Embedded Binaries (Fichiers binaires incorporés)** des paramètres **General (Général)** de votre projet Xcode. Veillez à sélectionner **Copy items if needed (Copier les éléments si nécessaire)**. 1. Répétez l’étape 2 pour tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking). 1. À l’avenir, pour mettre à jour vers la version la plus récente de notre trousse SDK, répétez les étapes 1 à 3. > Pour plus de détails sur la version la plus récente de la trousse SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir des notifications lors de la publication d’une nouvelle version, [suivez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) du référentiel. ## Activer les moyens de paiement Accédez aux [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). Par défaut, Stripe active les cartes et les autres modes de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres modes de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des modes de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des modes de paiement, et notre [page de tarification](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Ajouter un point de terminaison [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez la [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2. Cette intégration utilise trois objets de l’API Stripe : 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus. 1. (Facultatif) [Client](https://docs.stripe.com/api/customers.md) : Pour configurer un mode de paiement pour les paiements futurs, vous devrez l’associer à un *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pourrez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte du client. 1. (Facultatif) [Session Client](https://docs.stripe.com/api/customer_sessions.md) : L’objet Customer contient des informations sensibles qu’il n’est pas possible de récupérer directement à partir d’une application. Un objet CustomerSession accorde à la trousse SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Si vous n’enregistrez jamais les cartes des clients et que vous n’autorisez pas vos clients réguliers à réutiliser les cartes enregistrées, vous pourrez exclure les objets Customer et CustomerSession de votre intégration. Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui : 1. Récupère l’objet Customer ou en crée un nouveau. 1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour le client. 1. Crée un PaymentIntent comportant les paramètres [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Renvoi de la *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) du Payment Intent, de l’objet `client_secret` de la CustomerSession, de l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) du client et de votre [clé publiable](https://dashboard.stripe.com/apikeys) à votre application. Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements `eur`. À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement à partir du Dashboard Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant, la devise et le flux de paiement de la transaction. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou si vous souhaitez préciser des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Référencement manuel des moyens de paiement #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Chacun des modes de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre entreprise doit par ailleurs être établie dans l’un des pays pris en charge par chaque mode de paiement. Consultez la section [Options d’intégration des modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour en savoir plus sur les modes de paiement pris en charge. ## Collecter les informations de paiement [Côté client] Pour afficher le Mobile Payment Element dans votre page de paiement, assurez-vous d’effectuer ce qui suit : - Afficher les produits achetés par le client ainsi que le montant total - Utilisez [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios) pour collecter toutes les informations de livraison requises auprès du client. - Ajouter un bouton de paiement pour afficher l’interface utilisateur de Stripe #### UIKit Dans l’écran paiement de votre application, récupérez la clé secrète du client Intent Payment, la clé secrète du client de session cliente, l’ID du client et la clé publique à partir du point de terminaison que vous avez créé à l’étape précédente. Utilisez`STPAPIClient.shared` pour configurer votre clé publique et initialiser le[PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). #### iOS (Swift) ```swift import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet class CheckoutViewController: UIViewController { @IBOutlet weak var checkoutButton: UIButton! var paymentSheet: PaymentSheet? let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint override func viewDidLoad() { super.viewDidLoad() checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside) checkoutButton.isEnabled = false // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) DispatchQueue.main.async { self.checkoutButton.isEnabled = true } }) task.resume() } } ``` Lorsque le client touche le bouton **Paiement**, faites appel à `present` pour afficher la PaymentSheet. Une fois que le client a effectué le paiement, Stripe ferme la PaymentSheet et appelle le bloc de finalisation avec [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). #### iOS (Swift) ```swift @objc func didTapCheckoutButton() { // MARK: Start the checkout process paymentSheet?.present(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Your order is confirmed") case .canceled: print("Canceled!") case .failed(let error): print("Payment failed: \(error)") } } } ``` #### SwiftUI Créez un modèle `ObservableObject` pour votre écran de paiement. Ce modèle publie un [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) et un [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? } ``` Récupérez la clé secrète du client Intent Payment, la clé secrète du client de session cliente, l’ID du client et la clé publique à partir du point de terminaison que vous avez créé à l’étape précédente. Utilisez`STPAPIClient.shared` pour configurer votre clé publique et initialiser le[PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch thePaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, letpaymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) } }) task.resume() } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack { if model.paymentSheet != nil { Text("Ready to pay.") } else { Text("Loading…") } }.onAppear { model.preparePaymentSheet() } } } ``` Ajoutez un [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) à votre `View`. Ce bouton fonctionne de la même manière qu’un `Button` SwiftUI, ce qui vous permet de le personnaliser en ajoutant un objet `View`. Lorsque vous appuyez sur le bouton, la PaymentSheet est affichée. Une fois le paiement effectué, Stripe ferme la PaymentSheet et appelle le gestionnaire `onCompletion` avec un objet [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch the PaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey // MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods // that complete payment after a delay, like SEPA Debit and Sofort. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) } }) task.resume() } func onPaymentCompletion(result: PaymentSheetResult) { self.paymentResult = result } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack {if let paymentSheet = model.paymentSheet { PaymentSheet.PaymentButton( paymentSheet: paymentSheet, onCompletion: model.onPaymentCompletion ) { Text("Buy") } } else { Text("Loading…") }if let result = model.paymentResult { switch result { case .completed: Text("Payment complete") case .failed(let error): Text("Payment failed: \(error.localizedDescription)") case .canceled: Text("Payment canceled.") } } }.onAppear { model.preparePaymentSheet() } } } ``` Si la valeur de `PaymentSheetResult` est `.completed`, informez l’utilisateur (par exemple, en affichant un écran de confirmation de commande). Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu. ## Configurer une URL de redirection [Côté client] Le client peut être amené à quitter votre application pour s’authentifier (par exemple, dans Safari ou dans son application bancaire). Pour lui permettre de revenir automatiquement sur votre application après s’être authentifié, [configurez un schéma d’URL personnalisé](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) et configurez votre délégué d’application pour qu’il transmette l’URL à la trousse SDK. Stripe ne prend pas en charge les [liens universels](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content). #### SceneDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } ``` #### AppDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } ``` #### SwiftUI #### Swift ```swift @main struct MyApp: App { var body: some Scene { WindowGroup { Text("Hello, world!").onOpenURL { incomingURL in let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } } } } ``` Définissez également le paramètre [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) correspondant à votre objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) sur l’URL de votre application. ```swift var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" ``` ## Gérer les événements post-paiement [Côté serveur] Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide sur les webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison. Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration. En plus de gérer l’événement `payment_intent.succeeded`, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element : | Événement | Description | Action | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Envoyé lorsqu’un client a effectué un paiement. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Envoyé lorsqu’un client a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend un prélèvement bancaire. Il est suivi par un événement `payment_intent.succeeded` ou `payment_intent.payment_failed`. | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, nous vous recommandons de traiter la commande sans attendre que le paiement soit effectué. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Envoyé lorsqu’un client tente d’effectuer un paiement, mais que le paiement échoue. | Si un paiement passe de l’état `processing` à l’état `payment_failed`, proposez au client de retenter le paiement. | ## Tester l'intégration #### 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. | #### Redirections vers l'institution financière | Moyen de paiement | Scénario | Comment tester | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Bancontact, iDEAL | 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`. | 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: Activer Link Activez Link dans vos [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour permettre à vos clients d’enregistrer et de réutiliser leurs informations de paiement en toute sécurité à l’aide du bouton de paiement express en un clic de Link. ### Transmettez le courriel de votre client au Payment Element pour mobile Link authentifie un client à l’aide de son adresse courriel. Stripe recommande de remplir automatiquement autant d’informations que possible pour simplifier le processus de paiement. Pour remplir automatiquement le nom, l’adresse courriel et le numéro de téléphone du client, fournissez à `defaultBillingDetails` les informations de votre client après avoir initialisé `PaymentSheet.Configuration`. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.name = "Jenny Rosen" configuration.defaultBillingDetails.email = "jenny.rosen@example.com" configuration.defaultBillingDetails.phone = "888-888-8888" ``` ## Optional: Activer Apple Pay > Si votre écran de paiement comporte un **bouton Apple Pay** dédié, suivez les instructions du [guide pour Apple Pay](https://docs.stripe.com/apple-pay.md#present-payment-sheet) et utilisez `ApplePayContext` pour encaisser le paiement à partir du bouton Apple Pay. Vous pouvez utiliser le paramètre `PaymentSheet` pour gérer d’autres types de moyens de paiement. ### Demander un ID de marchand Apple Pour obtenir un ID de marchand Apple, [demandez un nouvel identifiant](https://developer.apple.com/account/resources/identifiers/add/merchant) sur le site Web Apple Developer. Renseignez le formulaire en indiquant une description et un identifiant. La description n’est destinée qu’à votre propre information et vous pourrez la modifier ultérieurement au besoin. En ce qui concerne l’identifiant, Stripe vous recommande d’utiliser le nom de votre application (par exemple, `merchant.com.{{YOUR_APP_NAME}}`). ### Créer un nouveau certificat Apple Pay Créez un certificat permettant à votre application de chiffrer les données de paiement. Accédez aux [paramètres des certificats iOS](https://dashboard.stripe.com/settings/ios_certificates) dans le Dashboard, cliquez sur **Ajouter une nouvelle application** et suivez le guide. Téléchargez un fichier de demande de signature de certificat (CSR) pour obtenir un certificat sécurisé auprès d’Apple qui vous permet d’utiliser Apple Pay. Un fichier CSR doit être utilisé pour émettre exactement un certificat. Si vous changez votre identifiant Apple Merchant ID, vous devez accéder aux [paramètres de certificat iOS](https://dashboard.stripe.com/settings/ios_certificates) du Dashboard pour obtenir un nouveau CSR et un nouveau certificat. ### Réaliser une intégration avec Xcode Ajoutez la fonctionnalité Apple Pay à votre application. Dans Xcode, ouvrez les paramètres de votre projet, cliquez sur l’onglet **Signing & Capabilities** (Signature et fonctionnalités), et ajoutez la fonctionnalité **Apple Pay**. On pourrait alors vous demander de vous connecter à votre compte de développeur. Sélectionnez l’ID du marchand que vous venez de créer, et votre application peut maintenant accepter Apple Pay. ![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png) Activer la fonctionnalité Apple Pay dans Xcode ### Ajouter Apple Pay #### Paiement ponctuel Pour ajouter Apple Pay à PaymentSheet, configurez [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) après avoir lancé `PaymentSheet.Configuration` avec votre ID de marchand Apple et le [code pays de votre entreprise](https://dashboard.stripe.com/settings/account). #### iOS (Swift) ```swift var configuration = PaymentSheet.Configuration() configuration.applePay = .init( merchantId: "merchant.com.your_app_name", merchantCountryCode: "US" ) ``` #### Paiements récurrents Pour ajouter Apple Pay à PaymentSheet, configurez [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) après avoir lancé `PaymentSheet.Configuration` avec votre ID de marchand Apple et le [code pays de votre entreprise](https://dashboard.stripe.com/settings/account). Conformément aux [directives d’Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) pour les paiements récurrents, vous devez également définir des attributs supplémentaires sur la `PKPaymentRequest`. Ajoutez un gestionnaire dans [ApplePayConfiguration.paymentRequestHandlers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/paymentrequesthandler) pour configurer les [PKPaymentRequest.paymentSummaryItems](https://developer.apple.com/documentation/passkit/pkpaymentrequest/1619231-paymentsummaryitems) avec le montant que vous avez l’intention de facturer (par exemple, 9,95 USD par mois). Vous pouvez également adopter [les jetons du marchand](https://developer.apple.com/apple-pay/merchant-tokens/) en définissant les propriétés `recurringPaymentRequest` ou `automaticReloadPaymentRequest` sur la propriété `PKPaymentRequest`. Pour en savoir plus sur l’utilisation des paiements récurrents avec Apple Pay, consultez [la documentation PassKit d’Apple](https://developer.apple.com/documentation/passkit/pkpaymentrequest). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( paymentRequestHandler: { request in // PKRecurringPaymentSummaryItem is available on iOS 15 or later if #available(iOS 15.0, *) { let billing = PKRecurringPaymentSummaryItem(label: "My Subscription", amount: NSDecimalNumber(string: "59.99")) // Payment starts today billing.startDate = Date() // Payment ends in one year billing.endDate = Date().addingTimeInterval(60 * 60 * 24 * 365) // Pay once a month. billing.intervalUnit = .month billing.intervalCount = 1 // recurringPaymentRequest is only available on iOS 16 or later if #available(iOS 16.0, *) { request.recurringPaymentRequest = PKRecurringPaymentRequest(paymentDescription: "Recurring", regularBilling: billing, managementURL: URL(string: "https://my-backend.example.com/customer-portal")!) request.recurringPaymentRequest?.billingAgreement = "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'" } request.paymentSummaryItems = [billing] request.currencyCode = "USD" } else { // On older iOS versions, set alternative summary items. request.paymentSummaryItems = [PKPaymentSummaryItem(label: "Monthly plan starting July 1, 2022", amount: NSDecimalNumber(string: "59.99"), type: .final)] } return request } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ### Suivi des commandes Pour ajouter des informations de [suivi de commande](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) dans iOS 16 ou version ultérieure, configurez un [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/authorizationresulthandler) dans votre `PaymentSheet.ApplePayConfiguration.Handlers`. Stripe appelle votre implémentation une fois le paiement effectué, mais avant qu’iOS ne ferme la fiche Apple Pay. Lors de la mise en œuvre d’`authorizationResultHandler`, récupérez les détails de la commande auprès de votre serveur pour la commande terminée. Ajoutez les détails au [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) fourni et renvoyez le résultat modifié. Pour en savoir plus sur le suivi des commandes, consultez la documentation [documentation sur les commandes du portefeuille numérique Apple](https://developer.apple.com/documentation/walletorders). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( authorizationResultHandler: { result in do { // Fetch the order details from your service let myOrderDetails = try await MyAPIClient.shared.fetchOrderDetails(orderID: orderID) result.orderDetails = PKPaymentOrderDetails( orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order" orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111" webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend" authenticationToken: myOrderDetails.authenticationToken) // "abc123" // Return your modified PKPaymentAuthorizationResult return result } catch { return PKPaymentAuthorizationResult(status: .failure, errors: [error]) } } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ## Activer le balayage de carte Afin d’activer la prise en charge de la numérisation des cartes pour iOS, configurez l’objet `NSCameraUsageDescription` (**Privacy - Camera Usage Description**) (Confidentialité – Description de l’utilisation de la caméra) dans la `Info.plist` de votre application, et indiquez un motif pour l’accès à la caméra (p. ex., « Pour numériser des cartes »). ## Optional: Activer les paiements ACH Intégrez `StripeFinancialConnections` en tant que dépendance pour votre application afin d’activer les paiements par prélèvements ACH. La [trousse SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est à code source libre et [possède une documentation complète](https://stripe.dev/stripe-ios/index.html). Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures. #### Swift Package Manager Pour installer la trousse SDK, suivez les étapes ci-après : 1. Dans Xcode, sélectionnez **File** (Fichier) > **Add Package Dependencies…** (Ajouter des dépendances de paquet…), puis saisissez `https://github.com/stripe/stripe-ios-spm` comme URL du référentiel. 1. Sélectionnez la dernière version dans notre [page des versions](https://github.com/stripe/stripe-ios/releases). 1. Ajoutez le produit **StripeFinancialConnections** à la [cible de votre application](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Si vous n’avez pas de fichier [Podfile](https://guides.cocoapods.org/syntax/podfile.html), exécutez la commande suivante pour en créer un : ```bash pod init ``` 1. Ajoutez cette ligne à votre `Podfile` : ```podfile pod 'StripeFinancialConnections' ``` 1. Exécutez la commande suivante : ```bash pod install ``` 1. À partir de maintenant, n’oubliez pas d’utiliser le fichier `.xcworkspace`, au lieu de `.xcodeproj`, pour ouvrir votre projet dans Xcode. 1. Pour mettre à jour ultérieurement la trousse SDK vers la version la plus récente, il vous suffit d’exécuter : ```bash pod update StripeFinancialConnections ``` #### Carthage 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Ajoutez cette ligne à votre `Cartfile`: ```cartfile github "stripe/stripe-ios" ``` 1. Suivez les [instructions d’installation de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Veillez à intégrer tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripeFinancialConnections/README.md#manual-linking). 1. Pour mettre à jour ultérieurement la trousse SDK vers la version la plus récente, exécutez la commande suivante ; ```bash carthage update stripe-ios --platform ios ``` #### Cadre manuel 1. Accédez à notre [page des versions GitHub](https://github.com/stripe/stripe-ios/releases/latest), puis téléchargez et décompressez **Stripe.xcframework.zip**. 1. Faites glisser **StripeFinancialConnections.xcframework** vers la section **Embedded Binaries (Fichiers binaires incorporés)** des paramètres **General (Général)** de votre projet Xcode. Veillez à sélectionner **Copy items if needed (Copier les éléments si nécessaire)**. 1. Répétez l’étape 2 pour tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripeFinancialConnections/README.md#manual-linking). 1. À l’avenir, pour mettre à jour vers la version la plus récente de notre trousse SDK, répétez les étapes 1 à 3. > Pour plus de détails sur la version la plus récente de la trousse SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir des notifications lors de la publication d’une nouvelle version, [suivez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) du référentiel. ## Optional: Personnaliser la feuille Pour personnaliser le formulaire de paiement, vous devez obligatoirement utiliser l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html). ### Appearance Customize colors, fonts, and so on to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios). ### Présentation des modes de paiement Configurez la mise en page des modes de paiement dans la feuille à l’aide de [paymentMethodLayout](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/paymentmethodlayout). Vous pouvez les afficher horizontalement, verticalement ou laisser Stripe optimiser la mise en page automatiquement. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-mpe-payment-method-layouts.9d0513e2fcec5660378ba1824d952054.png) #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.paymentMethodLayout = .automatic ``` ### Collecter les adresses des utilisateurs Collectez les adresses de livraison ou de facturation locales et internationales à l’aide du composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios). ### Nom d’affichage du marchand Précisez un nom d’entreprise pour le client en définissant [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp). Par défaut, il s’agit du nom de votre application. #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "My app, Inc." ``` ### Mode sombre `PaymentSheet` s’ajuste automatiquement aux paramètres d’affichage du système de l’utilisateur (mode clair et mode sombre). Si votre application ne prend pas en charge le mode sombre, vous pouvez définir la propriété [style](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV5styleAC18UserInterfaceStyleOvp) sur le mode `alwaysLight` ou `alwaysDark`. ```swift var configuration = PaymentSheet.Configuration() configuration.style = .alwaysLight ``` ### Informations de facturation par défaut Pour définir des valeurs par défaut pour les informations de facturation collectées dans la feuille de paiement, configurez la propriété `defaultBillingDetails`. `PaymentSheet` pré-remplit ses champs avec les valeurs que vous fournissez. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com" ``` ### Collecte des informations de facturation Utilisez `billingDetailsCollectionConfiguration` pour spécifier la façon dont vous souhaitez collecter les informations de facturation dans le formulaire de paiement. Vous pouvez recueillir le nom, l’adresse de courriel, le numéro de téléphone et l’adresse de votre client. Si vous souhaitez uniquement indiquer les informations de facturation requises par le mode de paiement, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` à true. Dans ce cas, le paramètre `PaymentSheet.Configuration.defaultBillingDetails` est défini comme les [informations de facturation](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) du mode de paiement. Si vous souhaitez collecter des informations de facturation supplémentaires qui ne sont pas nécessairement requises pour le moyen de paiement, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur false. Dans ce cas, les informations de facturation collectées via la `PaymentSheet` sont définies comme les informations de facturation du moyen de paiement. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.email = "foo@bar.com" configuration.billingDetailsCollectionConfiguration.name = .always configuration.billingDetailsCollectionConfiguration.email = .never configuration.billingDetailsCollectionConfiguration.address = .full configuration.billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod = true ``` > Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction. ## Optional: Gérer la déconnexion de l'utilisateur `PaymentSheet` sauvegarde certaines informations localement pour se rappeler si un utilisateur a utilisé Link dans une application. Pour effacer l’état interne de `PaymentSheet`, effectuez un appel à la méthode `PaymentSheet.resetCustomer()` lorsque votre utilisateur se déconnecte. ```swift import UIKit import StripePaymentSheet class MyViewController: UIViewController { @objc func didTapLogoutButton() { PaymentSheet.resetCustomer() // Other logout logic required by your app } } ``` ## Optional: Finaliser le paiement dans votre interface utilisateur Vous pouvez présenter le formulaire de paiement pour la seule collecte des données du moyen de paiement, puis appeler une méthode `confirm` pour mener à bien l’opération de paiement dans l’interface utilisateur de votre application. Cette approche est utile si vous avez intégré un bouton d’achat personnalisé ou si des étapes supplémentaires sont nécessaires après la collecte des informations de paiement. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) Finaliser le paiement dans l’interface utilisateur de votre application #### UIKit Les étapes suivantes vous expliquent comment effectuer un paiement dans l’interface utilisateur de votre application. Consultez notre exemple d’intégration sur [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift). 1. Tout d’abord, initialisez [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) plutôt que `PaymentSheet` et mettez à jour votre interface utilisateur avec sa propriété`paymentOption`. Cette propriété contient une image et une étiquette représentant le moyen de paiement par défaut initialement sélectionné par le client. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI using paymentSheetFlowController.paymentOption } } ``` 1. Appelez ensuite `presentPaymentOptions` pour collecter les données de paiement. Une fois l’opération effectuée, mettez à nouveau à jour votre interface utilisateur avec la propriété `paymentOption`. ```swift paymentSheetFlowController.presentPaymentOptions(from: self) { // Update your UI using paymentSheetFlowController.paymentOption } ``` 1. Enfin, appelez `confirm`. ```swift paymentSheetFlowController.confirm(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } } ``` #### SwiftUI Les étapes suivantes vous expliquent comment effectuer un paiement dans l’interface utilisateur de votre application. Consultez notre exemple d’intégration sur [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift). 1. Tout d’abord, initialisez [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) plutôt que `PaymentSheet`. Sa propriété `paymentOption` contient une image et une étiquette représentant le moyen de paiement actuellement sélectionné par le client, que vous pouvez utiliser dans votre interface utilisateur. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Use the paymentSheetFlowController.paymentOption properties in your UI myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! } } ``` 1. Utilisez [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) pour inclure le bouton qui présente la fiche de collecte des informations de paiement. Lorsque `PaymentSheet.FlowController` appelle l’argument `onSheetDismissed`, la propriété `paymentOption` de l’instance de `PaymentSheet.FlowController` reflète le mode de paiement actuellement sélectionné. ```swift PaymentSheet.FlowController.PaymentOptionsButton( paymentSheetFlowController: paymentSheetFlowController, onSheetDismissed: { myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! }, content: { /* An example button */ HStack { Text(myPaymentMethodLabel) Image(uiImage: myPaymentMethodImage) } } ) ``` 1. Utilisez [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) pour inclure le bouton qui confirme le paiement. ```swift PaymentSheet.FlowController.ConfirmButton( paymentSheetFlowController: paymentSheetFlowController, onCompletion: { result in // MARK: Handle the payment result switch result { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } }, content: { /* An example button */ Text("Pay") } ) ``` Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu. ## Optional: Activer la récupération du code CVC lors de la confirmation Les instructions suivantes pour collecter à nouveau le CVC d’une carte enregistrée pendant la confirmation du PaymentIntent supposent que votre intégration comprend les éléments suivants : - Création des PaymentIntents avant la collecte des informations de paiement ### Mettre à jour les paramètres de création de l’Intent Pour collecter à nouveau le CVC lors de la confirmation du paiement, ajoutez `require_cvc_recollection` lors de la création du PaymentIntent. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -H "Stripe-Version: 2026-02-25.clover" \ -H "Stripe-Account: 2026-02-25.clover" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` # Intégration dans l'application pour Android > This is a Intégration dans l'application pour Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=android. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.471eaf89a760f5b6a757fd96b6bb9b60.png) Intégrez l’interface utilisateur de paiement préconfigurée de Stripe au processus de paiement de votre application Android avec la classe [PaymentSheet](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html). ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). ### Côté serveur Pour cette intégration, votre serveur doit être doté de points de terminaison qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe à partir de votre serveur : #### 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' ``` ### Côté client La [trousse SDK Stripe Android](https://github.com/stripe/stripe-android) est à code source libre et [possède une documentation complète](https://stripe.dev/stripe-android/). Pour installer la trousse SDK, ajoutez `stripe-android` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies) : #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.0.2") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.0.2") } ``` > Pour obtenir de plus amples informations sur la version la plus récente de la trousse SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Activer les moyens de paiement Accédez aux [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). Par défaut, Stripe active les cartes et les autres modes de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres modes de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des modes de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des modes de paiement, et notre [page de tarification](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Ajouter un point de terminaison [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez la [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2. Cette intégration utilise trois objets de l’API Stripe : 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus. 1. (Facultatif) [Client](https://docs.stripe.com/api/customers.md) : Pour configurer un mode de paiement pour les paiements futurs, vous devrez l’associer à un *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pourrez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte du client. 1. (Facultatif) [Session Client](https://docs.stripe.com/api/customer_sessions.md) : L’objet Customer contient des informations sensibles qu’il n’est pas possible de récupérer directement à partir d’une application. Un objet CustomerSession accorde à la trousse SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Si vous n’enregistrez jamais les cartes des clients et que vous n’autorisez pas vos clients réguliers à réutiliser les cartes enregistrées, vous pourrez exclure les objets Customer et CustomerSession de votre intégration. Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui : 1. Récupère l’objet Customer ou en crée un nouveau. 1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour le client. 1. Crée un PaymentIntent comportant les paramètres [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Renvoi de la *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) du Payment Intent, de l’objet `client_secret` de la CustomerSession, de l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) du client et de votre [clé publiable](https://dashboard.stripe.com/apikeys) à votre application. Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements `eur`. À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement à partir du Dashboard Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant, la devise et le flux de paiement de la transaction. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou si vous souhaitez préciser des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Référencement manuel des moyens de paiement #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Chacun des modes de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre entreprise doit par ailleurs être établie dans l’un des pays pris en charge par chaque mode de paiement. Consultez la section [Options d’intégration des modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour en savoir plus sur les modes de paiement pris en charge. ## Collecter les informations de paiement [Côté client] Avant d’afficher le Payment Element mobile, votre page de paiement doit : - Afficher les produits achetés et le montant total - Collecter toutes les informations de livraison requises à l’aide du composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android) - Inclure un bouton de paiement pour afficher l’interface utilisateur de Stripe #### Jetpack Compose [Lancez](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-builder/index.html) une instance `PaymentSheet` dans la méthode `onCreate` de votre classe CheckoutActivity, puis transmettez une méthode pour gérer le résultat. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Ensuite, récupérez la clé secrète du client du PaymentIntent, la clé secrète du client de session cliente, l’ID du client et la clé publique à partir du point de terminaison que vous avez créé à l’étape précédente. Configurez la clé publique à l’aide du paramètre `PaymentConfiguration` et utilisez les autres lorsque vous présentez le PaymentSheet. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberimport androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } varpaymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Lorsque le client touche votre bouton de paiement, appelez [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) pour présenter le formulaire de paiement. Une fois que le client a effectué le paiement, le formulaire se ferme et le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) est appelé avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } var paymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) { paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret ) PaymentConfiguration.init(context, networkResult.publishableKey) } }Button( onClick = { val currentConfig = customerConfig val currentClientSecret =paymentIntentClientSecret if (currentConfig != null && currentClientSecret != null) { presentPaymentSheet(paymentSheet, currentConfig, currentClientSecret) } } ) { Text("Checkout") } }private fun presentPaymentSheet( paymentSheet: PaymentSheet, customerConfig: PaymentSheet.CustomerConfiguration,paymentIntentClientSecret: String ) { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } ``` #### Affichages (Classic) [Initialisez](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) une instance `PaymentSheet` dans la méthode `onCreate` de votre classe CheckoutActivity, puis transmettez une méthode pour gérer le résultat. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Ensuite, récupérez la clé secrète du client du PaymentIntent, la clé secrète du client de session cliente, l’ID du client et la clé publique à partir du point de terminaison que vous avez créé à l’étape précédente. Configurez la clé publique à l’aide du paramètre `PaymentConfiguration` et utilisez les autres lorsque vous présentez le PaymentSheet. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheetlateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit varpaymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)lifecycleScope.launch { // Make a request to your own server and retrieve payment configurations val networkResult = MyBackend.getPaymentConfig() if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Lorsque le client touche votre bouton de paiement, appelez [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) pour présenter le formulaire de paiement. Une fois que le client a effectué le paiement, le formulaire se ferme et le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) est appelé avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). #### Kotlin ```kotlin // ... class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet lateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit var paymentIntentClientSecret: String // ...fun presentPaymentSheet() { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } } ``` Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu. ## Gérer les événements post-paiement [Côté serveur] Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide sur les webhooks](https://docs.stripe.com/webhooks/quickstart.md) pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison. Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration. En plus de gérer l’événement `payment_intent.succeeded`, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element : | Événement | Description | Action | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Envoyé lorsqu’un client a effectué un paiement. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Envoyé lorsqu’un client a entrepris un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client entreprend un prélèvement bancaire. Il est suivi par un événement `payment_intent.succeeded` ou `payment_intent.payment_failed`. | Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, nous vous recommandons de traiter la commande sans attendre que le paiement soit effectué. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Envoyé lorsqu’un client tente d’effectuer un paiement, mais que le paiement échoue. | Si un paiement passe de l’état `processing` à l’état `payment_failed`, proposez au client de retenter le paiement. | ## Tester l'intégration #### 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. | #### Redirections vers l'institution financière | Moyen de paiement | Scénario | Comment tester | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Bancontact, iDEAL | 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`. | 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: Activer Link Activez Link dans vos [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour permettre à vos clients d’enregistrer et de réutiliser leurs informations de paiement en toute sécurité à l’aide du bouton de paiement express en un clic de Link. ### Transmettez le courriel de votre client au Payment Element pour mobile Link authentifie un client à l’aide de son adresse courriel. Stripe recommande de remplir automatiquement autant d’informations que possible pour simplifier le processus de paiement. Pour remplir automatiquement le nom, l’adresse courriel et le numéro de téléphone du client, fournissez à `defaultBillingDetails` les informations de votre client lorsque vous initialisez `PaymentSheet.Configuration`. #### Kotlin ```kotlin val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Example, Inc.") .defaultBillingDetails( PaymentSheet.BillingDetails( name = "Jenny Rosen", email = "jenny.rosen@example.com", phone = "888-888-8888" ) ) .build() ``` ## Optional: Activer Google Pay ### Configurer votre intégration Pour utiliser Google Pay, commencez par activer l’API Google Pay. Pour cela, ajoutez les informations suivantes au libellé `` de votre **AndroidManifest.xml** : ```xml ... ``` Pour en savoir plus, consultez la page de Google Pay [Configurer l’API Google Pay](https://developers.google.com/pay/api/android/guides/setup) pour Android. ### Ajouter Google Pay Pour ajouter Google Pay à votre intégration, transmettez un objet [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) avec votre environnement Google Pay (production ou test) et le [code de pays de votre entreprise](https://dashboard.stripe.com/settings/account) lors de l’initialisation de l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). #### Kotlin ```kotlin val googlePayConfiguration = PaymentSheet.GooglePayConfiguration( environment = PaymentSheet.GooglePayConfiguration.Environment.Test, countryCode = "US", currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .googlePay(googlePayConfiguration) .build() ``` ### Tester Google Pay Google vous permet d’effectuer des paiements tests par [sa suite de cartes tests](https://developers.google.com/pay/api/android/guides/resources/test-card-suite). La suite de tests prend en charge l’utilisation des [cartes tests Stripe](https://docs.stripe.com/testing.md). Vous devez tester Google Pay à l’aide d’un appareil Android physique plutôt que d’un appareil de simulation, dans un pays où Google Pay est pris en charge. Connectez-vous à un compte Google sur votre appareil de test à l’aide d’une vraie carte enregistrée dans Google Wallet. ## Optional: Activer le balayage de carte Pour activer le balayage de cartes, [demandez un accès de production ](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) à l’API Google Play[depuis la console Google Pay et portefeuille numérique](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite). - Si vous avez activé Google Pay, la fonctionnalité de balayage de carte est automatiquement disponible dans notre interface utilisateur sur les appareils admissibles. Pour en savoir plus sur les appareils admissibles, consultez les [contraintes de l’API Google Pay](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition) - **Important :** la fonction balayage de la carte apparaît uniquement dans les versions signées avec la même clé de signature enregistrée dans la console [Google Pay et portefeuille numérique](https://pay.google.com/business/console). Les versions de test ou de débogage utilisant différentes clés de signature (par exemple, les versions distribuées via Firebase App Tester) remporté(e)s n’afficheront pas l’option **Balayer la carte**. Pour tester la fonctionnalité de balayage de carte dans les versions préversions, vous devez : - Signer vos versions de test avec votre clé de signature de production - Ajouter votre empreinte clé de signature de test à la console Google Pay et portefeuille numérique ## Optional: Activer les paiements ACH Intégrez Financial Connections en tant que dépendance pour votre application afin d’activer les paiements par prélèvements ACH. La [trousse SDK Stripe Android](https://github.com/stripe/stripe-android) est à code source libre et [possède une documentation complète](https://stripe.dev/stripe-android/). Pour installer la trousse SDK, ajoutez `financial-connections` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies) : #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Financial Connections Android SDK implementation("com.stripe:financial-connections:23.0.2") } ``` > Pour obtenir de plus amples informations sur la version la plus récente de la trousse SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Optional: Personnaliser la feuille Pour personnaliser le formulaire de paiement, vous devez obligatoirement utiliser l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). ### Appearance Customize colors, fonts, and more to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android). ### Présentation des modes de paiement Configurez la mise en page des modes de paiement dans la feuille à l’aide de [paymentMethodLayout](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Vous pouvez les afficher horizontalement, verticalement ou laisser Stripe optimiser la mise en page automatiquement. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png) #### Kotlin ```kotlin PaymentSheet.Configuration.Builder("Example, Inc.") .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic) .build() ``` ### Collecter les adresses des utilisateurs Collectez les adresses de livraison ou de facturation locales et internationales à l’aide du composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android). ### Nom d’affichage de l’entreprise Précisez un nom d’entreprise pour le client en définissant [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378). Par défaut, il s’agit du nom de votre application. #### Kotlin ```kotlin PaymentSheet.Configuration.Builder( merchantDisplayName = "My app, Inc." ).build() ``` ### Mode sombre Par défaut, `PaymentSheet` s’adapte automatiquement aux paramètres d’affichage du système de l’utilisateur (mode clair ou mode sombre). Vous pouvez modifier ce comportement en sélectionnant le mode clair ou le mode sombre sur votre application : #### Kotlin ```kotlin // force dark AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force light AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) ``` ### Informations de facturation par défaut Pour définir des valeurs par défaut pour les informations de facturation collectées dans la feuille de paiement, configurez la propriété `defaultBillingDetails`. `PaymentSheet` pré-remplit ses champs avec les valeurs que vous fournissez. #### Kotlin ```kotlin val address = PaymentSheet.Address(country = "US") val billingDetails = PaymentSheet.BillingDetails( address = address, email = "foo@bar.com" ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .build() ``` ### Configurer la collecte des données de facturation Utilisez `BillingDetailsCollectionConfiguration` pour préciser la façon dont vous souhaitez collecter les informations de facturation dans la PaymentSheet. Vous pouvez recueillir le nom, l’adresse de courriel, le numéro de téléphone et l’adresse de votre client. Si vous souhaitez associer les informations de facturation par défaut à l’objet PaymentMethod même lorsque ces champs ne sont pas collectés dans l’interface utilisateur, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`. #### Kotlin ```kotlin val billingDetails = PaymentSheet.BillingDetails( email = "foo@bar.com" ) val billingDetailsCollectionConfiguration = BillingDetailsCollectionConfiguration( attachDefaultsToPaymentMethod = true, name = BillingDetailsCollectionConfiguration.CollectionMode.Always, email = BillingDetailsCollectionConfiguration.CollectionMode.Never, address = BillingDetailsCollectionConfiguration.AddressCollectionMode.Full, ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration) .build() ``` > Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction. ## Optional: Gérer la déconnexion de l'utilisateur `PaymentSheet` sauvegarde certaines informations localement pour se rappeler si un utilisateur a utilisé Link dans une application. Pour effacer l’état interne de `PaymentSheet`, effectuez un appel à la méthode `PaymentSheet.resetCustomer()` lorsque votre utilisateur se déconnecte. #### Kotlin ```kotlin class MyActivity: Activity { fun onLogoutButtonClicked() { PaymentSheet.resetCustomer(this) // Other logout logic required by your app } } ``` ## Optional: Finaliser le paiement dans votre interface utilisateur Vous pouvez présenter le formulaire de paiement pour collecter uniquement les informations du moyen de paiement et finaliser l’opération dans l’interface utilisateur de votre application. Cette méthode est utile si vous avez intégré un bouton d’achat personnalisé ou si vous avez besoin d’étapes supplémentaires après la collecte des informations de paiement. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png) > Vous pouvez retrouver un exemple d’intégration [sur notre GitHub](https://github.com/stripe/stripe-android/blob/master/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/samples/ui/paymentsheet/custom_flow/CustomFlowActivity.kt). 1. Tout d’abord, lancez [PaymentSheet.FlowController](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html) au lieu de `PaymentSheet` à l’aide de l’une des méthodes [Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/-builder/index.html). #### Android (Kotlin) ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionResultCallback = ::onPaymentOption, ).build(this) } } ``` 1. Appelez ensuite `configureWithPaymentIntent` avec les clés d’objet Stripe récupérées depuis votre application dorsale et mettez à jour votre interface utilisateur dans le rappel au moyen de [getPaymentOption()](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-2091462043%2FFunctions%2F2002900378). Celui-ci contient une image et une étiquette représentant le mode de paiement actuellement sélectionné par le client. #### Android (Kotlin) ```kotlin flowController.configureWithPaymentIntent( paymentIntentClientSecret = paymentIntentClientSecret, configuration = PaymentSheet.Configuration.Builder("Example, Inc.") .customer(PaymentSheet.CustomerConfiguration( id = customerId, ephemeralKeySecret = ephemeralKeySecret )) .build() ) { isReady, error -> if (isReady) { // Update your UI using `flowController.getPaymentOption()` } else { // handle FlowController configuration failure } } ``` 1. Appelez ensuite [presentPaymentOptions](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#449924733%2FFunctions%2F2002900378) pour collecter les données de paiement. Lorsque le client a terminé, la fiche se ferme et appelle [paymentOptionCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-option-callback/index.html) transmis plus tôt dans `create`. Déployez cette méthode pour mettre à jour votre interface utilisateur avec la propriété `paymentOption` renvoyée. #### Android (Kotlin) ```kotlin // ... flowController.presentPaymentOptions() // ... private fun onPaymentOption(paymentOptionResult: PaymentOptionResult) { val paymentOption = paymentOptionResult.paymentOption if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` 1. Enfin, appelez [confirm](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-479056656%2FFunctions%2F2002900378) pour finaliser le paiement. Lorsque le client a terminé, la fiche se ferme et appelle [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html#237248767%2FFunctions%2F2002900378) transmis plus tôt dans `create`. #### Android (Kotlin) ```kotlin // ... flowController.confirmPayment() // ... private fun onPaymentSheetResult( paymentSheetResult: PaymentSheetResult ) { when (paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Payment canceled } is PaymentSheetResult.Failed -> { // Payment Failed. See logcat for details or inspect paymentSheetResult.error } is PaymentSheetResult.Completed -> { // Payment Complete } } } ``` Si vous définissez `allowsDelayedPaymentMethods` à true, les modes de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la `PaymentSheet`. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu. ## Optional: Activer la récupération du code CVC lors de la confirmation Les instructions suivantes pour collecter à nouveau le CVC d’une carte enregistrée pendant la confirmation du PaymentIntent supposent que votre intégration comprend les éléments suivants : - Création des PaymentIntents avant la collecte des informations de paiement ### Mettre à jour les paramètres de création de l’Intent Pour collecter à nouveau le CVC lors de la confirmation du paiement, ajoutez `require_cvc_recollection` lors de la création du PaymentIntent. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -H "Stripe-Version: 2026-02-25.clover" \ -H "Stripe-Account: 2026-02-25.clover" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` # Intégration dans l'application pour React Native > This is a Intégration dans l'application pour React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=react-native. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Cette intégration réunit toutes les étapes requises pour effectuer un paiement, y compris la collecte des données de paiement et la confirmation du paiement, dans une seule et même feuille qui s’affiche par-dessus votre application. ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). ### Côté serveur Pour cette intégration, votre serveur doit être doté de points de terminaison qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe à partir de votre serveur : #### 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' ``` ### Côté client La [trousse SDK de React Native](https://github.com/stripe/stripe-react-native) est un logiciel libre très bien documenté. À l’interne, elle utilise les trousses SDK pour [iOS natif](https://github.com/stripe/stripe-ios) et pour [Android](https://github.com/stripe/stripe-android). Pour installer la trousse SDK de React Native, exécutez l’une des commandes suivantes dans le répertoire de votre projet (qui dépend du gestionnaire de progiciel que vous utilisez) : #### laine ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Ensuite, installez les autres dépendances nécessaires : - Pour iOS, accédez au répertoire ** ios ** et exécutez la fonctionnalité `pod install` pour vous assurer d’installer également les dépendances natives requises. - Pour Android, il n’y a plus de dépendances à installer. > Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript. ### Initialisation de Stripe Pour initialiser Stripe dans votre application React Native, enveloppez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API est requise dans l’objet `publishableKey`. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés [de production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Activer les moyens de paiement Accédez aux [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). Par défaut, Stripe active les cartes et les autres modes de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres modes de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des modes de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des modes de paiement, et notre [page de tarification](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Ajouter un point de terminaison [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez la [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilisez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer le `Client` et des références d’événements dans votre code avec les références équivalentes de l’API Accounts v2. Cette intégration utilise trois objets de l’API Stripe : 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus. 1. (Facultatif) [Client](https://docs.stripe.com/api/customers.md) : Pour configurer un mode de paiement pour les paiements futurs, vous devrez l’associer à un *client* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pourrez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte du client. 1. (Facultatif) [Session Client](https://docs.stripe.com/api/customer_sessions.md) : L’objet Customer contient des informations sensibles qu’il n’est pas possible de récupérer directement à partir d’une application. Un objet CustomerSession accorde à la trousse SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Si vous n’enregistrez jamais les cartes des clients et que vous n’autorisez pas vos clients réguliers à réutiliser les cartes enregistrées, vous pourrez exclure les objets Customer et CustomerSession de votre intégration. Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui : 1. Récupère l’objet Customer ou en crée un nouveau. 1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour le client. 1. Crée un PaymentIntent comportant les paramètres [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Renvoi de la *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) du Payment Intent, de l’objet `client_secret` de la CustomerSession, de l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) du client et de votre [clé publiable](https://dashboard.stripe.com/apikeys) à votre application. Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements `eur`. À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement à partir du Dashboard Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant, la devise et le flux de paiement de la transaction. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou si vous souhaitez préciser des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Référencement manuel des moyens de paiement #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Chacun des modes de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre entreprise doit par ailleurs être établie dans l’un des pays pris en charge par chaque mode de paiement. Consultez la section [Options d’intégration des modes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour en savoir plus sur les modes de paiement pris en charge. ## Collecter les informations de paiement [Côté client] Avant d’afficher le Payment Element mobile, votre page de paiement doit : - Présenter les produits commandés et le montant total des achats - Collecter les éventuelles informations de livraison requises - Inclure un bouton de paiement pour afficher l’interface utilisateur de Stripe Au cours du processus de paiement de votre application, effectuez une demande réseau auprès du point de terminaison de l’application dorsale que vous avez créé à l’étape précédente, puis appelez `initPaymentSheet` à partir du hook `useStripe`. ```javascript export default function CheckoutScreen() { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const [loading, setLoading] = useState(false); const fetchPaymentSheetParams = async () => { const response = await fetch(`${API_URL}/payment-sheet`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { paymentIntent, ephemeralKey, customer } = await response.json(); return { paymentIntent, ephemeralKey, customer, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerId: customer, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business can handle payment //methods that complete payment after a delay, like SEPA Debit and Sofort. allowsDelayedPaymentMethods: true, defaultBillingDetails: { name: 'Jane Doe', } }); if (!error) { setLoading(true); } }; const openPaymentSheet = async () => { // see below }; useEffect(() => { initializePaymentSheet(); }, []); return (