# Créer une plateforme SaaS avec Accounts v1 Créez des comptes connectés à l'aide de l’API Accounts v1, puis facilitez les paiements directs vers ces comptes sur votre plateforme SaaS. > #### 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 des plateformes SaaS v2](https://docs.stripe.com/connect/saas.md). Ce guide explique comment autoriser vos utilisateurs à accepter des paiements, transférer une partie des gains de vos utilisateurs vers votre solde et virer le reste sur les comptes bancaires de vos utilisateurs. Pour illustrer ces concepts, nous allons utiliser un exemple de plateforme qui permet aux entreprises de créer leurs propres boutiques en ligne. # Web > This is a Web for when platform is web. View the full page at https://docs.stripe.com/connect/end-to-end-saas-platform?platform=web. ## Prérequis 1. [Inscrire votre plateforme](https://dashboard.stripe.com/connect). 1. Ajoutez des informations sur l’entreprise pour [activer votre compte](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é Lorsqu’un utilisateur (marchand ou fournisseur de services) s’inscrit sur votre plateforme, créez un [compte](https://docs.stripe.com/api/accounts.md) d’utilisateur (appelé *compte connecté*) afin de pouvoir accepter des paiements de sa part et transférer des fonds vers son compte bancaire. Les comptes connectés représentent vos utilisateurs dans l’API de Stripe et permettent de collecter facilement les informations nécessaires pour vérifier leur identité. Dans notre exemple de création de boutique, le compte connecté représente l’entreprise qui configure sa boutique en ligne. ![Capture d'écran du formulaire Connect Onboarding](https://b.stripecdn.com/docs-statics-srv/assets/Kavholm-Seamless-Standard.78b64d90c0bf87130c8b6ba1ef53df7f.png) ### Créer un compte connecté et préremplir les informations Utilisez l’API `/v1/accounts` pour [créer](https://docs.stripe.com/api/accounts/create.md) un compte connecté. Vous pouvez le créer en utilisant les [paramètres par défaut du compte connecté](https://docs.stripe.com/connect/migrate-to-controller-properties.md) ou en spécifiant le type de compte. #### Avec les propriétés par défaut ```curl curl -X POST https://api.stripe.com/v1/accounts \ -u "<>:" ``` #### Avec le type de compte ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d type=standard ``` 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 [Person](https://docs.stripe.com/api/persons/create.md) pour représenter la personne responsable de l’ouverture du compte et définissez `relationship.representative` sur true et toutes les informations de compte que vous souhaitez préremplir (par exemple, son prénom et son nom). ```curl curl https://api.stripe.com/v1/accounts/{{ACCOUNT_ID}}/persons \ -u "<>:" \ -d first_name=Jenny \ -d last_name=Rosen \ -d "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](https://docs.stripe.com/api/account_links.md) avec les paramètres suivants : - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` ```curl curl https://api.stripe.com/v1/account_links \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "refresh_url=https://example.com/reauth" \ --data-urlencode "return_url=https://example.com/return" \ -d type=account_onboarding ``` ### Rediriger votre utilisateur vers l’URL du lien de compte La réponse à votre requête [Account Links](https://docs.stripe.com/api/account_links.md) contient une valeur d’`url` de clé. Redirigez l’utilisateur vers ce lien pour l’introduire dans le flux. Les liens de compte sont temporaires et à usage unique, car ils donnent accès aux informations personnelles du titulaire du compte connecté. Authentifiez l’utilisateur dans votre application avant de le rediriger vers cette URL. Si vous souhaitez préremplir des informations, vous devez le faire avant de générer le lien de compte. Une fois le lien créé, les opérations de lecture comme d’écriture ne seront plus possibles pour ce compte. > 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. ### Gérer le retour de l’utilisateur sur votre plateforme Connect Onboarding vous demande de transmettre à la fois une `return_url` et une `refresh_url` afin de gérer tous les cas de redirection des utilisateurs vers votre plateforme. Il est important que vous les implémentiez correctement afin d’offrir à vos utilisateurs une expérience optimale. > Vous pouvez fonctionner en HTTP pour vos `return_url` et `refresh_url` lorsque vous êtes dans un environnement de test (par exemple, pour tester avec localhost), mais notez que le mode production n’accepte que le protocole HTTPS. Veillez à modifier les URL de test avec des URL HTTPS avant le lancement en mode production. #### return_url Stripe déclenche une redirection vers cette URL une fois que l’utilisateur a terminé son inscription Connect Onboarding. Ceci ne veut pas dire que toutes les informations ont été recueillies ni qu’il ne reste pas des conditions à remplir pour le compte, mais simplement que votre client est entré dans le flux et en est sorti sans que des soucis particuliers ne se posent. Aucun état n’est transmis par cette URL. Une fois que l’utilisateur est redirigé vers votre `return_url`, vérifiez l’état du paramètre `details_submitted` sur son compte de l’une des manières suivantes : - Écouter les webhooks `account.updated` - Appeler l’API [Accounts](https://docs.stripe.com/api/accounts.md) et inspecter l’objet renvoyé #### refresh_url Votre utilisateur est redirigé vers l’URL `refresh_url` dans les cas suivants : - Le lien a expiré (quelques minutes se sont écoulées depuis la création du lien) - L’utilisateur a déjà utilisé le lien (il a actualisé la page ou cliqué sur le bouton Précédent ou Suivant de son navigateur) - Votre plateforme n’est plus en mesure d’accéder au compte - Le compte a été rejeté Pour une expérience optimale, votre URL `refresh_url` doit déclencher une méthode permettant à votre serveur d’appeler à nouveau [Account Links](https://docs.stripe.com/api/account_links.md) avec les mêmes paramètres, et de rediriger l’utilisateur vers le flux Connect Onboarding. ### Gérer les utilisateurs n’ayant pas finalisé leur inscription Si un utilisateur est redirigé vers votre `return_url`, il peut ne pas avoir finalisé son inscription. Utilisez l’endpoint `/v1/accounts` pour récupérer ses données de compte et vérifier le paramètre `charges_enabled`. Si l’inscription du compte n’a pas été finalisée, affichez des invites pour encourager l’utilisateur à poursuivre son inscription. Il pourra achever l’activation de son compte grâce à un nouveau lien de compte généré par votre intégration. Pour vérifier qu’il a bien finalisé son inscription, examinez l’état du paramètre `details_submitted` sur son compte. ## Activer des moyens de paiement Accédez aux [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/connect/payment_methods) et activez ceux que vous souhaitez prendre en charge. Les paiements par carte bancaire sont activés par défaut, mais vous pouvez activer et désactiver les moyens de paiement de votre choix en fonction de vos besoins. Ce guide suppose que Bancontact, les cartes bancaires, EPS, iDEAL, Przelewy24, le prélèvement automatique SEPA et Sofort sont activés. Avant que le formulaire de paiement ne s’affiche, Stripe évalue la devise, les restrictions en matière de 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 pour la devise et le lieu de résidence du client sont automatiquement priorisés. Ceux de moindre priorité ne sont accessibles que via un menu déroulant. > Le **composant paramètres moyens de paiement intégrés** permet aux comptes connectés de configurer les moyens de paiement qu’ils proposent au moment du paiement sans avoir à accéder au Stripe Dashboard. En savoir plus sur le [composant paramètres moyens de paiement intégrés](https://docs.stripe.com/connect/supported-embedded-components/payment-method-settings.md) et recevoir une notification dès qu’il sera disponible. ## Accepter un paiement Intégrez [Stripe Checkout](https://stripe.com/payments/checkout) comme formulaire de paiement directement sur votre site web ou redirigez vos utilisateurs vers une page hébergée par Stripe pour accepter des paiements. Checkout prend en charge plusieurs moyens de paiement et affiche automatiquement ceux qui sont les plus pertinents pour votre client. Vous pouvez également utiliser le Payment Element, un composant d’interface préconfiguré intégré sous forme d’iframe dans votre formulaire de paiement, afin d’accepter plusieurs moyens de paiement avec une seule intégration frontend. #### Page hébergée par Stripe ### Créer une session Checkout (Client-side) (Server-side) Une session Checkout détermine ce que votre client voit sur le formulaire de paiement intégré, notamment les postes de facture, le montant et la devise de la commande, ainsi que les moyens de paiement acceptés. Dans le cas de paiements directs, Checkout utilise les paramètres de branding du compte connecté. Pour en savoir plus, consultez la section [Personnaliser l’image de marque](https://docs.stripe.com/connect/direct-charges.md?platform=web&ui=stripe-hosted#branding). Les utilisateurs ne sont pas responsables des paiements indirects et des paiements et transferts distincts. En revanche, c’est à eux qu’il revient de gérer les litiges concernant les paiements directs, et non à la plateforme. 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 "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ --data-urlencode "success_url=https://example.com/success" ``` - `line_items` : cet argument représente les postes achetés par votre client, qui apparaîtront dans l’interface utilisateur hébergée. - `success_url` : cet argument assure la redirection de l’utilisateur une fois le paiement effectué. - `Stripe-Account` : Cet en-tête indique un [paiement direct](https://docs.stripe.com/connect/direct-charges.md) pour votre compte connecté. Lors d’un paiement direct, le compte connecté est responsable des frais, des remboursements et des contestations de paiement de Stripe. Checkout reflète l’image de marque du compte connecté, ce qui donne l’impression aux clients d’être directement en contact avec le compte connecté et non avec votre plateforme. - (Facultatif) `payment_intent_data[application_fee_amount]` : cet argument précise le montant que votre plateforme prévoit de prélever sur la transaction. Après le traitement du paiement sur le compte connecté, le montant `application_fee_amount` est transféré sur la plateforme et les frais Stripe sont déduits du solde du compte connecté. ![Flux de création de compte](https://b.stripecdn.com/docs-statics-srv/assets/direct_charges.a2a8b68037ac95fe22140d6dde9740d3.svg) ### 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 (Client-side) (Server-side) Une session Checkout détermine ce que votre client voit sur la page de paiement hébergée par Stripe, notamment les postes de facture, le montant et la devise de la commande, ainsi que les moyens de paiement acceptés. Dans le cas de paiements directs, Checkout utilise les paramètres de branding du compte connecté. Pour en savoir plus, consultez la section [Personnaliser l’image de marque](https://docs.stripe.com/connect/direct-charges.md?platform=web&ui=stripe-hosted#branding). Les utilisateurs ne sont pas responsables des paiements indirects et des paiements et transferts distincts. En revanche, c’est à eux qu’il revient de gérer les litiges concernant les paiements directs, et non à la plateforme. Sur votre serveur, passez l’appel suivant à l’API Stripe. La réponse à la création de la session Checkout inclut un `client_secret`, que vous utiliserez dans l’étape suivante pour monter Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -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 ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}" ``` - `line_items` : cet argument représente les articles que votre client achète, qui s’afficheront dans l’interface utilisateur hébergée. - `return_url` : cet argument assure la redirection de l’utilisateur une fois la tentative de paiement effectuée. - `Stripe-Account` : cet en-tête indique un [paiement direct](https://docs.stripe.com/connect/direct-charges.md) pour votre compte connecté. Avec les paiements directs, le compte connecté assume les frais Stripe, les remboursements et les contestations de paiement. La marque du compte connecté est utilisée dans Checkout, ce qui donne l’impression aux clients d’être en contact directement avec le marchand et non avec votre plateforme. - (Facultatif) `payment_intent_data[application_fee_amount]` : cet argument spécifie le montant que votre plateforme prévoit de prélever sur la transaction. Si vous utilisez l’[outil de tarification pour plateforme](https://docs.stripe.com/connect/platform-pricing-tools.md) de Stripe pour gérer la tarification de vos frais de plateforme à partir du [Dashboard](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments), n’incluez pas cet argument, car il remplacerait toute logique de tarification définie par l’outil. Une fois le paiement traité sur le compte connecté, le `application_fee_amount` est transféré à la plateforme et les frais de Stripe sont déduits du solde du compte connecté. Assurez-vous que la `return_url` correspond à une page de votre site Web indiquant l’état du paiement. Lorsque Stripe redirige le client vers la `return_url`, nous remplaçons la chaîne `{CHECKOUT_SESSION_ID}` par l’ID de session Checkout. Servez-vous en pour récupérer la session Checkout et inspecter l’état afin de décider de ce que vous allez montrer à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez la `return_url`, et ceux-ci sont conservés tout au long du processus de redirection. ![Flux de création de compte](https://b.stripecdn.com/docs-statics-srv/assets/direct_charges.a2a8b68037ac95fe22140d6dde9740d3.svg) ### 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('<>', { stripeAccount: '{{CONNECTED_ACCOUNT_ID}}', }); 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. ### Personnaliser l’apparence Personnalisez Checkout pour qu’il corresponde au design de votre site en définissant la couleur d’arrière-plan, la couleur des boutons, le rayon 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 s’affiche sans espacement externe ni marge. Nous vous recommandons d’utiliser un élément de conteneur tel qu’un espace div pour appliquer la marge souhaitée (par exemple, 16 px sur tous les côtés). ### 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, ne listez pas les moyens de paiement manuellement. 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. Les moyens 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 automatiquement priorisés par Stripe. Ceux de moindre priorité ne sont accessibles que via un menu de débordement. #### Gérer les moyens de paiement depuis le Dashboard ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d amount=1099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]=true" \ -d application_fee_amount=123 ``` Lors de la création d’un PaymentIntent, vous devez spécifier certains paramètres : - `amount` et `currency` : créez un PaymentIntent sur votre serveur avec un montant et une devise. - (Facultatif) `automatic_payment_methods` : dans la dernière version de l’API, il n’est pas nécessaire de spécifier ce paramètre, car Stripe active sa fonctionnalité par défaut. Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe renvoie automatiquement les moyens de paiement éligibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux de paiement. - (Facultatif) `payment_intent_data[application_fee_amount]` : cet argument spécifie le montant que votre plateforme prévoit de prélever sur la transaction. Si vous utilisez l’[outil de tarification pour plateforme](https://docs.stripe.com/connect/platform-pricing-tools.md) de Stripe pour gérer la tarification de vos frais de plateforme à partir du [Dashboard](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments), n’incluez pas cet argument, car il remplacerait toute logique de tarification définie par l’outil. Une fois le paiement traité sur le compte connecté, le `application_fee_amount` est transféré à la plateforme et les frais de Stripe sont déduits du solde du compte connecté. #### Référencer manuellement les moyens de paiement ```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 ``` Lors de la création d’un PaymentIntent, vous devez spécifier certains paramètres : - `amount` : créez un PaymentIntent sur votre serveur avec un montant spécifié. Déterminez toujours le montant à débiter côté serveur, car il s’agit d’un environnement sécurisé. Cette approche permet d’éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs. - `currency` : la devise que vous incluez dans le PaymentIntent filtre les moyens de paiement présentés au client, et le choix de la devise doit donc s’opérer en fonction des moyens de paiement que vous souhaitez proposer. Par exemple, si vous transmettez `eur` et que vous avez activé OXXO dans votre Dashboard, votre client ne verra pas ce moyen de paiement, car OXXO ne prend pas en charge les paiements libellés en `eur`. 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, les cartes de crédit, EPS, iDEAL, Przelewy24, le prélèvement automatique SEPA et Sofort. - `"payment_method_types[]"` : dressez manuellement la liste de tous les moyens de paiement que vous souhaitez prendre en charge. - (Facultatif) `payment_intent_data[application_fee_amount]` : cet argument spécifie le montant que votre plateforme prévoit de prélever sur la transaction. Si vous utilisez l’[outil de tarification pour plateforme](https://docs.stripe.com/connect/platform-pricing-tools.md) de Stripe pour gérer la tarification de vos frais de plateforme à partir du [Dashboard](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments), n’incluez pas cet argument, car il remplacerait toute logique de tarification définie par l’outil. Une fois le paiement traité sur le compte connecté, le `application_fee_amount` est transféré à la plateforme et les frais de Stripe sont déduits du solde du compte connecté. > 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 de votre client à l’aide de Payment Element, un composant préconfiguré de l’interface utilisateur qui simplifie cette collecte 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. 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. #### Configurer Stripe.js #### HTML + 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 // Initialize Stripe.js with the same connected account ID used when creating // the PaymentIntent. const stripe = Stripe('<>', { stripeAccount: '{{CONNECTED_ACCOUNT_ID}}' }); ``` #### Ajouter Stripe Elements et le composant 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 (conteneur) vide avec un ID unique dans votre formulaire de paiement. ```html
``` Une fois que le formulaire a été chargé, créez une instance du 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) obtenue à l’étape précédente en tant qu’option. La clé secrète du client doit être utilisée 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 the Appearance API appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form using the client secret const elements = stripe.elements(options); // Create and mount the Payment Element const paymentElement = elements.create("payment"); paymentElement.mount("#payment-element"); ``` Le Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Ce formulaire recueille automatiquement toutes les informations nécessaires pour le moyen de paiement sélectionné par le client. Vous pouvez [personnaliser l’apparence du Payment Element](https://docs.stripe.com/elements/appearance-api.md) pour qu’il corresponde au design de votre site lorsque vous configurez l’objet `Elements`. #### 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 : ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Ajouter et configurer le fournisseur Elements sur votre page de paiement Pour utiliser Payment Element, incluez le composant de votre 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 le paramètre `Promise` renvoyé ainsi que 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 en tant qu’`options` dans le fournisseur `Elements`. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import 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("<>", { stripeAccount: '{{CONNECTED_ACCOUNT_ID}}' }); function App() { const options = { // pass the client secret from the previous step clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with the 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; ``` Le Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un type de moyen de paiement. Ce formulaire collecte automatiquement toutes les informations requises pour le moyen de paiement sélectionné par le client. Vous pouvez [personnaliser l’apparence du Payment Element](https://docs.stripe.com/elements/appearance-api.md) pour qu’il corresponde au design de votre site lorsque vous configurez le fournisseur `Elements`. ### 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 compte 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). Testez vos paramètres de **moyens de paiement** pour vos comptes connectés en vous connectant à l’un de vos comptes test et en accédant aux [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Testez votre tunnel de paiement à l’aide de vos clés et d’un compte test. Vous pouvez utiliser nos [cartes de test](https://docs.stripe.com/testing.md) pour tester votre tunnel de paiement et simuler divers scénarios. # 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-saas-platform?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). ## Conditions préalables 1. [Inscrire votre plateforme](https://dashboard.stripe.com/connect). 1. Ajoutez des informations sur l’entreprise pour [activer votre compte](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] Pour commencer, vous devez [créer un compte](https://dashboard.stripe.com/register) Stripe. ### Côté serveur Cette intégration exige des endpoints sur votre serveur qui communiquent avec l’API Stripe. Utilisez nos 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 **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 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 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 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 **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 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 UIKitimportStripePaymentSheet @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é Lorsqu’un utilisateur (marchand ou fournisseur de services) s’inscrit sur votre plateforme, créez un [compte](https://docs.stripe.com/api/accounts.md) d’utilisateur (appelé *compte connecté*) afin de pouvoir accepter des paiements de sa part et transférer des fonds vers son compte bancaire. Les comptes connectés représentent vos utilisateurs dans l’API de Stripe et permettent de collecter facilement les informations nécessaires pour vérifier leur identité. Dans notre exemple de création de boutique, le compte connecté représente l’entreprise qui configure sa boutique en ligne. ![Flux de création de compte](https://b.stripecdn.com/docs-statics-srv/assets/standard-ios.10c6b24cef1d683d36f2264c726beb1d.png) ### Étape 2.1 : créer un compte connecté et préremplir les informations (Server-side) Utilisez l’API `/v1/accounts` pour [créer](https://docs.stripe.com/api/accounts/create.md) un compte connecté. Vous pouvez le créer en utilisant les [paramètres par défaut du compte connecté](https://docs.stripe.com/connect/migrate-to-controller-properties.md) ou en spécifiant le type de compte. #### Avec les propriétés par défaut ```curl curl -X POST https://api.stripe.com/v1/accounts \ -u "<>:" ``` #### Avec le type de compte ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d type=standard ``` 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 [Person](https://docs.stripe.com/api/persons/create.md) pour représenter la personne responsable de l’ouverture du compte et définissez `relationship.representative` sur true et toutes les informations de compte que vous souhaitez préremplir (par exemple, son prénom et son nom). ```curl curl https://api.stripe.com/v1/accounts/{{ACCOUNT_ID}}/persons \ -u "<>:" \ -d first_name=Jenny \ -d last_name=Rosen \ -d "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). ### Étape 2.2 : Créer un lien de compte (Coté serveur) Vous pouvez créer un lien de compte en appelant l’API [Account Links](https://docs.stripe.com/api/account_links.md) avec les paramètres suivants : - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` ```curl curl https://api.stripe.com/v1/account_links \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "refresh_url=https://example.com/reauth" \ --data-urlencode "return_url=https://example.com/return" \ -d type=account_onboarding ``` ### Étape 2.3 : Rediriger votre utilisateur vers l’URL du lien de compte (Côté client) La réponse à votre requête [Account Links](https://docs.stripe.com/api/account_links.md) contient une valeur pour la clé `url`. Redirigez l’utilisateur vers ce lien pour l’introduire dans le flux. Les liens de compte sont temporaires et à usage unique, car ils donnent accès aux informations personnelles du titulaire du compte connecté. Authentifiez l’utilisateur dans votre application avant de le rediriger vers cette URL. Si vous souhaitez préremplir des informations, vous devez le faire avant de générer le lien de compte. Une fois le lien créé pour un compte Standard, les opérations de lecture comme d’écriture ne seront plus possibles pour ce compte. > 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. #### 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 } } ``` ### Étape 2.4 : Gérer le retour de l’utilisateur sur votre plateforme (Côté client) *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) Onboarding vous demande de transmettre à la fois une URL `return_url` et une URL `refresh_url` pour gérer tous les cas de redirection des utilisateurs vers votre plateforme. Il est important que vous les implémentiez correctement afin d’offrir à vos utilisateurs une expérience optimale. Vous pouvez configurer un [lien universel](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content) permettant à iOS de procéder à une redirection automatique vers votre application. #### return_url Stripe déclenche une redirection vers cette URL une fois que l’utilisateur a terminé son inscription Connect Onboarding. Ceci ne veut pas dire que toutes les informations ont été recueillies ni qu’il ne reste pas des conditions à remplir pour le compte, mais simplement que l’entrée de votre client dans le flux et sa sortie se sont déroulées correctement. Aucun état n’est transmis par cette URL. Une fois que l’utilisateur est redirigé vers votre `return_url`, vérifiez l’état du paramètre `details_submitted` sur son compte de l’une des manières suivantes : - Écoutez les *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) `account.updated`. - Appeler l’API [Accounts](https://docs.stripe.com/api/accounts.md) et inspecter l’objet renvoyé #### refresh_url Votre utilisateur est redirigé vers l’URL `refresh_url` dans les cas suivants : - Le lien a expiré (quelques minutes se sont écoulées depuis la création du lien) - L’utilisateur a déjà fait usage du lien (il a actualisé la page ou cliqué sur le bouton Précédent ou Suivant de son navigateur) - Votre plateforme n’est plus en mesure d’accéder au compte - Le compte a été rejeté Pour une expérience optimale, votre URL `refresh_url` doit déclencher une méthode permettant à votre serveur d’appeler à nouveau [Account Links](https://docs.stripe.com/api/account_links.md) avec les mêmes paramètres, et de rediriger l’utilisateur vers le flux Connect Onboarding. ### Étape 2.5 : Gérer les utilisateurs dont l’inscription n’est pas terminée Un utilisateur qui est redirigé vers votre `return_url` peut ne pas avoir terminé son inscription. Utilisez l’endpoint `/v1/accounts` pour récupérer ses données de compte et vérifier le paramètre `charges_enabled`. Si l’inscription du compte n’a pas été finalisée, affichez des invites pour encourager l’utilisateur à poursuivre son inscription. Il pourra achever l’activation de son compte grâce à un nouveau lien de compte (généré par votre intégration). Vous pourrez vérifier l’état du paramètre `details_submitted` sur son compte pour voir s’il a complété son inscription. ## Activer les moyens de paiement Accédez aux [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/connect/payment_methods) et activez ceux que vous souhaitez prendre en charge. Les paiements par carte bancaire sont activés par défaut, mais vous pouvez activer et désactiver les moyens de paiement de votre choix en fonction de vos besoins. ## Ajouter un endpoint [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez notre article [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). If your integration uses [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), replace `Customer` and event references in the code examples with the equivalent Accounts v2 API references. For more information, see [Represent customers with Account objects](https://docs.stripe.com/connect/use-accounts-as-customers.md). 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 un objet PaymentIntent qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus. 1. (Facultatif) [Customer](https://docs.stripe.com/api/customers.md) : pour configurer un moyen de paiement en vue de paiements futurs, vous devez l’associer à un objet *Customer* (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 ouvre un compte chez vous. Si votre client effectue un paiement en tant qu’invité, vous pouvez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte client. 1. (Facultatif) [CustomerSession](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 depuis une application. Une CustomerSession accorde au 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 bancaires des clients et que vous n’autorisez pas vos clients récurrents à réutiliser les cartes enregistrées, vous pouvez 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. À la place, ajoutez sur votre serveur un endpoint 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) et [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Renvoie 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, la `client_secret` de la CustomerSession, l’[id](https://docs.stripe.com/api/customers/object.md#customer_object-id) du client et votre [clé publiable](https://dashboard.stripe.com/apikeys) à votre application. Les moyens de paiement présentés à votre client lors du processus de paiement sont également inclus dans le PaymentIntent. Vous pouvez laisser Stripe extraire (depuis les paramètres de votre Dashboard) les moyens de paiement à présenter, ou les répertorier manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les moyens de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans votre Dashboard, votre client ne verra pas ce moyen de paiement étant donné qu’OXXO ne prend pas en charge les paiements en `eur`. À moins que votre intégration ne nécessite du code pour la présentation des moyens de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions en matière de 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 pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement dans le Dashboard Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le renvoi des 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éé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou souhaitez spécifier 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 <>: \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" -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 \ -d application_fee_amount="123" \ ``` #### Répertorier manuellement les 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 <>: \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" -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" \ -d application_fee_amount="123" \ ``` > 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. Consultez la page [Options d’intégration des moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour plus d’informations sur la prise en charge. ## Intégrer le formulaire de paiement [Côté client] Pour afficher le composant Payment Element sur votre page de paiement, veillez à : - Afficher les produits commandés et le montant total des achats - Utiliser le composant [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 l’Paymentintention de la clé secrète du client, la CustomerSession de la clé secrète du client, l’ID du client et la clé publiable à partir de l’endpoint que vous avez créé à l’étape précédente. Utilisez `STPAPIClient.shared` pour définir votre clé publiable et initialiser la [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Ensuite, définissez `STPAPIClient.shared.stripeAccount` sur l’ID compte connecté. #### 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 = publishableKeySTPAPIClient.shared.stripeAccount = ""{{CONNECTED_ACCOUNT_ID}}""// 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() } } ``` Quand le client appuie sur le bouton de **paiement**, appelez `present` pour afficher la PaymentSheet. Une fois la transaction effectuée, Stripe ferme le PaymentSheet et appelle le bloc de finalisation avec un [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 l’Paymentintention de la clé secrète du client, la CustomerSession de la clé secrète du client, l’ID du client et la clé publiable à partir de l’endpoint que vous avez créé à l’étape précédente. Utilisez `STPAPIClient.shared` pour définir votre clé publiable et initialiser la [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Ensuite, définissez `STPAPIClient.shared.stripeAccount` sur l’ID compte connecté. ```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 = publishableKeySTPAPIClient.shared.stripeAccount = ""{{CONNECTED_ACCOUNT_ID}}""// 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`. Il présente un comportement similaire à un `Button` SwiftUI, ce qui vous permet de le personnaliser en ajoutant une `View`. Lorsque vous appuyez sur le bouton, la PaymentSheet s’affiche. Une fois la transaction finalisée, 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 STPAPIClient.shared.stripeAccount = ""{{CONNECTED_ACCOUNT_ID}}"" // 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` sur true, les moyens de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires étasuniens, seront acceptés. Pour ces moyens de paiement, l’état final du paiement n’est pas connu une fois le processus du `PaymentSheet` achevé, et le paiement peut plus tard aboutir comme échouer. Si vous prenez en charge ces types de moyens de paiement, informez votre client que sa commande est confirmée et ne la traitez (en lui expédiant son produit, par exemple) qu’une fois le paiement reçu. ## Configurer une URL de redirection [Côté client] Le client peut 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 au 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 } } } } } ``` ## 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. | ## Tester l'intégration #### 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. | #### Virements avec redirection bancaire | Moyen de paiement | Scénario | Méthode de test | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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 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`. | Consultez la section consacrée aux [tests](https://docs.stripe.com/testing.md) pour obtenir des informations supplémentaires sur la manière de tester votre intégration. ## Optional: Activer Apple Pay > Si votre écran de contrôle dispose d’un **bouton Apple Pay** dédié, suivez le [guide Apple Pay](https://docs.stripe.com/apple-pay.md#present-payment-sheet) et utilisez `ApplePayContext` pour encaisser des paiements à partir de votre bouton Apple Pay. Vous pouvez utiliser `PaymentSheet` pour gérer d’autres 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 CSR (Certificate Signing Request) pour obtenir d’Apple un certificat sécurisé vous autorisant à utiliser Apple Pay. Un fichier CSR peut émettre exactement un certificat. Si vous changez d’ID de marchand Apple, vous devez accéder aux [paramètres des certificats iOS](https://dashboard.stripe.com/settings/ios_certificates) dans le Dashboard pour obtenir un nouveau fichier CSR et un nouveau certificat. ### Réaliser une intégration avec Xcode Ajoutez la fonctionnalité Apple Pay à votre application. Dans Xcode, ouvrez vos paramètres de projet, cliquez sur l’onglet **Signature et fonctionnalités**, puis ajoutez **Apple Pay**. Vous serez peut-être alors invité(e) à vous connecter à votre compte développeur. Sélectionnez l’ID du marchand créé plus tôt. Il est désormais possible d’utiliser Apple Pay sur votre application. ![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png) Activez la fonctionnalité Apple Pay dans Xcode ### Ajouter Apple Pay #### Paiement ponctuel Pour ajouter Apple Pay à PaymentSheet, définissez [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) après avoir initialisé `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, définissez [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) après avoir initialisé `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 des [tokens de marchand](https://developer.apple.com/apple-pay/merchant-tokens/) en définissant les propriétés `recurringPaymentRequest` ou `automaticReloadPaymentRequest` dans `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 de commande 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 effectue un appel vers votre implémentation une fois le paiement effectué, mais avant qu’iOS ne ferme la fiche Apple Pay. Dans votre déploiement `authorizationResultHandler`, récupérez les détails de la commande finalisée sur votre serveur. Ajoutez ces informations au [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) spécifié, et renvoyez le résultat modifié. Pour en savoir plus sur le suivi des commandes, consultez la [documentation Apple’s Wallet Orders](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 la numérisation de carte Pour activer la numérisation des cartes pour iOS, définissez le paramètre `NSCameraUsageDescription` (**Confidentialité – Description de l’utilisation de l’appareil photo**) dans le fichier `Info.plist` de votre application et indiquez le motif d’accès à l’appareil photo (« pour numériser des cartes », par exemple). ## Optional: Personnaliser le formulaire 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 Personnalisez les couleurs, les polices et plus encore afin de vous adapter à l’apparence de votre application à l’aide de l’[API Appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios). ### Mise en page des moyens de paiement Configurez la mise en page des moyens 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 ``` ### Recueillir les adresses des utilisateurs Recueillez les adresses de livraison ou de facturation de vos clients locaux et internationaux à l’aide du composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios). ### Nom d’affichage du marchand Spécifiez un nom d’entreprise à afficher 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 en fonction des paramètres d’affichage du système de l’utilisateur (mode clair et foncé). Si votre application ne prend pas en charge le mode sombre, vous pouvez définir [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 Si vous souhaitez définir des valeurs par défaut pour les informations de facturation collectées dans le formulaire de paiement, configurez la propriété `defaultBillingDetails`. Le `PaymentSheet` préremplit les 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 manière dont vous souhaitez collecter les informations de facturation dans le Payment Sheet. Vous pouvez collecter le nom, l’adresse e-mail, 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 moyen de paiement, définissez la valeur de `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur « true ». Dans ce cas, les `PaymentSheet.Configuration.defaultBillingDetails` sont définis comme les [informations de facturation](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) du moyen de paiement. Si vous souhaitez collecter des informations de facturation supplémentaires qui ne sont pas nécessairement requises par le moyen de paiement, définissez la valeur de `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur false. Dans ce cas, les informations de facturation collectées depuis 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 d’informations. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction. ## Optional: Mener à bien 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) Mener à bien le paiement dans l’interface utilisateur de votre application #### UIKit Les étapes suivantes vous expliquent comment mener à bien le 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) au lieu de `PaymentSheet`, puis mettez à jour votre interface utilisateur avec sa propriété `paymentOption`. Celle-ci 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 mener à bien le 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) au lieu de `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 wrapper le bouton qui présente la fiche de collecte des données de paiement. Lorsque `PaymentSheet.FlowController` appelle l’argument `onSheetDismissed`, la propriété `paymentOption` de l’instance de `PaymentSheet.FlowController` reflète le moyen 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 wrapper le bouton servant à confirmer 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 la valeur de `PaymentSheetResult` est `.completed`, informez l’utilisateur (par exemple, en affichant un écran de confirmation de commande). Si vous définissez `allowsDelayedPaymentMethods` sur true, les moyens de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires étasuniens, seront acceptés. Pour ces moyens de paiement, l’état final du paiement n’est pas connu une fois le processus du `PaymentSheet` achevé, et le paiement peut plus tard aboutir comme échouer. Si vous prenez en charge ces types de moyens de paiement, informez votre client que sa commande est confirmée et ne la traitez (en lui expédiant son produit, par exemple) qu’une fois le paiement reçu. ## Tests Testez votre flux de création de compte 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). Testez vos paramètres de **moyens de paiement** pour vos comptes connectés en vous connectant à l’un de vos comptes test et en accédant aux [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Testez votre tunnel de paiement à l’aide de vos clés et d’un compte test. Vous pouvez utiliser nos [cartes de test](https://docs.stripe.com/testing.md) pour tester votre tunnel de paiement et simuler divers scénarios. # Element Card uniquement > This is a Element Card uniquement for when platform is ios and mobile-ui is card-element. View the full page at https://docs.stripe.com/connect/end-to-end-saas-platform?platform=ios&mobile-ui=card-element. Collectez les informations de carte bancaire côté client en toute sécurité avec [STPPaymentCardTextField](https://stripe.dev/stripe-ios/stripe-payments-ui/Classes/STPPaymentCardTextField.html), un composant d’interface utilisateur prêt à l’emploi fourni par le SDK, qui collecte le numéro de carte bancaire, la date d’expiration, le CVC et le code postal. ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/ios/card-field.mp4) ## Prérequis 1. [Inscrire votre plateforme](https://dashboard.stripe.com/connect). 1. Ajoutez des informations sur l’entreprise pour [activer votre compte](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é Ce guide vous explique comment créer un compte connecté en utilisant du code. Si vous n’êtes pas encore prêt pour l’intégration, vous pouvez commencer par créer un compte connecté [via le Dashboard](https://docs.stripe.com/connect/dashboard/managing-individual-accounts.md). Lorsqu’un utilisateur (marchand ou fournisseur de services) s’inscrit sur votre plateforme, créez un [compte](https://docs.stripe.com/api/accounts.md) d’utilisateur (appelé *compte connecté*) afin de pouvoir accepter des paiements de sa part et transférer des fonds vers son compte bancaire. Les comptes connectés représentent vos utilisateurs dans l’API de Stripe et permettent de collecter facilement les informations nécessaires pour vérifier leur identité. Dans notre exemple de création de boutique, le compte connecté représente l’entreprise qui configure sa boutique en ligne. ![](https://b.stripecdn.com/docs-statics-srv/assets/standard-ios.10c6b24cef1d683d36f2264c726beb1d.png) ### Étape 2.1 : créer un compte connecté et préremplir les informations (Server-side) Utilisez l’API `/v1/accounts` pour [créer](https://docs.stripe.com/api/accounts/create.md) un compte connecté. Vous pouvez le créer en utilisant les [paramètres par défaut du compte connecté](https://docs.stripe.com/connect/migrate-to-controller-properties.md) ou en spécifiant le type de compte. #### Avec les propriétés par défaut ```curl curl -X POST https://api.stripe.com/v1/accounts \ -u "<>:" ``` #### Avec le type de compte ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d type=standard ``` 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 [Person](https://docs.stripe.com/api/persons/create.md) pour représenter la personne responsable de l’ouverture du compte et définissez `relationship.representative` sur true et toutes les informations de compte que vous souhaitez préremplir (par exemple, son prénom et son nom). ```curl curl https://api.stripe.com/v1/accounts/{{ACCOUNT_ID}}/persons \ -u "<>:" \ -d first_name=Jenny \ -d last_name=Rosen \ -d "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). ### Étape 2.2 : Créer un lien de compte (Coté serveur) Vous pouvez créer un lien de compte en appelant l’API [Account Links](https://docs.stripe.com/api/account_links.md) avec les paramètres suivants : - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` ```curl curl https://api.stripe.com/v1/account_links \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "refresh_url=https://example.com/reauth" \ --data-urlencode "return_url=https://example.com/return" \ -d type=account_onboarding ``` ### Étape 2.3 : Rediriger votre utilisateur vers l’URL du lien de compte (Côté client) La réponse à votre requête [Account Links](https://docs.stripe.com/api/account_links.md) inclut une valeur pour la clé `url`. Redirigez l’utilisateur vers ce lien pour l’envoyer dans le flux. Les URL générées par l’API [Account Links](https://docs.stripe.com/api/account_links.md) sont temporaires et ne peuvent être utilisées qu’une seule fois, car elles donnent accès aux informations personnelles du titulaire du compte. Authentifiez l’utilisateur dans votre application avant de le rediriger vers cette URL. Si vous souhaitez préremplir des informations, vous devez le faire avant de générer le lien de compte. Après la création du lien de compte pour un compte Standard, vous ne pourrez plus lire ni modifier les informations du compte. > 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. #### 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 } } ``` ### Étape 2.4 : Gérer le retour de l’utilisateur sur votre plateforme (Côté client) *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) Onboarding vous demande de transmettre à la fois une URL `return_url` et une URL `refresh_url` pour gérer tous les cas de redirection des utilisateurs vers votre plateforme. Il est important que vous les implémentiez correctement afin d’offrir à vos utilisateurs une expérience optimale. Vous pouvez configurer un [lien universel](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content) permettant à iOS de procéder à une redirection automatique vers votre application. #### return_url Stripe déclenche une redirection vers cette URL une fois que l’utilisateur a terminé son inscription Connect Onboarding. Ceci ne veut pas dire que toutes les informations ont été collecter ni qu’il ne reste pas des conditions à remplir pour le compte, mais simplement que l’entrée de votre client dans le flux et sa sortie se sont déroulées correctement. Aucun état n’est transmis par cette URL. Une fois que l’utilisateur est redirigé vers votre `return_url`, vérifiez l’état du paramètre `details_submitted` sur son compte de l’une des manières suivantes : - Écoutez les *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) `account.updated`. - Appeler l’API [Accounts](https://docs.stripe.com/api/accounts.md) et inspecter l’objet renvoyé #### refresh_url Votre utilisateur sera redirigé vers `refresh_url` dans les cas suivants : - Le lien a expiré (quelques minutes se sont écoulées depuis la création du lien) - Le lien a déjà été utilisé (l’utilisateur a actualisé la page ou cliqué sur le bouton Précédent ou Suivant du navigateur) - Le lien a été partagé dans une application tierce, telle qu’un client de messagerie, qui tente d’accéder à l’URL pour afficher un aperçu. De nombreux clients visitent automatiquement les liens, ce qui entraîne leur expiration - Votre plateforme n’est plus en mesure d’accéder au compte - Le compte a été rejeté Pour une expérience optimale, votre URL `refresh_url` doit déclencher une méthode permettant à votre serveur d’appeler à nouveau [Account Links](https://docs.stripe.com/api/account_links.md) avec les mêmes paramètres, et de rediriger l’utilisateur vers le flux Connect Onboarding. ### Étape 2.5 : Gérer les utilisateurs dont l’inscription n’est pas allée à son terme Un utilisateur qui est redirigé vers votre `return_url` peut ne pas avoir terminé son inscription. Utilisez l’endpoint `/v1/accounts` pour récupérer ses données de compte et vérifier le paramètre `charges_enabled`. Si l’inscription du compte n’a pas été finalisée, affichez des invites pour encourager l’utilisateur à poursuivre son inscription. Il pourra achever l’activation de son compte grâce à un nouveau lien de compte (généré par votre intégration). Vous pourrez vérifier l’état du paramètre `details_submitted` sur son compte pour voir s’il a complété son inscription. ## Accepter un paiement ### Étape 3.1 : Créer votre page de paiement (Côté client) Collectez les informations de carte bancaire côté client en toute sécurité avec [STPPaymentCardTextField](https://stripe.dev/stripe-ios/stripe-payments-ui/Classes/STPPaymentCardTextField.html), un composant d’interface utilisateur prêt à l’emploi fourni par le SDK, qui collecte le numéro de carte bancaire, la date d’expiration, le CVC et le code postal. ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/ios/card-field.mp4) Créez une instance du composant de la carte et un bouton **Payer** avec le code suivant : #### Swift ```swift import UIKit import StripePaymentsUI class CheckoutViewController: UIViewController { lazy var cardTextField: STPPaymentCardTextField = { let cardTextField = STPPaymentCardTextField() return cardTextField }() lazy var payButton: UIButton = { let button = UIButton(type: .custom) button.layer.cornerRadius = 5 button.backgroundColor = .systemBlue button.titleLabel?.font = UIFont.systemFont(ofSize: 22) button.setTitle("Pay", for: .normal) button.addTarget(self, action: #selector(pay), for: .touchUpInside) return button }() override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white let stackView = UIStackView(arrangedSubviews: [cardTextField, payButton]) stackView.axis = .vertical stackView.spacing = 20 stackView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(stackView) NSLayoutConstraint.activate([ stackView.leftAnchor.constraint(equalToSystemSpacingAfter: view.leftAnchor, multiplier: 2), view.rightAnchor.constraint(equalToSystemSpacingAfter: stackView.rightAnchor, multiplier: 2), stackView.topAnchor.constraint(equalToSystemSpacingBelow: view.topAnchor, multiplier: 2), ]) } @objc func pay() { // ... } } ``` Exécutez votre application et assurez-vous que votre page de paiement affiche le composant de carte et le bouton de paiement. ### Étape 3.2 : Créer un PaymentIntent (Côté serveur) (Côté client) 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. ### Côté serveur Sur votre serveur, créez un endpoint qui génère un PaymentIntent avec un [montant](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-amount) et une [devise](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-currency). Veillez à systématiquement définir le montant à débiter côté serveur (donc au sein d’un environnement sécurisé) plutôt que côté client. Cela évite que des clients mal intentionnés puissent fixer leurs propres prix. #### curl ```bash curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -d amount=1000 \ -d currency="usd" \ -d "automatic_payment_methods[enabled]"=true \ -d application_fee_amount="123" \ -H "Stripe-Account: {{CONNECTED_STRIPE_ACCOUNT_ID}}" ``` Dans notre exemple d’outil de création de boutique, nous souhaitons créer une entreprise dans laquelle les clients paient directement les entreprises. Pour créer cette entreprise : - Indiquez qu’un achat auprès de l’entreprise est un paiement direct à l’aide de l’en-tête `Stripe-Account`. - Spécifiez la part de l’achat de l’entreprise qui revient à la plateforme avec `application_fee_amount`. Lors d’une vente, Stripe transfère le montant `application_fee_amount` du compte connecté vers la plateforme et déduit les frais Stripe de la part du compte connecté. Voici une illustration de ce flux de fonds : ![](https://b.stripecdn.com/docs-statics-srv/assets/direct_charges.a2a8b68037ac95fe22140d6dde9740d3.svg) Au lieu de transmettre à votre application la totalité de l’objet PaymentIntent, renvoyez uniquement 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)). La clé secrète du client pour la PaymentIntent est une clé unique qui vous permet de confirmer le paiement et d’actualiser les informations de carte bancaire côté client, tout en empêchant la manipulation d’informations sensibles comme le montant du paiement. ### Côté client Configurez l’ID du compte connecté en tant qu’argument de l’application client dans les bibliothèques côté client. #### Swift ```swift import UIKit import StripePayments @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { StripeAPI.defaultPublishableKey = "<>" STPAPIClient.shared.stripeAccount = ""{{CONNECTED_ACCOUNT_ID}}"" return true } } ``` Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez 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)) qu’il contient. #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? // ...continued from previous step override func viewDidLoad() { // ...continued from previous step startCheckout() } func startCheckout() { // Request a PaymentIntent from your server and store its client secret // Click View full sample to see a complete implementation } } ``` ### Étape 3.3 : Envoyer le paiement à Stripe (Côté client) Lorsque le client appuie sur le bouton **Payer**, *confirmez* (Confirming a PaymentIntent indicates that the customer intends to pay with the current or provided payment method. Upon confirmation, the PaymentIntent attempts to initiate a payment) le `PaymentIntent` pour finaliser le paiement. Tout d’abord, composez un objet [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html) avec : 1. Les détails du moyen de paiement du champ de texte de carte 1. La clé secrète du client pour le `PaymentIntent` de votre serveur Plutôt que d’envoyer la totalité de l’objet PaymentIntent au client, utilisez sa *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)). Cette clé est différente de vos clés API qui servent à authentifier les requêtes envoyées aux API Stripe. La clé secrète du client est une chaîne qui permet à votre application d’accéder à des champs importants du PaymentIntent (par exemple, `status`) tout en masquant les champs sensibles (par exemple, `customer`). Utilisez la clé secrète du client avec prudence, car elle peut servir à mener à bien 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. Effectuez ensuite le paiement en appelant la méthode [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:). #### Swift ```swift class CheckoutViewController: UIViewController { // ... @objc func pay() { guard let paymentIntentClientSecret = paymentIntentClientSecret else { return } // Collect card details let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) paymentIntentParams.paymentMethodParams = cardTextField.paymentMethodParams // Submit the payment let paymentHandler = STPPaymentHandler.shared() paymentHandler.confirmPayment(paymentIntentParams, with: self) { (status, paymentIntent, error) in switch (status) { case .failed: self.displayAlert(title: "Payment failed", message: error?.localizedDescription ?? "") break case .canceled: self.displayAlert(title: "Payment canceled", message: error?.localizedDescription ?? "") break case .succeeded: self.displayAlert(title: "Payment succeeded", message: paymentIntent?.description ?? "", restartDemo: true) break @unknown default: fatalError() break } } } } extension CheckoutViewController: STPAuthenticationContext { func authenticationPresentingViewController() -> UIViewController { return self } } ``` Vous pouvez [enregistrer les données relatives à la carte de paiement d’un client](https://docs.stripe.com/payments/payment-intents.md#future-usage) à la confirmation du paiement en fournissant à la fois `setupFutureUsage` et `customer` dans le `PaymentIntent`. Vous pouvez également fournir ces paramètres lorsque vous créez le `PaymentIntent` sur votre serveur. Si vous fournissez la bonne valeur `setupFutureUsage` pour votre application, votre client devra peut-être effectuer des étapes d’authentification supplémentaires, mais cela réduit le risque que les banques refusent les futurs paiements. [Découvrez comment optimiser les cartes en vue de paiements futur](https://docs.stripe.com/payments/payment-intents.md#future-usage) et déterminer la valeur à utiliser pour votre application. | L’utilisation que vous souhaitez faire de la carte bancaire | Valeur d’énumération `setup_future_usage` | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | | Paiements *effectués pendant la session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) uniquement | `on_session` | | Paiements *effectués hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) uniquement | `off_session` | | Paiements effectués pendant une session ou hors session | `off_session` | Vous pouvez utiliser une carte configurée pour les paiements en session lors d’un paiement hors session, mais il est probable que l’institution financière refuse le paiement hors session et exige une authentification du titulaire de la carte. Si une réglementation telle que l’[authentification forte du client](https://docs.stripe.com/strong-customer-authentication.md) exige une authentification, le paramètre `STPPaymentHandler` présente les contrôleurs d’affichage à l’aide du [STPAuthenticationContext](https://stripe.dev/stripe-ios/stripe-payments/Protocols/STPAuthenticationContext.html) transmis et guide le client tout au long de ce processus. [Comment prendre en charge l’authentification 3D Secure sur iOS](https://docs.stripe.com/payments/3d-secure.md?platform=ios). Si le paiement réussit, le gestionnaire de finalisation des paiements est appelé avec l’état `.succeeded`. S’il échoue, l’état est `.failed` et vous pouvez afficher l’erreur `error.localizedDescription` à l’intention de l’utilisateur. Vous pouvez aussi vérifier l’état d’un `PaymentIntent` dans le [Dashboard](https://dashboard.stripe.com/test/payments) ou en examinant la propriété `status` de l’objet. ### Étape 3.4 : Tester l’intégration (Côté client) ​​Pour vérifier que votre intégration est prête, vous avez à votre disposition plusieurs cartes de test dans un bac à sable. Utilisez-les avec n’importe quel CVC et une date d’expiration non échue. | Numéro | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------ | | 4242424242424242 | Réussite de la transaction et traitement immédiat du paiement. | | 4000002500003155 | Authentification requise. Stripe déclenche l’ouverture d’une fenêtre modale demandant au client de s’authentifier. | | 4000000000009995 | Échec systématique avec le code de refus de paiement `insufficient_funds`. | Pour obtenir la liste complète de nos cartes de test, veuillez consulter notre guide de [test](https://docs.stripe.com/testing.md). ### Étape 3.5 : Traiter les commandes (Côté serveur) Une fois le paiement effectué, vous devez *traiter* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) toutes les commandes nécessaires. Par exemple, le site d’un magasin en ligne doit avertir l’entreprise pour qu’elle expédie au client les articles achetés. Configurez un endpoint de *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) [dans votre Dashboard](https://dashboard.stripe.com/account/webhooks) (pour les événements *provenant de vos applications Connect*). ![](https://b.stripecdn.com/docs-statics-srv/assets/connect_webhooks.4de92f78dcd94b36838010c85c8a051f.png) Puis créez un endpoint HTTP sur votre serveur pour surveiller les paiements effectués pour ensuite permettre à vos utilisateurs (comptes connectés) de traiter les commandes. #### Ruby ```ruby # Using Sinatra. require 'sinatra' require 'stripe' set :port, 4242 # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' # If you are testing your webhook locally with the Stripe CLI you # can find the endpoint's secret by running `stripe listen` # Otherwise, find your endpoint's secret in your webhook settings in # the Developer Dashboard endpoint_secret = 'whsec_...' post '/webhook' do payload = request.body.read sig_header = request.env['HTTP_STRIPE_SIGNATURE'] event = nil # Verify webhook signature and extract the event. # See https://stripe.com/docs/webhooks#verify-events for more information. begin event = Stripe::Webhook.construct_event( payload, sig_header, endpoint_secret ) rescue JSON::ParserError => e # Invalid payload. status 400 return rescue Stripe::SignatureVerificationError => e # Invalid Signature. status 400 return end if event['type'] == 'payment_intent.succeeded' payment_intent = event['data']['object'] connected_account_id = event['account'] handle_successful_payment_intent(connected_account_id, payment_intent) end status 200 end def handle_successful_payment_intent(connected_account_id, payment_intent) # Fulfill the purchase puts 'Connected account ID: ' + connected_account_id puts payment_intent.to_s end ``` Learn more in our [fulfillment guide for payments](https://docs.stripe.com/webhooks/handling-payment-events.md). ### Test des webhooks en local Utilisez l’interface de ligne de commande de Stripe pour tester les webhooks localement. 1. Tout d’abord, [installez la Stripe CLI](https://docs.stripe.com/stripe-cli/install.md) sur votre machine si ce n’est pas déjà fait. 1. Ensuite, pour vous connecter, exécutez la commande `stripe login` dans la ligne de commande, puis suivez les instructions. 1. Enfin, pour autoriser votre hôte local à recevoir un événement simulé sur votre compte connecté, exécutez la commande `stripe listen --forward-to localhost:{PORT}/webhook` dans une fenêtre de terminal, puis exécutez la commande `stripe trigger --stripe-account={{CONNECTED_STRIPE_ACCOUNT_ID}} payment_intent.succeeded` (ou déclenchez tout autre [événement pris en charge](https://github.com/stripe/stripe-cli/wiki/trigger-command#supported-events)) dans une autre fenêtre. ## Tests Testez votre flux de création de compte 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). Testez vos paramètres de **moyens de paiement** pour vos comptes connectés en vous connectant à l’un de vos comptes test et en accédant aux [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Testez votre tunnel de paiement à l’aide de vos clés et d’un compte test. Vous pouvez utiliser nos [cartes de test](https://docs.stripe.com/testing.md) pour tester votre tunnel de paiement et simuler divers scénarios. # Fiche de paiement > This is a Fiche de paiement for when platform is android and mobile-ui is payment-element. View the full page at https://docs.stripe.com/connect/end-to-end-saas-platform?platform=android&mobile-ui=payment-element. ![](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 grâce à la classe [PaymentSheet](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html). ## Conditions préalables 1. [Inscrire votre plateforme](https://dashboard.stripe.com/connect). 1. Ajoutez des informations sur l’entreprise pour [activer votre compte](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] Pour commencer, vous devez [créer un compte](https://dashboard.stripe.com/register) Stripe. ### Côté serveur Cette intégration exige des endpoints sur votre serveur qui communiquent avec l’API Stripe. Utilisez nos 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 Stripe Android](https://github.com/stripe/stripe-android) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-android/). Pour installer le 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.2.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.2.0") } ``` > 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-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). Configurez le SDK avec votre [clé publique](https://dashboard.stripe.com/apikeys) Stripe de façon à ce qu’il puisse envoyer des requêtes à l’API Stripe, par exemple à la sous-classe `Application` : #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > 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é Lorsqu’un utilisateur (marchand ou fournisseur de services) s’inscrit sur votre plateforme, créez un [compte](https://docs.stripe.com/api/accounts.md) d’utilisateur (appelé *compte connecté*) afin de pouvoir accepter des paiements de sa part et transférer des fonds vers son compte bancaire. Les comptes connectés représentent vos utilisateurs dans l’API de Stripe et permettent de collecter facilement les informations nécessaires pour vérifier leur identité. Dans notre exemple de création de boutique, le compte connecté représente l’entreprise qui configure sa boutique en ligne. ![Flux de création de compte](https://b.stripecdn.com/docs-statics-srv/assets/standard-android.04900ae101e927a74a6f2b0afb53bf23.png) ### Étape 2.1 : créer un compte connecté et préremplir les informations (Server-side) Utilisez l’API `/v1/accounts` pour [créer](https://docs.stripe.com/api/accounts/create.md) un compte connecté. Vous pouvez le créer en utilisant les [paramètres par défaut du compte connecté](https://docs.stripe.com/connect/migrate-to-controller-properties.md) ou en spécifiant le type de compte. #### Avec les propriétés par défaut ```curl curl -X POST https://api.stripe.com/v1/accounts \ -u "<>:" ``` #### Avec le type de compte ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d type=standard ``` 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 [Person](https://docs.stripe.com/api/persons/create.md) pour représenter la personne responsable de l’ouverture du compte et définissez `relationship.representative` sur true et toutes les informations de compte que vous souhaitez préremplir (par exemple, son prénom et son nom). ```curl curl https://api.stripe.com/v1/accounts/{{ACCOUNT_ID}}/persons \ -u "<>:" \ -d first_name=Jenny \ -d last_name=Rosen \ -d "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). ### Étape 2.2 : Créer un lien de compte (Côté serveur) Vous pouvez créer un lien de compte en appelant l’API [Account Links](https://docs.stripe.com/api/account_links.md) avec les paramètres suivants : - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` ```curl curl https://api.stripe.com/v1/account_links \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "refresh_url=https://example.com/reauth" \ --data-urlencode "return_url=https://example.com/return" \ -d type=account_onboarding ``` ### Étape 2.3 : Rediriger votre utilisateur vers l’URL du lien de compte (Côté client) La réponse à votre requête [Account Links](https://docs.stripe.com/api/account_links.md) contient une valeur pour la clé `url`. Redirigez l’utilisateur vers ce lien pour l’introduire dans le flux. Les liens de compte sont temporaires et à usage unique, car ils donnent accès aux informations personnelles du titulaire du compte connecté. Authentifiez l’utilisateur dans votre application avant de le rediriger vers cette URL. Si vous souhaitez préremplir des informations, vous devez le faire avant de générer le lien de compte. Une fois le lien créé pour un compte Standard, les opérations de lecture comme d’écriture ne seront plus possibles pour ce compte. > 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. ```xml