Using stripe checkout with react native

Stripe Checkout is a prebuilt, hosted payment page optimized for conversion. Whether you offer one-time purchases or subscriptions, use Checkout to easily and securely accept payments online.

Stripe doesn’t yet offer an official react-native integration, so we need to find a workaround to get checkout up and running.

We will achieve this by rendering Checkout using the open source library react-native-stripe-checkout-webview. The library uses react-native-webview under the hood to render Stripe Checkout web page.

Installation

yarn add react-native-webview react-native-stripe-checkout-webview
cd ios && pod install && cd ..

Integration

We need to setup a new screen in our app that will handle rendering Checkout’s webview:

// MyStripeCheckout.js

import StripeCheckout from 'react-native-stripe-checkout-webview';

type Props = { STRIPE_PUBLIC_KEY: string, CHECKOUT_SESSION_ID: string };

const MyStripeCheckout = ({ STRIPE_PUBLIC_KEY, CHECKOUT_SESSION_ID }: Props) => (
  <StripeCheckout
    stripePublicKey={STRIPE_PUBLIC_KEY}
    checkoutSessionInput={{
      sessionId: CHECKOUT_SESSION_ID,
    }}
    onSuccess={({ checkoutSessionId }) => {
      console.log(`Stripe checkout session succeeded. session id: ${checkoutSessionId}.`);
      // @todo add your success logic here. eg:
      // navigation.navigate('paymentComplete', { checkoutSessionId })
    }}
    onCancel={() => {
      console.log(`Stripe checkout session cancelled.`);
      // @todo add your on cancel logic here. eg:
      // navigation.goBack();
    }}
  />
);

export default MyStripeCheckout;

• STRIPE_PUBLIC_KEY is your public stripe key, you can get it from the stripe dashboard.
• CHECKOUT_SESSION_ID is the checkout session ID which we will get from our backend. We will discuss this in the serverside section below.

Getting Apple Pay and Google Pay to work:

The library we’re using uses react-native-webview under the hood to render the Stripe Checkout webpage. To get Apple Pay and Google Pay to work we need to pass the context to the browser, here’s how to get it working:

• Comment this line in /node_modules/react-native-webview/apple/RNCWebView.m like shown below (in v10.9.2 line number is 1270.)

WKUserScript *script = [[WKUserScript alloc] initWithSource:html5HistoryAPIShimSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart
forMainFrameOnly:YES];
// [wkWebViewConfig.userContentController addUserScript:script]; // this line that inject "html5HistoryAPIShimSource" on star

• Use patch-package to easily persist this change

yarn add patch-package
yarn patch-package react-native-webview

Serverside

We now need to implement our server-side logic. We will implement a minimalist version below, you can checkout the full details in the Stripe docs.

We need to ensure that our server is compatible with our client. We only need to worry about the URL structure:

• successUrl must have the query string params ?sc_checkout=success&sc_sid={CHECKOUT_SESSION_ID}
• successUrl must have the query string params ?sc_checkout=success&sc_sid={CHECKOUT_SESSION_ID}
  • sc_sid is optional — must be the last param — when passed results in sessionId being passed to the onSuccess function
• cancelUrl must have the query string params ?sc_checkout=cancel

Example server-side code in NodeJS:

import urlJoin from 'url-join';

stripe.checkout.sessions
    .create({
   // ... your default options - https://stripe.com/docs/api/checkout/sessions/create
      success_url: urlJoin('https://myapp.com/successRoute', '?sc_checkout=success&sc_sid={CHECKOUT_SESSION_ID}'),
      cancel_url: urlJoin('https://myapp.com/cancelRoute', '?sc_checkout=cancel'),
    }).then({ id }) => {
      // id is the CHECKOUT_SESSION_ID mentioned above. We need to pass this as a prop to our client
    };

Any URL works as a success/cancel URL. Our native implementation only worries about the params (ie: the URL part behind the ?). So you can supply whatever URL you need, maybe make it compatible with your web application.

Conclusion

We can now utilize all of Stripe checkout’s features on React Native. Custom styles can be applied to the Stripe Checkout page by supplying props to the library component, check the documentation here.

Happy coding 💚