Stripe React Native SDK

The Stripe React Native SDK allows you to build delightful payment experiences in your native Android and iOS apps using React Native. We provide powerful and customizable UI screens and elements that can be used out-of-the-box to collect your users' payment details.

Getting started

Get started with our 📚 integration guides and example project, or 📘 browse the SDK reference.

> Updating to a newer version of the SDK? See our changelog.

Features

Simplified Security: We make it simple for you to collect sensitive data such as credit card numbers and remain PCI compliant. This means the sensitive data is sent directly to Stripe instead of passing through your server. For more information, see our Integration Security Guide.

Apple Pay: We provide a seamless integration with Apple Pay.

Payment methods: Accepting more payment methods helps your business expand its global reach and improve checkout conversion.

SCA-Ready: The SDK automatically performs native 3D Secure authentication if needed to comply with Strong Customer Authentication regulation in Europe.

Native UI: We provide native screens and elements to securely collect payment details on Android and iOS.

PaymentSheet: Learn how to integrate PaymentSheet, our new pre-built payments UI for mobile apps. PaymentSheet lets you accept cards, Apple Pay, Google Pay, and much more out of the box and also supports saving & reusing payment methods. PaymentSheet currently accepts the following payment methods: Card, Apple Pay, Google Pay, SEPA Debit, Bancontact, iDEAL, EPS, P24, Afterpay/Clearpay, Klarna, Giropay, Sofort, and ACH.

Recommended usage

If you're selling digital products or services within your app, (e.g. subscriptions, in-game currencies, game levels, access to premium content, or unlocking a full version), you must use the app store's in-app purchase APIs. See Apple's and Google's guidelines for more information. For all other scenarios you can use this SDK to process payments via Stripe.

Installation

yarn add @stripe/stripe-react-native
or
npm install @stripe/stripe-react-native

Expo

> Find Expo's full documentation here.

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

expo install @stripe/stripe-react-native

Next, add:

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

to your app.json file, where merchantIdentifier 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.

Requirements

Android

• Android 5.0 (API level 21) and above
  • Your compileSdkVersion must be 34. See this issue for potential workarounds.
• Android gradle plugin 4.x and above

Components

In order to use CardForm component, you need to install and configure Material Components theme in your app.

1. Add below dependency to your app/build.gradle file with specified version

implementation 'com.google.android.material:material:'

2. Set appropriate style in your styles.xml file

<style name="Theme.MyApp">
    <!-- ... -->
</style>

iOS

The Stripe React Native SDK requires Xcode 14.1 or later and is compatible with apps targeting iOS 13 or above. For iOS 12 support, please use @stripe/stripe-react-native@0.19.0.

The SDK uses TypeScript features available in Babel version 7.9.0 and above. Alternatively use the plugin-transform-typescript plugin in your project.

You'll need to run pod install in your ios directory to install the native dependencies.

Usage example

For a complete example, visit our docs.

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

function App() {
  return (
    
      
    
  );
}

// PaymentScreen.ts
import { useStripe } from '@stripe/stripe-react-native';

export default function PaymentScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();

  const setup = async () => {
    const { error } = await initPaymentSheet({
      merchantDisplayName: 'Example, Inc.',
      paymentIntentClientSecret: paymentIntent, // retrieve this from your server
    });
    if (error) {
      // handle error
    }
  };

  useEffect(() => {
    setup();
  }, []);

  const checkout = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      // handle error
    } else {
      // success
    }
  };

  return (