Stripe

GitHub

npm

A library that provides access to native APIs for integrating Stripe payments.

Expo includes support for @stripe/stripe-react-native, which allows you to build delightful payment experiences in your native Android and iOS apps using React Native and Expo. This library provides powerful and customizable UI screens and elements that can be used out-of-the-box to collect your users' payment details.

Migrating from Expo's expo-payments-stripe module? Learn more about how to transition to the new @stripe/stripe-react-native library.

Platform Compatibility

Android Device	Android Emulator	iOS Device	iOS Simulator	Web

Installation

Each Expo SDK version requires a specific @stripe/stripe-react-native version. See the Stripe CHANGELOG for a mapping of versions. To automatically install the correct version for your Expo SDK version, run:

Terminal

- npx expo install @stripe/stripe-react-native

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Config plugin setup (optional)

If you're using EAS Build, you can do most of your Stripe setup using the @stripe/stripe-react-native config plugin. To setup, just add the config plugin to the plugins array of your app.json or app.config.js as shown below, then rebuild the app.

{
  "expo": {
    ...
    "plugins": [
      [
        "@stripe/stripe-react-native",
        {
          "merchantIdentifier": string | string [],
          "enableGooglePay": boolean
        }
      ]
    ],
  }
}

merchantIdentifier: iOS only. This is the Apple merchant ID obtained here. Otherwise, Apple Pay will not work as expected. If you have multiple merchantIdentifiers, you can set them in an array.
enableGooglePay: Android only. Boolean indicating whether or not Google Pay is enabled. Defaults to false.

Example

Trying out Stripe takes just a few seconds. Connect to this Snack on your device.

Under the hood, that example connects to this Glitch server code, so you'll need to open that page to spin up the server. Feel free to run your own Glitch server and copy that code!

Usage

For usage information and detailed documentation, please refer to:

Common issues

Browser pop-ups are not redirecting back to my app

If you're relying on redirects, you'll need to pass in a urlScheme to initStripe. To make sure you always use the proper urlScheme, pass in:

import * as Linking from 'expo-linking';
import Constants from 'expo-constants';

urlScheme:
  Constants.appOwnership === 'expo'
    ? Linking.createURL('/--/')
    : Linking.createURL(''),

Linking.createURL will ensure you're using the proper scheme, whether you're running in Expo Go or your production app. '/--/' is necessary in Expo Go because it indicates that the substring after it corresponds to the deep link path, and is not part of the path to the app itself.

Limitations

Standalone apps

@stripe/stripe-react-native is supported in Expo Go on Android and iOS out of the box, however, for iOS, it is only available for standalone apps built with EAS Build, and not for apps built on the classic build system- expo build:ios. Android apps built with expo build:android will have access to the @stripe/stripe-react-native library.

Google Pay

Google Pay is not supported in Expo Go. To use Google Pay, you must create a development build. This can be done with EAS Build, or locally by running npx expo run:android.

Apple Pay

Apple Pay is not supported in Expo Go. To use Apple Pay, you must create a development build. This can be done with EAS Build, or locally by running npx expo run:ios.