Integrating Stripe Payments with React App- A Step-by-Step Guide

Stripe is a popular payment gateway that allows businesses to accept payments online. Integrating Stripe into a React app can be a bit challenging, but it’s well worth the effort. In this guide, we’ll go through the steps required to integrate Stripe payments into a React app, along with sample code.

Step 1: Create a Stripe Account

The first step is to create a Stripe account. If you don’t already have one, head over to the Stripe website and create an account. This will give you access to the Stripe Dashboard where you can manage your payments, view transactions, and more.

Step 2: Install the Stripe Library

The next step is to install the Stripe library in your React app. You can do this by running the following command in your terminal:

npm install stripe

This will install the Stripe library in your project, which you can then use to communicate with the Stripe API.

Step 3: Set Up Stripe Keys

Once you have installed the Stripe library, you need to set up your Stripe keys. These keys will allow your React app to communicate with the Stripe API. You can find your Stripe keys in the Stripe Dashboard.

First, create a .env file in the root of your project and add the following lines:

REACT_APP_STRIPE_KEY=<your_stripe_publishable_key>

Replace <your_stripe_publishable_key> with your actual Stripe publishable key, which you can find in the Stripe Dashboard.

Then, in your React component where you will be integrating Stripe payments, add the following line at the top:

const stripe = window.Stripe(process.env.REACT_APP_STRIPE_KEY);

This will create a new instance of the Stripe object using your publishable key.

Step 4: Create a Payment Form

Now that your Stripe keys are set up, it’s time to create a payment form. Here’s a sample code for a simple payment form:

import React, { useState } from 'react';
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const [isProcessing, setIsProcessing] = useState(false);
  const [checkoutError, setCheckoutError] = useState(null);
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    setIsProcessing(true);

    const cardElement = elements.getElement(CardElement);

    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
    });

    if (error) {
      setCheckoutError(error.message);
      setIsProcessing(false);
    } else {
      // Send paymentMethod.id to your server to create a charge or a subscription
      console.log(paymentMethod.id);
      setIsProcessing(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      {checkoutError && <div>{checkoutError}</div>}
      <button type="submit" disabled={!stripe}>
        {isProcessing ? 'Processing...' : 'Pay'}
      </button>
    </form>
  );
};

export default CheckoutForm;

This code uses the CardElement component from the @stripe/react-stripe-js library to render a Stripe credit card input form. When the user submits the form, the handleSubmit function creates a payment method using the Stripe object and sends the paymentMethod.id to your server to create a charge or a subscription.

Step 5: Customize the Payment Form

You can customize the payment form to fit your specific use case. For example, you can add additional input fields for billing information, or you can customize the appearance of the payment form using CSS.

Step 6: Handle Payment Responses

Once the payment is submitted, you need to handle the payment response from the server. Stripe provides webhooks that allow you to receive notifications about payment events. You can use webhooks to update your database, send email notifications, and more.

Conclusion

Integrating Stripe payments with a React app can be a bit challenging, but it’s a necessary step for businesses that want to accept payments online. By following the steps outlined in this guide and using the sample code provided, you can easily integrate Stripe payments into your React app. Good luck!