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 are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions provided by the library's README or documentation.

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 set up, just add the config plugin to the plugins array of your app.json or app.config.js as shown below, then rebuild the app.

app.json

{
  "expo": {
    %%placeholder-start%%... %%placeholder-end%%
    "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, see the following resources:

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.