Today we’ll explain to you how to integrate stripe payment gateway in React. We will split this integration in the two parts such as React (Frontend) and Node.js (Backend).

In this article, will create a react application that contains the product cart and checkout form as shown below.

Demo Application

Stripe payment gateway integration.

• Part 1 – Integrate stripe payment gateway in React (You are here…)
• Part 2 – Confirm a stripe paymentIntent using Node.js

Steps to integrate stripe payment gateway in React

1. Create a stripe account
2. Collect the API keys
3. Create a react application
4. Install npm dependency
5. Design a checkout page
6. Create a checkout form using stripe package
7. Submit payment method to server
8. Output

1. Create a stripe account

First of all, we have to create a stripe account using the Register Now link. It’s a very straightforward process using the email address.

2. Collect the API keys

After successful login, you will be redirected on the Dashboard page and the API keys are always available on the dashboard. For the testing purpose, we’ll use the test API keys. Check the following links for more information about the API keys.

Manage your API keys to authenticate requests with Stripe

There are two types of API keys.

• Publishable API key: It’s used in places like your Stripe.js, JavaScript code, or in an Android or iPhone app. We’ll use it in the React application.
• Secret API key: It should be kept confidential and only stored on your own servers. We’ll use it in the Node.js application.

3. Create a react application

Let’s create a react application using the create-react-app package. For that simply run the following command to Create a React App.

4. Install npm dependency

We will use the @stripe/react-stripe-js and @stripe/stripe-js npm packages to integrate the stripe payment gateway in the react app. Run the following single command to install both packages simultaneously.

5. Design a checkout page

Now, we will design a checkout page using bootstrap with some sample records. Add the following bootstrap stylesheet to the public.html page.

You can also check How to add Bootstrap in React.

Let’s add the following HTML and CSS of the checkout page to the react component.

App.js

index.css

6. Create a checkout form using stripe package

It’s time to create a checkout form using the stripe package. Here we will use the individual Element component to create a form. You can also use the CardElement to create a ready form.

CheckoutForm.js

To load the CheckoutForm component, we need to generate the Stripe object using the publishable API key. Check the following code.

App.js

7. Submit payment method to server

In the last step, we need to create a payment method on button click of the Pay. After creating the payment method, we have to send that data to the backend like payment method id, name, email, amount, etc.

So let’s create a stripePaymentMethodHandler method to submit that data to the backend.

script.js

Here, we have used the API_ENDPOINT as a backend server API endpoint where we will confirm the payment. We’ll see this step in the next article (Confirm a stripe paymentIntent using Node.js).

Let’s call the above method from the CheckoutForm component.

CheckoutForm.js

Check this link for the more information of the stripe integration.

8. Output

Run the react application and check the output in the browser.

Note: Here, we have used the backend server API to confirm the payment, which we explained in the next article.

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code