# Finaliser les paiements sur le serveur Développez une intégration dans laquelle vous renvoyez le composant Mobile Payment Element avant de créer un PaymentIntent ou SetupIntent, puis confirmez l'Intent à partir de votre serveur. # Accepter un paiement > This is a Accepter un paiement for when platform is ios and type is payment. View the full page at https://docs.stripe.com/payments/mobile/finalize-payments-on-the-server?platform=ios&type=payment. Le Payment Element permet d’accepter plusieurs moyens de paiement à l’aide d’une seule intégration. Dans cette intégration, vous créez un tunnel de paiement personnalisé dans lequel vous affichez le composant Payment Element, créez le *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) et confirmez le paiement sur votre serveur. ## Configurer Stripe [Côté serveur] [Côté client] ### Côté serveur Cette intégration exige que votre serveur dispose de endpoints 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. Vous devez également définir votre [clé publique](https://dashboard.stripe.com/apikeys) pour que le SDK puisse effectuer des appels à l’API Stripe. Pour commencer, vous pouvez coder en dur la clé publique côté client pendant l’intégration, mais la récupérer sur votre serveur en mode production. ```swift // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys STPAPIClient.shared.publishableKey = "<>" ``` ## Activer des moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## 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 } } } } } ``` Définissez également le paramètre [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) correspondant à votre objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) sur l’URL de votre application. ```swift var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" ``` ## Collecter les informations de paiement [Côté client] Nous proposons deux types d’intégration. Choisissez-en un pour continuer. | PaymentSheet | PaymentSheet.FlowController | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![PaymentSheet](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) | ![PaymentSheet.FlowController](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) | | Affiche une feuille pour collecter les détails du paiement et exécuter le paiement. La feuille contient un bouton **Payer* avec le montant et la devise, et exécute le paiement. | Affiche une feuille permettant de collecter uniquement les informations de paiement. Le bouton dans la feuille indique **Continuer** et redirige le client vers votre application, où votre propre bouton finalise le paiement. | #### PaymentSheet ### Initialiser la PaymentSheet Lorsque vous êtes prêt à accepter un paiement (par exemple, lorsqu’un client appuie sur votre bouton de paiement), initialisez la feuille de paiement avec un objet `PaymentSheet.Configuration` et un objet [PaymentSheet.IntentConfiguration](https://github.com/stripe/stripe-ios/blob/master/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetIntentConfiguration.swift). L’objet [Configuration](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct) contient la configuration générale de la feuille de paiement qui ne change pas en général pas d’un paiement à l’autre, comme le `returnURL`. L’objet [IntentConfiguration](https://github.com/stripe/stripe-ios/blob/master/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetIntentConfiguration.swift) contient des détails sur le paiement spécifique, tels que le montant et la devise, et un rappel `confirmationTokenConfirmHandler` - pour l’instant, laissez son implémentation vide. ```swift import StripePaymentSheet class MyCheckoutVC: UIViewController { func didTapCheckoutButton() {let intentConfig = PaymentSheet.IntentConfiguration(mode: .payment(amount: 1099, currency: "USD",)) { [weak self] confirmationToken in try await self?.handleConfirmationToken(confirmationToken) } var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" // Use the return url you set up in the previous step let paymentSheet = PaymentSheet(intentConfiguration: intentConfig, configuration: configuration) } func handleConfirmationToken(_ confirmationToken: STPConfirmationToken) async throws -> String { // ...explained later } } ``` ### Présenter la PaymentSheet Ensuite, présentez la PaymentSheet. La méthode `present` contient un bloc d’achèvement qui est exécuté lorsque le client a fini de payer et qu’il ferme la feuille. Mettez en œuvre le bloc d’achèvement pour gérer le résultat (par exemple, en affichant un reçu ou un écran de confirmation dans le cas `.completed`). ```swift class MyCheckoutVC: UIViewController { func didTapCheckoutButton() { // ...paymentSheet.present(from: self) { result in switch result { case .completed: //Paymentcompleted - show a confirmation screen. case .failed(let error): print(error) // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on case .canceled: // Customer canceled - you should probably do nothing. } } } } ``` ### Confirmer les du paiement Lorsque le client appuie sur le bouton Pay dans la PaymentSheet, il exécute le rappel que vous avez transmis à `PaymentSheet.IntentConfiguration` avec un objet [STPConfirmationToken](https://stripe.dev/stripe-ios/stripepayments/documentation/stripepayments/stpconfirmationtoken) représentant les détails et les préférences du client en matière de paiement. Mettez en œuvre ce rappel pour envoyer une requête à votre serveur , en passant `confirmationToken.stripeId`. Votre serveur crée et confirme un PaymentIntent et renvoie sa clé secrète du client. Lorsque la requête est renvoyée, renvoyez la clé secrète du client contenue dans la réponse du serveur, ou générez une erreur. Le PaymentSheet effectue toutes les actions suivantes requises pour finaliser le PaymentIntent à l’aide de la clé secrète du client ou affiche l’erreur localisée dans son interface utilisateur (soit [errorDescription](https://developer.apple.com/documentation/foundation/localizederror/2946895-errordescription) ou [localizedDescription](https://developer.apple.com/documentation/foundation/nserror/1414418-localizeddescription)). ```swift class MyCheckoutVC: UIViewController { // ... func handleConfirmationToken(_ confirmationToken: STPConfirmationToken) async throws -> String { // Make a request to your own server. Pass confirmationToken.stripeId if using server-side confirmation. // Return the client secret or throw an error. return try await MyAPIClient.shared.createIntent(confirmationTokenId: confirmationToken.stripeId) } } ``` #### PaymentSheet.FlowController Cette intégration présume que votre écran de paiement comporte deux boutons : un bouton « **Moyen de paiement** » qui affiche la PaymentSheet afin de recueillir les informations de paiement, et un bouton « **Acheter** » qui permet d’effectuer le paiement. ### Initialiser PaymentSheet.FlowController Lorsque votre écran de paiement se charge, initialisez `PaymentSheet.FlowController` avec l’objet `PaymentSheet.Configuration` et l’objet `PaymentSheet.IntentConfiguration`. L’objet [Configuration](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct) contient une configuration générale pour la feuille de paiement qui ne change pas en général d’un paiement à l’autre, comme `returnURL`. L’objet [IntentConfiguration](https://github.com/stripe/stripe-ios/blob/master/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetIntentConfiguration.swift) contient des détails sur le paiement spécifique, comme le montant et la devise, ainsi qu’un rappel `confirmationTokenConfirmHandler` - pour l’instant, laissez son implémentation vide. Après l’initialisation de `PaymentSheet.FlowController`, mettez à jour votre bouton « **Moyen de paiement** » avec sa propriété `paymentOption`. Cette propriété contient une image et un libellé représentant le moyen de paiement par défaut initialement sélectionné par le client. ```swift class MyCheckoutVC: UIViewController { func loadCheckout() {let intentConfig = PaymentSheet.IntentConfiguration(mode: .payment(amount: 1099, currency: "USD",)) { [weak self] confirmationToken in try await self?.handleConfirmationToken(confirmationToken) } var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" // Use the return url you set up in the previous step PaymentSheet.FlowController.create( intentConfiguration: intentConfig, configuration: configuration ) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI paymentSheetFlowController.paymentOption.image and paymentSheetFlowController.paymentOption.label } } } func handleConfirmationToken(_ confirmationToken: STPConfirmationToken) async throws -> String { // ...explained later } } ``` ### Présenter le PaymentSheet Lorsqu’un client appuie sur votre bouton « **Moyen de paiement** », appelez `presentPaymentOptions` pour collecter les informations 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 } ``` ### (Facultatif) Mettre à jour les informations de paiement Si le client effectue des actions qui modifient les informations du paiement (par exemple, s’il applique un code de réduction ou modifie son panier), mettez à jour l’instance PaymentSheet.FlowController avec les nouvelles valeurs. De cette manière, nous nous assurons que les valeurs correctes sont affichées dans notre interface utilisateur (par exemple, le bouton **Payer** ou l’interface utilisateur d’Apple Pay), que les moyens de paiement appropriés s’affichent, etc. En mettant à jour l’instance au lieu de réinitialiser le PaymentSheet.FlowController, le formulaire de paiement conserve les informations de paiement du client. Appelez la méthode `update` avec l’objet IntentConfiguration mis à jour. Si la mise à jour est en cours, n’appelez pas `present` ni `confirm` sur le PaymentSheet.FlowController (par exemple, désactivez vos boutons « **Acheter** » et « **Moyen de paiement** »). Lorsque la mise à jour est terminée, mettez à jour votre interface utilisateur avec la propriété `paymentOption` au cas où le moyen de paiement précédemment sélectionné par le client ne serait plus disponible. Si la mise à jour a échoué, veuillez réessayer. ```swift // Create an updated IntentConfiguration var updatedIntentConfig = oldIntentConfig updatedIntentConfig.amount = 999 // Disable your "Buy" and "Payment method" buttons and call `update` paymentSheetFlowController.update(intentConfiguration: updatedIntentConfig) { [weak self] error in if error != nil { // You must retry - until the update succeeds, the customer can't pay or select a payment method. // For example, you can automatically retry the update with an exponential back-off, or present the user with an alert that retries the update. } else { // Re-enable your "Buy" and "Payment method" buttons // Update your UI using paymentSheetFlowController.paymentOption.image and paymentSheetFlowController.paymentOption.label } } ``` ### Confirmer les du paiement Lorsque le client appuie sur votre bouton **Acheter**, exécutez [paymentSheetFlowController.confirm](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/confirm\(from:completion:\)). Cela exécute le `confirmationTokenConfirmHandler` rappel que vous avez transmis à `PaymentSheet.IntentConfiguration` avec un objet [STPConfirmationToken](https://stripe.dev/stripe-ios/stripepayments/documentation/stripepayments/stpconfirmationtoken) représentant les détails de paiement et les préférences du client. Mettez en œuvre ce rappel pour envoyer une requête à votre serveur , en passant `confirmationToken.stripeId`. Votre serveur crée et confirme un PaymentIntent et renvoie sa clé secrète du client. Lorsque la requête est renvoyée, renvoyez la clé secrète du client contenue dans la réponse du serveur, ou générez une erreur. Le PaymentSheet effectue toutes les actions suivantes requises pour finaliser le PaymentIntent à l’aide de la clé secrète du client. ```swift class MyCheckoutVC: UIViewController { // ...func didTapBuyButton() { paymentSheetFlowController.confirm(from: self) { paymentResult in switch paymentResult { case .completed: //Paymentcompleted - show a confirmation screen. case .failed(let error): // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on print(error) case .canceled: // Customer canceled - you should probably do nothing. } } } func handleConfirmationToken(_ confirmationToken: STPConfirmationToken) async throws -> String { // Make a request to your own server. Pass confirmationToken.stripeId if using server-side confirmation. return try await fetchIntentClientSecret(...) } } ``` Le code serveur est expliqué à l’étape suivante. ## Créer et envoyer le paiement à Stripe [Côté serveur] Sur votre serveur, créez et confirmez un a *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) en indiquant un montant et une devise. Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le l’affichage des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, décidez toujours du montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client. Si l’appel réussit, renvoyez 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 PaymentIntent. Si l’appel échoue, [traitez l’erreur](https://docs.stripe.com/error-handling.md) et renvoyez un message d’erreur avec une courte explication à l’intention de votre client. > Vérifiez que toutes les propriétés de l’IntentConfiguration correspondent à votre PaymentIntent (par exemple, `setup_future_usage`, `amount` et `currency`). ### Gestion des arguments côté client : - `confirmation_token_id` - Vous pouvez récupérer l’objet ConfirmationToken à l’aide de cet ID pour effectuer votre propre validation ou logique d’entreprise. #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do data = JSON.parse request.body.read params = { amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, confirm: true, confirmation_token: data['confirmation_token_id'], # the ConfirmationToken ID sent by your client } begin intent = Stripe::PaymentIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end ``` ## 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. ## 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: Activer les cartes sauvegardées [Côté serveur] [Côté client] PaymentSheet peut afficher une case à cocher **Enregistrer cette carte pour une utilisation ultérieure** qui enregistre la carte du client, ainsi que les cartes enregistrées du client. Pour activer cette case à cocher, créez un objet [Customer](https://docs.stripe.com/api/customers.md) sur votre serveur et une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) associée, avec `payment_method_save` défini sur `enabled`. > #### Comparer les références Customers v1 et Accounts v2 > > Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. ```javascript const stripe = require('stripe')('sk_test_your_secret_key'); app.post('/mobile-payment-element', async (req, res) => { // Use an existing Customer ID if this is a returning customer. const customer = await stripe.customers.create(); const customerSession = await stripe.customerSessions.create({ customer: customer.id, components: { mobile_payment_element: { enabled: true, features: { payment_method_save: 'enabled', payment_method_redisplay: 'enabled', payment_method_remove: 'enabled' } }, }, }); res.json({ customerSessionClientSecret: customerSession.client_secret, customer: customer.id, }); }); ``` Ensuite, configurez PaymentSheet avec l’ID du client et la clé secrète du client CustomerSession. ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet var configuration = PaymentSheet.Configuration() configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) self.paymentSheet = PaymentSheet(..., configuration: configuration) ``` ## Optional: Autoriser les moyens de paiement à notification différée [Côté client] Les *moyens de paiement différés* (A payment method that can't immediately return payment status when a customer attempts a transaction (for example, ACH debits). Businesses commonly hold an order in a pending state until payment is successful with these payment methods) ne garantissent pas non plus que vous recevrez les fonds de votre client à la fin du paiement, à cause du délai de versement (par exemple, comptes bancaires aux États-Unis, prélèvements SEPA, iDEAL et Bancontact) ou parce qu’ils nécessitent une intervention du client (par exemple, OXXO, Konbini et Boleto). Par défaut, PaymentSheet n’affiche pas les moyens de paiement différés. Pour activer cette option, définissez `allowsDelayedPaymentMethods` sur true dans votre `PaymentSheet.Configuration`. Cette étape ne suffit pas à activer des moyens de paiement spécifiques, elle permet simplement d’indiquer que votre application est capable de les gérer. Par exemple, bien qu’OXXO ne soit pas pris en charge par PaymentSheet, s’il devient pris en charge et que vous avez installé la dernière version du SDK, votre application pourra afficher OXXO comme option de paiement sans modification supplémentaire de l’intégration. ```swift var configuration = PaymentSheet.Configuration() configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(..., configuration: configuration) ``` Si le client utilise l’un de ces moyens de paiement différé dans la PaymentSheet, le résultat du paiement renvoyé est `.completed`. ## Optional: Activer Apple Pay > Si votre écran de paiement comporte 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 le paiement à partir de votre bouton **Apple Pay**. Vous pouvez utiliser `PaymentSheet` pour gérer d’autres types de moyens de paiement. ### Demander un ID de marchand Apple Pour obtenir un ID de marchand Apple, [demandez un nouvel identifiant](https://developer.apple.com/account/resources/identifiers/add/merchant) sur le site Web Apple Developer. Renseignez le formulaire en indiquant une description et un identifiant. La description n’est destinée qu’à votre propre information et vous pourrez la modifier ultérieurement au besoin. En ce qui concerne l’identifiant, Stripe vous recommande d’utiliser le nom de votre application (par exemple, `merchant.com.{{YOUR_APP_NAME}}`). ### Créer un nouveau certificat Apple Pay Créez un certificat permettant à votre application de chiffrer les données de paiement. Accédez aux [paramètres des certificats iOS](https://dashboard.stripe.com/settings/ios_certificates) dans le Dashboard, cliquez sur **Ajouter une nouvelle application** et suivez le guide. Téléchargez un fichier 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) ``` ## 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: Activer la collecte du CVC après confirmation Pour récupérer le CVC d’une carte bancaire enregistrée lors de la confirmation de PaymentIntent, votre intégration doit collecter les informations de paiement avant de créer un PaymentIntent. ### Mettre à jour la configuration de l’Intent `PaymentSheet.IntentConfiguration` accepte un paramètre facultatif qui contrôle le moment de récupérer le CVC pour une carte enregistrée. ```swift let intentConfig = PaymentSheet.IntentConfiguration( mode: .payment(amount: 1099, currency: "USD"), confirmHandler: { confirmationToken in // Handle ConfirmationToken...}, requireCVCRecollection: true) ``` ### Mettre à jour les paramètres de création de l’Intent Pour récupérer le CVC lors de la confirmation du paiement, ajoutez les paramètres `customerId` et `require_cvc_recollection` lors de la création du PaymentIntent. #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do data = JSON.parse request.body.read params = { amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true},customer: customer.id, payment_method_options: { card: {require_cvc_recollection: true} } } begin intent = Stripe::PaymentIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end ``` # Collecter et enregistrer un moyen de paiement > This is a Collecter et enregistrer un moyen de paiement for when platform is ios and type is setup. View the full page at https://docs.stripe.com/payments/mobile/finalize-payments-on-the-server?platform=ios&type=setup. Un flux SetupIntent vous permet de collecter les informations relatives aux moyens de paiement et de les enregistrer pour les paiements ultérieurs sans créer de paiement. Dans cette intégration, vous créez un tunnel personnalisé dans lequel vous affichez le composant Payment Element, créez le *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) et confirmez l’enregistrement du moyen de paiement sur votre serveur. ## Configurer Stripe [Côté serveur] [Côté client] ### Côté serveur Cette intégration exige que votre serveur dispose de endpoints 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. Vous devez également définir votre [clé publique](https://dashboard.stripe.com/apikeys) pour que le SDK puisse effectuer des appels à l’API Stripe. Pour commencer, vous pouvez coder en dur la clé publique côté client pendant l’intégration, mais la récupérer sur votre serveur en mode production. ```swift // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys STPAPIClient.shared.publishableKey = "<>" ``` ## Activer des moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## 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 } } } } } ``` Définissez également le paramètre [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) correspondant à votre objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) sur l’URL de votre application. ```swift var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" ``` ## Créer un objet Customer [Côté serveur] Pour configurer un moyen de paiement en vue de paiements ultérieurs, 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 crée un compte auprès de votre entreprise. Les objets `Customer` permettent de réutiliser des moyens de paiement et de suivre plusieurs paiements. > #### Comparer les références Customers v1 et Accounts v2 > > Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` ## Collecter les informations de paiement [Côté client] Nous proposons deux types d’intégration. Choisissez-en un pour continuer. | PaymentSheet | PaymentSheet.FlowController | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ![PaymentSheet](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) | ![PaymentSheet.FlowController](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) | | Affiche un formulaire permettant de collecter les informations de paiement et de finaliser la configuration. Le bouton du formulaire indique **Configurer X $** et permet de configurer le moyen de paiement. | Affiche un formulaire permettant uniquement de collecter les informations de paiement. Le bouton du formulaire indique **Continuer** et redirige le client vers votre application, où votre propre bouton finalise la configuration. | #### PaymentSheet ### Initialiser la PaymentSheet Lorsque vous êtes prêt à établir un moyen de paiement (par exemple, lorsqu’un client appuie sur votre bouton de paiement), initialisez la feuille de paiement avec un objet `PaymentSheet.Configuration` et un objet [PaymentSheet.IntentConfiguration](https://github.com/stripe/stripe-ios/blob/master/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetIntentConfiguration.swift). L’objet [Configuration](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct) contient la configuration générale de la feuille de paiement qui ne change pas en général pas d’un paiement à l’autre, comme le `returnURL`. L’objet [IntentConfiguration](https://github.com/stripe/stripe-ios/blob/master/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetIntentConfiguration.swift) contient des détails sur le setup, tels que la devise, et un rappel `confirmationTokenConfirmHandler` - pour l’instant, laissez son implémentation vide. ```swift import StripePaymentSheet class MyCheckoutVC: UIViewController { func didTapCheckoutButton() {let intentConfig = PaymentSheet.IntentConfiguration(mode: .setup(currency: "USD")) { [weak self] confirmationToken in try await self?.handleConfirmationToken(confirmationToken) } var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" // Use the return url you set up in the previous step let paymentSheet = PaymentSheet(intentConfiguration: intentConfig, configuration: configuration) } func handleConfirmationToken(_ confirmationToken: STPConfirmationToken) async throws -> String { // ...explained later } } ``` ### Présenter la PaymentSheet Ensuite, présentez la PaymentSheet. La méthode `present` contient un bloc d’achèvement qui est exécuté lorsque le client a fini de configurer son moyen de paiement et qu’il ferme la feuille. Mettez en œuvre le bloc d’achèvement pour gérer le résultat (par exemple, en affichant un écran de confirmation dans le cas `.completed`). ```swift class MyCheckoutVC: UIViewController { func didTapCheckoutButton() { // ...paymentSheet.present(from: self) { result in switch result { case .completed: //Setupcompleted - show a confirmation screen. case .failed(let error): print(error) // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on case .canceled: // Customer canceled - you should probably do nothing. } } } } ``` ### Confirmer les détails du paiement Lorsque le client appuie sur le bouton Setup dans la PaymentSheet, il exécute le rappel que vous avez transmis à `PaymentSheet.IntentConfiguration` avec un objet [STPConfirmationToken](https://stripe.dev/stripe-ios/stripepayments/documentation/stripepayments/stpconfirmationtoken) représentant les détails et les préférences du client en matière de paiement. Mettez en œuvre ce rappel pour envoyer une requête à votre serveur , en passant `confirmationToken.stripeId`. Votre serveur crée et confirme un SetupIntent et renvoie sa clé secrète du client. Lorsque la requête est renvoyée, renvoyez la clé secrète du client contenue dans la réponse du serveur, ou générez une erreur. Le PaymentSheet effectue toutes les actions suivantes requises pour finaliser le SetupIntent à l’aide de la clé secrète du client ou affiche l’erreur localisée dans son interface utilisateur (soit [errorDescription](https://developer.apple.com/documentation/foundation/localizederror/2946895-errordescription) ou [localizedDescription](https://developer.apple.com/documentation/foundation/nserror/1414418-localizeddescription)). ```swift class MyCheckoutVC: UIViewController { // ... func handleConfirmationToken(_ confirmationToken: STPConfirmationToken) async throws -> String { // Make a request to your own server. Pass confirmationToken.stripeId if using server-side confirmation. // Return the client secret or throw an error. return try await MyAPIClient.shared.createIntent(confirmationTokenId: confirmationToken.stripeId) } } ``` #### PaymentSheet.FlowController Cette intégration présume que votre écran de paiement comporte deux boutons : un bouton « **Moyen de paiement** » qui affiche la PaymentSheet afin de recueillir les informations de paiement, et un bouton « **Acheter** » qui permet d’effectuer la configuration. ### Initialiser PaymentSheet.FlowController Lorsque votre écran de paiement se charge, initialisez `PaymentSheet.FlowController` avec l’objet `PaymentSheet.Configuration` et l’objet `PaymentSheet.IntentConfiguration`. L’objet [Configuration](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct) contient une configuration générale pour la feuille de paiement qui ne change pas en général d’un paiement à l’autre, comme `returnURL`. L’objet [IntentConfiguration](https://github.com/stripe/stripe-ios/blob/master/StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetIntentConfiguration.swift) contient des détails sur le setup, comme la devise, ainsi qu’un rappel `confirmationTokenConfirmHandler` - pour l’instant, laissez son implémentation vide. Après l’initialisation de `PaymentSheet.FlowController`, mettez à jour votre bouton « **Moyen de paiement** » avec sa propriété `paymentOption`. Cette propriété contient une image et un libellé représentant le moyen de paiement par défaut initialement sélectionné par le client. ```swift class MyCheckoutVC: UIViewController { func loadCheckout() {let intentConfig = PaymentSheet.IntentConfiguration(mode: .setup(currency: "USD")) { [weak self] confirmationToken in try await self?.handleConfirmationToken(confirmationToken) } var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" // Use the return url you set up in the previous step PaymentSheet.FlowController.create( intentConfiguration: intentConfig, configuration: configuration ) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI paymentSheetFlowController.paymentOption.image and paymentSheetFlowController.paymentOption.label } } } func handleConfirmationToken(_ confirmationToken: STPConfirmationToken) async throws -> String { // ...explained later } } ``` ### Présenter le PaymentSheet Lorsqu’un client appuie sur votre bouton « **Moyen de paiement** », appelez `presentPaymentOptions` pour collecter les informations 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 } ``` ### (Facultatif) Mettre à jour les informations de paiement Si le client effectue des actions qui modifient les informations du paiement (par exemple, s’il applique un code de réduction ou modifie son panier), mettez à jour l’instance PaymentSheet.FlowController avec les nouvelles valeurs. De cette manière, nous nous assurons que les valeurs correctes sont affichées dans notre interface utilisateur (par exemple, le bouton **Payer** ou l’interface utilisateur d’Apple Pay), que les moyens de paiement appropriés s’affichent, etc. En mettant à jour l’instance au lieu de réinitialiser le PaymentSheet.FlowController, le formulaire de paiement conserve les informations de paiement du client. Appelez la méthode `update` avec l’objet IntentConfiguration mis à jour. Si la mise à jour est en cours, n’appelez pas `present` ni `confirm` sur le PaymentSheet.FlowController (par exemple, désactivez vos boutons « **Acheter** » et « **Moyen de paiement** »). Lorsque la mise à jour est terminée, mettez à jour votre interface utilisateur avec la propriété `paymentOption` au cas où le moyen de paiement précédemment sélectionné par le client ne serait plus disponible. Si la mise à jour a échoué, veuillez réessayer. ```swift // Create an updated IntentConfiguration var updatedIntentConfig = oldIntentConfig updatedIntentConfig.amount = 999 // Disable your "Buy" and "Payment method" buttons and call `update` paymentSheetFlowController.update(intentConfiguration: updatedIntentConfig) { [weak self] error in if error != nil { // You must retry - until the update succeeds, the customer can't pay or select a payment method. // For example, you can automatically retry the update with an exponential back-off, or present the user with an alert that retries the update. } else { // Re-enable your "Buy" and "Payment method" buttons // Update your UI using paymentSheetFlowController.paymentOption.image and paymentSheetFlowController.paymentOption.label } } ``` ### Confirmer les détails du paiement Lorsque le client appuie sur votre bouton **Acheter**, exécutez [paymentSheetFlowController.confirm](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/confirm\(from:completion:\)). Cela exécute le `confirmationTokenConfirmHandler` rappel que vous avez transmis à `PaymentSheet.IntentConfiguration` avec un objet [STPConfirmationToken](https://stripe.dev/stripe-ios/stripepayments/documentation/stripepayments/stpconfirmationtoken) représentant les détails de paiement et les préférences du client. Mettez en œuvre ce rappel pour envoyer une requête à votre serveur , en passant `confirmationToken.stripeId`. Votre serveur crée et confirme un SetupIntent et renvoie sa clé secrète du client. Lorsque la requête est renvoyée, renvoyez la clé secrète du client contenue dans la réponse du serveur, ou générez une erreur. Le PaymentSheet effectue toutes les actions suivantes requises pour finaliser le SetupIntent à l’aide de la clé secrète du client. ```swift class MyCheckoutVC: UIViewController { // ...func didTapBuyButton() { paymentSheetFlowController.confirm(from: self) { paymentResult in switch paymentResult { case .completed: //Setupcompleted - show a confirmation screen. case .failed(let error): // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on print(error) case .canceled: // Customer canceled - you should probably do nothing. } } } func handleConfirmationToken(_ confirmationToken: STPConfirmationToken) async throws -> String { // Make a request to your own server. Pass confirmationToken.stripeId if using server-side confirmation. return try await fetchIntentClientSecret(...) } } ``` Le code serveur est expliqué à l’étape suivante. ## Envoyer les données de paiement à Stripe [Côté serveur] Sur votre serveur, créez et confirmez un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method). Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe évalue les restrictions des moyens de paiement et d’autres paramètres pour déterminer la liste des moyens de paiement pris en charge. Si l’appel réussit, renvoyez 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 SetupIntent. Si l’appel échoue, [traitez l’erreur](https://docs.stripe.com/error-handling.md) et renvoyez un message d’erreur avec une courte explication à l’intention de votre client. > Vérifiez que toutes les propriétés de l’IntentConfiguration correspondent à votre SetupIntent (par exemple, [usage](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage)). ### Gestion des arguments côté client : - `confirmation_token_id` - Vous pouvez récupérer l’objet ConfirmationToken à l’aide de cet ID pour effectuer votre propre validation ou logique d’entreprise. #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do data = JSON.parse request.body.read params = { customer: ..., # The Customer ID you previously created # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, confirm: true, confirmation_token: data['confirmation_token_id'], # the ConfirmationToken ID sent by your client } begin intent = Stripe::SetupIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end ``` ## Débiter ultérieurement le moyen de paiement enregistré [Côté serveur] > `bancontact` et `ideal` sont les moyens de paiement ponctuel par défaut. Lorsque vous les configurez pour une utilisation future, ils génèrent un type de moyen de paiement réutilisable `sepa_debit`. Vous devez donc utiliser la requête `sepa_debit` pour les moyens de paiement enregistrés. > #### Conformité > > Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles du réseau en vigueur. Lorsque vous présentez au client final des moyens de paiement précédemment utilisés en vue d’effectuer ses prochains achats, assurez-vous de lister les moyens de paiement pour lesquels vous avez obtenu le consentement du client à l’enregistrement des informations de paiement aux fins des futurs achats. Le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) vous permet de différencier les moyens de paiement associés au client qui peuvent ou non être présentés pour les achats futurs. Au moment de débiter votre client *hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), utilisez l’ID des objets Customer et PaymentMethod afin de créer un PaymentIntent. Pour trouver un moyen de paiement à débiter, répertoriez les moyens de paiement associés à votre client. Cet exemple liste des cartes, mais vous pouvez répertorier n’importe quel [type de moyen de paiement](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge. ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement. Définissez quelques autres paramètres afin d’effectuer le paiement hors session : - Définissez l’attribut [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) sur `true` pour indiquer que le client ne se trouve pas dans votre tunnel de paiement lors d’une tentative de paiement, et qu’il ne peut donc pas répondre à une demande d’authentification effectuée par un partenaire, comme un émetteur de cartes, une banque ou un autre établissement de paiement. Si un partenaire demande une authentification dans le tunnel de paiement, Stripe demande une exemption en s’appuyant sur les informations utilisée par le client *pendant une 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) précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut renvoyer une erreur. - Définissez la propriété [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) du PaymentIntent sur la valeur `true`, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent. - Renseignez l’ID du PaymentMethod dans [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) et l’ID du client dans [customer](https://docs.stripe.com/api.md#create_payment_intent-customer). #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer={{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` ## 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. ## 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: Activer les cartes sauvegardées [Côté serveur] [Côté client] PaymentSheet peut afficher une case à cocher **Enregistrer cette carte pour une utilisation ultérieure** qui enregistre la carte du client, ainsi que les cartes enregistrées du client. Pour activer cette case à cocher, créez un objet [Customer](https://docs.stripe.com/api/customers.md) sur votre serveur et une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) associée, avec `payment_method_save` défini sur `enabled`. > #### Comparer les références Customers v1 et Accounts v2 > > Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. ```javascript const stripe = require('stripe')('sk_test_your_secret_key'); app.post('/mobile-payment-element', async (req, res) => { // Use an existing Customer ID if this is a returning customer. const customer = await stripe.customers.create(); const customerSession = await stripe.customerSessions.create({ customer: customer.id, components: { mobile_payment_element: { enabled: true, features: { payment_method_save: 'enabled', payment_method_redisplay: 'enabled', payment_method_remove: 'enabled' } }, }, }); res.json({ customerSessionClientSecret: customerSession.client_secret, customer: customer.id, }); }); ``` Ensuite, configurez PaymentSheet avec l’ID du client et la clé secrète du client CustomerSession. ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet var configuration = PaymentSheet.Configuration() configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) self.paymentSheet = PaymentSheet(..., configuration: configuration) ``` ## Optional: Autoriser les moyens de paiement à notification différée [Côté client] Les *moyens de paiement différés* (A payment method that can't immediately return payment status when a customer attempts a transaction (for example, ACH debits). Businesses commonly hold an order in a pending state until payment is successful with these payment methods) ne garantissent pas non plus que vous recevrez les fonds de votre client à la fin du paiement, à cause du délai de versement (par exemple, comptes bancaires aux États-Unis, prélèvements SEPA, iDEAL et Bancontact) ou parce qu’ils nécessitent une intervention du client (par exemple, OXXO, Konbini et Boleto). Par défaut, PaymentSheet n’affiche pas les moyens de paiement différés. Pour activer cette option, définissez `allowsDelayedPaymentMethods` sur true dans votre `PaymentSheet.Configuration`. Cette étape ne suffit pas à activer des moyens de paiement spécifiques, elle permet simplement d’indiquer que votre application est capable de les gérer. Par exemple, bien qu’OXXO ne soit pas pris en charge par PaymentSheet, s’il devient pris en charge et que vous avez installé la dernière version du SDK, votre application pourra afficher OXXO comme option de paiement sans modification supplémentaire de l’intégration. ```swift var configuration = PaymentSheet.Configuration() configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(..., configuration: configuration) ``` Si le client utilise l’un de ces moyens de paiement différé dans la PaymentSheet, le résultat du paiement renvoyé est `.completed`. ## Optional: Activer Apple Pay > Si votre écran de paiement comporte 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 le paiement à partir de votre bouton **Apple Pay**. Vous pouvez utiliser `PaymentSheet` pour gérer d’autres types de moyens de paiement. ### Demander un ID de marchand Apple Pour obtenir un ID de marchand Apple, [demandez un nouvel identifiant](https://developer.apple.com/account/resources/identifiers/add/merchant) sur le site Web Apple Developer. Renseignez le formulaire en indiquant une description et un identifiant. La description n’est destinée qu’à votre propre information et vous pourrez la modifier ultérieurement au besoin. En ce qui concerne l’identifiant, Stripe vous recommande d’utiliser le nom de votre application (par exemple, `merchant.com.{{YOUR_APP_NAME}}`). ### Créer un nouveau certificat Apple Pay Créez un certificat permettant à votre application de chiffrer les données de paiement. Accédez aux [paramètres des certificats iOS](https://dashboard.stripe.com/settings/ios_certificates) dans le Dashboard, cliquez sur **Ajouter une nouvelle application** et suivez le guide. Téléchargez un fichier 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) ``` ## 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. # Accepter un paiement > This is a Accepter un paiement for when platform is android and type is payment. View the full page at https://docs.stripe.com/payments/mobile/finalize-payments-on-the-server?platform=android&type=payment. Le Payment Element vous permet d’accepter plusieurs moyens de paiement à l’aide d’une seule intégration. Vous allez créer un tunnel de paiement personnalisé dans lequel vous afficherez le Payment Element, créerez le *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) et confirmerez le paiement depuis votre serveur. ## Configurer Stripe [Côté serveur] [Côté client] Pour commencer, vous devez créer un compte Stripe. [Inscrivez-vous maintenant](https://dashboard.stripe.com/register). ### 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). Vous devez également définir votre [clé publiable](https://dashboard.stripe.com/apikeys) afin que le SDK puisse effectuer des appels à l’API vers Stripe. Pour commencer rapidement, vous pouvez coder cela en dur côté client pendant l’intégration, mais récupérer la clé publiable sur votre serveur en mode production. ```kotlin // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys PaymentConfiguration.init(context, publishableKey = "<>") ``` ## Activer des moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Collecter les informations de paiement [Côté client] Nous proposons deux styles d’intégration. | PaymentSheet | PaymentSheet.FlowController | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![PaymentSheet](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.471eaf89a760f5b6a757fd96b6bb9b60.png) | ![PaymentSheet.FlowController](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png) | | Affiche un formulaire permettant de collecter les informations de paiement et d’exécuter le paiement. Le libellé du bouton est **Payer** et le montant s’affiche. Un clic sur le bouton exécute le paiement. | Affiche un formulaire destiné à uniquement collecter les informations de paiement. Le libellé du bouton est **Continuer**. En cliquant dessus, le client est renvoyé vers votre application, où votre propre bouton exécute le paiement. | #### PaymentSheet #### Vues (classique) ### Initialiser la PaymentSheet Initialisez la PaymentSheet et transmettez un `CreateIntentCallback`. Laissez l’implémentation vide pour l’instant. ```kotlin class MyCheckoutActivity : AppCompatActivity() { private lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult) .createIntentCallback { confirmationToken -> TODO() // You'll implement this later } .build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // You'll implement this later } } ``` ### Présenter la PaymentSheet Ensuite, présentez la PaymentSheet en exécutant `presentWithIntentConfiguration()` et transmettez une [IntentConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-intent-configuration/index.html). La `IntentConfiguration` contient des détails sur le `PaymentIntent` spécifique, tels que le montant et la devise. ```kotlin class MyCheckoutActivity : AppCompatActivity() { // ... private fun handleCheckoutButtonPressed() {val intentConfig = PaymentSheet.IntentConfiguration(mode = PaymentSheet.IntentConfiguration.Mode.Payment( amount = 1099, currency = "usd",),// Other configuration options... ) paymentSheet.presentWithIntentConfiguration( intentConfiguration = intentConfig, // Optional configuration - See the "Customize the sheet" section in this guide configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build() ) } } ``` ### Confirmer l’Intent Lorsque votre client appuie sur le bouton **Pay** dans PaymentSheet, il exécute le `CreateIntentCallback` que vous avez passé ci-dessus avec un [ConfirmationToken](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirmation-token/index.html) représentant les détails et les préférences de paiement de votre client. Implémentez cette méthode pour envoyer une requête à votre serveur avec `confirmationToken.id`. Votre serveur crée et confirme un PaymentIntent et renvoie sa clé secrète du client. Lors de la réception de la réponse, renvoyez la clé secrète du client contenue dans la réponse ou une erreur. La PaymentSheet effectue toutes les actions suivantes requises pour finaliser le PaymentIntent à l’aide de la clé secrète du client ou affiche l’erreur dans l’interface utilisateur. ```kotlin class MyCheckoutActivity : AppCompatActivity() { private lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult) .createIntentCallback { confirmationToken ->// Make a request to your server to create aPaymentIntentand return its client secret val networkResult = myNetworkClient.createIntent( confirmationTokenId = confirmationToken.id, ) if (networkResult.isSuccess) { CreateIntentResult.Success(networkResult.clientSecret) } else { CreateIntentResult.Failure(networkResult.exception) } } .build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // You'll implement this later } } ``` Une fois le paiement effectué par votre client, la foche se ferme et PaymentSheet invoque le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) fourni avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin class MyCheckoutActivity : AppCompatActivity() { // ... fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Customer canceled - you should probably do nothing. } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on } is PaymentSheetResult.Completed -> { // Display, for example, an order confirmation screen print("Completed") } } } } ``` #### Jetpack Compose ### Initialiser la PaymentSheet Initialisez la PaymentSheet à l’aide de `remember` et transmettez à `PaymentSheet.Builder`. Laissez l’implémentation de `resultCallback` et `createIntentCallback` vides pour l’instant. ```kotlin import androidx.compose.runtime.* import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.rememberPaymentSheet @Composable fun CheckoutScreen() { val paymentSheet = remember { Builder( resultCallback = { paymentSheetResult -> // You'll implement this later } ).createIntentCallback { confirmationToken -> // You'll implement this later } }.build() } ``` ### Présenter la PaymentSheet Ensuite, présentez la PaymentSheet en exécutant `presentWithIntentConfiguration()` et transmettez une [IntentConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-intent-configuration/index.html). La `IntentConfiguration` contient des détails sur le `PaymentIntent` spécifique, tels que le montant et la devise. ```kotlin @Composable fun CheckoutScreen() { val paymentSheet = remember { ... }.build() Button( onClick = { val intentConfig = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Payment( amount = 1099, currency = "usd", ), ) } ) { Text("Checkout") } } ``` ### Confirmer l’Intent Lorsque votre client appuie sur le bouton **Pay** dans la PaymentSheet, il exécute `le CreateIntentCallback` avec un objet [ConfirmationToken](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirmation-token/index.html) représentant les détails et les préférences de paiement du client. Implémentez ce rappel pour envoyer une requête à votre serveur avec `confirmationToken.id`. Votre serveur crée et confirme un PaymentIntent et renvoie sa clé secrète du client. Lors de la réception de la réponse, renvoyez la clé secrète du client ou une erreur. La PaymentSheet effectue toutes les actions suivantes requises pour finaliser le PaymentIntent à l’aide de la clé secrète du client ou affiche l’erreur dans l’interface utilisateur. ```kotlin @Composable fun CheckoutScreen() { val paymentSheet = remember { Builder( resultCallback = { paymentSheetResult -> // You'll implement this later } ).createIntentCallback { confirmationToken -> // Make a request to your server to create a PaymentIntent and return its client secret try { val response = myNetworkClient.createIntent( confirmationTokenId = confirmationToken.id, ) CreateIntentResult.Success(response.clientSecret) } catch (e: Exception) { CreateIntentResult.Failure( cause = e, displayMessage = e.message ) } } }.build() Button( onClick = { val intentConfig = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Payment( amount = 1099, currency = "usd", ), ) paymentSheet.presentWithIntentConfiguration( intentConfiguration = intentConfig, configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build() ) } ) { Text("Checkout") } } ``` Une fois le paiement effectué par votre client, la fiche se ferme et le rappel que vous transmettez à `PaymentSheet.Builder.resultCallback` est invoqué avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin @Composable fun CheckoutScreen() { val paymentSheet = remember { Builder( resultCallback = { paymentSheetResult -> when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Customer canceled - you should probably do nothing. } is PaymentSheetResult.Failed -> { println("Error: ${paymentSheetResult.error}") // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on } is PaymentSheetResult.Completed -> { // Display, for example, an order confirmation screen println("Completed") } } } ).createIntentCallback { confirmationToken -> ... // previously implemented confirm intent code } }.build() ... // other code } ``` #### PaymentSheet.FlowController Cette intégration suppose que votre écran de paiement comporte deux boutons : un bouton **Moyen de paiement** qui présente la feuille de paiement pour collecter les détails du paiement, et un bouton **Acheter** qui complète le paiement. #### Vues (classique) ### Initialiser la PaymentSheet Initialisez le `PaymentSheet.FlowController` et transmettez un `CreateIntentCallback`. Laissez l’implémentation vide pour l’instant. ```kotlin class MyCheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionCallback = ::onPaymentOption ) .createIntentCallback { confirmationToken -> TODO() // You'll implement this later } .build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // Explained later } fun onPaymentOption(paymentOption: PaymentOption?) { // Explained later } } ``` Après le chargement de votre écran de paiement, configurez le `PaymentSheet.FlowController` avec une [IntentConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-intent-configuration/index.html). L’`IntentConfiguration` contient des détails sur le `PaymentIntent` spécifique, comme la quantité et la devise. ```kotlin fun handleCheckoutLoaded(cartTotal: Long, currency: String) {flowController.configureWithIntentConfiguration( intentConfiguration = PaymentSheet.IntentConfiguration(mode = PaymentSheet.IntentConfiguration.Mode.Payment( amount = cartTotal, currency = currency,),), // Optional configuration - See the "Customize the sheet" section in this guide configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build(), callback = { success, error -> // If success, the FlowController was initialized correctly. // Use flowController.getPaymentOption() to populate your payment // method button. }, ) } ``` Lorsque `PaymentSheet.FlowController` termine la configuration, il invoque votre rappel. Vous pouvez ensuite alimenter votre bouton **Moyen de paiement** avec `flowController.getPaymentOption()`, qui comprend une image et une étiquette représentant le moyen de paiement sélectionné par votre client. ### Présenter la PaymentSheet Lorsque votre client appuie sur votre bouton **Moyen de paiement**, appelez `presentPaymentOptions()` pour collecter ses informations de paiement. Une fois l’opération effectuée, mettez à nouveau à jour votre interface utilisateur pour inclure la propriété `paymentOption`. ```kotlin // ... flowController.presentPaymentOptions() // ... fun onPaymentOption(paymentOption: PaymentOption?) { if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` ### Modifier les informations de paiement Si le client modifie les informations de paiement (par exemple, en appliquant un code de réduction ou en modifiant son panier), mettez à jour l’instance `PaymentSheet.FlowController` pour que les nouvelles valeurs soient prises en compte en appelant à nouveau `configureWithIntentConfiguration()`. Cela permet de synchroniser les valeurs affichées dans l’interface utilisateur. > Certains moyens de paiement, tels que Google Pay, affichent le montant dans l’interface utilisateur. Si le client modifie le paiement et que vous ne mettez pas à jour l’élément `EmbeddedPaymentElement`, l’interface utilisateur affiche des valeurs incorrectes. Pendant la configuration, n’appelez pas `presentPaymentOptions()` ou `confirm()` sur `PaymentSheet.FlowController`. Désactivez vos boutons **Acheter** et **Moyen de paiement**, puis activez-les à nouveau lorsque votre `ConfigCallback` s’exécute. Si la mise à jour se termine sans problème, utilisez `flowController.getPaymentOption()` pour mettre à jour votre interface utilisateur, car le moyen de paiement précédemment sélectionné par le client peut ne pas être disponible. Si la mise à jour échoue, veuillez réessayer. ```kotlin fun handleCartChanged( newCartTotal: Long, currency: String, ) { // Disable your "Buy" and "Payment method" buttons paymentMethodSelectionButton.isEnabled = false payButton.isEnabled = false // Update FlowController by configuring it again flowController.configureWithIntentConfiguration( intentConfiguration = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Payment( amount = newCartTotal, currency = currency ), ), configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build(), callback = { success, error -> // If success, the FlowController was updated correctly if (success) { paymentMethodSelectionButton.isEnabled = true val canPay = flowController.getPaymentOption() != null payButton.isEnabled = canPay } else { // You must retry - until the update succeeds, the customer can't pay or select a payment method. // For example, you can automatically retry the update with an exponential back-off, or present the user with an alert that retries the update. } }, ) } ``` ### Confirmer l’Intent Lorsque votre client appuie sur votre bouton **Acheter**, appelez `confirm()` pour appeler le `CreateIntentCallback` que vous transmettez avec un objet [ConfirmationToken](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirmation-token/index.html) représentant les informations et les préférences de paiement du client. Implémentez cette méthode pour envoyer une requête à votre serveur avec `confirmationToken.id`. Votre serveur crée et confirme un PaymentIntent et renvoie sa clé secrète du client. Lors de la réception de la réponse, renvoyez la clé secrète du client ou une erreur. PaymentSheet effectue toutes les actions suivantes requises pour finaliser le PaymentIntent à l’aide de la clé secrète du client ou affiche l’erreur dans l’interface utilisateur. ```kotlin class MyCheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // … flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionCallback = ::onPaymentOption ) .createIntentCallback { confirmationToken ->// Make a request to your server to create aPaymentIntentand return its client secret try { val response = myNetworkClient.createIntent( confirmationTokenId = confirmationToken.id, // only required for server-side confirmation ) CreateIntentResult.Success(response.clientSecret) } catch (e: Exception) { CreateIntentResult.Failure( cause = e, displayMessage = e.message ) } } .build(this) } } ``` Une fois le paiement effectué par votre client, la fiche se ferme et le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) est invoqué avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin class MyCheckoutActivity : AppCompatActivity() { // ... fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Customer canceled - you should probably do nothing. } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on } is PaymentSheetResult.Completed -> { // Display, for example, an order confirmation screen print("Completed") } } } } ``` L’étape suivante explique le code du serveur. #### Jetpack Compose ### Initialiser le PaymentSheet.FlowController Initialisez le `PaymentSheet.FlowController` et transférez les rappels à `PaymentSheet.FlowController.Builder`. Laissez les implémentations vides pour l’instant. ```kotlin import androidx.compose.runtime.* import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheet.FlowController.Builder import com.stripe.android.paymentsheet.PaymentSheetResult import com.stripe.android.paymentsheet.model.PaymentOption private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // You'll implement this later } private fun onPaymentOption(paymentOption: PaymentOption?) { // You'll implement this later } @Composable fun CheckoutScreen() { val flowController = remember{ Builder( resultCallback = ::onPaymentSheetResult, paymentOptionCallback = ::onPaymentOption, ).createIntentCallback { confirmationToken -> // You'll implement this later } }.build() } ``` Après le chargement de votre écran de paiement, configurez l’instance `PaymentSheet.FlowController` avec une [IntentConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-intent-configuration/index.html). `IntentConfiguration` contient des détails sur le `PaymentIntent` spécifique, comme la quantité et la devise. ```kotlin @Composable fun CheckoutScreen() { val flowController = remember{ ... }.build() LaunchedEffect(Unit) { flowController.configureWithIntentConfiguration( intentConfiguration = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Payment( amount = 1099, currency = "usd", ), ), configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build(), callback = { success, error -> // If success, the FlowController was initialized correctly. // Use flowController.getPaymentOption() to populate your payment // method button. }, ) } } ``` Quand l’instance `PaymentSheet.FlowController` termine la configuration, elle appelle`paymentOptionCallback`. `paymentOption` contient une image et une étiquette représentant le moyen de paiement initialement sélectionné par le client. ### Présenter la PaymentSheet Lorsqu’un client appuie sur le bouton **Moyen de paiement**, appelez `presentPaymentOptions()` pour collecter ses informations de paiement. Une fois terminé, `paymentOptionCallback` met à jour`paymentOption`. Mettez ensuite à jour votre interface utilisateur. ```kotlin ... flowController.presentPaymentOptions() ... fun onPaymentOption(paymentOption: PaymentOption?) { if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` ### Modifier les informations de paiement Si le client modifie les informations de paiement (par exemple, en appliquant un code de réduction ou en modifiant son panier), mettez à jour l’instance `PaymentSheet.FlowController` pour que les nouvelles valeurs soient prises en compte en appelant à nouveau `configureWithIntentConfiguration()`. Cela permet de synchroniser les valeurs affichées dans l’interface utilisateur. > Certains moyens de paiement, comme Google Pay, affichent le montant dans l’interface utilisateur. Si le client modifie le paiement et que vous ne mettez pas à jour le `PaymentSheet.FlowController`, l’interface utilisateur affiche des valeurs incorrectes. Pendant la configuration, n’appelez pas `presentPaymentOptions()` ou `confirm()` sur le `PaymentSheet.FlowController`. Si la mise à jour réussit, `paymentOptionCallback` s’exécute avec l’option de paiement mise à jour. La sélection peut changer si le moyen de paiement précédemment choisi par le client n’est plus disponible. Si la mise à jour échoue, veuillez réessayer. ```kotlin fun updateCart( flowController: PaymentSheet.FlowController, newAmount: Long, onComplete: (Boolean) -> Unit ) { flowController.configureWithIntentConfiguration( intentConfiguration = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Payment( amount = newAmount, currency = "usd" ), ), configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build(), callback = { success, error -> // If success, the FlowController was updated correctly if (success) { paymentMethodSelectionButton.isEnabled = true val canPay = flowController.getPaymentOption() != null payButton.isEnabled = canPay } else { // You must retry - until the update succeeds, the customer can't pay or select a payment method. // For example, you can automatically retry the update with an exponential back-off, or present the user with an alert that retries the update. } }, ) } ``` ### Confirmer l’Intent Lorsque votre client appuie sur votre bouton **Acheter**, appelez `confirm()`. La PaymentSheet appelle le `createIntentCallback` que vous transférez avec un [ConfirmationToken](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirmation-token/index.html) représentant les informations et préférences de paiement de votre client. ```kotlin @Composable fun CheckoutScreen() { val flowController = remember{ Builder( resultCallback = ::onPaymentSheetResult, paymentOptionCallback = ::onPaymentOption, ).createIntentCallback { confirmationToken -> // Make a request to your server to create a PaymentIntent and return its client secret try { val response = myNetworkClient.createIntent( confirmationTokenId = confirmationToken.id, ) CreateIntentResult.Success(response.clientSecret) } catch (e: Exception) { CreateIntentResult.Failure( cause = e, displayMessage = e.message ) } } }.build() // Previous flowcontroller configuration code Column { // Payment method button... Button( onClick = { flowController.confirm() }, enabled = paymentOption != null ) { Text("Buy") } } } ``` Une fois que votre client a effectué le paiement, la feuille se ferme, et `PaymentSheet.FlowController` invoque le rappel que vous transférez à `PaymentSheet.FlowController.Builder.resultCallback` avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Customer canceled - you should probably do nothing. } is PaymentSheetResult.Failed -> { println("Error: ${(paymentSheetResult as PaymentSheetResult.Failed).error}") // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on } is PaymentSheetResult.Completed -> { // Display, for example, an order confirmation screen println("Completed") } null -> { // No result yet } } } ``` L’étape suivante explique le code du serveur. ## Créer et envoyer le paiement à Stripe [Côté serveur] Sur votre serveur, créez et confirmez un a *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) en indiquant un montant et une devise. Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le l’affichage des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, décidez toujours du montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client. Si l’appel réussit, renvoyez 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 PaymentIntent. Si l’appel échoue, [traitez l’erreur](https://docs.stripe.com/error-handling.md) et renvoyez un message d’erreur avec une courte explication à l’intention de votre client. > Vérifiez que toutes les propriétés de l’IntentConfiguration correspondent à votre PaymentIntent (par exemple, `setup_future_usage`, `amount` et `currency`). ### Gestion des arguments côté client : - `confirmation_token_id` - Vous pouvez récupérer l’objet ConfirmationToken à l’aide de cet ID pour effectuer votre propre validation ou logique d’entreprise. #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do data = JSON.parse request.body.read params = { amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, confirm: true, confirmation_token: data['confirmation_token_id'], # the ConfirmationToken ID sent by your client } begin intent = Stripe::PaymentIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end ``` ## 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 les cartes sauvegardées [Côté serveur] [Côté client] Le `PaymentSheet` peut permettre au client d’enregistrer sa carte bancaire et peut inclure les cartes enregistrées du client dans les moyens de paiement disponibles. Un objet [Customer](https://docs.stripe.com/api/customers.md) doit être associé au client sur votre serveur. Pour activer une case à cocher permettant au client d’enregistrer sa carte, créez une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) avec `payment_method_save` défini sur `enabled`. ```javascript const stripe = require("stripe")("<>"); const express = require('express'); const app = express(); app.set('trust proxy', true); app.use(express.json()); app.post('/payment-sheet', async (req, res) => { // Use an existing Customer ID if this is a returning customer. const customer = await stripe.customers.create(); const customerSession = await stripe.customerSessions.create({ customer: customer.id, components: { mobile_payment_element: { enabled: true, features: { payment_method_save: 'enabled', payment_method_redisplay: 'enabled', payment_method_remove: 'enabled' } }, }, }); res.json({ customerSessionClientSecret: customerSession.client_secret, customer: customer.id, }); }); ``` Ensuite, présentez le `PaymentSheet` avec l’ID du client et la clé secrète du client de la `CustomerSession`. ```kotlin val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Powdur") .customer( PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = customerId, clientSecret = customerSessionClientSecret, ) ) .build() paymentSheet.presentWithIntentConfiguration( intentConfiguration = // ... , configuration = configuration, ) ``` ## Optional: Autoriser les moyens de paiement à notification différée [Côté client] Les *moyens de paiement différé* (A payment method that can't immediately return payment status when a customer attempts a transaction (for example, ACH debits). Businesses commonly hold an order in a pending state until payment is successful with these payment methods) ne vous garantissent pas de recevoir les fonds de votre client à l’issue du processus de paiement, soit parce qu’un certain délai est nécessaire (par exemple, les comptes bancaires États-Unis, les prélèvements SEPA, iDEAL, Bancontact et Sofort), soit parce que leur exécution nécessite une action de la part du client (par exemple, OXXO, Konbini et Boleto). Par défaut, le `PaymentSheet` n’affiche pas les moyens de paiement différé. Pour inclure les moyens de paiement différé pris en charge par le `PaymentSheet`, définissez `allowsDelayedPaymentMethods` sur true dans votre `PaymentSheet.Configuration`. ```kotlin val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Powdur") .allowsDelayedPaymentMethods(true) .build() ``` Si le client utilise avec succès un moyen de paiement différé dans un `PaymentSheet`, le résultat du paiement renvoyé est `PaymentSheetResult.Completed`. ## Optional: Activer Google Pay > Si votre écran de paiement comporte un bouton dédié **Google Pay**, suivez le [guide Google Pay](https://docs.stripe.com/google-pay.md?platform=android). Vous pouvez utiliser le Payment Element intégré pour gérer d’autres types de moyens de paiement. ### Configurer votre intégration Pour utiliser Google Pay, commencez par activer l’API Google Pay en ajoutant les informations suivantes au libellé `` de votre **AndroidManifest.xml** : ```xml ... ``` Pour en savoir plus, consultez cette page indiquant comment [configurer l’API Google Pay](https://developers.google.com/pay/api/android/guides/setup) pour Android. ### Ajouter Google Pay Pour ajouter Google Pay à votre intégration, transmettez un [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) avec votre environnement Google Pay (en mode production ou en mode test), ainsi que le [code pays de votre entreprise](https://dashboard.stripe.com/settings/account) lors de l’initialisation de [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). #### Kotlin ```kotlin val googlePayConfiguration = PaymentSheet.GooglePayConfiguration( environment = PaymentSheet.GooglePayConfiguration.Environment.Test, countryCode = "US", currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .googlePay(googlePayConfiguration) .build() ``` ### Tester Google Pay Google vous permet d’effectuer des paiements de test via leur [suite de carte bancaire de test](https://developers.google.com/pay/api/android/guides/resources/test-card-suite). La suite de tests prend en charge l’utilisation de [cartes bancaires de test](https://docs.stripe.com/testing.md) de Stripe. Vous devez tester Google Pay à l’aide d’un appareil Android physique plutôt que d’un appareil simulé, dans un pays où Google Pay est pris en charge. Connectez-vous à un compte Google sur votre appareil de test avec une carte réelle enregistrée dans Google Wallet. ## Optional: Activer la numérisation de carte Pour activer la prise en charge de la numérisation des cartes bancaires, faites une [requête d’accès](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) à l’API Google Pay auprès de la [console Google Pay et Wallet](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite). - Si vous avez activé Google Pay, la fonctionnalité de numérisation de carte bancaire est automatiquement disponible dans notre interface utilisateur sur les appareils admissibles. Pour en savoir plus sur les appareils admissibles, consultez les [contraintes de l’API Google Pay](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition) - **Important :** la fonctionnalité de lecture de carte n’apparaît que dans les versions signées avec la même clé de signature enregistrée dans la [console Google Pay et Wallet](https://pay.google.com/business/console). Les versions de test ou de débogage utilisant différentes clés de signature (par exemple, les versions distribuées via Firebase App Tester) n’affichent pas l’option **Lire la carte**. Pour tester la lecture de carte dans les versions préliminaires, vous devez soit : - Signez vos versions de test avec votre clé de signature de production. - Ajoutez l’empreinte d’identification de votre clé de signature de test à la console Google Pay et Wallet ## Optional: Personnaliser le formulaire Pour personnaliser le formulaire de paiement, vous devez obligatoirement utiliser l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). ### Appearance Personnalisez les couleurs, les polices et plus encore afin de vous adapter à l’apparence de votre application à l’aide de l’[Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android). ### 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-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Vous pouvez les afficher horizontalement, verticalement ou laisser Stripe optimiser la mise en page automatiquement. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png) #### Kotlin ```kotlin PaymentSheet.Configuration.Builder("Example, Inc.") .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic) .build() ``` ### 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=android). ### Nom d’affichage de l’entreprise Spécifiez un nom d’entreprise à afficher pour le client en définissant [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378). Par défaut, il s’agit du nom de votre application. #### Kotlin ```kotlin PaymentSheet.Configuration.Builder( merchantDisplayName = "My app, Inc." ).build() ``` ### Mode sombre Par défaut, `PaymentSheet` s’adapte automatiquement aux paramètres d’affichage du système de l’utilisateur (mode clair ou mode sombre). Vous pouvez modifier ce comportement en sélectionnant le mode clair ou le mode sombre sur votre application : #### Kotlin ```kotlin // force dark AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force light AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) ``` ### Informations de facturation par défaut 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. #### Kotlin ```kotlin val address = PaymentSheet.Address(country = "US") val billingDetails = PaymentSheet.BillingDetails( address = address, email = "foo@bar.com" ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .build() ``` ### Configurer la collecte des données de facturation Utiliser `BillingDetailsCollectionConfiguration` pour spécifier la manière dont vous souhaitez collecter les informations de facturation dans la PaymentSheet. 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 associer les informations de facturation par défaut à l’objet PaymentMethod même lorsque ces champs ne sont pas collectés dans l’interface utilisateur, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`. #### Kotlin ```kotlin val billingDetails = PaymentSheet.BillingDetails( email = "foo@bar.com" ) val billingDetailsCollectionConfiguration = BillingDetailsCollectionConfiguration( attachDefaultsToPaymentMethod = true, name = BillingDetailsCollectionConfiguration.CollectionMode.Always, email = BillingDetailsCollectionConfiguration.CollectionMode.Never, address = BillingDetailsCollectionConfiguration.AddressCollectionMode.Full, ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration) .build() ``` > Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte d’informations. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction. ## Optional: Activer la collecte du CVC à la confirmation Pour récupérer le CVC d’une carte bancaire enregistrée lors de la confirmation de PaymentIntent, votre intégration doit collecter les informations de paiement avant de créer un PaymentIntent. ### Mettre à jour la configuration de l’Intent `PaymentSheet.IntentConfiguration` accepte un paramètre facultatif qui contrôle le moment de récupérer le CVC pour une carte enregistrée. ```kotlin val intentConfig = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Payment( amount = 1099, currency = "usd", ),requireCvcRecollection = true, ) ``` ### Mettre à jour les paramètres de création de l’Intent Pour récupérer le CVC lors de la confirmation du paiement, ajoutez les paramètres `customerId` et `require_cvc_recollection` lors de la création du PaymentIntent. #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do data = JSON.parse request.body.read params = { amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true},customer: customer.id, payment_method_options: { card: {require_cvc_recollection: true} }, } begin intent = Stripe::PaymentIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end ``` # Collecter et enregistrer un moyen de paiement > This is a Collecter et enregistrer un moyen de paiement for when platform is android and type is setup. View the full page at https://docs.stripe.com/payments/mobile/finalize-payments-on-the-server?platform=android&type=setup. Un flux SetupIntent vous permet de collecter les informations relatives aux moyens de paiement et de les enregistrer pour les paiements ultérieurs sans créer de paiement. Dans cette intégration, vous créez un tunnel personnalisé dans lequel vous affichez le composant Payment Element, créez le *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) et confirmez l’enregistrement du moyen de paiement sur votre serveur. ## Configurer Stripe [Côté serveur] [Côté client] Pour commencer, vous devez créer un compte Stripe. [Inscrivez-vous maintenant](https://dashboard.stripe.com/register). ### 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). Vous devez également définir votre [clé publiable](https://dashboard.stripe.com/apikeys) afin que le SDK puisse effectuer des appels à l’API vers Stripe. Pour commencer rapidement, vous pouvez coder cela en dur côté client pendant l’intégration, mais récupérer la clé publiable sur votre serveur en mode production. ```kotlin // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys PaymentConfiguration.init(context, publishableKey = "<>") ``` ## Activer des moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Créer un objet Customer [Côté serveur] Pour configurer un moyen de paiement en vue de paiements ultérieurs, 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 crée un compte auprès de votre entreprise. Les objets `Customer` permettent de réutiliser des moyens de paiement et de suivre plusieurs paiements. > #### Comparer les références Customers v1 et Accounts v2 > > Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` ## Collecter les informations de paiement [Côté client] Nous proposons deux styles d’intégration. | PaymentSheet | PaymentSheet.FlowController | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ![PaymentSheet](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.471eaf89a760f5b6a757fd96b6bb9b60.png) | ![PaymentSheet.FlowController](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png) | | Affiche un formulaire permettant de collecter et d’enregistrer les informations de paiement. Le libellé du bouton est **Configurer**. Le fait de cliquer dessus enregistre les informations de paiement. | Affiche un formulaire destiné à uniquement collecter les informations de paiement. Le libellé du bouton est **Continuer**. En cliquant dessus, le client est renvoyé vers votre application, où votre propre bouton enregistre les informations de paiement. | #### PaymentSheet #### Vues (classique) ### Initialiser la PaymentSheet Initialisez la PaymentSheet et transmettez un `CreateIntentCallback`. Laissez l’implémentation vide pour l’instant. ```kotlin class MyCheckoutActivity : AppCompatActivity() { private lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult) .createIntentCallback { confirmationToken -> TODO() // You'll implement this later } .build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // You'll implement this later } } ``` ### Présenter la PaymentSheet Ensuite, présentez la PaymentSheet en exécutant `presentWithIntentConfiguration()` et transmettez une [IntentConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-intent-configuration/index.html). La `IntentConfiguration` contient des détails sur le `SetupIntent`, tels que la devise. ```kotlin class MyCheckoutActivity : AppCompatActivity() { // ... private fun handleCheckoutButtonPressed() {val intentConfig = PaymentSheet.IntentConfiguration(mode = PaymentSheet.IntentConfiguration.Mode.Setup( currency = "usd", ),// Other configuration options... ) paymentSheet.presentWithIntentConfiguration( intentConfiguration = intentConfig, // Optional configuration - See the "Customize the sheet" section in this guide configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build() ) } } ``` ### Confirmer l’Intent Lorsque votre client appuie sur le bouton **Setup** dans PaymentSheet, il exécute le `CreateIntentCallback` que vous avez passé ci-dessus avec un [ConfirmationToken](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirmation-token/index.html) représentant les détails et les préférences de paiement de votre client. Implémentez cette méthode pour envoyer une requête à votre serveur avec `confirmationToken.id`. Votre serveur crée et confirme un SetupIntent et renvoie sa clé secrète du client. Lors de la réception de la réponse, renvoyez la clé secrète du client contenue dans la réponse ou une erreur. La PaymentSheet effectue toutes les actions suivantes requises pour finaliser le SetupIntent à l’aide de la clé secrète du client ou affiche l’erreur dans l’interface utilisateur. ```kotlin class MyCheckoutActivity : AppCompatActivity() { private lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult) .createIntentCallback { confirmationToken ->// Make a request to your server to create aSetupIntentand return its client secret val networkResult = myNetworkClient.createIntent( confirmationTokenId = confirmationToken.id, ) if (networkResult.isSuccess) { CreateIntentResult.Success(networkResult.clientSecret) } else { CreateIntentResult.Failure(networkResult.exception) } } .build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // You'll implement this later } } ``` Une fois que votre client a enregistré un moyen de paiement, la fiche se ferme et PaymentSheet invoque le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) fourni avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin class MyCheckoutActivity : AppCompatActivity() { // ... fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Customer canceled - you should probably do nothing. } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on } is PaymentSheetResult.Completed -> { // Display, for example, an order confirmation screen print("Completed") } } } } ``` #### Jetpack Compose ### Initialiser la PaymentSheet Initialisez la PaymentSheet à l’aide de `remember` et transmettez à `PaymentSheet.Builder`. Laissez l’implémentation de `resultCallback` et `createIntentCallback` vides pour l’instant. ```kotlin import androidx.compose.runtime.* import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.rememberPaymentSheet @Composable fun CheckoutScreen() { val paymentSheet = remember { Builder( resultCallback = { paymentSheetResult -> // You'll implement this later } ).createIntentCallback { confirmationToken -> // You'll implement this later } }.build() } ``` ### Présenter la PaymentSheet Ensuite, présentez la PaymentSheet en exécutant `presentWithIntentConfiguration()` et transmettez une [IntentConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-intent-configuration/index.html). La `IntentConfiguration` contient des détails sur le `SetupIntent`, tels que la devise. ```kotlin @Composable fun CheckoutScreen() { val paymentSheet = remember { ... }.build() Button( onClick = { val intentConfig = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Setup( currency = "usd", ), ) } ) { Text("Checkout") } } ``` ### Confirmer l’Intent Lorsque votre client appuie sur le bouton **Setup** dans la PaymentSheet, il exécute `le CreateIntentCallback` avec un objet [ConfirmationToken](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirmation-token/index.html) représentant les détails et les préférences de paiement du client. Implémentez ce rappel pour envoyer une requête à votre serveur avec `confirmationToken.id`. Votre serveur crée et confirme un SetupIntent et renvoie sa clé secrète du client. Lors de la réception de la réponse, renvoyez la clé secrète du client ou une erreur. La PaymentSheet effectue toutes les actions suivantes requises pour finaliser le SetupIntent à l’aide de la clé secrète du client ou affiche l’erreur dans l’interface utilisateur. ```kotlin @Composable fun CheckoutScreen() { val paymentSheet = remember { Builder( resultCallback = { paymentSheetResult -> // You'll implement this later } ).createIntentCallback { confirmationToken -> // Make a request to your server to create a PaymentIntent and return its client secret try { val response = myNetworkClient.createIntent( confirmationTokenId = confirmationToken.id, ) CreateIntentResult.Success(response.clientSecret) } catch (e: Exception) { CreateIntentResult.Failure( cause = e, displayMessage = e.message ) } } }.build() Button( onClick = { val intentConfig = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Setup( currency = "usd", ), ) paymentSheet.presentWithIntentConfiguration( intentConfiguration = intentConfig, configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build() ) } ) { Text("Checkout") } } ``` Une fois que votre client a enregistré un moyen de paiement, la fiche se ferme, et le rappel que vous transmettez à `PaymentSheet.Builder.resultCallback` est invoqué avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin @Composable fun CheckoutScreen() { val paymentSheet = remember { Builder( resultCallback = { paymentSheetResult -> when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Customer canceled - you should probably do nothing. } is PaymentSheetResult.Failed -> { println("Error: ${paymentSheetResult.error}") // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on } is PaymentSheetResult.Completed -> { // Display, for example, an order confirmation screen println("Completed") } } } ).createIntentCallback { confirmationToken -> ... // previously implemented confirm intent code } }.build() ... // other code } ``` #### PaymentSheet.FlowController Cette intégration suppose que votre écran de paiement comporte deux boutons : un bouton **Moyen de paiement** qui présente la feuille de paiement pour collecter les détails du paiement, et un bouton **Configurer** qui configure les détails du paiement pour un usage ultérieur. #### Vues (classique) ### Initialiser la PaymentSheet Initialisez le `PaymentSheet.FlowController` et transmettez un `CreateIntentCallback`. Laissez l’implémentation vide pour l’instant. ```kotlin class MyCheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionCallback = ::onPaymentOption ) .createIntentCallback { confirmationToken -> TODO() // You'll implement this later } .build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // Explained later } fun onPaymentOption(paymentOption: PaymentOption?) { // Explained later } } ``` Après le chargement de votre écran de paiement, configurez le `PaymentSheet.FlowController` avec une [IntentConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-intent-configuration/index.html). L’`IntentConfiguration` contient des détails sur le `SetupIntent` spécifique, comme la devise. ```kotlin fun handleCheckoutLoaded(currency: String) {flowController.configureWithIntentConfiguration( intentConfiguration = PaymentSheet.IntentConfiguration(mode = PaymentSheet.IntentConfiguration.Mode.Setup( currency = currency, ),), // Optional configuration - See the "Customize the sheet" section in this guide configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build(), callback = { success, error -> // If success, the FlowController was initialized correctly. // Use flowController.getPaymentOption() to populate your payment // method button. }, ) } ``` Lorsque `PaymentSheet.FlowController` termine la configuration, il invoque votre rappel. Vous pouvez ensuite alimenter votre bouton **Moyen de paiement** avec `flowController.getPaymentOption()`, qui comprend une image et une étiquette représentant le moyen de paiement sélectionné par votre client. ### Présenter la PaymentSheet Lorsque votre client appuie sur votre bouton **Moyen de paiement**, appelez `presentPaymentOptions()` pour collecter ses informations de paiement. Une fois l’opération effectuée, mettez à nouveau à jour votre interface utilisateur pour inclure la propriété `paymentOption`. ```kotlin // ... flowController.presentPaymentOptions() // ... fun onPaymentOption(paymentOption: PaymentOption?) { if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` ### Modifier les informations de paiement Si le client modifie les informations de paiement (par exemple, en appliquant un code de réduction ou en modifiant son panier), mettez à jour l’instance `PaymentSheet.FlowController` pour que les nouvelles valeurs soient prises en compte en appelant à nouveau `configureWithIntentConfiguration()`. Cela permet de synchroniser les valeurs affichées dans l’interface utilisateur. > Certains moyens de paiement, tels que Google Pay, affichent le montant dans l’interface utilisateur. Si le client modifie le paiement et que vous ne mettez pas à jour l’élément `EmbeddedPaymentElement`, l’interface utilisateur affiche des valeurs incorrectes. Pendant la configuration, n’appelez pas `presentPaymentOptions()` ou `confirm()` sur `PaymentSheet.FlowController`. Désactivez vos boutons **Acheter** et **Moyen de paiement**, puis activez-les à nouveau lorsque votre `ConfigCallback` s’exécute. Si la mise à jour se termine sans problème, utilisez `flowController.getPaymentOption()` pour mettre à jour votre interface utilisateur, car le moyen de paiement précédemment sélectionné par le client peut ne pas être disponible. Si la mise à jour échoue, veuillez réessayer. ```kotlin fun handleCartChanged( currency: String, ) { // Disable your "Buy" and "Payment method" buttons paymentMethodSelectionButton.isEnabled = false payButton.isEnabled = false // Update FlowController by configuring it again flowController.configureWithIntentConfiguration( intentConfiguration = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Setup( currency = currency, ), ), configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build(), callback = { success, error -> // If success, the FlowController was updated correctly if (success) { paymentMethodSelectionButton.isEnabled = true val canPay = flowController.getPaymentOption() != null payButton.isEnabled = canPay } else { // You must retry - until the update succeeds, the customer can't pay or select a payment method. // For example, you can automatically retry the update with an exponential back-off, or present the user with an alert that retries the update. } }, ) } ``` ### Confirmer l’Intent Lorsque votre client appuie sur votre bouton **Acheter**, appelez `confirm()` pour appeler le `CreateIntentCallback` que vous transmettez avec un objet [ConfirmationToken](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirmation-token/index.html) représentant les informations et les préférences de paiement du client. Implémentez cette méthode pour envoyer une requête à votre serveur avec `confirmationToken.id`. Votre serveur crée et confirme un SetupIntent et renvoie sa clé secrète du client. Lors de la réception de la réponse, renvoyez la clé secrète du client ou une erreur. PaymentSheet effectue toutes les actions suivantes requises pour finaliser le SetupIntent à l’aide de la clé secrète du client ou affiche l’erreur dans l’interface utilisateur. ```kotlin class MyCheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // … flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionCallback = ::onPaymentOption ) .createIntentCallback { confirmationToken ->// Make a request to your server to create aSetupIntentand return its client secret try { val response = myNetworkClient.createIntent( confirmationTokenId = confirmationToken.id, // only required for server-side confirmation ) CreateIntentResult.Success(response.clientSecret) } catch (e: Exception) { CreateIntentResult.Failure( cause = e, displayMessage = e.message ) } } .build(this) } } ``` Une fois que votre client a terminé d’enregistrer son moyen de paiement, le formulaire se ferme et le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) est invoqué avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin class MyCheckoutActivity : AppCompatActivity() { // ... fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Customer canceled - you should probably do nothing. } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on } is PaymentSheetResult.Completed -> { // Display, for example, an order confirmation screen print("Completed") } } } } ``` L’étape suivante explique le code du serveur. #### Jetpack Compose ### Initialiser le PaymentSheet.FlowController Initialisez le `PaymentSheet.FlowController` et transférez les rappels à `PaymentSheet.FlowController.Builder`. Laissez les implémentations vides pour l’instant. ```kotlin import androidx.compose.runtime.* import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheet.FlowController.Builder import com.stripe.android.paymentsheet.PaymentSheetResult import com.stripe.android.paymentsheet.model.PaymentOption private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // You'll implement this later } private fun onPaymentOption(paymentOption: PaymentOption?) { // You'll implement this later } @Composable fun CheckoutScreen() { val flowController = remember{ Builder( resultCallback = ::onPaymentSheetResult, paymentOptionCallback = ::onPaymentOption, ).createIntentCallback { confirmationToken -> // You'll implement this later } }.build() } ``` Après le chargement de votre écran de paiement, configurez l’instance `PaymentSheet.FlowController` avec une [IntentConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-intent-configuration/index.html). `IntentConfiguration` contient des détails sur le `SetupIntent` spécifique, comme la devise. ```kotlin @Composable fun CheckoutScreen() { val flowController = remember{ ... }.build() LaunchedEffect(Unit) { flowController.configureWithIntentConfiguration( intentConfiguration = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Setup( currency = "usd", ), ), configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build(), callback = { success, error -> // If success, the FlowController was initialized correctly. // Use flowController.getPaymentOption() to populate your payment // method button. }, ) } } ``` Quand l’instance `PaymentSheet.FlowController` termine la configuration, elle appelle`paymentOptionCallback`. `paymentOption` contient une image et une étiquette représentant le moyen de paiement initialement sélectionné par le client. ### Présenter la PaymentSheet Lorsqu’un client appuie sur le bouton **Moyen de paiement**, appelez `presentPaymentOptions()` pour collecter ses informations de paiement. Une fois terminé, `paymentOptionCallback` met à jour`paymentOption`. Mettez ensuite à jour votre interface utilisateur. ```kotlin ... flowController.presentPaymentOptions() ... fun onPaymentOption(paymentOption: PaymentOption?) { if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` ### Modifier les informations de paiement Si le client modifie les informations de paiement (par exemple, en appliquant un code de réduction ou en modifiant son panier), mettez à jour l’instance `PaymentSheet.FlowController` pour que les nouvelles valeurs soient prises en compte en appelant à nouveau `configureWithIntentConfiguration()`. Cela permet de synchroniser les valeurs affichées dans l’interface utilisateur. > Certains moyens de paiement, comme Google Pay, affichent le montant dans l’interface utilisateur. Si le client modifie le paiement et que vous ne mettez pas à jour le `PaymentSheet.FlowController`, l’interface utilisateur affiche des valeurs incorrectes. Pendant la configuration, n’appelez pas `presentPaymentOptions()` ou `confirm()` sur le `PaymentSheet.FlowController`. Si la mise à jour réussit, `paymentOptionCallback` s’exécute avec l’option de paiement mise à jour. La sélection peut changer si le moyen de paiement précédemment choisi par le client n’est plus disponible. Si la mise à jour échoue, veuillez réessayer. ```kotlin fun updateCart( flowController: PaymentSheet.FlowController, onComplete: (Boolean) -> Unit ) { flowController.configureWithIntentConfiguration( intentConfiguration = PaymentSheet.IntentConfiguration( mode = PaymentSheet.IntentConfiguration.Mode.Setup( currency = "usd", ), ), configuration = PaymentSheet.Configuration.Builder( merchantDisplayName = "Example Inc.", ).build(), callback = { success, error -> // If success, the FlowController was updated correctly if (success) { paymentMethodSelectionButton.isEnabled = true val canPay = flowController.getPaymentOption() != null payButton.isEnabled = canPay } else { // You must retry - until the update succeeds, the customer can't pay or select a payment method. // For example, you can automatically retry the update with an exponential back-off, or present the user with an alert that retries the update. } }, ) } ``` ### Confirmer l’Intent Lorsque votre client appuie sur votre bouton **Acheter**, appelez `confirm()`. La PaymentSheet appelle le `createIntentCallback` que vous transférez avec un [ConfirmationToken](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirmation-token/index.html) représentant les informations et préférences de paiement de votre client. ```kotlin @Composable fun CheckoutScreen() { val flowController = remember{ Builder( resultCallback = ::onPaymentSheetResult, paymentOptionCallback = ::onPaymentOption, ).createIntentCallback { confirmationToken -> // Make a request to your server to create a SetupIntent and return its client secret try { val response = myNetworkClient.createIntent( confirmationTokenId = confirmationToken.id, ) CreateIntentResult.Success(response.clientSecret) } catch (e: Exception) { CreateIntentResult.Failure( cause = e, displayMessage = e.message ) } } }.build() // Previous flowcontroller configuration code Column { // Payment method button... Button( onClick = { flowController.confirm() }, enabled = paymentOption != null ) { Text("Set up") } } } ``` Une fois que votre client a enregistré son moyen de paiement, la feuille se ferme, et `PaymentSheet.FlowController` invoque le rappel que vous transférez à `PaymentSheet.FlowController.resultCallback` avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Customer canceled - you should probably do nothing. } is PaymentSheetResult.Failed -> { println("Error: ${(paymentSheetResult as PaymentSheetResult.Failed).error}") // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, and so on } is PaymentSheetResult.Completed -> { // Display, for example, an order confirmation screen println("Completed") } null -> { // No result yet } } } ``` L’étape suivante explique le code du serveur. ## Envoyer les données de paiement à Stripe [Côté serveur] Sur votre serveur, créez et confirmez un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method). Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe évalue les restrictions des moyens de paiement et d’autres paramètres pour déterminer la liste des moyens de paiement pris en charge. Si l’appel réussit, renvoyez 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 SetupIntent. Si l’appel échoue, [traitez l’erreur](https://docs.stripe.com/error-handling.md) et renvoyez un message d’erreur avec une courte explication à l’intention de votre client. > Vérifiez que toutes les propriétés de l’IntentConfiguration correspondent à votre SetupIntent (par exemple, [usage](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage)). ### Gestion des arguments côté client : - `confirmation_token_id` - Vous pouvez récupérer l’objet ConfirmationToken à l’aide de cet ID pour effectuer votre propre validation ou logique d’entreprise. #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do data = JSON.parse request.body.read params = { customer: ..., # The Customer ID you previously created # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, confirm: true, confirmation_token: data['confirmation_token_id'], # the ConfirmationToken ID sent by your client } begin intent = Stripe::SetupIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end ``` ## Débiter ultérieurement le moyen de paiement enregistré [Côté serveur] > `bancontact` et `ideal` sont les moyens de paiement ponctuel par défaut. Lorsque vous les configurez pour une utilisation future, ils génèrent un type de moyen de paiement réutilisable `sepa_debit`. Vous devez donc utiliser la requête `sepa_debit` pour les moyens de paiement enregistrés. > #### Conformité > > Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles du réseau en vigueur. Lorsque vous présentez au client final des moyens de paiement précédemment utilisés en vue d’effectuer ses prochains achats, assurez-vous de lister les moyens de paiement pour lesquels vous avez obtenu le consentement du client à l’enregistrement des informations de paiement aux fins des futurs achats. Le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) vous permet de différencier les moyens de paiement associés au client qui peuvent ou non être présentés pour les achats futurs. Au moment de débiter votre client *hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), utilisez l’ID des objets Customer et PaymentMethod afin de créer un PaymentIntent. Pour trouver un moyen de paiement à débiter, répertoriez les moyens de paiement associés à votre client. Cet exemple liste des cartes, mais vous pouvez répertorier n’importe quel [type de moyen de paiement](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge. ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement. Définissez quelques autres paramètres afin d’effectuer le paiement hors session : - Définissez l’attribut [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) sur `true` pour indiquer que le client ne se trouve pas dans votre tunnel de paiement lors d’une tentative de paiement, et qu’il ne peut donc pas répondre à une demande d’authentification effectuée par un partenaire, comme un émetteur de cartes, une banque ou un autre établissement de paiement. Si un partenaire demande une authentification dans le tunnel de paiement, Stripe demande une exemption en s’appuyant sur les informations utilisée par le client *pendant une 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) précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut renvoyer une erreur. - Définissez la propriété [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) du PaymentIntent sur la valeur `true`, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent. - Renseignez l’ID du PaymentMethod dans [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) et l’ID du client dans [customer](https://docs.stripe.com/api.md#create_payment_intent-customer). #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer={{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` ## 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 les cartes sauvegardées [Côté serveur] [Côté client] Le `PaymentSheet` peut permettre au client d’enregistrer sa carte bancaire et peut inclure les cartes enregistrées du client dans les moyens de paiement disponibles. Un objet [Customer](https://docs.stripe.com/api/customers.md) doit être associé au client sur votre serveur. Pour activer une case à cocher permettant au client d’enregistrer sa carte, créez une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) avec `payment_method_save` défini sur `enabled`. ```javascript const stripe = require("stripe")("<>"); const express = require('express'); const app = express(); app.set('trust proxy', true); app.use(express.json()); app.post('/payment-sheet', async (req, res) => { // Use an existing Customer ID if this is a returning customer. const customer = await stripe.customers.create(); const customerSession = await stripe.customerSessions.create({ customer: customer.id, components: { mobile_payment_element: { enabled: true, features: { payment_method_save: 'enabled', payment_method_redisplay: 'enabled', payment_method_remove: 'enabled' } }, }, }); res.json({ customerSessionClientSecret: customerSession.client_secret, customer: customer.id, }); }); ``` Ensuite, présentez le `PaymentSheet` avec l’ID du client et la clé secrète du client de la `CustomerSession`. ```kotlin val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Powdur") .customer( PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = customerId, clientSecret = customerSessionClientSecret, ) ) .build() paymentSheet.presentWithIntentConfiguration( intentConfiguration = // ... , configuration = configuration, ) ``` ## Optional: Autoriser les moyens de paiement à notification différée [Côté client] Les *moyens de paiement différé* (A payment method that can't immediately return payment status when a customer attempts a transaction (for example, ACH debits). Businesses commonly hold an order in a pending state until payment is successful with these payment methods) ne vous garantissent pas de recevoir les fonds de votre client à l’issue du processus de paiement, soit parce qu’un certain délai est nécessaire (par exemple, les comptes bancaires États-Unis, les prélèvements SEPA, iDEAL, Bancontact et Sofort), soit parce que leur exécution nécessite une action de la part du client (par exemple, OXXO, Konbini et Boleto). Par défaut, le `PaymentSheet` n’affiche pas les moyens de paiement différé. Pour inclure les moyens de paiement différé pris en charge par le `PaymentSheet`, définissez `allowsDelayedPaymentMethods` sur true dans votre `PaymentSheet.Configuration`. ```kotlin val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Powdur") .allowsDelayedPaymentMethods(true) .build() ``` Si le client utilise avec succès un moyen de paiement différé dans un `PaymentSheet`, le résultat du paiement renvoyé est `PaymentSheetResult.Completed`. ## Optional: Activer Google Pay > Si votre écran de paiement comporte un bouton dédié **Google Pay**, suivez le [guide Google Pay](https://docs.stripe.com/google-pay.md?platform=android). Vous pouvez utiliser le Payment Element intégré pour gérer d’autres types de moyens de paiement. ### Configurer votre intégration Pour utiliser Google Pay, commencez par activer l’API Google Pay en ajoutant les informations suivantes au libellé `` de votre **AndroidManifest.xml** : ```xml ... ``` Pour en savoir plus, consultez cette page indiquant comment [configurer l’API Google Pay](https://developers.google.com/pay/api/android/guides/setup) pour Android. ### Ajouter Google Pay Pour ajouter Google Pay à votre intégration, transmettez un [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) avec votre environnement Google Pay (en mode production ou en mode test), ainsi que le [code pays de votre entreprise](https://dashboard.stripe.com/settings/account) lors de l’initialisation de [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). #### Kotlin ```kotlin val googlePayConfiguration = PaymentSheet.GooglePayConfiguration( environment = PaymentSheet.GooglePayConfiguration.Environment.Test, countryCode = "US", currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .googlePay(googlePayConfiguration) .build() ``` ### Tester Google Pay Google vous permet d’effectuer des paiements de test via leur [suite de carte bancaire de test](https://developers.google.com/pay/api/android/guides/resources/test-card-suite). La suite de tests prend en charge l’utilisation de [cartes bancaires de test](https://docs.stripe.com/testing.md) de Stripe. Vous devez tester Google Pay à l’aide d’un appareil Android physique plutôt que d’un appareil simulé, dans un pays où Google Pay est pris en charge. Connectez-vous à un compte Google sur votre appareil de test avec une carte réelle enregistrée dans Google Wallet. ## Optional: Activer la numérisation de carte Pour activer la prise en charge de la numérisation des cartes bancaires, faites une [requête d’accès](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) à l’API Google Pay auprès de la [console Google Pay et Wallet](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite). - Si vous avez activé Google Pay, la fonctionnalité de numérisation de carte bancaire est automatiquement disponible dans notre interface utilisateur sur les appareils admissibles. Pour en savoir plus sur les appareils admissibles, consultez les [contraintes de l’API Google Pay](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition) - **Important :** la fonctionnalité de lecture de carte n’apparaît que dans les versions signées avec la même clé de signature enregistrée dans la [console Google Pay et Wallet](https://pay.google.com/business/console). Les versions de test ou de débogage utilisant différentes clés de signature (par exemple, les versions distribuées via Firebase App Tester) n’affichent pas l’option **Lire la carte**. Pour tester la lecture de carte dans les versions préliminaires, vous devez soit : - Signez vos versions de test avec votre clé de signature de production. - Ajoutez l’empreinte d’identification de votre clé de signature de test à la console Google Pay et Wallet ## Optional: Personnaliser le formulaire Pour personnaliser le formulaire de paiement, vous devez obligatoirement utiliser l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). ### Appearance Personnalisez les couleurs, les polices et plus encore afin de vous adapter à l’apparence de votre application à l’aide de l’[Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android). ### 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-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Vous pouvez les afficher horizontalement, verticalement ou laisser Stripe optimiser la mise en page automatiquement. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png) #### Kotlin ```kotlin PaymentSheet.Configuration.Builder("Example, Inc.") .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic) .build() ``` ### 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=android). ### Nom d’affichage de l’entreprise Spécifiez un nom d’entreprise à afficher pour le client en définissant [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378). Par défaut, il s’agit du nom de votre application. #### Kotlin ```kotlin PaymentSheet.Configuration.Builder( merchantDisplayName = "My app, Inc." ).build() ``` ### Mode sombre Par défaut, `PaymentSheet` s’adapte automatiquement aux paramètres d’affichage du système de l’utilisateur (mode clair ou mode sombre). Vous pouvez modifier ce comportement en sélectionnant le mode clair ou le mode sombre sur votre application : #### Kotlin ```kotlin // force dark AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force light AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) ``` ### Informations de facturation par défaut 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. #### Kotlin ```kotlin val address = PaymentSheet.Address(country = "US") val billingDetails = PaymentSheet.BillingDetails( address = address, email = "foo@bar.com" ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .build() ``` ### Configurer la collecte des données de facturation Utiliser `BillingDetailsCollectionConfiguration` pour spécifier la manière dont vous souhaitez collecter les informations de facturation dans la PaymentSheet. 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 associer les informations de facturation par défaut à l’objet PaymentMethod même lorsque ces champs ne sont pas collectés dans l’interface utilisateur, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`. #### Kotlin ```kotlin val billingDetails = PaymentSheet.BillingDetails( email = "foo@bar.com" ) val billingDetailsCollectionConfiguration = BillingDetailsCollectionConfiguration( attachDefaultsToPaymentMethod = true, name = BillingDetailsCollectionConfiguration.CollectionMode.Always, email = BillingDetailsCollectionConfiguration.CollectionMode.Never, address = BillingDetailsCollectionConfiguration.AddressCollectionMode.Full, ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration) .build() ``` > Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte d’informations. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction. # Accepter un paiement > This is a Accepter un paiement for when platform is react-native and type is payment. View the full page at https://docs.stripe.com/payments/mobile/finalize-payments-on-the-server?platform=react-native&type=payment. ## Configurer Stripe [Côté serveur] [Côté client] ### Côté serveur Cette intégration exige que votre serveur dispose de endpoints 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 React Native](https://github.com/stripe/stripe-react-native) est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK [Android](https://github.com/stripe/stripe-android) et [iOS natifs](https://github.com/stripe/stripe-ios). Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) : #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Ensuite, installez les autres dépendances nécessaires : - Pour iOS, accédez au directeur **ios** et exécutez `pod install` pour vous assurer que vous installez également les dépendances natives requises. - Pour Android, il n’y a plus de dépendances à installer. > Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript. ### Initialisation de Stripe Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API dans `publishableKey` est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Activer des moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. ## Configurer une URL de redirection [Côté client] Lorsqu’un client quitte votre application (par exemple, pour s’authentifier dans Safari ou dans son application bancaire), donnez-lui un moyen de revenir automatiquement dans votre application. De nombreux types de moyens de paiement *nécessitent* une URL de redirection. Si vous n’en fournissez pas, nous ne pourrons pas présenter à vos utilisateurs les moyens de paiement nécessitant une URL de redirection, même si vous les avez activés. Pour fournir une URL de redirection : 1. [Enregistrez](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme) une URL personnalisée. Les liens universels ne sont pas pris en charge. 1. [Configurez](https://reactnative.dev/docs/linking) votre URL personnalisée. 1. Configurez votre composant racine pour qu’il transfère l’URL au SDK de Stripe, comme illustré ci-dessous. > Si vous utilisez Expo, [définissez votre schéma](https://docs.expo.io/guides/linking/#in-a-standalone-app) dans le fichier `app.json`. ```jsx import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( ); } ``` Définissez aussi la `returnURL` lorsque vous appelez la méthode `initPaymentSheet` : ```js await initPaymentSheet({ ... returnURL: 'your-app://stripe-redirect', ... }); ``` Pour plus d’informations sur les schémas d’URL natifs, consultez la documentation [Android](https://developer.android.com/training/app-links/deep-linking) et [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app). ## Recueillir les informations de paiement [Côté client] L’intégration peut utiliser le tunnel de paiement par défaut ou un tunnel personnalisé. | Par défaut | Flux personnalisé | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![PaymentSheet](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) | ![Custom flow](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) | | Affiche un formulaire permettant de collecter les informations de paiement et de finaliser le paiement. Le bouton du formulaire indique **Payer X $** et permet d’effectuer le paiement. | Affiche une feuille permettant de collecter uniquement les informations de paiement. Le bouton dans la feuille indique **Continuer** et redirige le client vers votre application, où votre propre bouton finalise le paiement. | #### Par défaut ### Initialiser la PaymentSheet Lorsque vous souhaitez accepter un paiement, par exemple lorsqu’un client effectue un paiement, initialisez la PaymentSheet avec un `intentConfiguration`. L’objet `intentConfiguration` contient des informations sur le paiement, comme le montant et la devise, et un rappel `confirmHandler`. ```jsx import {View, Button} from 'react-native'; import { useStripe, useEffect, IntentCreationCallbackParams } from '@stripe/stripe-react-native'; export default function CheckoutScreen() {const { initPaymentSheet, presentPaymentSheet } = useStripe(); const initializePaymentSheet = async () => { const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", intentConfiguration: {mode: { amount: 1099, currencyCode: 'USD',},confirmHandler: confirmHandler } }); if (error) { // handle error } }; useEffect(() => { initializePaymentSheet(); }, []); const confirmHandler = async ( confirmationToken, intentCreationCallback: (params: IntentCreationCallbackParams) => void ) => { // explained later } const didTapCheckoutButton = async () => { // implement later } return (