Listen for address input

Collect addresses to use in custom ways using an event listener.

Web

iOS

Android

React Native

Use the Address Element to collect local and international addresses for your customers.

Examples of a checkout process where a user selects the Add Shipping Address option. Then they are 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.

Set up Stripe

First, you need a Stripe account. Register now.

The React Native SDK is open source and fully documented. Internally, it uses the native iOS and 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):

Command Line
yarn add @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 in publishableKey is required. The following example shows how to initialize Stripe using the StripeProvider component.

import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey="pk_test_TYooMQauvdEDq54NiTphI7jx"

    >
      // Your app code here
    </StripeProvider>
  );
}

Note

Use your API keys for test mode while you test and develop, and your live mode keys when you publish your app.

OptionalSet up address autocomplete suggestions for Android

Autocomplete is enabled by default on iOS, but to enable autocomplete suggestions on Android, you need to include the Google Places SDK dependency in your app’s build.gradle:

build.gradle
Groovy
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 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 for more information.

<AddressSheet
  appearance={{
    colors: {
      primary: '#F8F8F2',
      background: '#272822'
    }
  }}
  defaultValues={{
    phone: '111-222-3333',
    address: {
      country: 'United States',
      city: 'San Francisco',
    },
  }}
  additionalFields={{
    phoneNumber: 'required',
  }}
  allowedCountries={['US', 'CA', 'GB']}
  primaryButtonTitle={'Use this address'}
  sheetTitle={'Shipping Address'}
  googlePlacesApiKey={'(optional) YOUR KEY HERE'}
/>

Present the Address Element and retrieve address details

Retrieve the address details by setting the visible property to true, and adding callback methods for the onSubmit and onError properties:

<AddressSheet
  visible={true}
  onSubmit={async (addressDetails) => {
    // 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);
  }}
/>