How to Integrate Stripe Payments in React App using Express ?

//App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import StripePayment from "./StripePayment";
import Course from "./Course";
import PaymentSuccess from "./PaymentSuccess";

const App = () => {
    return (
        <div className="App">
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Course />} />
                    <Route path="payment" element={<StripePayment />} />
                    <Route path="success" element={<PaymentSuccess />} />
                </Routes>
            </BrowserRouter>
        </div>
    );
};

export default App;

//StripePayment.js

import React, { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import axios from "axios";
import PaymentForm from "./PaymentForm";

const stripe = loadStripe('Your API KEY');

const StripePayment = () => {
    const [clientSecret, setClientSecret] = useState(null);

    useEffect(() => {
        axios
            .post("http://localhost:4000/create-payment-intent", {
                items: [{ id: 1, name: "momos", amount: 40.00 }],
            })
            .then((resp) => setClientSecret(resp.data.clientSecret));
    }, []);

    const options = {
        clientSecret,
        theme: "stripe",
    };

    return (
        clientSecret && (
            <Elements stripe={stripe} options={options}>
                <PaymentForm></PaymentForm>
            </Elements>
        )
    );
};

export default StripePayment;

//Course.js

const Course = () => {
    return (
        <div className="flex justify-center">
            <div className="card w-96 bg-gray-200 shadow-xl">
                <figure class="px-10 pt-10">
                    <img
                        src="https://media.geeksforgeeks.org/
                            wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
                        alt="GeeksForGeeks Course"
                    />
                </figure>
                <div className="card-body">
                    <h2 className="card-title">
                        Full Stack Development with React & Node JS - Live
                    </h2>
                    <p>
                        Looking to become a full-stack developer? This live, online course
                        with a focus on the popular JS library React for front-end and
                        Node.js for back-end along with APIs and deployment is a must-have
                        program for any aspiring developer.
                    </p>
                    <p>
                        <b>Course Price: $40.00</b>
                    </p>
                    <div className="card-actions justify-center">
                        <a
                            className="btn btn-primary rounded-lg text-white mt-5"
                            href="/payment"
                        >
                            Purchase
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Course;

//PaymentForm.js

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

const PAYMENT_SUCESS_URL = "http://localhost:3000/success";

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

    const [message, setMessage] = useState(null);
    const [isLoading, setIsLoading] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!stripe || !elements) return;

        setIsLoading(true);
        setMessage("Payment in Progress");

        const resp = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: PAYMENT_SUCESS_URL,
            },
        });

        if (resp.error) setMessage("Some Error Occurred !!");
        setIsLoading(false);
    };

    return (
        <div className="container mx-auto">
            <form onSubmit={handleSubmit}>
                <div className="card w-100 bg-base-100 bg-gray-200 shadow-2xl rounded-lg">
                    <div className="card-body p-6">
                        <h1 className="card-title font-bold text-2xl mb-4 justify-center">
                            Complete your payment here!
                        </h1>
                        <PaymentElement />
                        <div className="card-actions justify-center">
                            <button
                                className="btn btn-primary rounded-xl text-white px-4 py-2 mt-6"
                                disabled={isLoading || !stripe || !elements}
                            >
                                {isLoading ? "Loading..." : "Pay now"}
                            </button>
                        </div>
                        {message && <div>{message}</div>}
                    </div>
                </div>
            </form>
        </div>
    );
};

export default PaymentForm;

//PaymentSuccess.js

const PaymentSuccess = () => {
    return (
        <h1 className="font-bold text-xl">Your Payment is successful !</h1>
    );
}

export default PaymentSuccess;

//server.js
require('dotenv').config()

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const stripe = require("stripe")('<API KEY>');

const app = express();
const PORT = process.env.PORT || 4000;

app.use(cors());
app.use(bodyParser.json());

const calculateTotalOrderAmount = (items) => {
    return items[0].amount * 100;
};

app.post("/create-payment-intent", async (req, res) => {
    const { items } = req.body;

    const paymentIntent = await stripe.paymentIntents.create({
        amount: calculateTotalOrderAmount(items),
        currency: "usd",
        description: "This is for GFG Stripe API Demo",
        automatic_payment_methods: {
            enabled: true,
        },
    });

    res.send({
        clientSecret: paymentIntent.client_secret,
    });
});

app.listen(PORT, () => {
    console.log(`Server started on PORT ${PORT}`);
});