# Créer une marketplace Créez des comptes connectés à l'aide de Accounts v1, collectez les paiements de vos clients, puis effectuez des virements vers les marchands ou fournisseurs de services de votre marketplace. > #### Intégrations avec l’API Comptes v2 > > Ce guide s’applique uniquement aux plateformes Connect existantes qui utilisent l’API Comptes v1. Si vous êtes un nouvel utilisateur Connect, ou si vous utilisez l’API Comptes v2, consultez le [guide v2 Marketplace](https://docs.stripe.com/connect/marketplace.md). # Web > This is a Web for when platform is web. View the full page at https://docs.stripe.com/connect/end-to-end-marketplace?platform=web. Ce guide vous explique comment accepter les paiements et transférer des fonds vers les comptes bancaires de vos prestataires de services ou marchands. À des fins d’illustration, nous allons créer une place de marché de location immobilière qui met en relation des propriétaires et des locataires potentiels. Nous vous montrerons comment accepter les paiements des locataires (clients) et régler les propriétaires (utilisateurs de votre plateforme). ## Prérequis 1. [Inscrire votre plateforme](https://dashboard.stripe.com/connect). 1. [Vérifier et ajouter des informations sur l’entreprise dans le Dashboard](https://dashboard.stripe.com/account/onboarding) 1. [Complétez votre profil de plateforme](https://dashboard.stripe.com/connect/settings/profile). 1. [Personnalisez vos paramètres de marque](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding). Connect Onboarding nécessite l’ajout d’un nom d’entreprise, d’une icône et d’une couleur de marque. ## Configurer Stripe [Côté serveur] Installez 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 un compte connecté #### Accounts v2 Lorsqu’un marchand ou un fournisseur de services s’inscrit sur votre plateforme, créez un[compte connecté](https://docs.stripe.com/api/v2/core/accounts.md) les représentant. Le compte connecté vous permet de collecter leurs informations d’identification, d’accepter des paiements pour eux et de transférer des fonds sur leur compte bancaire. Dans notre exemple de location de logement, le compte connecté représente le propriétaire. #### Accounts v1 Lorsqu’un marchand ou un fournisseur de services s’inscrit sur votre plateforme, créez un[compte connecté](https://docs.stripe.com/api/accounts.md) les représentant. Le compte connecté vous permet de collecter leurs informations d’identification, d’accepter des paiements pour eux et de transférer des fonds sur leur compte bancaire. Dans notre exemple de location de logement, le compte connecté représente le propriétaire. ### Créez un compte connecté avec des informations pré-remplies #### Accounts v2 Utilisez l’API `/v2/core/accounts` pour [créer ](https://docs.stripe.com/api/v2/core/accounts/create.md) un compte connecté en spécifiant le[dashboard du compte connecté et ses responsabilités](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md). ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-01-28.clover" \ --json '{ "contact_email": "furever_contact@example.com", "display_name": "Furever", "defaults": { "responsibilities": { "fees_collector": "application", "losses_collector": "application" } }, "dashboard": "express", "identity": { "business_details": { "registered_name": "Furever" }, "country": "us", "entity_type": "company" }, "configuration": { "merchant": { "capabilities": { "card_payments": { "requested": true } } }, "recipient": { "capabilities": { "stripe_balance": { "stripe_transfers": { "requested": true } } } } }, "include": [ "configuration.merchant", "configuration.recipient", "identity", "requirements" ] }' ``` Si vous avez déjà collecté des informations pour vos comptes connectés, vous pouvez préremplir ces informations dans l’objet `Account`. Vous pouvez préremplir n’importe quelle information de compte, y compris des informations personnelles et professionnelles, des informations de compte externe, etc. Après avoir créé l’`Account`, créez une [Personne](https://docs.stripe.com/api/v2/core/persons/create.md) pour représenter la personne responsable de l’ouverture du compte en définissant `relationship.representative` sur true et en remplissant les informations du compte que vous souhaitez préremplir (par exemple, prénom et nom). ```curl curl -X POST https://api.stripe.com/v2/core/accounts/{{ACCOUNT_ID}}/persons \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-03-25.preview" \ --json '{ "given_name": "Jenny", "surname": "Rosen", "email": "jenny.rosen@example.com", "relationship": { "representative": true } }' ``` Connect Onboarding ne demande pas les informations préremplies. Cependant, il demande au titulaire du compte de confirmer les informations préremplies avant d’accepter le [contrat d’utilisation du service Connect](https://docs.stripe.com/connect/service-agreement-types.md). Lorsque vous testez votre intégration, préremplissez les informations du compte à l’aide des [données de test](https://docs.stripe.com/connect/testing.md). ### Créer un lien de compte Vous pouvez créer un lien de compte en appelant l’API [Account Links v2](https://docs.stripe.com/api/v2/core/account-links.md) avec les paramètres suivants : - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` - `configurations` = `recipient` et `merchant` ```curl curl -X POST https://api.stripe.com/v2/core/account_links \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2025-08-27.preview" \ --json '{ "account": "{{CONNECTEDACCOUNT_ID}}", "use_case": { "type": "account_onboarding", "account_onboarding": { "configurations": [ "recipient", "merchant" ], "refresh_url": "https://example.com/reauth", "return_url": "https://example.com/return" } } }' ``` ### Rediriger votre utilisateur vers l’URL du lien de compte La réponse Créer un lien de compte inclut une valeur `url`. Après avoir authentifié l’utilisateur dans votre application, redirigez-le vers cette URL pour l’envoyer dans le flux. Les URL de lien de compte sont temporaires et à usage unique uniquement, car elles permettent d’accéder aux informations personnelles de l’utilisateur du compte connecté. Si vous souhaitez préremplir les informations, vous devez le faire avant de générer le lien de compte. Une fois que vous avez créé le lien de compte, vous ne pouvez pas lire ou écrire les informations du compte connecté. > N’envoyez pas d’URL de lien de compte par e-mail, SMS ou autre moyen de paiement en dehors de l’application de votre plateforme. Fournissez-les plutôt au titulaire du compte authentifié dans votre application. #### Item 1 #### Swift ```swift import UIKit import SafariServices let BackendAPIBaseURL: String = "" // Set to the URL of your backend server class ConnectOnboardViewController: UIViewController { // ... override func viewDidLoad() { super.viewDidLoad() let connectWithStripeButton = UIButton(type: .system) connectWithStripeButton.setTitle("Connect with Stripe", for: .normal) connectWithStripeButton.addTarget(self, action: #selector(didSelectConnectWithStripe), for: .touchUpInside) view.addSubview(connectWithStripeButton) // ... } @objc func didSelectConnectWithStripe() { if let url = URL(string: BackendAPIBaseURL)?.appendingPathComponent("onboard-user") { var request = URLRequest(url: url) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request) { (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let accountURLString = json["url"] as? String, let accountURL = URL(string: accountURLString) else { // handle error } let safariViewController = SFSafariViewController(url: accountURL) safariViewController.delegate = self DispatchQueue.main.async { self.present(safariViewController, animated: true, completion: nil) } } } } // ... } extension ConnectOnboardViewController: SFSafariViewControllerDelegate { func safariViewControllerDidFinish(_ controller: SFSafariViewController) { // the user may have closed the SFSafariViewController instance before a redirect // occurred. Sync with your backend to confirm the correct state } } ``` #### Item 2 ```xml ``` Sur votre serveur, effectuez l’appel suivant à l’API Stripe. 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. ```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 "payment_intent_data[application_fee_amount]=123" \ -d "payment_intent_data[transfer_data][destination]={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "success_url=https://example.com/success" ``` - `line_items` : cet argument spécifie les articles achetés par votre client. Ces articles sont affichés dans l’interface utilisateur hébergée par Stripe. - `success_url` : cet argument assure la redirection de l’utilisateur une fois le paiement effectué. - `payment_intent_data[application_fee_amount]` : cet argument précise le montant que votre plateforme prévoit de prélever sur la transaction. Une fois le paiement capturé, le montant total du paiement est immédiatement transféré depuis la plateforme vers le compte connecté spécifié par le paramètre `transfer_data[destination]`. Ensuite, le montant `application_fee_amount` est à nouveau transféré vers la plateforme, et les frais Stripe sont déduits de ce montant. - `payment_intent_data[transfer_data][destination]` : cet argument indique qu’il s’agit d’un [paiement indirect](https://docs.stripe.com/connect/destination-charges.md). Un paiement indirect désigne un paiement traité sur la plateforme et pour lequel les fonds sont ensuite immédiatement et automatiquement transférés vers le solde en attente du compte connecté. Dans le cadre de notre exemple de location immobilière, nous voulons créer les conditions permettant au client de payer via la plateforme, et au propriétaire d’être payé par la plateforme. ![](https://b.stripecdn.com/docs-statics-srv/assets/application_fee_amount.837aa2339469b3c1a4319672971c1367.svg) Checkout utilise les paramètres de marque du compte de votre plateforme pour les paiements indirects. Pour en savoir plus, consultez [Personnaliser l’image de marque](https://docs.stripe.com/connect/destination-charges.md?platform=web&ui=stripe-hosted#branding). Cette session crée des paiements indirects. Si vous souhaitez choisir à quel moment les transferts ont lieu ou transférer des fonds vers plusieurs bénéficiaires, utilisez plutôt des [paiements et transferts distincts](https://docs.stripe.com/connect/separate-charges-and-transfers.md). ### Gérer les événements post-paiement (Côté serveur) Stripe envoie un événement [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) à l’issue du paiement. [Utilisez un webhook pour recevoir ces événements](https://docs.stripe.com/webhooks/quickstart.md) et exécuter des actions en conséquence, comme l’envoi d’un e-mail de confirmation de commande à votre client, l’enregistrement de la vente dans une base de données ou le lancement d’un flux de livraison. Nous vous conseillons d’écouter ces événements plutôt que d’attendre un rappel du client. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Avec certains moyens de paiement, la confirmation du paiement peut par ailleurs prendre entre 2 et 14 jours. Configurer votre intégration de manière à ce qu’elle écoute les événements asynchrones vous permettra d’accepter plusieurs [moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration. En plus de gérer l’événement `checkout.session.completed`, nous vous recommandons de gérer deux autres événements lorsque vous encaissez des paiements avec Checkout : | Événement | Description | Étapes suivantes | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Le client a autorisé le paiement en envoyant le formulaire Checkout. | Attendez que le paiement aboutisse ou échoue. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Le paiement du client a abouti. | Traitez la commande de biens ou de services de votre client. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Le paiement a été refusé, ou il a échoué pour une autre raison. | Contactez votre client par e-mail et demandez-lui de passer une nouvelle commande. | Ces événements incluent tous l’objet [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md). Une fois le paiement effectué, l’état sous-jacent du *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) passe de `processing` à `succeeded`. #### Formulaire intégré ### Créer une session Checkout (Server-side) Une session Checkout détermine ce que votre client voit sur le formulaire de paiement intégré, tel que les postes de la facture, le montant et la devise de la commande, ainsi que les moyens de paiement acceptés. Sur votre serveur, effectuez l’appel suivant à l’API de Stripe. ```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 "payment_intent_data[application_fee_amount]=123" \ -d "payment_intent_data[transfer_data][destination]={{CONNECTEDACCOUNT_ID}}" \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}" ``` - `line_items` : les articles achetés par le client, affichés dans l’interface utilisateur hébergée par Stripe. - `return_url` : cet argument assure la redirection de l’utilisateur une fois la tentative de paiement effectuée. - `payment_intent_data[application_fee_amount]` : cet argument précise le montant que votre plateforme prévoit de prélever sur la transaction. Une fois le paiement capturé, le montant total du paiement est immédiatement transféré depuis la plateforme vers le compte connecté spécifié par le paramètre `transfer_data[destination]`. Ensuite, le montant `application_fee_amount` est à nouveau transféré vers la plateforme, et les frais Stripe sont déduits de ce montant. - `payment_intent_data[transfer_data][destination]` : indique qu’il s’agit d’un [paiement indirect](https://docs.stripe.com/connect/destination-charges.md), ce qui signifie que le paiement est traité sur la plateforme. Les fonds sont ensuite transférés immédiatement et automatiquement sur le solde en attente du compte connecté. Dans notre exemple de location immobilière, le propriétaire est payé par la plateforme si le client paie via la plateforme. ### 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 pour le montage. ```html
``` Initialisez Stripe.js avec votre clé API publique. Créez une fonction `fetchClientSecret` asynchrone qui demande à votre serveur de créer la session Checkout et de récupérer la clé secrète du client. Transmettez cette fonction dans la propriété `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.createEmbeddedCheckoutPage({ fetchClientSecret, }); // Mount Checkout checkout.mount('#checkout'); } ``` #### React Installez les bibliothèques Connect.js et React Connect.js à partir du [registre public npm](https://www.npmjs.com/package/@stripe/react-connect-js). ```bash npm install --save @stripe/connect-js @stripe/react-connect-js ``` Pour utiliser le composant Checkout intégré, créez un `EmbeddedCheckoutProvider`. Appelez `loadStripe` avec votre clé API publique et transmettez la valeur `Promise` au prestataire. Créez une fonction `fetchClientSecret` asynchrone qui demande à votre serveur de créer la session Checkout et de récupérer la clé secrète du client. Transmettez cette fonction dans la propriété `options` acceptée par le prestataire. ```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 = ({fetchClientSecret}) => { const options = {fetchClientSecret}; return ( ) } ``` Checkout est affiché dans un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer Checkout dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement. ![](https://b.stripecdn.com/docs-statics-srv/assets/application_fee_amount.837aa2339469b3c1a4319672971c1367.svg) Checkout utilise les paramètres de marque du compte de votre plateforme pour les paiements indirects. Pour en savoir plus, consultez [Personnaliser l’image de marque](https://docs.stripe.com/connect/destination-charges.md?platform=web&ui=stripe-hosted#branding). Cette session crée des paiements indirects. Si vous souhaitez choisir à quel moment les transferts ont lieu ou transférer des fonds vers plusieurs bénéficiaires, utilisez plutôt des [paiements et transferts distincts](https://docs.stripe.com/connect/separate-charges-and-transfers.md). ### Gérer les événements post-paiement (Côté serveur) Stripe envoie un événement [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) à l’issue du paiement. [Utilisez un webhook pour recevoir ces événements](https://docs.stripe.com/webhooks/quickstart.md) et exécuter des actions en conséquence, comme l’envoi d’un e-mail de confirmation de commande à votre client, l’enregistrement de la vente dans une base de données ou le lancement d’un flux de livraison. Nous vous conseillons d’écouter ces événements plutôt que d’attendre un rappel du client. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Avec certains moyens de paiement, la confirmation du paiement peut par ailleurs prendre entre 2 et 14 jours. Configurer votre intégration de manière à ce qu’elle écoute les événements asynchrones vous permettra d’accepter plusieurs [moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration. En plus de gérer l’événement `checkout.session.completed`, nous vous recommandons de gérer deux autres événements lorsque vous encaissez des paiements avec Checkout : | Événement | Description | Étapes suivantes | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Le client a autorisé le paiement en envoyant le formulaire Checkout. | Attendez que le paiement aboutisse ou échoue. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Le paiement du client a abouti. | Traitez la commande de biens ou de services de votre client. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Le paiement a été refusé, ou il a échoué pour une autre raison. | Contactez votre client par e-mail et demandez-lui de passer une nouvelle commande. | Ces événements incluent tous l’objet [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md). Une fois le paiement effectué, l’état sous-jacent du *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) passe de `processing` à `succeeded`. #### Flux personnalisé ### Créer un PaymentIntent (Côté serveur) Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus. > Si vous souhaitez afficher le Payment Element sans créer au préalable de 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). ![Diagramme illustrant l'ensemble du tunnel de paiement](https://b.stripecdn.com/docs-statics-srv/assets/accept-a-payment-payment-element.5cf6795a02f864923f9953611493d735.svg) Les moyens de paiement présentés à votre client lors du processus de paiement sont également inclus dans ce PaymentIntent. Vous pouvez laisser Stripe extraire automatiquement (depuis les paramètres de votre Dashboard) les moyens de paiement à présenter, ou bien les répertorier manuellement. À moins que votre intégration ne nécessite du code pour la présentation des moyens de paiement, Stripe vous recommande de choisir l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les moyens de paiement ainsi que d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Ceux qui augmentent le taux de conversion et qui sont les plus pertinents selon la devise et le lieu de résidence du client sont présentés en priorité. Les moyens de paiement de moindre priorité ne sont visibles qu’au sein d’un menu de débordement. #### Gérer les moyens de paiement depuis le Dashboard Sur votre serveur, créez un PaymentIntent contenant un montant et une devise. Dans la dernière version de l’API, la spécification du paramètre `automatic_payment_methods` est facultative, car Stripe active sa fonctionnalité par défaut. Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe renvoie les moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Le PaymentIntent est créé pour prendre en charge les moyens de paiement que vous configurez dans le Dashboard, le cas échéant. Assurez-vous toujours que vous avez choisi le montant à facturer côté serveur, qui est un environnement sécurisé, plutôt que côté client. Cette précaution empêchera les clients mal intentionnés de fixer leurs propres tarifs. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]=true" \ -d application_fee_amount=123 \ -d "transfer_data[destination]={{CONNECTEDACCOUNT_ID}}" ``` #### Répertorier les moyens de paiement manuellement Créez un PaymentIntent sur votre serveur avec un montant, une devise et la liste des types de moyens de paiement que vous souhaitez proposer. Décidez toujours du montant à débiter côté serveur, un environnement sécurisé à la différence du côté client. Cette précaution éliminera toute possibilité pour un client malveillant de fixer son propre tarif. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=bancontact" \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=eps" \ -d "payment_method_types[]=ideal" \ -d "payment_method_types[]=p24" \ -d "payment_method_types[]=sepa_debit" \ -d "payment_method_types[]=sofort" \ -d application_fee_amount=123 ``` Choisissez la devise en fonction des moyens de paiement que vous souhaitez proposer. Certains moyens de paiement prennent en charge plusieurs devises et pays. Les exemples de code donnés dans ce guide implémentent les moyens de paiement suivants : Bancontact, cartes de crédit, EPS, iDEAL, Przelewy24, prélèvement automatique SEPA et Sofort. > Chacun des moyens de paiement doit prendre en charge la devise transmise dans le PaymentIntent et votre activité doit par ailleurs être basée dans l’un des pays pris en charge par chaque moyen de paiement. Veuillez consulter la page consacrée aux [options d’intégration des moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour en savoir plus. ### Récupérer la clé secrète du client Le PaymentIntent contient une *clé secrète* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client. #### Application monopage Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction `fetch` du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client : #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client : ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Rendu côté serveur Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur. Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du 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 avec le [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 pour de nombreux moyens de paiement. Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement. Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de l’iframe doit être défini sur égal à `"payment *"`. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’[activer](https://docs.stripe.com/security/guide.md#tls) lorsque vous souhaitez commencer à accepter des paiements réels. #### HTML + JS ### Configurer Stripe.js Le composant Element Payment 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 une offre groupée 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 composant Element Payment doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement : ```html
``` Lors du chargement du formulaire précédent, créez une instance du composant Payment Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create), transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) définie à l’étape précédente dans les `options` : Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à 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, enveloppez 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é publique, puis transmettez au fournisseur `Elements` l’élément `Promise` renvoyé. 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 Element Payment 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 un ensemble de composants d’interface utilisateur modulables. Pour personnaliser davantage votre formulaire ou collecter d’autres informations client, consultez la [documentation relative à Elements](https://docs.stripe.com/payments/elements.md). Le composant Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de renseigner toutes les informations de paiement nécessaires. ### Personnaliser l’apparence Personnalisez le Payment Element pour qu’il corresponde à l’apparence de votre site en ajoutant l’[objet Appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) dans `options` lors de la création du fournisseur `Elements`. ### Collecter les adresses Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez : - Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible. - Recueillez l’adresse à l’aide de votre propre formulaire personnalisé. ### Demander un token de marchand Apple Pay Si vous avez configuré votre intégration pour [accepter 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 afin de renvoyer un token de marchand pour activer les transactions initiées par le marchand (MIT). [Demandez le type de token de marchand approprié](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) dans le composant Payment Element. ### Envoyer le paiement à Stripe (Côté client) Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour effectuer le paiement à l’aide des informations du composant Payment Element. Ajoutez un paramètre [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre `return_url`. L’utilisateur sera immédiatement redirigé vers la page `return_url` après un paiement réussi par carte. Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez assigner au paramètre [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) la valeur `if_required`. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.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 les informations à présenter à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL `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 consacré aux 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 e-mail à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Certains clients malintentionnés peuvent d’autre part tenter de 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 et même intégration. En plus de l’événement `payment_intent.succeeded`, nous vous recommandons de gérer ces autres événements lorsque vous encaissez des paiements à l’aide de l’Element Payment : | É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 effectue un paiement avec succès. | 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 initie un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client initie 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, vous pourrez 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 effectue une tentative de paiement qui se solde par un échec. | Si un paiement passe de l’état `processing` à `payment_failed`, proposez au client de retenter le paiement. | ## Test Testez votre flux de création de comptes en [créant des comptes](https://docs.stripe.com/connect/testing.md#creating-accounts) et en [utilisant OAuth](https://docs.stripe.com/connect/testing.md#using-oauth). #### Cartes bancaires | Numéro de carte | Scénario | Méthode de test | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Le paiement par carte bancaire aboutit et ne nécessite pas d’authentification. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | 4000002500003155 | Le paiement par carte bancaire requiert une *authentification* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | 4000000000009995 | La carte est refusée avec un code de refus de type `insufficient_funds`. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | 6205500000000000004 | La carte UnionPay a un numéro d’une longueur variable, allant de 13 à 19 chiffres. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix. | #### Portefeuilles | Moyen de paiement | Scénario | Méthode de test | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Le montant dû est réglé via un moyen de paiement avec redirection et à [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Choisissez un moyen de paiement avec redirection, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Finaliser le paiement test** sur la page qui s’affiche. | #### Virements avec redirection bancaire | Moyen de paiement | Scénario | Méthode de test | | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Prélèvement automatique BECS | Le montant dû est réglé par prélèvement automatique BECS. | Remplissez le formulaire à l’aide du numéro de compte `900123456` et du BSB `000000`.La confirmation de la demande de PaymentIntent passe d’abord à l’état `processing`, puis à l’état `succeeded` trois minutes plus tard. | | Prélèvement automatique BECS | Le paiement de votre client échoue avec un code d’erreur `account_closed`. | Remplissez le formulaire à l’aide du numéro de compte `111111113` et du BSB `000000`. | | Bancontact, EPS, iDEAL et Przelewy24 | Votre client ne parvient pas à s’authentifier sur la page de redirection en utilisant un moyen de paiement avec redirection et à notification immédiate. | Choisissez un moyen de paiement avec redirection, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Faire échouer le paiement test** sur la page qui s’affiche. | | Pay by Bank | Le montant dû est réglé via un moyen de paiement avec redirection et à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Choisissez le moyen de paiement, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Finaliser le paiement test** sur la page qui s’affiche. | | Pay by Bank | Votre client ne parvient pas à s’authentifier sur la page de redirection en utilisant un moyen de paiement avec redirection et à notification différée. | Choisissez le moyen de paiement, renseignez les informations demandées, puis confirmez le paiement. Enfin, cliquez sur **Faire échouer le paiement test** sur la page qui s’affiche. | | BLIK | Les paiements BLIK échouent de diverses manières : échecs immédiats (par exemple, code expiré ou non valide), erreurs différées (refus de la banque) ou expirations du délai (le client n’a pas répondu à temps). | Utiliser des modèles d’e-mail pour [simuler les différents échecs.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Prélèvements bancaires | Moyen de paiement | Scénario | Méthode de test | | ---------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Prélèvement automatique SEPA | Le montant dû est réglé par prélèvement automatique SEPA. | Remplissez le formulaire à l’aide du numéro de compte `AT321904300235473204`. Le PaymentIntent confirmé passe d’abord à l’état processing, puis à l’état succeeded trois minutes plus tard. | | Prélèvement automatique SEPA | L’intention de paiement de votre client passe de l’état `processing` à l’état `requires_payment_method`. | Remplissez le formulaire à l’aide du numéro de compte `AT861904300235473202`. | #### Coupons | Moyen de paiement | Scénario | Méthode de test | | ----------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Le montant dû est réglé par coupon Boleto ou OXXO. | Sélectionnez Boleto ou OXXO comme moyen de paiement, puis envoyez le paiement. Fermez la boîte de dialogue qui s’affiche. | Consultez la section consacrée aux [tests](https://docs.stripe.com/testing.md) pour obtenir des informations supplémentaires sur la manière de tester votre intégration. # Fiche de paiement > This is a Fiche de paiement for when platform is ios and mobile-ui is payment-element. View the full page at https://docs.stripe.com/connect/end-to-end-marketplace?platform=ios&mobile-ui=payment-element. ![](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 grâce à 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). Ce guide vous explique comment accepter les paiements de vos clients et transférer des fonds sur les comptes bancaires de vos marchands ou prestataires de services. À des fins d’illustration, nous allons créer une place de marché de location immobilière qui met en relation des propriétaires et des locataires potentiels. Les concepts abordés ici peuvent être déclinés aux fins d’autres applications. ## Prérequis 1. [Inscrire votre plateforme](https://dashboard.stripe.com/connect). 1. [Vérifier et ajouter des informations sur l’entreprise dans le Dashboard](https://dashboard.stripe.com/account/onboarding) 1. [Complétez votre profil de plateforme](https://dashboard.stripe.com/connect/settings/profile). 1. [Personnalisez vos paramètres de marque](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding). Connect Onboarding nécessite l’ajout d’un nom d’entreprise, d’une icône et d’une couleur de marque. ## 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é d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis 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 Le [SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est disponible en open source et [fait l’objet d’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 le SDK, veuillez suivre les étapes ci-dessous : 1. Dans Xcode, sélectionnez **File** > **Add Package Dependencies…** puis saisissez `https://github.com/stripe/stripe-ios-spm` en tant qu’URL du référentiel. 1. Sélectionnez le dernier numéro de version, visible sur notre [page des versions](https://github.com/stripe/stripe-ios/releases). 1. Ajoutez le produit **StripePaymentsUI** à 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 'StripePaymentsUI' ``` 1. Exécutez la commande suivante : ```bash pod install ``` 1. À partir de maintenant, n’oubliez pas d’utiliser le fichier .xcworkspace au lieu du fichier .xcodeproj pour ouvrir votre projet dans Xcode. 1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, il vous suffit d’exécuter : ```bash pod update StripePaymentsUI ``` #### 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/StripePaymentsUI/README.md#manual-linking). 1. Pour mettre à jour ultérieurement le 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 **StripePaymentsUI.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/StripePaymentsUI/README.md#manual-linking). 1. À l’avenir, pour mettre à jour vers la version la plus récente de notre SDK, répétez les étapes 1 à 3. > Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir une notification lors de la publication d’une nouvelle version, [surveillez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) à partir du référentiel. Configurez le SDK avec votre [clé publiable](https://dashboard.stripe.com/test/apikeys) Stripe au démarrage de votre application. Cela lui permet d’envoyer des requêtes à l’API Stripe. #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Créer un compte connecté #### Accounts v2 Lorsqu’un marchand ou un fournisseur de services s’inscrit sur votre plateforme, créez un[compte connecté](https://docs.stripe.com/api/v2/core/accounts.md) les représentant. Le compte connecté vous permet de collecter leurs informations d’identification, d’accepter des paiements pour eux et de transférer des fonds sur leur compte bancaire. Dans notre exemple de location de logement, le compte connecté représente le propriétaire. #### Accounts v1 Lorsqu’un marchand ou un fournisseur de services s’inscrit sur votre plateforme, créez un[compte connecté](https://docs.stripe.com/api/accounts.md) les représentant. Le compte connecté vous permet de collecter leurs informations d’identification, d’accepter des paiements pour eux et de transférer des fonds sur leur compte bancaire. Dans notre exemple de location de logement, le compte connecté représente le propriétaire. ![](https://b.stripecdn.com/docs-statics-srv/assets/express-ios.6789c3d9f8e327847abb218d75a29eec.png) > Ce guide utilise des comptes Express, auxquels certaines [restrictions](https://docs.stripe.com/connect/express-accounts.md#prerequisites-for-using-express) s’appliquent. Vous avez également la possibilité d’évaluer des [comptes Custom](https://docs.stripe.com/connect/custom-accounts.md). ### Créez un compte connecté avec des informations pré-remplies #### Accounts v2 Utilisez l’API `/v2/core/accounts` pour [créer ](https://docs.stripe.com/api/v2/core/accounts/create.md) un compte connecté en spécifiant le[dashboard du compte connecté et ses responsabilités](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md). ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-01-28.clover" \ --json '{ "contact_email": "furever_contact@example.com", "display_name": "Furever", "defaults": { "responsibilities": { "fees_collector": "application", "losses_collector": "application" } }, "dashboard": "express", "identity": { "business_details": { "registered_name": "Furever" }, "country": "us", "entity_type": "company" }, "configuration": { "merchant": { "capabilities": { "card_payments": { "requested": true } } }, "recipient": { "capabilities": { "stripe_balance": { "stripe_transfers": { "requested": true } } } } }, "include": [ "configuration.merchant", "configuration.recipient", "identity", "requirements" ] }' ``` Si vous avez déjà collecté des informations pour vos comptes connectés, vous pouvez préremplir ces informations dans l’objet `Account`. Vous pouvez préremplir n’importe quelle information de compte, y compris des informations personnelles et professionnelles, des informations de compte externe, etc. Après avoir créé l’`Account`, créez une [Personne](https://docs.stripe.com/api/v2/core/persons/create.md) pour représenter la personne responsable de l’ouverture du compte en définissant `relationship.representative` sur true et en remplissant les informations du compte que vous souhaitez préremplir (par exemple, prénom et nom). ```curl curl -X POST https://api.stripe.com/v2/core/accounts/{{ACCOUNT_ID}}/persons \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-03-25.preview" \ --json '{ "given_name": "Jenny", "surname": "Rosen", "email": "jenny.rosen@example.com", "relationship": { "representative": true } }' ``` Connect Onboarding ne demande pas les informations préremplies. Cependant, il demande au titulaire du compte de confirmer les informations préremplies avant d’accepter le [contrat d’utilisation du service Connect](https://docs.stripe.com/connect/service-agreement-types.md). Lorsque vous testez votre intégration, préremplissez les informations du compte à l’aide des [données de test](https://docs.stripe.com/connect/testing.md). ### Créer un lien de compte Vous pouvez créer un lien de compte en appelant l’API [Account Links v2](https://docs.stripe.com/api/v2/core/account-links.md) avec les paramètres suivants : - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` - `configurations` = `recipient` et `merchant` ```curl curl -X POST https://api.stripe.com/v2/core/account_links \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2025-08-27.preview" \ --json '{ "account": "{{CONNECTEDACCOUNT_ID}}", "use_case": { "type": "account_onboarding", "account_onboarding": { "configurations": [ "recipient", "merchant" ], "refresh_url": "https://example.com/reauth", "return_url": "https://example.com/return" } } }' ``` ### Rediriger votre utilisateur vers l’URL du lien de compte La réponse Créer un lien de compte inclut une valeur `url`. Après avoir authentifié l’utilisateur dans votre application, redirigez-le vers cette URL pour l’envoyer dans le flux. Les URL de lien de compte sont temporaires et à usage unique uniquement, car elles permettent d’accéder aux informations personnelles de l’utilisateur du compte connecté. Si vous souhaitez préremplir les informations, vous devez le faire avant de générer le lien de compte. Une fois que vous avez créé le lien de compte, vous ne pouvez pas lire ou écrire les informations du compte connecté. > N’envoyez pas d’URL de lien de compte par e-mail, SMS ou autre moyen de paiement en dehors de l’application de votre plateforme. Fournissez-les plutôt au titulaire du compte authentifié dans votre application. #### Item 1 #### Swift ```swift import UIKit import SafariServices let BackendAPIBaseURL: String = "" // Set to the URL of your backend server class ConnectOnboardViewController: UIViewController { // ... override func viewDidLoad() { super.viewDidLoad() let connectWithStripeButton = UIButton(type: .system) connectWithStripeButton.setTitle("Connect with Stripe", for: .normal) connectWithStripeButton.addTarget(self, action: #selector(didSelectConnectWithStripe), for: .touchUpInside) view.addSubview(connectWithStripeButton) // ... } @objc func didSelectConnectWithStripe() { if let url = URL(string: BackendAPIBaseURL)?.appendingPathComponent("onboard-user") { var request = URLRequest(url: url) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request) { (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let accountURLString = json["url"] as? String, let accountURL = URL(string: accountURLString) else { // handle error } let safariViewController = SFSafariViewController(url: accountURL) safariViewController.delegate = self DispatchQueue.main.async { self.present(safariViewController, animated: true, completion: nil) } } } } // ... } extension ConnectOnboardViewController: SFSafariViewControllerDelegate { func safariViewControllerDidFinish(_ controller: SFSafariViewController) { // the user may have closed the SFSafariViewController instance before a redirect // occurred. Sync with your backend to confirm the correct state } } ``` #### Item 2 ```xml