A library that provides access to native APIs for integrating Stripe payments.
GitHub
npm
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.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
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:
-
npx expo install @stripe/stripe-react-native
If you are installing this in an existing React Native app (bare workflow), start by installing expo
in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.
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.
{
"expo": {
%%placeholder-start%%... %%placeholder-end%%
"plugins": [
[
"@stripe/stripe-react-native",
{
"merchantIdentifier": string | string [],
"enableGooglePay": boolean
}
]
],
}
}
false
.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!
For usage information and detailed documentation, see the following resources:
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.
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 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
.