Collect physical addresses and phone numbers

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):

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>
  );
}

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:

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.

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'}
/>

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);
  }}
/>