# Gestion des moyens de paiement dans les paramètres Utilisez la feuille de réglages des moyens de paiement pour permettre à vos clients de gérer leurs moyens de paiement dans la page des paramètres de votre application. > La feuille des paramètres des moyens de paiement est destinée à être utilisée sur une page de paramètres de l’application. Pour le checkout et les paiements, utilisez les[Paiements dans l’application](https://docs.stripe.com/payments/mobile.md), qui disposent également d’une prise en charge intégrée pour l’enregistrement et l’affichage des moyens de paiement et prend en charge davantage de moyens de paiement que la feuille des paramètres des moyens de paiement. > Dans le code, ce composant est appelé `CustomerSheet` pour des raisons historiques. Dans la documentation, lorsque vous voyez `CustomerSheet` dans les exemples de code, cela fait référence à la feuille de paramètres des moyens paiements. La feuille de paramètres des moyens de paiement est un composant d’interface utilisateur préconstruit qui permet à vos clients de gérer les moyens de paiement qu’ils ont enregistrés. Vous pouvez utiliser l’interface utilisateur de la feuille de configuration des moyens de paiement en dehors d’un tunnel de paiement, et l’apparence et le style sont personnalisables pour correspondre à l’apparence et à l’esthétique de votre application. Les clients peuvent ajouter et supprimer des moyens de paiement, qui sont sauvegardés dans l’objet Customer, et définir leur moyen de paiement par défaut sauvegardé localement sur l’appareil. Utilisez à la fois les paiements dans l’application et la feuille des paramètres des moyens de paiement pour offrir à vos clients une solution cohérente de bout en bout pour les moyens de paiement enregistrés. ![Capture d'écran de la feuille des paramètres des moyens de paiement présentant plusieurs moyens de paiement enregistrés dans une application iOS.](https://b.stripecdn.com/docs-statics-srv/assets/ios-landing.6c4969968fd6efe3d39fe673628f8284.png) L’objet [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) accorde au SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Ces options de configuration vous permettent de personnaliser le comportement de la CustomerSheet. Vous trouverez une liste complète des fonctionnalités exposées dans l’objet CustomerSession dans notre [Documentation de l’API](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). ## Configurer Stripe Pour commencer, vous devez créer un compte Stripe. [S’inscrire](https://dashboard.stripe.com/register). Le [SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-ios/index.html). Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures. #### Swift Package Manager Pour installer le SDK, veuillez suivre les étapes ci-dessous : 1. Dans Xcode, sélectionnez **File** > **Add Package Dependencies…** puis saisissez `https://github.com/stripe/stripe-ios-spm` en tant qu’URL du référentiel. 1. Sélectionnez le dernier numéro de version, visible sur notre [page des versions](https://github.com/stripe/stripe-ios/releases). 1. Ajoutez le produit **StripePaymentSheet** à la [cible de votre application](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Si vous n’avez pas de fichier [Podfile](https://guides.cocoapods.org/syntax/podfile.html), exécutez la commande suivante pour en créer un : ```bash pod init ``` 1. Ajoutez cette ligne à votre `Podfile` : ```podfile pod 'StripePaymentSheet' ``` 1. Exécutez la commande suivante : ```bash pod install ``` 1. À partir de maintenant, n’oubliez pas d’utiliser le fichier .xcworkspace au lieu du fichier .xcodeproj pour ouvrir votre projet dans Xcode. 1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, il vous suffit d’exécuter : ```bash pod update StripePaymentSheet ``` #### Carthage 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Ajoutez cette ligne à votre `Cartfile` : ```cartfile github "stripe/stripe-ios" ``` 1. Suivez les [instructions d’installation de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Veillez à intégrer tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking). 1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, exécutez la commande suivante : ```bash carthage update stripe-ios --platform ios ``` #### Cadre manuel 1. Accédez à notre [page des versions GitHub](https://github.com/stripe/stripe-ios/releases/latest), puis téléchargez et décompressez **Stripe.xcframework.zip**. 1. Faites glisser **StripePaymentSheet.xcframework** vers la section **Embedded Binaries (Fichiers binaires incorporés)** des paramètres **General (Général)** de votre projet Xcode. Veillez à sélectionner **Copy items if needed (Copier les éléments si nécessaire)**. 1. Répétez l’étape 2 pour tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking). 1. À l’avenir, pour mettre à jour vers la version la plus récente de notre SDK, répétez les étapes 1 à 3. > Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir une notification lors de la publication d’une nouvelle version, [surveillez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) à partir du référentiel. Configurez le SDK avec votre [clé publiable](https://dashboard.stripe.com/test/apikeys) Stripe au démarrage de votre application. Cela lui permet d’envoyer des requêtes à l’API Stripe. #### Swift ```swift import UIKitimportStripePaymentSheet @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Activer des moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. > CustomerSheet prend uniquement en charge les cartes, les comptes bancaires américains et les prélèvements automatiques SEPA. ## Ajouter des endpoints Customer [Côté serveur] Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. Créez deux endpoints sur votre serveur : l’un pour récupérer la clé secrète d’un client de la session Client, et l’autre pour créer un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) afin d’enregistrer un nouveau moyen de paiement dans l’objet [Customer](https://docs.stripe.com/api/customers.md). 1. Créez un endpoint pour renvoyer un ID de [client](https://docs.stripe.com/api/customers.md) et une clé secrète du client de [CustomerSession](https://docs.stripe.com/api/customer_sessions.md). #### curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[customer_sheet][enabled]"=true \ -d "components[customer_sheet][features][payment_method_remove]"=enabled ``` > Dans le cadre des intégrations avec des clés clients éphémères héritées, la valeur `allow_redisplay` des moyens de paiement enregistrés est définie sur `unspecified`. Pour afficher ces moyens de paiement en plus des moyens de paiement enregistrés lors de l’utilisation des sessions clients, définissez `payment_method_allow_redisplay_filters` sur `["unspecified", "always"]`. Pour en savoir plus, consultez la page dédié aux [sessions clients](https://docs.stripe.com/api/customer_sessions.md). 1. Créez un endpoint pour renvoyer un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) configuré avec l’ID du [Client](https://docs.stripe.com/api/customers.md). #### curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/setup_intents \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" \ ``` Si vous prévoyez uniquement d’utiliser le moyen de paiement pour des paiements ultérieurs lorsque votre client est dans le tunnel de paiement, définissez le paramètre [usage](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) sur *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) pour améliorer les taux d’autorisation. ## Configurer la fiche Ensuite, configurez la feuille des paramètres des moyens de paiement à l’aide de la classe `CustomerSheet` avec `IntentConfiguration`, `CustomerSessionClientSecretProvider` et [CustomerSheet.Configuration](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/customersheet/configuration/). ```swift var configuration = CustomerSheet.Configuration() // Configure settings for the CustomerSheet here. For example: configuration.headerTextForSelectionScreen = "Manage your payment method" let intentConfiguration = CustomerSheet.IntentConfiguration(setupIntentClientSecretProvider: { let json = try await myBackend.createSetupIntent() return json["setupIntentClientSecret"]! }) let customerSheet = CustomerSheet( configuration: configuration, intentConfiguration: intentConfiguration, customerSessionClientSecretProvider: { let json = try await myBackend.createCustomerSessionClientSecret() return .init(customerId: json["customerId"]!, clientSecret: json["customerSessionClientSecret"]!) }) ``` ## Présenter la fiche #### UIKit Présentez la feuille des paramètres des moyens de paiement à l’aide de `CustomerSheet`. Lorsque le client ferme la feuille, `CustomerSheet` appelle le bloc de complétion avec `CustomerSheet.SheetResult`. #### iOS (Swift) ```swift import StripePaymentSheet customerSheet.present(from: self, completion: { result in switch result { case .canceled(let paymentOption), .selected(let paymentOption): // Configure your UI based on the payment option self.paymentLabel.text = paymentOption?.displayData().label ?? "None" // Optional: Send the selected payment method ID to your backend for advanced use cases // like charging a customer when not present in your app if let paymentOption = paymentOption { switch paymentOption { case .paymentMethod(let paymentMethod, let paymentOptionDisplayData): MyBackend.setDefaultPaymentMethod(paymentMethod.stripeId) case .applePay(paymentOptionDisplayData: let paymentOptionDisplayData): MyBackend.setDefaultPaymentMethodIsApplePay() } } case .error(let error): // Show the error in your UI } }) ``` - Si le client sélectionne un moyen de paiement, le résultat est `.selected(PaymentOptionSelection?)`. La valeur associée est le paramètre [PaymentOptionSelection](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/customersheet/paymentoptionselection) sélectionné, ou `nil` si l’utilisateur a supprimé le moyen de paiement précédemment sélectionné. Vous trouverez toutes les informations relatives au moyen de paiement dans la valeur associée `paymentMethod` de PaymentOptionSelection. - Si l’utilisateur annule la fiche, le résultat est `.canceled`. La valeur associée est le moyen de paiement d’origine sélectionné avant l’ouverture de la Fiche client, tant que ce moyen de paiement est encore disponible. - Si une erreur se produit, le résultat est `.error(Error)`. Découvrez comment [activer Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios#ios-apple-pay) #### SwiftUI Créez un modèle `ObservableObject` pour votre écran présentant la feuille des paramètres des moyens de paiement. Ce modèle maintient une instance de la feuille [CustomerSheet](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/customersheet). ```swift import StripePaymentSheet import SwiftUI class YourAccountViewModel: ObservableObject { var customerSheet: CustomerSheet } ``` Utilisez le ViewModifier `.customerSheet` pour présenter la feuille des paramètres des moyens de paiement. ```swift struct YourAccountView: View { @State private var showingCustomerSheet = false @ObservedObject var model = YourAccountViewModel() var body: some View { VStack { Button(action: { showingCustomerSheet = true }) { Text("Present Customer Sheet") }.customerSheet( isPresented: $showingCustomerSheet, customerSheet: model.customerSheet, onCompletion: model.onCompletion) } } } ``` Ajoutez un `customerSheetResult` pour sauvegarder le résultat de la présentation de la feuille des paramètres des moyens de paiement dans votre `ObservableObject`. ```swift class YourAccountViewModel: ObservableObject { var customerSheet: CustomerSheet @Published var customerSheetResult: CustomerSheet.CustomerSheetResult? func onCompletion(result: CustomerSheet.CustomerSheetResult) { self.customerSheetResult = result } } ``` Utilisez le paramètre `customerSheetResult` pour afficher le moyen de paiement sélectionné dans votre interface utilisateur : ```swift struct YourAccountView: View { @State private var showingCustomerSheet = false @ObservedObject var model = MyBackendCustomerSheetModel() var body: some View { VStack { Button(action: { showingCustomerSheet = true }) { Text("Present Customer Sheet") }.customerSheet( isPresented: $showingCustomerSheet, customerSheet: model.customerSheet, onCompletion: model.onCompletion)if let customerSheetResult = model.customerSheetResult { ExampleCustomerSheetPaymentMethodView(customerSheetResult: customerSheetResult) } } } } ``` - Si le client sélectionne un moyen de paiement, le résultat est `.selected(PaymentOptionSelection?)`. La valeur associée est le paramètre [PaymentOptionSelection](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/customersheet/paymentoptionselection) sélectionné, ou `nil` si l’utilisateur a supprimé le moyen de paiement précédemment sélectionné. Vous trouverez toutes les informations relatives au moyen de paiement dans la valeur associée `paymentMethod` de PaymentOptionSelection. - Si l’utilisateur annule la fiche, le résultat est `.canceled`. Le moyen de paiement sélectionné n’a pas changé. - Si une erreur se produit, le résultat est `.error(Error)`. Découvrez comment [activer Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios#ios-apple-pay) ## Optional: Activer les paiements ACH Pour activer les paiements par prélèvements ACH : 1. Incluez `StripeFinancialConnections` en tant que dépendance pour votre application. 1. Activez le compte bancaire aux États-Unis comme moyen de paiement dans les paramètres du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). ## Optional: Récupérer le moyen de paiement sélectionné Pour récupérer le moyen de paiement par défaut sans présenter la feuille des paramètres des moyens de paiement, appelez `retrievePaymentOptionSelection()` sur la `CustomerSheet`. ```swift let paymentMethodOption = try await customerSheet.retrievePaymentOptionSelection() // Configure your UI based on the payment option self.paymentLabel.text = paymentMethodOption?.displayData().label ?? "None" // Send the selected payment method ID to your backend switch paymentMethodOption { case .paymentMethod(paymentMethod: let paymentMethod, paymentOptionDisplayData: let paymentOptionDisplayData): try await MyBackend.setDefaultPaymentMethod(paymentMethod.stripeId) case .applePay(paymentOptionDisplayData: let paymentOptionDisplayData): try await MyBackend.setDefaultPaymentMethodIsApplePay() } ``` ## Optional: Personnaliser le formulaire ### Apparence Personnalisez les couleurs, les polices et d’autres attributs d’apparence afin qu’ils correspondent à l’apparence de votre application à l’aide de l’[API appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios). > `fetchPaymentMethods` permet de filtrer l’affichage des moyens de paiement enregistrés, mais n’aura pas d’impact sur le type de moyens de paiement pouvant être ajoutés. ### 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`. La `CustomerSheet` préremplit ses champs avec les valeurs que vous fournissez. ```swift var configuration = CustomerSheet.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 PaymentSheet. Vous pouvez récupérer le nom, l’adresse e-mail, le numéro de téléphone et l’adresse de votre client. Pour associer des valeurs non collectées par la `CustomerSheet`, ajoutez-les à la propriété `defaultBillingDetails` et définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`. Assurez-vous de suivre cette étape si vous ne prévoyez pas de collecter les valeurs requises par le moyen de paiement. ```swift var configuration = CustomerSheet.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 équipe juridique au sujet des lois qui s’appliquent à la collecte d’informations. Ne recueillez les numéros de téléphone que si vous en avez besoin pour la transaction. > La feuille des paramètres des moyens de paiement est destinée à être utilisée sur une page de paramètres de l’application. Pour le checkout et les paiements, utilisez les[Paiements dans l’application](https://docs.stripe.com/payments/mobile.md), qui disposent également d’une prise en charge intégrée pour l’enregistrement et l’affichage des moyens de paiement et prend en charge davantage de moyens de paiement que la feuille des paramètres des moyens de paiement. > Dans le code, ce composant est appelé `CustomerSheet` pour des raisons historiques. Dans la documentation, lorsque vous voyez `CustomerSheet` dans les exemples de code, cela fait référence à la feuille de paramètres des moyens paiements. La feuille de paramètres des moyens de paiement est un composant d’interface utilisateur préconstruit qui permet à vos clients de gérer les moyens de paiement qu’ils ont enregistrés. Vous pouvez utiliser l’interface utilisateur de la feuille de configuration des moyens de paiement en dehors d’un tunnel de paiement, et l’apparence et le style sont personnalisables pour correspondre à l’apparence et à l’esthétique de votre application. Les clients peuvent ajouter et supprimer des moyens de paiement, qui sont sauvegardés dans l’objet Customer, et définir leur moyen de paiement par défaut sauvegardé localement sur l’appareil. Utilisez à la fois les paiements dans l’application et la feuille des paramètres des moyens de paiement pour offrir à vos clients une solution cohérente de bout en bout pour les moyens de paiement enregistrés. ![Capture d'écran de la Feuille des paramètres de Moyens de paiement présentant plusieurs moyens de paiement enregistrés dans une application Android.](https://b.stripecdn.com/docs-statics-srv/assets/ios-landing.6c4969968fd6efe3d39fe673628f8284.png) L’objet [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) accorde au SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Ces options de configuration vous permettent de personnaliser le comportement de la `CustomerSheet`. Vous trouverez une liste complète des fonctionnalités exposées dans l’objet `CustomerSession` dans notre [Documentation de l’API](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). ## Configurer Stripe Pour commencer, vous devez créer un compte Stripe. [Inscrivez-vous maintenant](https://dashboard.stripe.com/register). Pour installer le SDK, ajoutez `stripe-android` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies) : #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.2.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.2.0") } ``` > Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). Configurez le SDK avec votre [clé publique](https://dashboard.stripe.com/apikeys) Stripe de façon à ce qu’il puisse envoyer des requêtes à l’API Stripe, par exemple à la sous-classe `Application` : #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Activer des moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. > Pour l’instant, la feuille des paramètres des moyens de paiements ne prend en charge que les cartes bancaires et les comptes bancaires aux États-Unis. ## Ajouter des endpoints Customer [Côté serveur] Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. Créez deux endpoints sur votre serveur : l’un pour récupérer la clé secrète d’un client de la session Client, et l’autre pour créer un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) afin d’enregistrer un nouveau moyen de paiement dans l’objet [Customer](https://docs.stripe.com/api/customers.md). 1. Créez un endpoint pour renvoyer un ID de [client](https://docs.stripe.com/api/customers.md) et une clé secrète du client de [CustomerSession](https://docs.stripe.com/api/customer_sessions.md). #### curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[customer_sheet][enabled]"=true \ -d "components[customer_sheet][features][payment_method_remove]"=enabled ``` > Dans le cadre des intégrations avec des clés clients éphémères héritées, la valeur `allow_redisplay` des moyens de paiement enregistrés est définie sur `unspecified`. Pour afficher ces moyens de paiement en plus des moyens de paiement enregistrés lors de l’utilisation des sessions clients, définissez `payment_method_allow_redisplay_filters` sur `["unspecified", "always"]`. Pour en savoir plus, consultez la page dédié aux [sessions clients](https://docs.stripe.com/api/customer_sessions.md). 1. Créez un endpoint pour renvoyer un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) configuré avec l’ID du [Client](https://docs.stripe.com/api/customers.md). #### curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/setup_intents \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" \ ``` Si vous prévoyez uniquement d’utiliser le moyen de paiement pour des paiements ultérieurs lorsque votre client est dans le tunnel de paiement, définissez le paramètre [usage](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) sur *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) pour améliorer les taux d’autorisation. ## Créer un fournisseur de session client [Côté client] Un `CustomerSessionProvider` permet à un `CustomerSheet` de communiquer avec Stripe à l’aide d’objets [CustomerSession](https://docs.stripe.com/api/customer_sessions.md). Sur le client, créez un `CustomerSessionProvider` en mesure de créer des clés secrètes client `CustomerSession` et `SetupIntent` à partir de votre serveur. ```kotlin import com.stripe.android.customersheet.CustomerSheet import com.stripe.android.customersheet.ExperimentalCustomerSheetApi @OptIn(ExperimentalCustomerSheetApi::class) class MyCustomerSessionProvider : CustomerSheet.CustomerSessionProvider() { val myBackend = // .... override suspend fun providesCustomerSessionClientSecret(): Result { return myBackend.getCustomerSessionClientSecret().fold( onSuccess = { response -> Result.success( CustomerSessionClientSecret.create( customerId = response.customerId, clientSecret = response.customerSessionClientSecret, ) ) }, onFailure = { exception -> Result.failure(exception) } ) } override suspend fun provideSetupIntentClientSecret(customerId: String): Result { return myBackend.getSetupIntentClientSecret(customerId).fold( onSuccess = { response -> Result.success(response.setupIntentClientSecret) }, onFailure = { exception -> Result.failure(exception) } ) } } ``` ```kotlin import android.app.Application import androidx.lifecycle.AndroidViewModel class CheckoutViewModel( application: Application ) : AndroidViewModel(application) { val customerSessionProvider = MyCustomerSessionProvider() } ``` ## Configurer la fiche Ensuite, initialisez la feuille de paramètres des moyens de paiement en utilisant la classe `CustomerSheet` avec votre `CustomerSessionProvider` puis appelez `configure` avec une [CustomerSheet.Configuration](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/customersheet/CustomerSheet.kt). Appelez toujours `configurer` avant d’appeler `present` et `retrievePaymentOptionSelection`. ```kotlin import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.viewModels import com.stripe.android.customersheet.CustomerSheet import com.stripe.android.customersheet.ExperimentalCustomerSheetApi import com.stripe.android.customersheet.rememberCustomerSheet @OptIn(ExperimentalCustomerSheetApi::class) class CheckoutActivity : ComponentActivity() { private val viewModel by viewModels() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val configuration = CustomerSheet.Configuration.builder(merchantDisplayName = "{{YOUR BUSINESS NAME}}") .build() setContent { val customerSheet = rememberCustomerSheet( customerSessionProvider = viewModel.customerSessionProvider, callback = viewModel::handleResult // Implemented in next step ) LaunchedEffect(customerSheet) { customerSheet.configure(configuration = configuration) } } } } ``` ## Présenter la fiche Présentez la feuille des paramètres des moyens de paiements à l’aide de `CustomerSheet`. Lorsque le client ferme la feuille, `CustomerSheet` appelle le bloc de complétion avec `CustomerSheetResult`. ```kotlin import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.viewModelsimport androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.material.Text import androidx.compose.material.TextButton import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.stripe.android.customersheet.CustomerSheet import com.stripe.android.customersheet.ExperimentalCustomerSheetApi import com.stripe.android.customersheet.rememberCustomerSheetimport com.stripe.android.uicore.image.rememberDrawablePainter @OptIn(ExperimentalCustomerSheetApi::class) class CheckoutActivity : ComponentActivity() {private val viewModel by viewModels() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val configuration = CustomerSheet.Configuration.builder(merchantDisplayName = "{{YOUR BUSINESS NAME}}") .headerTextForSelectionScreen("Manage your payment method") .build() setContent { val customerSheet = rememberCustomerSheet( customerSessionProvider = viewModel.customerSessionProvider, callback = viewModel::handleResult ) LaunchedEffect(customerSheet) { customerSheet.configure(configuration = configuration)viewModel.handleResult(customerSheet.retrievePaymentOptionSelection()) }val paymentOption by viewModel.paymentOption.collectAsState() Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, ) { val icon = paymentOption?.icon() if (icon != null) { Image( painter = rememberDrawablePainter( drawable = icon ), contentDescription = "Payment Method Icon", modifier = Modifier.height(32.dp) ) } TextButton( onClick = { customerSheet.present() } ) { Text( text = paymentOption?.label ?: "Select" ) } } } } } ``` ```kotlin import android.app.Application import androidx.lifecycle.AndroidViewModel import com.stripe.android.customersheet.ExperimentalCustomerSheetApiimport com.stripe.android.paymentsheet.model.PaymentOption import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.StateFlow import kotlinx.coroutines.flow.update @OptIn(ExperimentalCustomerSheetApi::class) class CheckoutViewModel( application: Application ) : AndroidViewModel(application) { val customerSessionProvider = // ... private val _paymentOption = MutableStateFlow(null) val paymentOption: StateFlow = _paymentOption fun handleResult(result: CustomerSheetResult) { when (result) { is CustomerSheetResult.Selected -> { // Configure your UI based on the payment option _paymentOption.update { result.selection?.paymentOption } } is CustomerSheetResult.Canceled -> { // Configure your UI based on the payment option _paymentOption.update { result.selection?.paymentOption } } is CustomerSheetResult.Failed -> { // Show the error in your UI } } } } ``` - Si le client sélectionne un moyen de paiement, le résultat est `CustomerSheetResult.Selected`. La valeur associée est le `PaymentOptionSelection` sélectionné, ou null si l’utilisateur a supprimé le moyen de paiement précédemment sélectionné. L’ensemble des informations relatives au moyen de paiement est disponible dans la valeur `paymentMethod` de `PaymentOptionSelection`. - Si le client annule la fiche, le résultat est `CustomerSheetResult.Canceled`. La valeur associée est la `PaymentOptionSelection` d’origine du client, ou nulle si le client n’a pas encore sélectionné de moyen de paiement ou a supprimé le moyen de paiement sélectionné à l’origine. - Si une erreur se produit, le résultat est `CustomerSheetResult.Failed`. ## 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 `true` à [googlePayEnabled](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/google-pay-enabled.html) lors de l’initialisation de [CustomerSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/index.html) with [CustomerSheet.Configuration.Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/index.html). #### Kotlin ```kotlin val configuration = CustomerSheet.Configuration.Builder() .googlePayEnabled(true) .build() ``` ## Optional: Activer les paiements ACH Intégrez Financial Connections en tant que dépendance pour votre application afin d’activer les paiements par prélèvements ACH. 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 `financial-connections` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies) : #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Financial Connections Android SDK implementation("com.stripe:financial-connections:23.2.0") } ``` > Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Optional: Récupérer le moyen de paiement sélectionné Pour récupérer le moyen de paiement par défaut sans présenter la feuille des paramètres des moyens de paiement, appelez `retrievePaymentOptionSelection()` sur `CustomerSheet`. ```kotlin class CheckoutActivity : ComponentActivity() { private val viewModel by viewModels() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val configuration = ... setContent { val customerSheet = ... LaunchedEffect(Unit) { customerSheet.configure(configuration = configuration) val result = customerSheet.retrievePaymentOptionSelection() viewModel.handleResult(result) } ... } } } ``` ## Optional: Personnaliser la fiche ### Apparence Personnalisez les couleurs, les polices et d’autres attributs d’apparence afin qu’ils correspondent à l’apparence de votre application à l’aide de l’[API appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android). > `retrievePaymentMethods` permet de filtrer l’affichage des moyens de paiement enregistrés, mais n’aura pas d’impact sur le type de moyens de paiement pouvant être ajoutés. ### 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](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/index.html#-1446247975%2FFunctions%2F2002900378). La `CustomerSheet` préremplit ses champs avec les valeurs que vous fournissez. ```kotlin val configuration = CustomerSheet.Configuration.Builder() .defaultBillingDetails( PaymentSheet.BillingDetails( address = PaymentSheet.Address( country = "US" ), email = "foo@bar.com" ) ) .build() ``` ### Collecte des informations de facturation Utilisez [billingDetailsCollectionConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/index.html#1512634376%2FFunctions%2F2002900378) pour spécifier la manière dont vous souhaitez collecter les informations de facturation dans le PaymentSheet. Vous pouvez collecter le nom, l’adresse e-mail, le numéro de téléphone et l’adresse de votre client. Pour associer des valeurs non collectées par la `CustomerSheet`, ajoutez-les à la propriété [defaultBillingDetails](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/index.html#-1446247975%2FFunctions%2F2002900378) et définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`. Assurez-vous de suivre cette étape si vous ne prévoyez pas de collecter les valeurs requises par le moyen de paiement. ```kotlin val configuration = CustomerSheet.Configuration.Builder() .defaultBillingDetails( PaymentSheet.BillingDetails( email = "foo@bar.com" ) ) .billingDetailsCollectionConfiguration( PaymentSheet.BillingDetailsCollectionConfiguration( name = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Always, email = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Never, address = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Full, attachDefaultsToPaymentMethod = true, ) ) .build() ``` > Consultez votre équipe juridique au sujet des lois qui s’appliquent à la collecte d’informations. Ne recueillez les numéros de téléphone que si vous en avez besoin pour la transaction. > La feuille des paramètres des moyens de paiement est destinée à être utilisée sur une page de paramètres de l’application. Pour le checkout et les paiements, utilisez les[Paiements dans l’application](https://docs.stripe.com/payments/mobile.md), qui disposent également d’une prise en charge intégrée pour l’enregistrement et l’affichage des moyens de paiement et prend en charge davantage de moyens de paiement que la feuille des paramètres des moyens de paiement. > Dans le code, ce composant est appelé `CustomerSheet` pour des raisons historiques. Dans la documentation, lorsque vous voyez `CustomerSheet` dans les exemples de code, cela fait référence à la feuille de paramètres des moyens paiements. La feuille de paramètres des moyens de paiement est un composant d’interface utilisateur préconstruit qui permet à vos clients de gérer les moyens de paiement qu’ils ont enregistrés. Vous pouvez utiliser l’interface utilisateur de la feuille de configuration des moyens de paiement en dehors d’un tunnel de paiement, et l’apparence et le style sont personnalisables pour correspondre à l’apparence et à l’esthétique de votre application. Les clients peuvent ajouter et supprimer des moyens de paiement, qui sont sauvegardés dans l’objet Customer, et définir leur moyen de paiement par défaut sauvegardé localement sur l’appareil. Utilisez à la fois les paiements dans l’application et la feuille des paramètres des moyens de paiement pour offrir à vos clients une solution cohérente de bout en bout pour les moyens de paiement enregistrés. ![Capture d'écran de la feuille des paramètres des moyens de paiement présentant plusieurs moyens de paiement enregistrés dans une application iOS.](https://b.stripecdn.com/docs-statics-srv/assets/ios-landing.6c4969968fd6efe3d39fe673628f8284.png) ## Configurer Stripe Pour commencer, vous devez créer un compte Stripe. [S’inscrire](https://dashboard.stripe.com/register). Le [SDK React Native](https://github.com/stripe/stripe-react-native) est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK [Android](https://github.com/stripe/stripe-android) et [iOS natifs](https://github.com/stripe/stripe-ios). Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) : #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Ensuite, installez les autres dépendances nécessaires : - Pour iOS, accédez au directeur **ios** et exécutez `pod install` pour vous assurer que vous installez également les dépendances natives requises. - Pour Android, il n’y a plus de dépendances à installer. > Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript. ### Initialisation de Stripe Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API dans `publishableKey` est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Activer des moyens de paiement Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method). Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons. > CustomerSheet prend uniquement en charge les cartes et les comptes bancaires américains. ## Ajouter des endpoints Customer [Côté serveur] Si votre plateforme Connect utilise des [comptes configurés par le client](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), consultez notre [guide](https://docs.stripe.com/connect/use-accounts-as-customers.md) pour remplacer dans votre code les références `Customer` et événements par les références équivalentes de l’API Comptes v2. Créez deux endpoints sur votre serveur : l’un pour récupérer la clé secrète d’un client de la session Client, et l’autre pour créer un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) afin d’enregistrer un nouveau moyen de paiement dans l’objet [Customer](https://docs.stripe.com/api/customers.md). 1. Créez un endpoint pour renvoyer un ID de [client](https://docs.stripe.com/api/customers.md) et une clé secrète du client de [CustomerSession](https://docs.stripe.com/api/customer_sessions.md). #### curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[customer_sheet][enabled]"=true \ -d "components[customer_sheet][features][payment_method_remove]"=enabled ``` > Dans le cadre des intégrations avec des clés clients éphémères héritées, la valeur `allow_redisplay` des moyens de paiement enregistrés est définie sur `unspecified`. Pour afficher ces moyens de paiement en plus des moyens de paiement enregistrés lors de l’utilisation des sessions clients, définissez `payment_method_allow_redisplay_filters` sur `["unspecified", "always"]`. Pour en savoir plus, consultez la page dédié aux [sessions clients](https://docs.stripe.com/api/customer_sessions.md). 1. Créez un endpoint pour renvoyer un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) configuré avec l’ID du [Client](https://docs.stripe.com/api/customers.md). #### curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/setup_intents \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" \ ``` Si vous prévoyez uniquement d’utiliser le moyen de paiement pour des paiements ultérieurs lorsque votre client est dans le tunnel de paiement, définissez le paramètre [usage](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) sur *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) pour améliorer les taux d’autorisation. ## Initialiser la fiche Créez un objet `ClientSecretProvider` qui implémente deux méthodes.`CustomerSheet` requiert qu’il communique avec Stripe en utilisant les objets `CustomerSession` et les endpoints que vous avez créés précédemment. ```jsx import {ClientSecretProvider, CustomerSessionClientSecret} from '@stripe/stripe-react-native'; const clientSecretProvider: ClientSecretProvider = { // Must return an object with customerId and clientSecret async provideCustomerSessionClientSecret(): Promise { const result = await MyBackend.createCustomerSession(); return { customerId: result.customer, clientSecret: result.customerSessionClientSecret, }; }, // Must return a string async provideSetupIntentClientSecret(): Promise { const result = await MyBackend.createSetupIntent(); return result.setupIntent; } }; ``` Ensuite, configurez la feuille des paramètres des moyens de paiement à l’aide de la classe `CustomerSheet` en fournissant les paramètres souhaités à `CustomerSheet.initialize`. ```jsx import {CustomerSheet} from '@stripe/stripe-react-native'; const {error} = await CustomerSheet.initialize({ // You must provide intentConfiguration and clientSecretProvider intentConfiguration: { paymentMethodTypes: ['card'], }, clientSecretProvider: clientSecretProvider, headerTextForSelectionScreen: 'Manage your payment method', returnURL: 'my-return-url://', }); ``` ## Présenter la fiche #### Fonctionnels Présentez la feuille des paramètres des moyens de paiement en utilisant `CustomerSheet`. Lorsque le client ferme la feuille, la promesse est résolue avec un `CustomerSheetResult`. #### Utilisation directe des fonctions ```jsx import {CustomerSheet} from '@stripe/stripe-react-native'; const {error, paymentOption, paymentMethod} = await CustomerSheet.present(); if (error) { if (error.code === CustomerSheetError.Canceled) { // Customer dismissed the sheet without changing their payment option } else { // Show the error in your UI } } else { if (paymentOption) { // Configure your UI based on the payment option MyBackend.setDefaultPaymentMethod(paymentMethod.id); } if (paymentMethod) { console.log(JSON.stringify(paymentMethod, null, 2)); } } ``` - Si le client sélectionne un moyen de paiement, le résultat contient un paramètre `paymentOption`. La valeur associée est le paramètre [PaymentOption](https://stripe.dev/stripe-react-native/api-reference/interfaces/PaymentSheet.PaymentOption.html) sélectionné, ou `nil` si l’utilisateur a supprimé le moyen de paiement précédemment sélectionné. Vous trouverez toutes les informations relatives au moyen de paiement dans le champ `paymentMethod`. - Si l’utilisateur annule la fiche, le résultat contient une valeur `error` avec le `error.code === CustomerSheetError.Canceled`. Le moyen de paiement sélectionné ne change pas. - Si une erreur se produit, les informations s’affichent dans `error`. Découvrez comment [activer Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios#ios-apple-pay) #### Composant Créez une variable d’état pour contrôler la présentation de la feuille de paramètres des moyens de paiement (`CustomerSheet`). ```jsx import {CustomerSheet, ClientSecretProvider, CustomerSessionClientSecret} from '@stripe/stripe-react-native'; export default function MyScreen() { const [customerSheetVisible, setCustomerSheetVisible] = React.useState(false); const clientSecretProvider: ClientSecretProvider = { async provideCustomerSessionClientSecret(): Promise { const result = await MyBackend.createCustomerSession(); return { customerId: result.customer, clientSecret: result.customerSessionClientSecret, }; }, async provideSetupIntentClientSecret(): Promise { const result = await MyBackend.createSetupIntent(); return result.setupIntent; } }; return (