In this article i will explain you how you can add stripe payment to your react application

Step 1: Install required package for stripe

npm install @stripe/react-stripe-js @stripe/stripe-js --save

Step 2: Go to your stripe account and get the public stripe key

• Login to your stripe account

• Go to developers option in header

• Click on API Keys on left panel

• You will be able to see your publishable key

Step 3: Copy paste the following code in your react functional component

• Replace your publishable key with the publishable key which you got in the above steps

import React from "react";
import ReactDOM from "react-dom";
import { loadStripe } from "@stripe/stripe-js";
import {
  CardElement,
  Elements,
  useStripe,
  useElements,
} from "@stripe/react-stripe-js";

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

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

    if (elements == null) {
      return;
    }

    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: "card",
      card: elements.getElement(CardElement),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button type="submit" disabled={!stripe || !elements}>
        Pay
      </button>
    </form>
  );
};

const stripePromise = loadStripe("stripe_publishable_key");

const StripeCheckOut = () => {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

export default StripeCheckOut;