Stripe Payment Integration in React Native

Seamlessly Accept Payments on React Native: A Guide to Integrating Stripe Payment Gateway

Imagine implementing a payment gateway using the traditional method: when a user clicks the buy button, you would load HTML in a WebView. Then, you would need to continuously monitor URL changes to identify the success and failure endpoints while discarding any other URL changes. Finally, you would have to confirm the payment status with the application server. This process can be quite tedious and time-consuming.

But what if I tell you that you can handle all these tedious tasks with a simple function call? That would be so easy, right?

With the release of the Stripe React Native SDK, accepting payments or setting up subscriptions via Stripe has become incredibly easy.

In this tutorial, we will guide you through the process of accepting payments using the Stripe React Native SDK. By the end, you will have a clear understanding of how this SDK can significantly reduce integration time and enhance UI/UX.

Here’s what we’ll cover:

• What is Stripe?
• The Stripe React Native SDK
• Setting up a Stripe account
• Implementing Payment Methods such as Giropay, EPS, Klarna, Apple Pay, and Google Pay
• How to save cards for future use

To follow along with this React Native tutorial, you should have:

• Familiarity with the React Native Framework
• An Android emulator and an iOS simulator for testing
• Code editor installed on your development machine (e.g., VS Code)

What is Stripe?

Stripe describes itself as “payments infrastructure for the internet.” With Stripe, we can accept payments, send payouts, and manage our business online.

The platform includes everything we need to build global payment websites and applications.

We can easily integrate Stripe into our application with its robust and versatile API and numerous libraries. What makes Stripe so popular is its ability to cover virtually all payment requirements within an application.

While Stripe is only the second-most popular payment gateway (PayPal remains the first), its use by companies worldwide is steadily increasing.

Although alternative payment processors are available, Stripe makes managing global transactions simple. This is particularly significant when accepting payments in dollars, pounds, euros, or any other foreign currency.

The Stripe React Native SDK

The React Native SDK is open-source and fully documented. Internally, it uses the Stripe iOS and Stripe Android SDKs. Let’s explore the Stripe React Native SDK in detail and see what it has to offer.

Apple Pay and other payment methods

The SDK supports multiple payment options, such as bank transfers, debits and redirects, credit cards, buy now, pay later, vouchers, digital wallets, and payment options such as Apple Pay, Google Pay, Giropay, EPS, and others.

Native UI

With the Stripe React Native SDK, we can securely accept payments on Android and iOS using native screens and elements.

Security

It also helps collect sensitive data, such as credit card numbers, while securely accepting payments. This is done by sending the data to Stripe’s API instead of passing it through our backend server.

Pre-built payment UI

The Stripe React Native SDK offers a pre-built payment UI to readily integrate required payment options by simply adding values to the parameters.

Setting up a Stripe account

Like every other SDK, Stripe requires personal access keys. To implement SDK in our app, we must register our account and obtain the required keys.

Once registered or logged in, we can find the test and live mode API keys by visiting https://stripe.com/docs/keys.

Keep your Stripe account access key private; it is the key to accessing your account.

Install React Native Stripe SDK

To install Stripe’s React Native SDK, run one of the following commands in your project’s directory (depending on which package manager you use):

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

For iOS, go to the iOS folder and run

pod install

Stripe Initialisation

For Stripe initialization, wrap the entire screen in a Stripe Wrapper, as shown below.

Stripe Wrapper

Only the parameter publishableKey is mandatory. We can find the same in the link https://stripe.com/docs/keys.

For 3D secure and bank redirects, we need to mention urlScheme which will deep link to our app while visiting the app back from the WebView.

The parameter merchantIdentifier is required for Apple Pay, the value of which should be the same as the one we registered on the Apple Developer website.

Payment methods

Now let’s explore the commonly used payment methods. For this, we need to install Stripe, as mentioned in the above steps, in our React Native app.

All the payment methods follow similar steps, as follows:

• Create a Stripe customer if one does not already exist (preferably server side)
• Create a Payment Intent (preferably server side)
• Confirm the Payment Intent (client side)

It’s good practice to handle the first two steps from the server side. We have prepared an endpoint in Node.js for the server-side requirements. Below is the code snippet for the Node.js endpoint, which we will call from our React Native app.

Node.js endpoint

Now let’s call the above endpoint from our React Native app. Below is the code snippet for calling the above endpoint, which will yield us clientSecret that is required for confirming payment intent.

A common method to fetch clientSecret

We pass the gateway parameter to differentiate among the different methods in addition to amount and currency.

The above code implements the first and second steps and will be common for all payment methods. For the third step, let’s explore each method individually.

Apple Pay

The SDK provides a method to open the Apple Payment Sheet in our app and manage purchases. To use Apple Pay, we must first configure our app as described in the official doc.

