# Collecter les adresses physiques et les numéros de téléphone Découvrez comment collecter les adresses et numéros de téléphone du client dans votre application mobile grâce à Address Element. # iOS (UIKit) > This is a iOS (UIKit) for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=ios. Pour collecter des adresses complètes pour la facturation ou l’expédition, utilisez le composant [Address Element](https://docs.stripe.com/payments/mobile/address-element.md). Vous pouvez également utiliser l’Address Element pour : - Collectez les [numéros de téléphone](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/addressviewcontroller/addressdetails/phone) des clients - Utiliser la saisie semi-automatique (activée par défaut dans iOS) - Remplissez automatiquement des informations de facturation dans Payment Element en transmettant une adresse de livraison Stripe combine les informations d’adresse collectées et le moyen de paiement pour créer un *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process). ![Exemples de processus de paiement dans lesquels un utilisateur sélectionne l'option Ajouter une adresse de livraison. Il est ensuite redirigé vers un nouvel écran pour ajouter son adresse de livraison dans un formulaire. Au fur et à mesure qu'il saisit son adresse, des suggestions de saisie semi-automatique lui sont présentées.](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.4e83bb4e46fd7d131b5c4ff8abee27ea.png) ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). La [trousse SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est à code source libre et [possède 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 la trousse SDK, suivez les étapes ci-après : 1. Dans Xcode, sélectionnez **File** (Fichier) > **Add Package Dependencies…** (Ajouter des dépendances de paquet…), puis saisissez `https://github.com/stripe/stripe-ios-spm` comme URL du référentiel. 1. Sélectionnez la dernière version dans 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 de `.xcodeproj`, pour ouvrir votre projet dans Xcode. 1. Pour mettre à jour ultérieurement la trousse 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 la trousse 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 trousse SDK, répétez les étapes 1 à 3. > Pour plus de détails sur la version la plus récente de la trousse SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir des notifications lors de la publication d’une nouvelle version, [suivez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) du référentiel. Configurez la trousse SDK avec votre [clé publique](https://dashboard.stripe.com/test/apikeys) Stripe au démarrage de l’application. Cela permet à votre application 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 de [production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Configurer les suggestions de saisie semi-automatique des adresses La saisie semi-automatique est activée par défaut sur iOS. ## Configurer l'Address Element Vous pouvez configurer l’Element Address avec des détails tels que l’affichage des valeurs par défaut, la définition des pays autorisés, la personnalisation de l’apparence, etc. Reportez-vous à [AddressViewController.Configuration](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController%2BConfiguration.swift#L72-L162) pour consulter la liste complète des options de configuration. ```swift let addressConfiguration = AddressViewController.Configuration( additionalFields: .init(phone: .required), allowedCountries: ["US", "CA", "GB"], title: "Shipping Address" ) ``` ## Récupérer les informations de l'adresse Récupérez les détails de l’adresse en vous conformant à `AddressViewControllerDelegate`, puis en utilisant [addressViewControllerDidFinish](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController.swift#L19) pour fermer le contrôleur d’affichage. La valeur de l’adresse est une [adresse](https://github.com/stripe/stripe-ios/blob/8399ea6cfe4e32190238375882e0a793b483d426/Stripe/AddressViewController%2BConfiguration.swift#L16-L36) valide ou nulle. ```swift extension MyViewController: AddressViewControllerDelegate { func addressViewControllerDidFinish(_ addressViewController: AddressViewController, with address: AddressViewController.AddressDetails?) { addressViewController.dismiss(animated: true) self.addressDetails = address } } ``` ## Présenter l'Address Element Créez un [AddressViewController](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController.swift#L26) à l’aide de la configuration de l’adresse et le délégué des étapes précédentes. Vous pouvez le présenter dans un contrôleur de navigation ou le pousser sur un contrôleur de navigation. ```swift self.addressViewController = AddressViewController(configuration: addressConfiguration, delegate: self) let navigationController = UINavigationController(rootViewController: addressViewController) present(navigationController, animated: true) ``` ## Optional: Remplissez automatiquement les adresses de livraison dans le Payment Element Si vous utilisez le composant Element Payment mobile, définissez [PaymentSheet.Configuration.shippingDetails](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/shippingdetails/) sur l’adresse collectée par le composant Element address. Lorsque `shippingDetails` est renseigné, les utilisateurs ont leur adresse de facturation préremplie et ils voient une case à cocher **Billing address is the same as shipping**. Les PaymentIntents confirmés avec `shippingDetails` renseignés ont également la propriété [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent renseigné lorsque le PaymentIntent est confirmé. ```swift var configuration = PaymentSheet.Configuration() // ... configuration.shippingDetails = { [weak self] in return self?.addressDetails } ``` ## Optional: Personnaliser l'apparence Maintenant que vous avez ajouté le composant Address Element à votre application, vous pouvez personnaliser son apparence pour qu’il s’intègre à votre application. Vous pouvez configurer l’apparence avec l’[API Appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios) en utilisant [AddressViewController.Configuration.appearance](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController%2BConfiguration.swift#L149). ## Optional: Définir les informations de facturation par défaut Pour définir des valeurs par défaut pour les informations de facturation collectées dans la feuille de paiement, configurez la propriété `defaultBillingDetails`. `PaymentSheet` pré-remplit ses champs avec les valeurs que vous fournissez. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com" ``` ## Optional: Personnaliser la collecte des données de facturation Utilisez `billingDetailsCollectionConfiguration` pour spécifier la façon dont vous souhaitez collecter les informations de facturation dans le formulaire de paiement. Vous pouvez recueillir le nom, l’adresse de courriel, 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 mode de paiement, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` à true. Dans ce cas, le paramètre `PaymentSheet.Configuration.defaultBillingDetails` est défini comme les [informations de facturation](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) du mode de paiement. Si vous souhaitez collecter des informations de facturation supplémentaires qui ne sont pas nécessairement requises pour le moyen de paiement, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur false. Dans ce cas, les informations de facturation collectées via 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 de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction. # iOS (SwiftUI) > This is a iOS (SwiftUI) for when payment-ui is mobile and platform is plugins. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=plugins. Pour collecter des adresses complètes pour la facturation ou l’expédition, utilisez le composant [Address Element](https://docs.stripe.com/payments/mobile/address-element.md) dans SwiftUI. Vous pouvez également utiliser l’Address Element pour : - Collecter les [phone numbers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/addresselement/addressdetails/phone) de la clientèle - Utiliser la saisie automatique (activée par défaut sous iOS) - Remplissez automatiquement des informations de facturation dans Payment Element en transmettant une adresse de livraison Stripe combine les informations d’adresse collectées et le moyen de paiement pour créer un *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process). ![Exemples d'un processus de paiement où un utilisateur sélectionne l'option Ajouter une adresse de livraison . Il est redirigé vers un nouvel écran pour ajouter son adresse de livraison dans un formulaire. La saisie automatique suggère des options parmi lesquelles votre utilisateur peut choisir.](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.4e83bb4e46fd7d131b5c4ff8abee27ea.png) ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). La [trousse SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est à code source libre et [possède 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 la trousse SDK, suivez les étapes ci-après : 1. Dans Xcode, sélectionnez **File** (Fichier) > **Add Package Dependencies…** (Ajouter des dépendances de paquet…), puis saisissez `https://github.com/stripe/stripe-ios-spm` comme URL du référentiel. 1. Sélectionnez la dernière version dans 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 de `.xcodeproj`, pour ouvrir votre projet dans Xcode. 1. Pour mettre à jour ultérieurement la trousse 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 la trousse 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 trousse SDK, répétez les étapes 1 à 3. > Pour plus de détails sur la version la plus récente de la trousse SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir des notifications lors de la publication d’une nouvelle version, [suivez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) du référentiel. Configurez la trousse SDK avec votre [clé publique](https://dashboard.stripe.com/test/apikeys) Stripe au démarrage de l’application. Cela permet à votre application 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 de [production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Configurer les suggestions de saisie semi-automatique des adresses La saisie semi-automatique est activée par défaut sur iOS. ## Configurer l'Address Element Vous pouvez configurer le composant Address Element avec des détails tels que l’affichage des valeurs par défaut, la définition des pays autorisés, la personnalisation de l’apparence, etc. Reportez-vous à `AddressElement.Configuration` pour la liste complète des options de configuration. ```swift var configuration = AddressElement.Configuration() configuration.allowedCountries = ["US", "CA", "GB", "AU"] configuration.buttonTitle = "Save Address" ``` ## Présenter l'Address Element ```swift import SwiftUI import StripePaymentSheet struct MyView: View { @State private var showingAddressElement = false @State private var collectedAddress: AddressElement.AddressDetails? var body: some View { VStack { Button("Collect Address") { showingAddressElement = true } .sheet(isPresented: $showingAddressElement) { AddressElement( address: $collectedAddress, configuration: configuration ) } // Display collected address if let address = collectedAddress { AddressView(address: address) } } } } ``` ## Récupérer les informations de l'adresse Le composant Address Element met automatiquement à jour la variable `address` liée lorsque le client complète ou annule la collecte d’adresses : ```swift struct AddressView: View { let address: AddressElement.AddressDetails var body: some View { VStack(alignment: .leading, spacing: 8) { Text("Collected Address:") .font(.headline) if let name = address.name { Text("Name: \(name)") } Text("Address: \(address.address.line1)") if let city = address.address.city { Text("City: \(city)") } Text("Country: \(address.address.country)") if let phone = address.phone { Text("Phone: \(phone)") } } .padding() } } ``` ## Optional: Personnaliser l'apparence Maintenant que vous avez ajouté le composant Address Element à votre application, vous pouvez personnaliser son apparence pour qu’il s’intègre harmonieusement à votre page. Vous pouvez configurer l’apparence avec l’API Appearance en utilisant `AddressElement.Configuration.appearance`. ## Optional: Définir les informations de facturation par défaut Pour définir des valeurs par défaut pour les informations de facturation collectées dans la feuille de paiement, configurez la propriété `defaultBillingDetails`. `PaymentSheet` pré-remplit ses champs avec les valeurs que vous fournissez. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com" ``` ## Optional: Personnaliser la collecte des données de facturation Utilisez `billingDetailsCollectionConfiguration` pour spécifier la façon dont vous souhaitez collecter les informations de facturation dans le formulaire de paiement. Vous pouvez recueillir le nom, l’adresse de courriel, 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 mode de paiement, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` à true. Dans ce cas, le paramètre `PaymentSheet.Configuration.defaultBillingDetails` est défini comme les [informations de facturation](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) du mode de paiement. Si vous souhaitez collecter des informations de facturation supplémentaires qui ne sont pas nécessairement requises pour le moyen de paiement, définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur false. Dans ce cas, les informations de facturation collectées via 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 de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction. # Android > This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=android. Pour collecter des adresses complètes pour la facturation ou l’expédition, utilisez le composant [Address Element](https://docs.stripe.com/payments/mobile/address-element.md). Vous pouvez également utiliser l’Address Element pour : - Collectez les [numéros de téléphone](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-additional-fields-configuration/index.html) des clients - Activez [la saisie semi-automatique](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html) - Remplissez automatiquement des informations de facturation dans Payment Element en transmettant une adresse de livraison Stripe combine les informations d’adresse collectées et le moyen de paiement pour créer un *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process). ![Exemples de processus de paiement dans lesquels un utilisateur sélectionne l'option Ajouter une adresse de livraison. Il est ensuite redirigé vers un nouvel écran pour ajouter son adresse de livraison dans un formulaire (des suggestions de saisie semi-automatique sont affichées au fur et à mesure qu'il saisit son adresse).](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.6061212dc737aa700b79242cb5f77782.png) ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). La [trousse SDK Stripe Android](https://github.com/stripe/stripe-android) est à code source libre et [possède une documentation complète](https://stripe.dev/stripe-android/). Pour installer la trousse 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.7.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.7.0") } ``` > Pour obtenir de plus amples informations sur la version la plus récente de la trousse 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 la trousse SDK avec votre [clé publique](https://dashboard.stripe.com/apikeys) Stripe de façon à ce qu’elle 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 de [production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Configurer les suggestions de saisie semi-automatique des adresses L’Address Element utilise la [trousse SDK Google Places](https://developers.google.com/maps/documentation/places/android-sdk/overview) pour récupérer les suggestions de saisie semi-automatique d’adresses. Pour activer les suggestions de saisie semi-automatique, vous devez inclure la dépendance de la trousse SDK Google Places dans `build.gradle` de votre application. #### Génial ```groovy dependencies { implementation 'com.google.android.libraries.places:places:2.6.0' } ``` Les suggestions de saisie semi-automatique d’adresses nécessitent une clé API Google Places. Suivez le [guide de configuration de la trousse SDK Google Places](https://developers.google.com/maps/documentation/places/android-sdk/cloud-setup) pour générer votre clé API. ## Configurer l'Address Element Vous pouvez configurer l’Element Address avec des détails tels que l’affichage des valeurs par défaut, la définition des pays autorisés, la personnalisation de l’apparence, etc. Reportez-vous à [AddressLauncher.Configuration](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AddressLauncher.kt#L72) pour consulter la liste complète des options de configuration. ```kotlin val addressConfiguration = AddressLauncher.Configuration( additionalFields: AddressLauncher.AdditionalFieldsConfiguration( phone: AdditionalFieldsConfiguration.FieldConfiguration.Required ), allowedCountries: setOf("US", "CA", "GB"), title: "Shipping Address", googlePlacesApiKey = "(optional) YOUR KEY HERE" ) ``` ## Récupérer les informations de l'adresse Récupérez les détails de l’adresse en créant une instance de `AddressLauncher` dans la méthode de cycle de vie `onCreate` de votre `Activity` ou `Fragment` et en créant une méthode de rappel qui met en œuvre l’interface `AddressLauncherResultCallback`. ```kotlin private lateinit var addressLauncher: AddressLauncher private var shippingDetails: AddressDetails? = null override fun onCreate(savedInstanceState: Bundle?) { addressLauncher = AddressLauncher(this, ::onAddressLauncherResult) } private fun onAddressLauncherResult(result: AddressLauncherResult) { // TODO: Handle result and update your UI when (result) { is AddressLauncherResult.Succeeded -> { shippingDetails = result.address } is AddressLauncherResult.Canceled -> { // TODO: Handle cancel } } } ``` L’objet `AddressLauncherResult` peut être `Succeeded` ou `Canceled`. En savoir plus sur [les détails de la mise en œuvre](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AddressLauncherResult.kt). > Stripe exige que vous instanciiez `AddressLauncher` pendant l’événement de cycle de vie `onCreate` et non après. Dans le cas contraire, le rappel ne pourra pas être enregistré correctement et votre application plantera. ## Présenter l'Address Element Présentez l’Address Element à l’aide du lanceur d’adresses et de la configuration des étapes précédentes. ```kotlin addressLauncher.present( publishableKey = publishableKey, configuration = addressConfiguration ) ``` ## Optional: Remplissez automatiquement les adresses de livraison dans le Payment Element Si vous utilisez le composant Element Payment mobile, définissez [PaymentSheet.Configuration.shippingDetails](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) sur l’adresse collectée par le composant Element address. Lorsque `shippingDetails` est renseigné, les utilisateurs ont leur adresse Billing préremplie et ils voient une case à cocher **Billing address is the same as shipping**. Les PaymentIntents confirmés avec `shippingDetails` renseignés ont également la propriété [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent renseigné lorsque le PaymentIntent est confirmé ```kotlin val configuration = PaymentSheet.Configuration.Builder("Example, Inc.") // ... .shippingDetails(shippingDetails) .build() ``` ## Optional: Personnaliser l'apparence Maintenant que vous avez ajouté le composant Address Element à votre application, vous pouvez personnaliser son apparence pour qu’il s’intègre à votre application. Vous pouvez configurer l’apparence avec l’[API Appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android) en utilisant [AddressLauncher.Configuration.appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html). ## Optional: Définir les informations de facturation par défaut Pour définir des valeurs par défaut pour les informations de facturation collectées dans la feuille de paiement, configurez la propriété `defaultBillingDetails`. `PaymentSheet` pré-remplit ses 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() ``` ## Optional: Personnaliser la collecte des données de facturation ### Configurer la collecte des données de facturation Utilisez `BillingDetailsCollectionConfiguration` pour préciser la façon dont vous souhaitez collecter les informations de facturation dans la PaymentSheet. Vous pouvez recueillir le nom, l’adresse de courriel, 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 de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction. # React Native > This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=react-native. Pour collecter des adresses complètes pour la facturation ou l’expédition, utilisez le composant [Address Element](https://docs.stripe.com/payments/mobile/address-element.md). Vous pouvez également utiliser l’Address Element pour : - Collectez les [numéros de téléphone](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-additional-fields-configuration/index.html) des clients - Activez [la saisie semi-automatique](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html) - Remplissez automatiquement des informations de facturation dans Payment Element en transmettant une adresse de livraison Stripe combine les informations d’adresse collectées et le moyen de paiement pour créer un *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process). ![Exemples de processus de paiement dans lesquels un utilisateur sélectionne l'option Ajouter une adresse de livraison. Il est ensuite redirigé vers un nouvel écran pour ajouter son adresse de livraison dans un formulaire (des suggestions de saisie semi-automatique sont affichées au fur et à mesure qu'il saisit son adresse).](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.6061212dc737aa700b79242cb5f77782.png) ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). La [trousse SDK de React Native](https://github.com/stripe/stripe-react-native) est à code source libre et possède une documentation complète. À l’interne, elle utilise les trousses SDK natives [iOS](https://github.com/stripe/stripe-ios) et [Android](https://github.com/stripe/stripe-android). Pour installer la trousse 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) : #### laine ```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 répertoire ** ios ** et exécutez la fonctionnalité `pod install` pour vous assurer que vous installez également les dépendances natives requises. - Pour Android, vous n’avez pas besoin d’installer d’autres dépendances. ### Initialisation de Stripe Pour initialiser Stripe dans votre application React Native, enveloppez 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 est requise dans l’objet `publishableKey`. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`. ```javascript import { StripeProvider } from '@stripe/stripe-react-native'; function App() { 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 [de production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Configurer les suggestions de saisie semi-automatique des adresses La saisie semi-automatique est activée par défaut sur iOS, mais pour activer les suggestions de saisie semi-automatique sur Android, vous devez inclure la dépendance de la trousse [SDK Google Places](https://developers.google.com/maps/documentation/places/android-sdk/overview) dans `build.gradle` de votre application : #### Génial ```groovy dependencies { implementation 'com.google.android.libraries.places:places:2.6.0' } ``` Les suggestions de saisie semi-automatique d’adresses nécessitent une clé API Google Places. Suivez le [guide de configuration de la trousse SDK Google Places](https://developers.google.com/maps/documentation/places/android-sdk/cloud-setup) pour générer votre clé API. ## Configurer l'Address Element Vous pouvez configurer l’Address Element avec des informations telles que l’affichage des valeurs par défaut, la définition des pays autorisés, la personnalisation de l’apparence, et plus encore. Pour en savoir plus, consultez la [liste des options disponibles](https://github.com/stripe/stripe-react-native/blob/master/src/components/AddressSheet.tsx#L19-L51). ```jsx ``` ## Présentez l'Address Element et récupérez les informations Récupérez les informations de l’adresse en définissant la propriété `visible` à `true` et en ajoutant des méthodes de rappel pour les propriétés `onSubmit` et `onError` : ```jsx { // Make sure to set `visible` back to false to dismiss the address element. setAddressSheetVisible(false); // Handle result and update your UI }} onError={(error) => { if (error.code === AddressSheetError.Failed) { Alert.alert('There was an error.', 'Check the logs for details.'); console.log(err?.localizedMessage); } // Make sure to set `visible` back to false to dismiss the address element. setAddressSheetVisible(false); }} /> ``` ## Optional: Remplissez automatiquement les adresses de livraison dans le Payment Element Si vous utilisez le composant Element Payment mobile, définissez [defaultShippingDetails](https://github.com/stripe/stripe-react-native/blob/address-element-private-beta/src/types/PaymentSheet.ts#L17) sur l’adresse collectée par le composant Element address. Lorsque `defaultShippingDetails` est renseigné, les utilisateurs ont leur adresse de facturation préremplie et ils voient une case à cocher **Billing address is the same as shipping**. Les PaymentIntents confirmés avec `defaultShippingDetails` renseignés ont également la propriété [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent renseigné lorsque le PaymentIntent est confirmé ```jsx const { error } = await initPaymentSheet({ ... defaultShippingDetails: addressDetails, }); ``` ## Optional: Personnaliser l'apparence Maintenant que vous avez ajouté le composant Address Element à votre application, vous pouvez personnaliser l’apparence pour l’adapter au design du reste de votre application. Vous pouvez configurer l’apparence à l’aide de l’[API Appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=react-native), en utilisant la propriété `Apparence` sur le composant ``. ## Optional: Définir les informations de facturation par défaut Pour définir des valeurs par défaut des informations de facturation recueillies dans la PaymentSheet, configurez la propriété `defaultBillingDetails`. La`PaymentSheet` pré-remplit ses champs en fonction des valeurs que vous fournissez. ```javascript await initPaymentSheet({ // ... defaultBillingDetails: { email: 'foo@bar.com', address: { country: 'US', }, }, }); ``` ## Optional: Personnaliser la collecte des données de facturation Utilisez `billingDetailsCollectionConfiguration` pour préciser comment vous souhaitez recueillir les informations de facturation dans la PaymentSheet. Vous pouvez recueillir le nom, l’adresse de courriel, le numéro de téléphone et l’adresse de votre client. Si vous n’avez pas l’intention de collecter les valeurs requises par le mode de paiement, vous devez suivre les étapes ci-après : 1. Joignez les valeurs qui ne sont pas collectées par `PaymentSheet` à la propriété `defaultBillingDetails`. 1. Définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`. ```javascript await initPaymentSheet({ // ... defaultBillingDetails: { email: 'foo@bar.com', }, billingDetailsCollectionConfiguration: { name: PaymentSheet.CollectionMode.ALWAYS, email: PaymentSheet.CollectionMode.NEVER, address: PaymentSheet.AddressCollectionMode.FULL, attachDefaultsToPaymentMethod: true }, }); ``` > Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte de renseignements. Ne collectez les numéros de téléphone que si vous en avez besoin pour la transaction.