# Enregistrer les informations de paiement lors d’un paiement intégré à l’application Enregistrez les informations de paiement lors d’un paiement dans votre application mobile. # iOS > This is a iOS for when platform is ios and mobile-ui is payment-element. View the full page at https://docs.stripe.com/payments/mobile/save-during-payment?platform=ios&mobile-ui=payment-element. Utilisez l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’utilisation : - Débiter un client pour une commande en ligne et sauvegarder les détails pour des achats ultérieurs. - Initier le premier paiement d’une série de paiements récurrents. - Débiter un acompte et sauvegarder les détails pour facturer plus tard le montant total. > #### Transactions avec présentation de la carte > > Les transactions avec présentation de la carte, telles que les paiements via Stripe Terminal, utilisent un processus différent pour enregistrer le moyen de paiement. Pour en savoir plus, consultez [la documentation de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md). ## Conformité Vous êtes responsable du respect de l’ensemble des lois, réglementations et règles des réseaux applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation ultérieure, par exemple lorsque vous affichez son moyen de paiement dans le tunnel de paiement pour un achat futur ou lorsque vous le débitez alors qu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de débiter le moyen de paiement d’un client, assurez-vous de : - Ajouter des conditions d’utilisation à votre site web ou à votre application indiquant comment vous prévoyez d’enregistrer les informations relatives aux moyens de paiement, par exemple : - Le consentement du client vous autorisant à initier un paiement ou une série de paiements en son nom pour des transactions spécifiées. - Le calendrier et la fréquence prévus des paiements (par exemple, si les paiements concernent des versements échelonnés, des paiements d’abonnement ou des recharges non programmées). - La façon dont vous déterminez le montant du paiement. - Votre politique d’annulation, si le moyen de paiement est utilisé dans le cadre d’un abonnement - Utiliser un moyen de paiement enregistré uniquement dans le but indiqué dans vos conditions. - Recueillez le consentement explicite du client pour cet usage spécifique. Par exemple, incluez une case à cocher « Enregistrer mon moyen de paiement pour une utilisation ultérieure ». - Conserver une trace écrite de l’acceptation de vos conditions par le client. ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, vous avez besoin d’un compte Stripe. [S’inscrire maintenant](https://dashboard.stripe.com/register). ### Côté serveur Cette intégration nécessite des endpoints sur votre serveur qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre serveur : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Côté client 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. ## Activer les moyens de paiement Les paiements par carte sont activés par défaut. Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour activer d’autres moyens de paiement que vous souhaitez prendre en charge. ## Ajouter un endpoint [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez notre article [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Cette intégration utilise trois objets de l’API Stripe : 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus. 1. Un objet [Account côté client](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) ou [Customer](https://docs.stripe.com/api/customers.md) : pour configurer un moyen de paiement en vue de paiements futurs, vous devez l’associer à un client. Créez un objet pour représenter votre client lorsqu’il ouvre un compte chez vous. Si votre client effectue un paiement en tant qu’invité, vous pouvez créer un objet `Account` ou `Customer` avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte client. 1. [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) : l’objet qui représente votre client contient des informations sensibles qu’il n’est pas possible de récupérer directement depuis une application. Une `CustomerSession` accorde au SDK un accès temporaire à l’objet `Account` ou `Customer` et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). Pour des raisons de sécurité, votre application ne peut pas créer ces objets. À la place, ajoutez sur votre serveur un endpoint qui : 1. Récupère l’objet `Account` ou `Customer` ou en crée un nouveau. 1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour l’objet `Account` ou `Customer` concerné. 1. Crée un `PaymentIntent` avec les valeurs [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [la currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage), et soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account), soit [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Renvoie la *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) du `PaymentIntent`, le `client_secret` de la `CustomerSession`, l’ID de l’objet `Account` ou `Customer` et votre [clé publique](https://dashboard.stripe.com/apikeys) pour votre application. > Le Payment Element pour mobile ne prend en charge que `setup_future_usage` avec les cartes et les comptes bancaires étasuniens. Les moyens de paiement présentés à votre client lors du processus de paiement sont également inclus dans le PaymentIntent. Vous pouvez laisser Stripe extraire (depuis les paramètres de votre Dashboard) les moyens de paiement à présenter, ou les répertorier manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les moyens de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans votre Dashboard, votre client ne verra pas ce moyen de paiement étant donné qu’OXXO ne prend pas en charge les paiements en `eur`. À moins que votre intégration ne nécessite du code pour la présentation des moyens de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions en matière de moyens de paiement ainsi que d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Ceux qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement dans le Dashboard Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou souhaitez spécifier des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. #### Accounts v2 #### curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Customers v1 #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Répertorier manuellement les moyens de paiement #### Accounts v2 #### curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` #### Customers v1 #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` > Chacun des moyens de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre activité doit par ailleurs être basée dans l’un des pays pris en charge par chaque moyen de paiement. Consultez la page [Options d’intégration des moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour plus d’informations sur la prise en charge. ## Collecter les informations de paiement [Côté client] Pour afficher le composant Payment Element sur votre page de paiement, veillez à : - Afficher les produits commandés et le montant total des achats - Utiliser le composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios) pour collecter toutes les informations de livraison requises auprès du client - Ajouter un bouton de paiement pour afficher l’interface utilisateur de Stripe #### UIKit Dans l’écran paiement de votre application, récupérez l’Paymentintention de la clé secrète du client, la CustomerSession de la clé secrète du client, l’ID du client et la clé publiable à partir de l’endpoint que vous avez créé à l’étape précédente. Utilisez `STPAPIClient.shared` pour définir votre clé publiable et initialiser la [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). #### iOS (Swift) ```swift import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet class CheckoutViewController: UIViewController { @IBOutlet weak var checkoutButton: UIButton! var paymentSheet: PaymentSheet? let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint override func viewDidLoad() { super.viewDidLoad() checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside) checkoutButton.isEnabled = false // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) DispatchQueue.main.async { self.checkoutButton.isEnabled = true } }) task.resume() } } ``` Quand le client appuie sur le bouton de **paiement**, appelez `present` pour afficher la PaymentSheet. Une fois la transaction effectuée, Stripe ferme le PaymentSheet et appelle le bloc de finalisation avec un [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). #### iOS (Swift) ```swift @objc func didTapCheckoutButton() { // MARK: Start the checkout process paymentSheet?.present(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Your order is confirmed") case .canceled: print("Canceled!") case .failed(let error): print("Payment failed: \(error)") } } } ``` #### SwiftUI Créez un modèle `ObservableObject` pour votre écran de paiement. Ce modèle publie un [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) et un [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? } ``` Récupérez l’Paymentintention de la clé secrète du client, la CustomerSession de la clé secrète du client, l’ID du client et la clé publiable à partir de l’endpoint que vous avez créé à l’étape précédente. Utilisez `STPAPIClient.shared` pour définir votre clé publiable et initialiser la [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch thePaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, letpaymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) } }) task.resume() } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack { if model.paymentSheet != nil { Text("Ready to pay.") } else { Text("Loading…") } }.onAppear { model.preparePaymentSheet() } } } ``` Ajoutez un [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) à votre `View`. Il présente un comportement similaire à un `Button` SwiftUI, ce qui vous permet de le personnaliser en ajoutant une `View`. Lorsque vous appuyez sur le bouton, la PaymentSheet s’affiche. Une fois la transaction finalisée, Stripe ferme la PaymentSheet et appelle le gestionnaire `onCompletion` avec un objet [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch the PaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey // MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods // that complete payment after a delay, like SEPA Debit and Sofort. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) } }) task.resume() } func onPaymentCompletion(result: PaymentSheetResult) { self.paymentResult = result } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack {if let paymentSheet = model.paymentSheet { PaymentSheet.PaymentButton( paymentSheet: paymentSheet, onCompletion: model.onPaymentCompletion ) { Text("Buy") } } else { Text("Loading…") }if let result = model.paymentResult { switch result { case .completed: Text("Payment complete") case .failed(let error): Text("Payment failed: \(error.localizedDescription)") case .canceled: Text("Payment canceled.") } } }.onAppear { model.preparePaymentSheet() } } } ``` Si la valeur de `PaymentSheetResult` est `.completed`, informez l’utilisateur (par exemple, en affichant un écran de confirmation de commande). Si vous définissez `allowsDelayedPaymentMethods` sur true, les moyens de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires étasuniens, seront acceptés. Pour ces moyens de paiement, l’état final du paiement n’est pas connu une fois le processus du `PaymentSheet` achevé, et le paiement peut plus tard aboutir comme échouer. Si vous prenez en charge ces types de moyens de paiement, informez votre client que sa commande est confirmée et ne la traitez (en lui expédiant son produit, par exemple) qu’une fois le paiement reçu. ## Configurer une URL de redirection [Côté client] Le client peut quitter votre application pour s’authentifier (par exemple, dans Safari ou dans son application bancaire). Pour lui permettre de revenir automatiquement sur votre application après s’être authentifié, [configurez un schéma d’URL personnalisé](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) et configurez votre délégué d’application pour qu’il transmette l’URL au SDK. Stripe ne prend pas en charge les [liens universels](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content). #### SceneDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } ``` #### AppDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } ``` #### SwiftUI #### Swift ```swift @main struct MyApp: App { var body: some Scene { WindowGroup { Text("Hello, world!").onOpenURL { incomingURL in let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } } } } ``` Définissez également le paramètre [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) correspondant à votre objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) sur l’URL de votre application. ```swift var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" ``` ## Gérer les événements post-paiement [Côté serveur] Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez l’[outil de webhook du Dashboard](https://dashboard.stripe.com/webhooks) ou suivez le [guide 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. | ## Débiter le moyen de paiement enregistré ultérieurement [Côté serveur] > #### 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. Pour trouver un moyen de paiement à débiter, listez les moyens de paiement associés à votre client. Cet exemple liste des cartes bancaires, mais vous pouvez lister tout [type](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge. > #### Utiliser l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à l’aperçu Accounts v2, > > Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/connect/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md). #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Lorsque vous êtes prêt à débiter votre client *off-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 du client et l’ID du `PaymentMethod` pour créer un `PaymentIntent` avec le montant et la devise du paiement. Définissez également quelques autres paramètres pour effectuer le paiement *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) : - Définissez [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) sur `true` pour indiquer que le client n’est pas dans votre tunnel de paiement lors d’une tentative de paiement et ne peut pas satisfaire une demande d’authentification émise par un partenaire, tel qu’un émetteur de carte, une banque ou un autre établissement de paiement. Si, pendant votre tunnel de paiement, un partenaire demande une authentification, Stripe demande des exemptions en utilisant les informations client issues d’une transaction *on-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 true, ce qui déclenche la confirmation immédiatement lors de la création du `PaymentIntent`. - Définissez [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du `PaymentMethod`. - Selon la manière dont vous représentez les clients dans votre intégration, définissez soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) sur l’ID de l’objet `Account` configuré pour le client, soit [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID de l’objet `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 | Moyen de paiement | Scénario | Méthode de test | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Carte bancaire | La configuration de la carte aboutit et ne requiert aucune *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 `4242 4242 4242 4242` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0025 0000 3155` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte exige une authentification pour la configuration initiale et pour les paiements suivants. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0027 6000 3184` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte est refusée durant la configuration. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro `4000 0000 0000 9995` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | ## 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 collecter 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) ``` ## Activer la numérisation de cartes Pour activer la numérisation des cartes pour iOS, définissez le paramètre `NSCameraUsageDescription` (**Confidentialité – Description de l’utilisation de l’appareil photo**) dans le fichier `Info.plist` de votre application et indiquez le motif d’accès à l’appareil photo (« pour numériser des cartes », par exemple). ## Optional: Personnaliser la feuille Pour personnaliser le formulaire de paiement, vous devez obligatoirement utiliser l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html). ### Appearance 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: Finaliser le paiement dans votre interface utilisateur Vous pouvez présenter le formulaire de paiement pour la seule collecte des données du moyen de paiement, puis appeler une méthode `confirm` pour mener à bien l’opération de paiement dans l’interface utilisateur de votre application. Cette approche est utile si vous avez intégré un bouton d’achat personnalisé ou si des étapes supplémentaires sont nécessaires après la collecte des informations de paiement. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) Mener à bien le paiement dans l’interface utilisateur de votre application #### UIKit Les étapes suivantes vous expliquent comment mener à bien le paiement dans l’interface utilisateur de votre application. Consultez notre exemple d’intégration sur [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift). 1. Tout d’abord, initialisez [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) au lieu de `PaymentSheet`, puis mettez à jour votre interface utilisateur avec sa propriété `paymentOption`. Celle-ci contient une image et une étiquette représentant le moyen de paiement par défaut initialement sélectionné par le client. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI using paymentSheetFlowController.paymentOption } } ``` 1. Appelez ensuite `presentPaymentOptions` pour collecter les données de paiement. Une fois l’opération effectuée, mettez à nouveau à jour votre interface utilisateur avec la propriété `paymentOption`. ```swift paymentSheetFlowController.presentPaymentOptions(from: self) { // Update your UI using paymentSheetFlowController.paymentOption } ``` 1. Enfin, appelez `confirm`. ```swift paymentSheetFlowController.confirm(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } } ``` #### SwiftUI Les étapes suivantes vous expliquent comment mener à bien le paiement dans l’interface utilisateur de votre application. Consultez notre exemple d’intégration sur [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift). 1. Tout d’abord, initialisez [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) au lieu de `PaymentSheet`. Sa propriété `paymentOption` contient une image et une étiquette représentant le moyen de paiement actuellement sélectionné par le client, que vous pouvez utiliser dans votre interface utilisateur. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Use the paymentSheetFlowController.paymentOption properties in your UI myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! } } ``` 1. Utilisez [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) pour wrapper le bouton qui présente la fiche de collecte des données de paiement. Lorsque `PaymentSheet.FlowController` appelle l’argument `onSheetDismissed`, la propriété `paymentOption` de l’instance de `PaymentSheet.FlowController` reflète le moyen de paiement actuellement sélectionné. ```swift PaymentSheet.FlowController.PaymentOptionsButton( paymentSheetFlowController: paymentSheetFlowController, onSheetDismissed: { myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! }, content: { /* An example button */ HStack { Text(myPaymentMethodLabel) Image(uiImage: myPaymentMethodImage) } } ) ``` 1. Utilisez [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) pour wrapper le bouton servant à confirmer le paiement. ```swift PaymentSheet.FlowController.ConfirmButton( paymentSheetFlowController: paymentSheetFlowController, onCompletion: { result in // MARK: Handle the payment result switch result { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } }, content: { /* An example button */ Text("Pay") } ) ``` Si vous définissez `allowsDelayedPaymentMethods` sur true, les moyens de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires étasuniens, seront acceptés. Pour ces moyens de paiement, l’état final du paiement n’est pas connu une fois le processus du `PaymentSheet` achevé, et le paiement peut plus tard aboutir comme échouer. Si vous prenez en charge ces types de moyens de paiement, informez votre client que sa commande est confirmée et ne la traitez (en lui expédiant son produit, par exemple) qu’une fois le paiement reçu. # Android > This is a Android for when platform is android and mobile-ui is payment-element. View the full page at https://docs.stripe.com/payments/mobile/save-during-payment?platform=android&mobile-ui=payment-element. Utilisez l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’utilisation : - Débiter un client pour une commande en ligne et sauvegarder les détails pour des achats ultérieurs. - Initier le premier paiement d’une série de paiements récurrents. - Débiter un acompte et sauvegarder les détails pour facturer plus tard le montant total. > #### Transactions avec présentation de la carte > > Les transactions avec présentation de la carte, telles que les paiements via Stripe Terminal, utilisent un processus différent pour enregistrer le moyen de paiement. Pour en savoir plus, consultez [la documentation de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md). ## Conformité Vous êtes responsable du respect de l’ensemble des lois, réglementations et règles des réseaux applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation ultérieure, par exemple lorsque vous affichez son moyen de paiement dans le tunnel de paiement pour un achat futur ou lorsque vous le débitez alors qu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de débiter le moyen de paiement d’un client, assurez-vous de : - Ajouter des conditions d’utilisation à votre site web ou à votre application indiquant comment vous prévoyez d’enregistrer les informations relatives aux moyens de paiement, par exemple : - Le consentement du client vous autorisant à initier un paiement ou une série de paiements en son nom pour des transactions spécifiées. - Le calendrier et la fréquence prévus des paiements (par exemple, si les paiements concernent des versements échelonnés, des paiements d’abonnement ou des recharges non programmées). - La façon dont vous déterminez le montant du paiement. - Votre politique d’annulation, si le moyen de paiement est utilisé dans le cadre d’un abonnement - Utiliser un moyen de paiement enregistré uniquement dans le but indiqué dans vos conditions. - Recueillez le consentement explicite du client pour cet usage spécifique. Par exemple, incluez une case à cocher « Enregistrer mon moyen de paiement pour une utilisation ultérieure ». - Conserver une trace écrite de l’acceptation de vos conditions par le client. ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, vous avez besoin d’un compte Stripe. [S’inscrire maintenant](https://dashboard.stripe.com/register). ### Côté serveur Cette intégration nécessite des endpoints sur votre serveur qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Côté client Le [SDK 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.3.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.3.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). ## Activer les moyens de paiement Les paiements par carte sont activés par défaut. Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour activer d’autres moyens de paiement que vous souhaitez prendre en charge. ## Ajouter un endpoint [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez notre article [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Cette intégration utilise trois objets de l’API Stripe : 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus. 1. Un objet [Account côté client](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) ou [Customer](https://docs.stripe.com/api/customers.md) : pour configurer un moyen de paiement en vue de paiements futurs, vous devez l’associer à un client. Créez un objet pour représenter votre client lorsqu’il ouvre un compte chez vous. Si votre client effectue un paiement en tant qu’invité, vous pouvez créer un objet `Account` ou `Customer` avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte client. 1. [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) : l’objet qui représente votre client contient des informations sensibles qu’il n’est pas possible de récupérer directement depuis une application. Une `CustomerSession` accorde au SDK un accès temporaire à l’objet `Account` ou `Customer` et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). Pour des raisons de sécurité, votre application ne peut pas créer ces objets. À la place, ajoutez sur votre serveur un endpoint qui : 1. Récupère l’objet `Account` ou `Customer` ou en crée un nouveau. 1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour l’objet `Account` ou `Customer` concerné. 1. Crée un `PaymentIntent` avec les valeurs [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [la currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage), et soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account), soit [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Renvoie la *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) du `PaymentIntent`, le `client_secret` de la `CustomerSession`, l’ID de l’objet `Account` ou `Customer` et votre [clé publique](https://dashboard.stripe.com/apikeys) pour votre application. > Le Payment Element pour mobile ne prend en charge que `setup_future_usage` avec les cartes et les comptes bancaires étasuniens. Les moyens de paiement présentés à votre client lors du processus de paiement sont également inclus dans le PaymentIntent. Vous pouvez laisser Stripe extraire (depuis les paramètres de votre Dashboard) les moyens de paiement à présenter, ou les répertorier manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les moyens de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans votre Dashboard, votre client ne verra pas ce moyen de paiement étant donné qu’OXXO ne prend pas en charge les paiements en `eur`. À moins que votre intégration ne nécessite du code pour la présentation des moyens de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions en matière de moyens de paiement ainsi que d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Ceux qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement dans le Dashboard Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou souhaitez spécifier des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. #### Accounts v2 #### curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Customers v1 #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Répertorier manuellement les moyens de paiement #### Accounts v2 #### curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` #### Customers v1 #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` > Chacun des moyens de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre activité doit par ailleurs être basée dans l’un des pays pris en charge par chaque moyen de paiement. Consultez la page [Options d’intégration des moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour plus d’informations sur la prise en charge. ## Collecter les informations de paiement [Côté client] Avant d’afficher le composant Element Payment pour mobile, vous devez, sur votre écran de paiement : - Présenter les produits commandés et le montant total des achats - Recueillez toutes les informations de livraison requises à l’aide du composant [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android) - Inclure un bouton de règlement pour afficher l’interface utilisateur de Stripe #### Jetpack Compose [Initialisez](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-builder/index.html) une instance `PaymentSheet` dans la méthode `onCreate` de votre classe CheckoutActivity, puis transmettez une méthode pour gérer le résultat. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Ensuite, récupérez la clé secrète du client du PaymentIntent, la clé secrète de Session Customer, le Customer ID et la clé publiable depuis l’endpoint que vous avez créé à l’étape précédente. Configurez la clé publiable à l’aide du paramètre `PaymentConfiguration` et utilisez les autres au moment d’afficher la PaymentSheet. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberimport androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } varpaymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Lorsque le client appuie sur votre bouton de paiement, appelez [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) pour afficher le formulaire de paiement. Une fois que le client a effectué le paiement, le formulaire se ferme et le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) est appelé avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } var paymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) { paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret ) PaymentConfiguration.init(context, networkResult.publishableKey) } }Button( onClick = { val currentConfig = customerConfig val currentClientSecret =paymentIntentClientSecret if (currentConfig != null && currentClientSecret != null) { presentPaymentSheet(paymentSheet, currentConfig, currentClientSecret) } } ) { Text("Checkout") } }private fun presentPaymentSheet( paymentSheet: PaymentSheet, customerConfig: PaymentSheet.CustomerConfiguration,paymentIntentClientSecret: String ) { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } ``` #### Vues (classique) [Initialisez](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) une instance `PaymentSheet` dans la méthode `onCreate` de votre classe CheckoutActivity, puis transmettez une méthode pour gérer le résultat. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Ensuite, récupérez la clé secrète du client du PaymentIntent, la clé secrète de Session Customer, le Customer ID et la clé publiable depuis l’endpoint que vous avez créé à l’étape précédente. Configurez la clé publiable à l’aide du paramètre `PaymentConfiguration` et utilisez les autres au moment d’afficher la PaymentSheet. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheetlateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit varpaymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)lifecycleScope.launch { // Make a request to your own server and retrieve payment configurations val networkResult = MyBackend.getPaymentConfig() if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Lorsque le client appuie sur votre bouton de paiement, appelez [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) pour afficher le formulaire de paiement. Une fois que le client a effectué le paiement, le formulaire se ferme et le [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) est appelé avec un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). #### Kotlin ```kotlin // ... class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet lateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit var paymentIntentClientSecret: String // ...fun presentPaymentSheet() { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } } ``` Si vous définissez `allowsDelayedPaymentMethods` sur true, les moyens de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires étasuniens, seront acceptés. Pour ces moyens de paiement, l’état final du paiement n’est pas connu une fois le processus du `PaymentSheet` achevé, et le paiement peut plus tard aboutir comme échouer. Si vous prenez en charge ces types de moyens de paiement, informez votre client que sa commande est confirmée et ne la traitez (en lui expédiant son produit, par exemple) qu’une fois le paiement reçu. ## 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. | ## Débiter le moyen de paiement enregistré ultérieurement [Côté serveur] > #### 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. Pour trouver un moyen de paiement à débiter, listez les moyens de paiement associés à votre client. Cet exemple liste des cartes bancaires, mais vous pouvez lister tout [type](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge. > #### Utiliser l’API Accounts v2 pour représenter les clients > > L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code. > > Pour demander l’accès à l’aperçu Accounts v2, > > Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/connect/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md). #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Lorsque vous êtes prêt à débiter votre client *off-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 du client et l’ID du `PaymentMethod` pour créer un `PaymentIntent` avec le montant et la devise du paiement. Définissez également quelques autres paramètres pour effectuer le paiement *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) : - Définissez [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) sur `true` pour indiquer que le client n’est pas dans votre tunnel de paiement lors d’une tentative de paiement et ne peut pas satisfaire une demande d’authentification émise par un partenaire, tel qu’un émetteur de carte, une banque ou un autre établissement de paiement. Si, pendant votre tunnel de paiement, un partenaire demande une authentification, Stripe demande des exemptions en utilisant les informations client issues d’une transaction *on-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 true, ce qui déclenche la confirmation immédiatement lors de la création du `PaymentIntent`. - Définissez [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du `PaymentMethod`. - Selon la manière dont vous représentez les clients dans votre intégration, définissez soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) sur l’ID de l’objet `Account` configuré pour le client, soit [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID de l’objet `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 | Moyen de paiement | Scénario | Méthode de test | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Carte bancaire | La configuration de la carte aboutit et ne requiert aucune *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 `4242 4242 4242 4242` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0025 0000 3155` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte exige une authentification pour la configuration initiale et pour les paiements suivants. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0027 6000 3184` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | | Carte bancaire | La carte est refusée durant la configuration. | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro `4000 0000 0000 9995` ainsi que la date d’expiration, le CVC et le code postal de votre choix. | ## Optional: Activer Google Pay ### 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: Personnaliser la feuille Pour personnaliser le formulaire de paiement, vous devez obligatoirement utiliser l’objet [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). ### Appearance 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: Finaliser le paiement dans votre interface utilisateur Vous pouvez présenter le formulaire de paiement pour collecter uniquement les informations du moyen de paiement et finaliser l’opération dans l’interface utilisateur de votre application. Cette méthode est utile si vous avez intégré un bouton d’achat personnalisé ou si vous avez besoin d’étapes supplémentaires après la collecte des informations de paiement. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png) > Un exemple d’intégration est [disponible sur notre GitHub](https://github.com/stripe/stripe-android/blob/master/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/samples/ui/paymentsheet/custom_flow/CustomFlowActivity.kt). 1. Tout d’abord, initialisez [PaymentSheet.FlowController](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html) au lieu de `PaymentSheet` en utilisant l’une des méthodes [Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/-builder/index.html). #### Android (Kotlin) ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionResultCallback = ::onPaymentOption, ).build(this) } } ``` 1. Appelez ensuite `configureWithPaymentIntent` avec les clés d’objet Stripe récupérées depuis votre back-end et mettez à jour votre interface utilisateur dans le rappel en utilisant [getPaymentOption()](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-2091462043%2FFunctions%2F2002900378). Cette propriété contient une image et une étiquette représentant le moyen de paiement actuellement sélectionné par le client. #### Android (Kotlin) ```kotlin flowController.configureWithPaymentIntent( paymentIntentClientSecret = paymentIntentClientSecret, configuration = PaymentSheet.Configuration.Builder("Example, Inc.") .customer(PaymentSheet.CustomerConfiguration( id = customerId, ephemeralKeySecret = ephemeralKeySecret )) .build() ) { isReady, error -> if (isReady) { // Update your UI using `flowController.getPaymentOption()` } else { // handle FlowController configuration failure } } ``` 1. Appelez ensuite [presentPaymentOptions](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#449924733%2FFunctions%2F2002900378) pour collecter les informations de paiement. Lorsque le client a terminé, le formulaire se ferme et appelle le [paymentOptionCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-option-callback/index.html) transmis plus tôt dans `create`. Implémentez cette méthode pour mettre à jour votre interface utilisateur avec la propriété `paymentOption` renvoyée. #### Android (Kotlin) ```kotlin // ... flowController.presentPaymentOptions() // ... private fun onPaymentOption(paymentOptionResult: PaymentOptionResult) { val paymentOption = paymentOptionResult.paymentOption if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` 1. Enfin, appelez [confirm](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-479056656%2FFunctions%2F2002900378) pour mener à bien le paiement. Lorsque le client a terminé, le formulaire se ferme et appelle le [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html#237248767%2FFunctions%2F2002900378) transmis plus tôt dans `create`. #### Android (Kotlin) ```kotlin // ... flowController.confirmPayment() // ... private fun onPaymentSheetResult( paymentSheetResult: PaymentSheetResult ) { when (paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Payment canceled } is PaymentSheetResult.Failed -> { // Payment Failed. See logcat for details or inspect paymentSheetResult.error } is PaymentSheetResult.Completed -> { // Payment Complete } } } ``` Si vous définissez `allowsDelayedPaymentMethods` sur true, les moyens de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification), comme les comptes bancaires étasuniens, seront acceptés. Pour ces moyens de paiement, l’état final du paiement n’est pas connu une fois le processus du `PaymentSheet` achevé, et le paiement peut plus tard aboutir comme échouer. Si vous prenez en charge ces types de moyens de paiement, informez votre client que sa commande est confirmée et ne la traitez (en lui expédiant son produit, par exemple) qu’une fois le paiement reçu. # React Native > This is a React Native for when platform is react-native and mobile-ui is payment-element. View the full page at https://docs.stripe.com/payments/mobile/save-during-payment?platform=react-native&mobile-ui=payment-element. Utilisez l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’utilisation : - Débiter un client pour une commande en ligne et sauvegarder les détails pour des achats ultérieurs. - Initier le premier paiement d’une série de paiements récurrents. - Débiter un acompte et sauvegarder les détails pour facturer plus tard le montant total. > #### Transactions avec présentation de la carte > > Les transactions avec présentation de la carte, telles que les paiements via Stripe Terminal, utilisent un processus différent pour enregistrer le moyen de paiement. Pour en savoir plus, consultez [la documentation de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md). ## Conformité Vous êtes responsable du respect de l’ensemble des lois, réglementations et règles des réseaux applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation ultérieure, par exemple lorsque vous affichez son moyen de paiement dans le tunnel de paiement pour un achat futur ou lorsque vous le débitez alors qu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de débiter le moyen de paiement d’un client, assurez-vous de : - Ajouter des conditions d’utilisation à votre site web ou à votre application indiquant comment vous prévoyez d’enregistrer les informations relatives aux moyens de paiement, par exemple : - Le consentement du client vous autorisant à initier un paiement ou une série de paiements en son nom pour des transactions spécifiées. - Le calendrier et la fréquence prévus des paiements (par exemple, si les paiements concernent des versements échelonnés, des paiements d’abonnement ou des recharges non programmées). - La façon dont vous déterminez le montant du paiement. - Votre politique d’annulation, si le moyen de paiement est utilisé dans le cadre d’un abonnement - Utiliser un moyen de paiement enregistré uniquement dans le but indiqué dans vos conditions. - Recueillez le consentement explicite du client pour cet usage spécifique. Par exemple, incluez une case à cocher « Enregistrer mon moyen de paiement pour une utilisation ultérieure ». - Conserver une trace écrite de l’acceptation de vos conditions par le client. ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, vous avez besoin d’un compte Stripe. [S’inscrire maintenant](https://dashboard.stripe.com/register). ### Côté serveur Cette intégration nécessite des endpoints sur votre serveur qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Côté client Le [SDK 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 les moyens de paiement Les paiements par carte sont activés par défaut. Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) pour activer d’autres moyens de paiement que vous souhaitez prendre en charge. ## Ajouter un endpoint [Côté serveur] > #### Remarque > > Pour afficher PaymentSheet avant de créer un PaymentIntent, consultez notre article [Collecter les détails du paiement avant de créer un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Cette intégration utilise trois objets de l’API Stripe : 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) : pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus. 1. Un objet [Account côté client](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) ou [Customer](https://docs.stripe.com/api/customers.md) : pour configurer un moyen de paiement en vue de paiements futurs, vous devez l’associer à un client. Créez un objet pour représenter votre client lorsqu’il ouvre un compte chez vous. Si votre client effectue un paiement en tant qu’invité, vous pouvez créer un objet `Account` ou `Customer` avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte client. 1. [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) : l’objet qui représente votre client contient des informations sensibles qu’il n’est pas possible de récupérer directement depuis une application. Une `CustomerSession` accorde au SDK un accès temporaire à l’objet `Account` ou `Customer` et fournit des options de configuration supplémentaires. Consultez la liste complète des [options de configuration](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). Pour des raisons de sécurité, votre application ne peut pas créer ces objets. À la place, ajoutez sur votre serveur un endpoint qui : 1. Récupère l’objet `Account` ou `Customer` ou en crée un nouveau. 1. Crée une [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) pour l’objet `Account` ou `Customer` concerné. 1. Crée un `PaymentIntent` avec les valeurs [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [la currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage), et soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account), soit [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Renvoie la *clé secrète du client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) du `PaymentIntent`, le `client_secret` de la `CustomerSession`, l’ID de l’objet `Account` ou `Customer` et votre [clé publique](https://dashboard.stripe.com/apikeys) pour votre application. > Le Payment Element pour mobile ne prend en charge que `setup_future_usage` avec les cartes et les comptes bancaires étasuniens. Les moyens de paiement présentés à votre client lors du processus de paiement sont également inclus dans le PaymentIntent. Vous pouvez laisser Stripe extraire (depuis les paramètres de votre Dashboard) les moyens de paiement à présenter, ou les répertorier manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les moyens de paiement présentés au client. Par exemple, si vous transmettez `eur` dans le PaymentIntent et que vous avez activé OXXO dans votre Dashboard, votre client ne verra pas ce moyen de paiement étant donné qu’OXXO ne prend pas en charge les paiements en `eur`. À moins que votre intégration ne nécessite du code pour la présentation des moyens de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions en matière de moyens de paiement ainsi que d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Ceux qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés. #### Gérer les moyens de paiement dans le Dashboard Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Le PaymentIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard. Si vous ne souhaitez pas utiliser le Dashboard ou souhaitez spécifier des moyens de paiement manuellement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. #### Accounts v2 #### curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Customers v1 #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Répertorier manuellement les moyens de paiement #### Accounts v2 #### curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` #### Customers v1 #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` > Chacun des moyens de paiement doit prendre en charge la devise transmise dans le PaymentIntent, et votre activité doit par ailleurs être basée dans l’un des pays pris en charge par chaque moyen de paiement. Consultez la page [Options d’intégration des moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) pour plus d’informations sur la prise en charge. ## Collecter les informations de paiement [Côté client] Avant d’afficher le composant Element Payment pour mobile, vous devez, sur votre écran de paiement : - Présenter les produits commandés et le montant total des achats - Collecter les éventuelles informations de livraison requises - Inclure un bouton de règlement pour afficher l’interface utilisateur de Stripe Au cours du processus de paiement de votre application, effectuez une demande réseau auprès du endpoint du back-end que vous avez créé à l’étape précédente, puis appelez `initPaymentSheet` depuis le hook `useStripe`. #### Accounts v2 ```javascript export default function CheckoutScreen() { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const [loading, setLoading] = useState(false); const fetchPaymentSheetParams = async () => { const response = await fetch(`${API_URL}/payment-sheet`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { paymentIntent, ephemeralKey, customer_account } = await response.json(); return { paymentIntent, ephemeralKey, customer_account, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer_account, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerAccountId: customer_account, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business accepts payment // methods that complete payment after a delay, like SEPA Debit and Sofort. allowsDelayedPaymentMethods: true, defaultBillingDetails: { name: 'Jane Doe', } }); if (!error) { setLoading(true); } }; const openPaymentSheet = async () => { // see below }; useEffect(() => { initializePaymentSheet(); }, []); return (