Repository files navigation

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 andexample project, or📘 browse the SDK reference.

Updating to a newer version of the SDK? See ourchangelog.

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

Apple Pay: We provide aseamless integration with Apple Pay.

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

SCA-Ready: The SDK automatically performs native3D Secure authentication if needed to comply withStrong 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.

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. SeeApple's andGoogle's guidelines for more information. For all other scenarios you can use this SDK to process payments via Stripe.

yarn add @stripe/stripe-react-nativeornpm install @stripe/stripe-react-native

Find Expo's full documentation here.

Each Expo SDK version requires a specificstripe-react-native version. See theCHANGELOG 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 yourapp.json file, wheremerchantIdentifier is the Apple merchant ID obtainedhere. Otherwise, Apple Pay will not work as expected. If you have multiplemerchantIdentifiers, you can set them in an array.

• Android 5.0 (API level 21) and above
  • YourcompileSdkVersion must be33. Seethis issue for potential workarounds.
• Android gradle plugin 4.x and above

Components

In order to useCardForm component, you need to install and configureMaterial Components theme in your app.

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

implementation'com.google.android.material:material:<version>'

2. Set appropriate style in yourstyles.xml file

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

The Stripe React Native SDK requires Xcode 13.2.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 version7.9.0 and above.Alternatively use theplugin-transform-typescript plugin in your project.

You'll need to runpod install in yourios directory to install the native dependencies.

// App.tsimport{StripeProvider}from'@stripe/stripe-react-native';functionApp(){return(<StripeProviderpublishableKey={publishableKey}merchantIdentifier="merchant.identifier"// required for Apple PayurlScheme="your-url-scheme"// required for 3D Secure and bank redirects><PaymentScreen/></StripeProvider>);}// PaymentScreen.tsimport{CardField,useStripe}from'@stripe/stripe-react-native';exportdefaultfunctionPaymentScreen(){const{ confirmPayment}=useStripe();return(<CardFieldpostalCodeEnabled={true}placeholders={{number:'4242 4242 4242 4242',}}cardStyle={{backgroundColor:'#FFFFFF',textColor:'#000000',}}style={{width:'100%',height:50,marginVertical:30,}}onCardChange={(cardDetails)=>{console.log('cardDetails',cardDetails);}}onFocus={(focusedField)=>{console.log('focusField',focusedField);}}/>);}

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

StripeProvider can accepturlScheme,publishableKey,stripeAccountId,threeDSecureParams andmerchantIdentifier as props. OnlypublishableKey is required.

import{StripeProvider}from'@stripe/stripe-react-native';functionApp(){const[publishableKey,setPublishableKey]=useState('');constfetchPublishableKey=async()=>{constkey=awaitfetchKey();// fetch key from your server heresetPublishableKey(key);};useEffect(()=>{fetchPublishableKey();},[]);return(<StripeProviderpublishableKey={publishableKey}merchantIdentifier="merchant.identifier"// required for Apple PayurlScheme="your-url-scheme"// required for 3D Secure and bank redirects>      // Your app code here</StripeProvider>);}

or

import{initStripe}from'@stripe/stripe-react-native';functionApp(){// ...useEffect(()=>{initStripe({publishableKey:publishableKey,merchantIdentifier:'merchant.identifier',urlScheme:"your-url-scheme",});},[]);}

You can find more details about theStripeProvider component in theAPI reference.

Certain payment methods require awebhook listener to notify you of changes in the status. When developing locally, you can use theStripe CLI to forward webhook events to your local dev server.

• Install thestripe-cli
• Runstripe listen --forward-to localhost:4242/webhook
• The CLI will print a webhook secret (such as,whsec_***) to the console. Set STRIPE_WEBHOOK_SECRET to this value in yourexample/.env file.

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

importmockfrom'@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.:

constpresentApplePayMock=jest.fn();jest.mock('@stripe/stripe-react-native',()=>({  ...mock,presentApplePay:presentApplePayMock,}));

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

While building your iOS project, you may see aUndefined symbols for architecture x86_64 error. This is caused byreact-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 toproject -> build settings, findlibrary 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 theStripeProvider component with Expo. This is caused by using an older version of Expo before stripe-react-native wasofficially supported. Updating Expo Go from the stores (or locally on simulators installed withexpo install:client:[ios|android]) should fix the problem.

If you're still having troubles, pleaseopen an issue or jump in ourdeveloper chat.

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