gem-hunter

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.

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.

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, Billie, iDEAL, EPS, P24, Afterpay/Clearpay, Klarna, Giropay, and ACH.
• PaymentSheet provides card scanning on iOS and Android, with the Android functionality provided by Google Payment Card Recognition. To enable card scanning in your app, follow our guide.

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.

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

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. See Stripe iOS SDK resolution for the required iOS linking configuration.

React Native 0.75 or later is required. The React Native new architecture (TurboModules and Fabric) is required.

• Android: Set newArchEnabled=true in android/gradle.properties.
• iOS: Set RCT_NEW_ARCH_ENABLED=1 in your Podfile.
• Expo: Set newArchEnabled: true in your app configuration.

• Android 6.0 (API level 23) and above
  • Your compileSdkVersion must be 36 or higher.
• Android gradle plugin 4.x and above
• Kotlin 2.x and above. See this issue for how to update the Kotlin version when using react-native 0.77 and below or Expo SDK 52.

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:<version>'

2. Set appropriate style in your styles.xml file

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

The Stripe React Native SDK supports all Apple supported Xcode versions 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 requires that your app uses dynamic linkage. See more details below.

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.

The Stripe React Native SDK resolves its Stripe iOS SDK dependency through Swift Package Manager (SPM). The Stripe iOS SDK no longer supports CocoaPods resolution. This requires building your app with dynamic linking. Add the following to your Podfile if it isn't there already:

use_frameworks! :linkage => :dynamic

For Expo, set "useFrameworks": "dynamic" via the expo-build-properties plugin. If you are using precompiled modules with Expo, you must use Expo 58.0.19 or later, otherwise Expo will revert your build to static linking.

If you encounter problems with SPM dependency resolution, please immediately file an issue.

If you previously opted out of SPM resolution, remove $StripeDisableSPM = true from your Podfile or disableSPM from your Expo app config. These options are no longer supported.

• pod install fails with "Resolving the Stripe iOS SDK through Swift Package Manager requires dynamic frameworks" — your app is building with static libraries (React Native's default). If you are not using Expo, add use_frameworks! :linkage => :dynamic to your Podfile. If you are using Expo, set "useFrameworks": dynamic" via expo-build-properties). If you are using precompiled modules in Expo, additionally ensure you are using Expo 58.0.19 or later.

• pod install fails with "The Stripe iOS Swift package was not added to the Pods project" - the integration relies on react_native_post_install being called from your Podfile. If your Podfile is customized and no longer calls it, restore that call (see the React Native template Podfile).

• The app crashes at launch with dyld: Library not loaded: @rpath/Stripe….framework - there was an error embedding the Stripe frameworks into your app bundle. Re-run pod install and confirm that the [stripe-react-native] Embed SPM Frameworks build phase exists on the app target. If the crash persists with the phase present, file an issue.

• pod install aborts with an integrity-check error or Xcode reports "The project 'Pods' is damaged and cannot be opened" - delete your app's ios/Pods directory and run pod install again. If the error persists, file an issue.

The Stripe SDK automatically localizes the UI (PaymentSheet, CustomerSheet, etc.) based on the user's device and app configuration:

• Android: The PaymentSheet automatically uses the device's system language, or the per-app language preference configured on Android 13+.
• iOS: iOS only displays localized resources for languages that your host application explicitly declares support for. If your iOS app bundle does not declare the user's preferred language, iOS falls back to the app's base development language (usually English). To enable localizations in your iOS app:

  • In Xcode, select your project in the Project Navigator, select the Info tab, and add the desired localizations under the Localizations section.

  • Or in your app's Info.plist, ensure CFBundleAllowMixedLocalizations is set to <true/> and declare your supported language codes in CFBundleLocalizations:

    <key>CFBundleAllowMixedLocalizations</key>
    <true/>
    <key>CFBundleLocalizations</key>
    <array>
      <string>en</string>
      <string>es</string>
      <string>fr</string>
    </array>

  • Expo: For Expo projects, you can add locales to your app.json or configure CFBundleLocalizations in ios.infoPlist to ensure iOS loads the corresponding Stripe localized strings.

For a complete example, visit our docs.

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

function App() {
  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      <PaymentScreen />
    </StripeProvider>
  );
}

// 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 (
    <View>
      <Button title="Checkout" onPress={checkout} />
    </View>
  );
}

To initialize Stripe in your React Native app, use the StripeProvider component in the root component of your application, or use the initStripe method.

StripeProvider can accept urlScheme, publishableKey, stripeAccountId, threeDSecureParams and merchantIdentifier as props. Only publishableKey is required.

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

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

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

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      // Your app code here
    </StripeProvider>
  );
}

or

import { initStripe } from '@stripe/stripe-react-native';

function App() {
  // ...

  useEffect(() => {
    initStripe({
      publishableKey: publishableKey,
      merchantIdentifier: 'merchant.identifier',
      urlScheme: 'your-url-scheme',
    });
  }, []);
}

You can find more details about the StripeProvider component in the API reference.

This library includes a built in mock file for Jest. In order to use it, add the following code to the Jest setup file:

import mock from '@stripe/stripe-react-native/jest/mock.js';

jest.mock('@stripe/stripe-react-native', () => mock);

To have a more control over the mocks, you can extend and override particular methods e.g.:

const presentNativePayMock = jest.fn();

jest.mock('@stripe/stripe-react-native', () => ({
  ...mock,
  presentNativePay: presentNativePayMock,
}));

See the contributor guidelines to learn how to contribute to the repository or to learn how to run the example app.

This is known limitation of using singleTask as your launchMode on Android. See here for a workaround.

While building your iOS project, you may see a Undefined symbols for architecture x86_64 error. This is caused by react-native init template configuration that is not fully compatible with Swift 5.1.

Undefined symbols for architecture x86_64:
  "(extension in Foundation):__C.NSScanner.scanUpToString(Swift.String) -> Swift.String?", referenced from:
      static Stripe.STPPhoneNumberValidator.formattedRedactedPhoneNumber(for: Swift.String, forCountryCode: Swift.String?) -> Swift.String in libStripe.a(STPPhoneNumberValidator.o)
  "__swift_FORCE_LOAD_$_swiftUniformTypeIdentifiers", referenced from:
      __swift_FORCE_LOAD_$_swiftUniformTypeIdentifiers_$_Stripe in libStripe.a(PKPaymentAuthorizationViewController+Stripe_Blocks.o)

Follow these steps to resolve this:

• Open your project via Xcode, go to project -> build settings, find library search paths and remove all swift related entries such as: $(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME) and $(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME).
• Create a new Swift file to the project (File > New > File > Swift), give it any name (e.g. Fix.swift), check the appropriate Targets and create a bridging header when prompted by Xcode.

You might see error this whilst initializing the StripeProvider component with Expo. This is caused by using an older version of Expo before stripe-react-native was officially supported. Updating Expo Go from the stores (or locally on simulators installed with expo install:client:[ios|android]) should fix the problem.

If you're still having troubles, please open an issue or jump in our developer chat.

This can occur if you attempt to process an Apple Pay payment on a physical device (even in test mode) without having created and uploaded your Apple Pay Certificate to the Stripe Dashboard. Learn how to do that here.