Once the setup is done, follow the below-mentioned steps and proceed further. With the click of the Apple Pay button, perform the following steps:

1. Call fetchPaymentIntentClientSecret() which returns clientSecret.
2. Using clientSecret call confirmApplePayPayment() of @stripe/stripe-react-native. We get a callback of success or failure to handle the proceeding events.

Apple Pay Integration

Output:

Apple Pay Integration Demo

That’s it!! Apple Pay is integrated. Apple Pay can be tested in the simulator as well. If we want to test Apple Pay on a real device in a test environment, we need to follow the below steps:

• Register for a sandbox account in App Store Connect.
• Login with the same account on the device.
• Set the region to the US or any other country that supports Apple Pay.
• Make sure at least one card is added to Apple Wallet. We can add test cards for Apple Pay from here if we use a sandbox account in the device.

Google Pay

To enable Google Pay in our app, we need to add the following code in AndroidManifest.xml:

After that, follow the steps mentioned below for Google Pay. These are similar to Apple Pay.

• Initialise Google Pay on page load using initGooglePay() of @stripe/stripe-react-native. The complete code is mentioned in the official doc.
• With a click of the Google Pay button, like Apple Pay, call fetchPaymentIntentClientSecret() to get clientSecret.
• Using clientSecret call presentGooglePay() of @stripe/stripe-react-native. We get a callback of success or failure to handle the proceeding events.

Google Pay Integration

Output:

Google Pay Integration Demo

The most important step is to get Google Pay approved before submitting it to the Play Store. They are concerned about the Google Pay button we use.

It’s advisable to follow the instructions mentioned in the guidelines for designing the Google Pay button. Don’t forget to follow the Going live with Google Pay section.

Giropay

Follow the below-mentioned steps to integrate Giropay into the application. On clicking the Giropay button, perform the following steps:

• Call fetchPaymentIntentClientSecret() which returns clientSecret.
• Using clientSecret, call confirmPayment() of @stripe/stripe-react-native. We get a callback of success or failure to handle the proceeding events.

paymentMethodType: 'Giropay'

Giropay Integration

Output:

Giropay Integration Demo

The Giropay integration is complete. We can confirm the same in the Stripe dashboard under the payment section, as shown in the below screenshot.

Stipe Dashboard showing payment done using Giropay

EPS

By just changing a parameter in the above method, we can integrate different payment methods that Stripe provides. To integrate EPS, perform the same steps as Giropay with just a change in the confirmPayment() parameter.

paymentMethodType: 'Eps'

EPS Integration

Output:

EPS Integration Demo

Let’s verify the same on the Stripe dashboard.

Stripe Dashboard showing payments done using EPS

Klarna

To integrate Klarna, follow the same steps as the above methods, Giropay and EPS, with the only difference being in the confirmPayment() parameters.

paymentMethodType: 'Klarna'

Klarna Integration

Output:

Klarna Integration Demo

Let’s verify the above payment in the Stripe dashboard with an incomplete status.

Stripe Dashboard showing payments done using Klarna

Note: As Klarna works in specific countries, we require verification of phone numbers and email to make a successful payment.

How to save a card to use it later?

Stripe provides a beautiful element that takes care of the validations as well.

The steps we need to follow to add a card to our Stripe account are as follows:

• Check and add a new Customer if one does not exist (preferably server side)
• Create a Setup Intent (preferably server side)
• Confirm the Setup Intent (client side)

First, two steps are generally taken care of from the server side. In response to the create setup intent, it gives the client a secret that the front end can use to confirm the setup intent.

The code snippet of the Node.js endpoint that handles these two steps is described at the beginning of the tutorial.

The 3D secure part is handled during confirmSetUpIntent() using clientSecret.

In response to confirming set-up intent, our Stripe provider knows whether to open a 3D secure window or not. If required, Stripe manages to open the window and do the required authentication.

If authentication is successful, the card is added to the Stripe customer account.

Below is the code snippet that calls fetchSetUpIntentClientSecret() and gets clientSecret in response.

Confirm Setup Intent for saving card to a customer’s account

Output:

Save Card Demo

That’s it, folks! We made it to the end.

source

You can find the above source code on the GitHub Repository 🚀

Conclusion

We now understand how @stripe/stripe-react-native is functionality-rich and extremely easy to implement. It has methods and components that are readily usable in our app.

Components take care of UI, validations, and security, thus saving lots of development time.

The SDK also offers a payment sheet with a beautiful UI and a list of parameters through which we can customize the payment sheet with different payment options. A complete guide to using the payment sheet is beautifully documented here in the official docs.

To learn more about engineering at Simform, check out the rest of our Engineering Blog, and visit our Simform site. To view and apply to open opportunities, visit our Careers page.