How to use Stripe Checkout Javascript SDK in React Native Expo app without ejecting — 2020 SCA

Before September 2019 there was a simple way to integrate Stripe in your React Native Expo app without ejecting. But now, due to the SCA (Strong Customer Authentication) regulation, that solution is not valid anymore.

You either have to integrate the official React Native Stripe Javascript SDK which requires ejecting from Expo (not fun). Or you can host and then open a webpage with a “Checkout with Stripe” button which will redirect to a purchase page hosted by Stripe.

In this article, I will explain the latter with an improvement. You will be able to immediately load the Stripe Checkout page for your product from your app without ejecting from Expo and without having to host a webpage on your server.

The user journey and data flow

This is what will happen:

• your user taps on the “Buy now” button inside your React Native Expo app
• you are going to navigate to a PurchaseProduct screen
• PurchaseProduct screen will automatically load a full-screen webview with some HTML
• the HTML code loaded contains the Stripe Checkout loading function that is automatically called
• the webview will be redirected to the Stripe Checkout page for your product
• your user will complete the purchase
• the webview will be redirected to a success or cancelled page URL
• the PurchaseProduct screen will be monitoring the webview current URL to determine the purchase status
• your success or cancelled callbacks will be called
• Stripe will send an event to your backend webhook if setup
• you will (ideally) double-check and confirm with your backend if the purchase has actually been successful or not
• you go on with your life

Stripe settings

First, you have to go to the Stripe Dashboard and create a product or subscription that you want to sell (in test mode to start).

Once you have that data you will be able to create a stripeSettings.js file with these settings.

The Stripe Checkout HTML

As previously said we are going to load a webpage with the HTML/JS code to automatically load your product’s Stripe Checkout page.

Download or create a file named stripeCheckout.js with the following code.

The function is based on the code to create a Subscription Checkout button described here. If you want to create a page for a one-time payment (like buying a product) update the code settings with the info here.

Note: In the original HTML code, a “Checkout with Stripe” button is showed. The user has to tap it to actually be redirected to the checkout form. This edited version of the code automatically redirects the user to the checkout form when the page is loaded.

PurchaseProduct Screen

Now let’s create a purchase screen component which contains the webview.

First, let’s install the webview component:

npm install --save react-native-webview
# or
yarn add react-native-webview

Then create the component file with the following code.

In this code, we are creating a component which renders a webview with the generated HTML. So we do not have to host the HTML somewhere on a server.

Your backend should be registered for Stripe webhook events to be sure the payment has gone through and everything is successful. So, we are passing the user id in the HTML, because it will be passed as a parameter to the webhook callback. This way the callback event handler on your backend knows who’s the event refers to.

Glue it all together

You are set. Now if you have customised the Stripe setting object and you navigate to the PurchaseProduct screen, you will be able to see it autoload the Checkout page for your product. Fill the form with mock data and a test credit card and you will see that your success handler is called.

This should be enough to get going.

Thanks to Mattia for all the help with React and for his countless advices.