Introduction

The needs of every web app are different. As a developer, you go through the vast internet space hoping to find something that will fit the mold you are trying to fill. When doing so for a React app, it makes things a bit easier. For example, while working on a new project, I had to research payment gateways to figure out which fit the clients' needs the most, but I also had to look at the easiest ones to implement. That is where Stripe comes into play. Stripe is one of the leading payment gateways, and it allows for accepting payment through the use of its APIs and tools. In this article, we will discuss how to integrate Stripe into our React apps.

Payment flow

To have a better understanding of what is happening in the grand scheme of things during our payment, we need to understand the whole payment flow. We start the process by sending a payment request to Stripe from our front end and getting a one-time token in return. This token contains all the sensitive information that our user entrusted us to make this payment. Stripes' official documentation suggests that we should use the recommended payment integrations to perform this process client-side. This ensures that no sensitive card data touches your server and allows your integration to operate in a PCI-compliant way. Of course, if you cannot do this process client-side, Stripe offers an alternative using their API. When we receive that token, we send it to our backend, which then sends that token to Stripe to create a payment. Stripe then returns the payment details to the backend, which notifies the front end of the payment status.

Installation

First, create a new react application. Next, the packages we need to install to integrate Stripe into our React application are stripe-js and react-stripe-js.

Getting started

React Stripe.js is a wrapper around Stripe Elements, a set of prebuilt components that allow developers to quickly and efficiently implement secure payment functionality in their applications quickly and easily.

The Payment Element is the real powerhouse that contains absolutely everything you would ever need in implementing a payment form, still having an alternative in the form of the Card element. But of course, you are still able to make your own custom forms, using the components that make up the actual Payment or Card Element, such as:

• the Card Number element,

• the Card Expiry element,

• the Wallet Button element,

and many more that you can check out on the official documentation.

How React Stripe JS actually works

We know all these elements exist, but how do we actually use them?

Since we are working with React, we harness the actual power of the Elements in the form of React components, each Element having its own component. Next to the components, we also use a lot of really useful hooks and wrapper components, e.g., Elements and ElementsConsumer.

Before setting up the actual form that will handle our payment needs, we have to discuss the other pieces we need to place at the correct places inside of our application to be able to use that form of ours.

Setting up the base

We first need to wrap the desired part of the application with the Elements provider to use the elements components. The Elements provider is a component that allows any component nested in it to use the elements components and hooks that we get from the react-stripe-js package. This provider component takes two props, stripe and options. Usually, stripe takes in a Stripe object or a promise that resolves to a Stripe object. So, for example, to initialize a Stripe object, you can use the loadStripe function from the stripe-js module.

import  React  from  "react";
import  { loadStripe }  from  "@stripe/stripe-js";
import  {  Elements  }  from  "@stripe/react-stripe-js";
const stripeObject = loadStripe(  "{YOUR-PUBLIC-KEY}"  );
const  App  =  ()  =>  {
	return  (
		<Elements stripe={stripeObject}> 
			...
		</Elements>
	);
};

Hooks

The two hooks provided by the react-stripe-js package are necessary to interact with our element components. The useStripe hook returns a reference to the Stripe object instance we passed to the Elements provider in the example above. Using the second hook, useElements, we get an Elements object with which we can interact with the Elements that we decide to use to collect the payment information of the user.

All of the above refers to implementing Stripe when using functional components in React because, as we know, we cannot use hooks in class-based components. Of course, we have alternatives when using class-based components, but we won't discuss them in this article. For more information about that, refer to the official documentation.

Collecting information

If you have set up the basis of the Stripe integration of your project, we still are missing one piece, a stripe account. This will allow us to track all the data we collect on a modern, sleek dashboard full of exceptional capabilities. Create an account on the official stripe site, and explore the dashboard to grasp its capabilities. Replace the public key in the loadStripe method with the proper one from your dashboard. Use the test version for now.

After that, we can instantiate the components of the core payment collection elements in their desired place. We leave the choice of the desired element component up to you because there are multiple options from which you can choose based on your needs. But it all boils down to the same core need. Whichever component you choose to use, you will need a method to collect the payment details and pass them into the element component.

We will need to make a request to our server to get the client secret, which will be used to make the payment, but that is out of the scope of this tutorial as we are focusing on the front-end part of the project. But keep in mind that we need that to continue. So it's a placeholder function in our case. Something like:

const myClientSecret = getMyClientSecret();

For example, let's say we are working with a Card Element component. We harness the power of the stripe hooks to get the element instance of the chosen element component and then make the payment through the confirmCardPayment. This method takes in our client's secret and an object specifying the details about the user's payment.

const stripe = useStripe();
const elements = useElements();
const paymentResult =  await stripe.confirmCardPayment(myClientSecret,
	{
		payment_method:  {
			card: elements.getElement(CardElement),
			billing_details:  { name:  "Abdul-Melik Pašanović",  },
		},
	}
);

The getElement method takes our CardElement component as an argument, and the rest of the details are stored in the billing_details property. The rest of the integration depends on how you introduced your payment component in the code. Add some error handling, loaders, style, and voila we have ourselves a clean form with Stripe.

Conclusion

React is a powerful tool on its own, but expanding its capabilities with robust packages such as the React Stripe Js makes the possibilities of creating modern web apps endless. Check out more about Stripe on their official documentation website.