# Collect physical addresses and phone numbers Learn how to collect addresses and phone number in your mobile app. # iOS > This is a iOS for when payment-ui is mobile and platform is ios. View the original doc at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=ios. To collect complete addresses for billing or shipping, use the [Address Element](https://docs.stripe.com/elements/address-element.md). You can also use the Address Element to: - Collect customer [phone numbers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/addressviewcontroller/addressdetails/phone) - Utilize autocomplete (enabled by default in iOS) - Prefill billing information in the Payment Element by passing in a shipping address Stripe combines the collected address information and the payment method to create a *PaymentIntent*. ![Examples of a checkout process where a user selects the Add Shipping Address option. Then they're taken to a new screen to add their shipping address into a form. As they type in their address, auto-complete suggestions are presented for your user to choose from.](images/mobile/address-element/ios-overview.png) ## Set up Stripe Configure the SDK with your Stripe [publishable key](https://dashboard.stripe.com/test/apikeys) on app start. This enables your app to make requests to the Stripe API. Use your [test keys](https://docs.stripe.com/keys.md#obtain-api-keys) while you test and develop, and your [live mode](https://docs.stripe.com/keys.md#test-live-modes) keys when you publish your app. ## Set up address autocomplete suggestions Autocomplete is enabled by default on iOS. ## Configure the Address Element You can configure the Address Element with details such as displaying default values, setting allowed countries, customizing the appearance, and so on. Refer to [AddressViewController.Configuration](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController%2BConfiguration.swift#L72-L162) for the complete list of configuration options. ```swift let addressConfiguration = AddressViewController.Configuration( additionalFields: .init(phone: .required), allowedCountries: ["US", "CA", "GB"], title: "Shipping Address" ) ``` ## Retrieve address details Retrieve the address details by conforming to `AddressViewControllerDelegate` and then using [addressViewControllerDidFinish](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController.swift#L19) to dismiss the view controller. The address value is either a valid [address](https://github.com/stripe/stripe-ios/blob/8399ea6cfe4e32190238375882e0a793b483d426/Stripe/AddressViewController%2BConfiguration.swift#L16-L36) or nil. ```swift extension MyViewController: AddressViewControllerDelegate { func addressViewControllerDidFinish(_ addressViewController: AddressViewController, with address: AddressViewController.AddressDetails?) { addressViewController.dismiss(animated: true) self.addressDetails = address } } ``` ## Present the Address Element Create an [AddressViewController](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController.swift#L26) using the address configuration and delegate from the previous steps. You can either present it in a navigation controller or push it onto a navigation controller. ```swift self.addressViewController = AddressViewController(configuration: addressConfiguration, delegate: self) let navigationController = UINavigationController(rootViewController: addressViewController) present(navigationController, animated: true) ``` ## Prefill shipping addresses in the Payment Element If you use the mobile Payment Element, set [PaymentSheet.Configuration.shippingDetails](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/shippingdetails/) to the address collected by the address element. When `shippingDetails` is populated, users have their billing address prefilled and they see a **Billing address is the same as shipping** checkbox. Confirmed payment intents with `shippingDetails` populated also have the [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent property populated when the payment intent is confirmed. ```swift var configuration = PaymentSheet.Configuration() // ... configuration.shippingDetails = { [weak self] in return self?.addressDetails } ``` ## Customize the appearance Now that you’ve added the Address Element to your app, you can customize the appearance to fit with the design of the rest of your app. You can configure the appearance with the [Appearance API](https://docs.stripe.com/elements/appearance-api.md?platform=ios) using [AddressViewController.Configuration.appearance](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController%2BConfiguration.swift#L149). ## Set default billing details To set default values for billing details collected in the payment sheet, configure the `defaultBillingDetails` property. The `PaymentSheet` pre-populates its fields with the values that you provide. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com" ``` ## Customize billing details collection Use `billingDetailsCollectionConfiguration` to specify how you want to collect billing details in the payment sheet. You can collect your customer’s name, email, phone number, and address. If you only want to billing details required by the payment method, set `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` to true. In that case, the `PaymentSheet.Configuration.defaultBillingDetails` are set as the payment method’s [billing details](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details). If you want to collect additional billing details that aren’t necessarily required by the payment method, set `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` to false. In that case, the billing details collected through the `PaymentSheet` are set as the payment method’s billing details. ```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 ``` Consult with your legal counsel regarding laws that apply to collecting information. Only collect phone numbers if you need them for the transaction. # Android > This is a Android for when payment-ui is mobile and platform is android. View the original doc at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=android. To collect complete addresses for billing or shipping, use the [Address Element](https://docs.stripe.com/elements/address-element.md). You can also use the Address Element to: - Collect customer [phone numbers](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-additional-fields-configuration/index.html) - Enable [autocomplete](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html) - Prefill billing information in the Payment Element by passing in a shipping address Stripe combines the collected address information and the payment method to create a *PaymentIntent*. ![Examples of a checkout process where a user selects the Add Shipping Address option. They're then taken to a new screen to add their shipping address into a form (they see auto-complete suggestions as they type in their address).](images/mobile/address-element/android-overview.png) ## Set up Stripe ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... } ``` ```groovy apply plugin: 'com.android.application' android { ... } dependencies { // ... } ``` For details on the latest SDK release and past versions, see the [Releases](https://github.com/stripe/stripe-android/releases) page on GitHub. To receive notifications when a new release is published, [watch releases for the repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Set up address autocomplete suggestions The address element uses the [Google Places SDK](https://developers.google.com/maps/documentation/places/android-sdk/overview) to fetch address autocomplete suggestions. To enable autocomplete suggestions, you need to include the Google Places SDK dependency to your app’s `build.gradle`. ```groovy dependencies { implementation 'com.google.android.libraries.places:places:2.6.0' } ``` ```kotlin dependencies { implementation("com.google.android.libraries.places:places:2.6.0") } ``` Address autocomplete suggestions requires a Google Places API key. Follow the [Google Places SDK setup guide](https://developers.google.com/maps/documentation/places/android-sdk/cloud-setup) to generate your API key. ## Configure the Address Element You can configure the Address Element with details such as displaying default values, setting allowed countries, customizing the appearance, and so on. Refer to [AddressLauncher.Configuration](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AddressLauncher.kt#L72) for the complete list of configuration options. ```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" ) ``` ## Retrieve address details Retrieve the address details by creating an instance of `AddressLauncher` in the `onCreate` lifecycle method of your `Activity` or `Fragment` and creating a callback method that implements the `AddressLauncherResultCallback` interface. ```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 } } } ``` The `AddressLauncherResult` can be `Succeeded` or `Canceled`. See more [implementation details](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AddressLauncherResult.kt). Stripe requires that you instantiate the `AddressLauncher` during the `onCreate` lifecycle event and not after. Otherwise, the callback can’t be registered properly, and your app will crash. ## Present the Address Element Present the address element using the address launcher and configuration from the previous steps. ```kotlin addressLauncher.present( publishableKey = publishableKey, configuration = addressConfiguration ) ``` ## Prefill shipping addresses in the Payment Element If you use the mobile Payment Element, set [PaymentSheet.Configuration.shippingDetails](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) to the address collected by the address element. When `shippingDetails` is populated, users have their billing address prefilled and they see a **Billing address is the same as shipping** checkbox. Confirmed payment intents with `shippingDetails` populated also have the [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent property populated when the payment intent is confirmed ```kotlin val configuration = PaymentSheet.Configuration( // ... shippingDetails = shippingDetails ) ``` ## Customize the appearance Now that you’ve added the Address Element to your app, you can customize the appearance to fit with the design of the rest of your app. You can configure the appearance with the [Appearance API](https://docs.stripe.com/elements/appearance-api.md?platform=android) using [AddressLauncher.Configuration.appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html). ## Set default billing details To set default values for billing details collected in the payment sheet, configure the `defaultBillingDetails` property. The `PaymentSheet` pre-populates its fields with the values that you provide. ```kotlin val address = PaymentSheet.Address(country = "US") val billingDetails = PaymentSheet.BillingDetails( address = address, email = "foo@bar.com" ) val configuration = PaymentSheet.Configuration( merchantDisplayName = ..., defaultBillingDetails = billingDetails ) ``` ```java PaymentSheet.Address address = new PaymentSheet.Address.Builder() .country("US") .build(); PaymentSheet.BillingDetails billingDetails = new PaymentSheet.BillingDetails.Builder() .address(address) .email("foo@bar.com") .build(); PaymentSheet.Configuration configuration = new PaymentSheet.Configuration.Builder(...) .defaultBillingDetails(billingDetails) .build(); ``` ## Customize billing details collection Use `billingDetailsCollectionConfiguration` to specify how you want to collect billing details in the payment sheet. You can collect your customer’s name, email, phone number, and address. If you only want to collect billing details required by the payment method, set `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` to true. This means the `PaymentSheet.Configuration.defaultBillingDetails` is set as the payment method’s [billing details](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details). If you want to collect additional billing details that aren’t necessarily required by the payment method, set `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` to false. In that case, the billing details collected through the `PaymentSheet` are set as the payment method’s billing details. ```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( merchantDisplayName = ..., defaultBillingDetails = billingDetails, billingDetailsCollectionConfiguration = billingDetailsCollectionConfiguration, ) ``` ```java PaymentSheet.BillingDetails billingDetails = new PaymentSheet.BillingDetails.Builder() .email("foo@bar.com") .build(); BillingDetailsCollectionConfiguration billingDetailsCollectionConfiguration = new BillingDetailsCollectionConfiguration( /* name */ BillingDetailsCollectionConfiguration.CollectionMode.Always, /* email */ BillingDetailsCollectionConfiguration.CollectionMode.Never, /* phone */ BillingDetailsCollectionConfiguration.CollectionMode.Automatic, /* address */ BillingDetailsCollectionConfiguration.AddressCollectionMode.Automatic, /* attachDefaultsToPaymentMethod */ true ) PaymentSheet.Configuration configuration = new PaymentSheet.Configuration.Builder(...) .defaultBillingDetails(billingDetails) .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration) .build(); ``` Consult with your legal counsel regarding laws that apply to collecting information. Only collect phone numbers if you need them for the transaction. # React Native > This is a React Native for when payment-ui is mobile and platform is react-native. View the original doc at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=react-native. To collect complete addresses for billing or shipping, use the [Address Element](https://docs.stripe.com/elements/address-element.md). You can also use the Address Element to: - Collect customer [phone numbers](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-additional-fields-configuration/index.html) - Enable [autocomplete](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html) - Prefill billing information in the Payment Element by passing in a shipping address Stripe combines the collected address information and the payment method to create a *PaymentIntent*. ![Examples of a checkout process where a user selects the Add Shipping Address option. They're then taken to a new screen to add their shipping address into a form (they see auto-complete suggestions as they type in their address).](images/mobile/address-element/android-overview.png) ## Set up Stripe The [React Native SDK](https://github.com/stripe/stripe-react-native) is open source and fully documented. Internally, it uses the native [iOS](https://github.com/stripe/stripe-ios) and [Android](https://github.com/stripe/stripe-android) SDKs. To install Stripe’s React Native SDK, run one of the following commands in your project’s directory (depending on which package manager you use): ```bash yarn add @stripe/stripe-react-native ``` ```bash npm install @stripe/stripe-react-native ``` Next, install some other necessary dependencies: - For iOS, navigate to the **ios** directory and run `pod install` to make sure that you also install the required native dependencies. - For Android, you don’t need to install any more dependencies. ### Stripe initialization To initialize Stripe in your React Native app, either wrap your payment screen with the `StripeProvider` component, or use the `initStripe` initialization method. Only the API [publishable key](https://docs.stripe.com/keys.md#obtain-api-keys) in `publishableKey` is required. The following example shows how to initialize Stripe using the `StripeProvider` component. ```javascript import { StripeProvider } from '@stripe/stripe-react-native'; function App() { return ( // Your app code here ); } ``` Use your API [test keys](https://docs.stripe.com/keys.md#obtain-api-keys) while you test and develop, and your [live mode](https://docs.stripe.com/keys.md#test-live-modes) keys when you publish your app. ## Set up address autocomplete suggestions Autocomplete is enabled by default on iOS, but to enable autocomplete suggestions on Android, you need to include the [Google Places SDK](https://developers.google.com/maps/documentation/places/android-sdk/overview) dependency in your app’s `build.gradle`: ```groovy dependencies { implementation 'com.google.android.libraries.places:places:2.6.0' } ``` ```kotlin dependencies { implementation("com.google.android.libraries.places:places:2.6.0") } ``` Address autocomplete suggestions requires a Google Places API key. Follow the [Google Places SDK setup guide](https://developers.google.com/maps/documentation/places/android-sdk/cloud-setup) to generate your API key. ## Configure the Address Element You can configure the Address Element with details such as displaying default values, setting allowed countries, customizing the appearance, and so on. See the [list of available options](https://github.com/stripe/stripe-react-native/blob/master/src/components/AddressSheet.tsx#L19-L51) for more information. ```jsx ``` ## Present the Address Element and retrieve details Retrieve the address details by setting the `visible` property to `true`, and adding callback methods for the `onSubmit` and `onError` properties: ```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); }} /> ``` ## Prefill shipping addresses in the Payment Element If you use the mobile Payment Element, set [defaultShippingDetails](https://github.com/stripe/stripe-react-native/blob/address-element-private-beta/src/types/PaymentSheet.ts#L17) to the address collected by the address element. When `defaultShippingDetails` is populated, users have their billing address prefilled and they see a **Billing address is the same as shipping** checkbox. Confirmed payment intents with `defaultShippingDetails` populated also have the [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent property populated when the payment intent is confirmed ```jsx const { error } = await initPaymentSheet({ ... defaultShippingDetails: addressDetails, }); ``` ## Customize the appearance Now that you’ve added the Address Element to your app, you can customize the appearance to fit with the design of the rest of your app. You can configure the appearance with the [Appearance API](https://docs.stripe.com/elements/appearance-api.md?platform=react-native), using the `appearance` property on the `` component. ## Set default billing details To set default values for billing details collected in the payment sheet, configure the `defaultBillingDetails` property. The `PaymentSheet` pre-populates its fields with the values that you provide. ```javascript await initPaymentSheet({ // ... defaultBillingDetails: { email: 'foo@bar.com', address: { country: 'US', }, }, }); ``` ## Customize billing details collection Use `billingDetailsCollectionConfiguration` to specify how you want to collect billing details in the payment sheet. You can collect your customer’s name, email, phone number, and address. If you don’t intend to collect the values that the payment method requires, you must do the following: 1. Attach the values that aren’t collected by `PaymentSheet` to the `defaultBillingDetails` property. 1. Set `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` to `true`. ```javascript await initPaymentSheet({ // ... defaultBillingDetails: { email: 'foo@bar.com', } billingDetailsCollectionConfiguration: { name: PaymentSheet.CollectionMode.ALWAYS, email: PaymentSheet.CollectionMode.NEVER, address: PaymentSheet.AddressCollectionMode.FULL, attachDefaultsToPaymentMethod: true }, }); ``` Consult with your legal counsel regarding laws that apply to collecting information. Only collect phone numbers if you need them for the transaction.