Example of Integrating Stripe Payments in React App

Steps to Setup Stripe Payments in Backend

Code Example: Create the required files as seenin folder structure and add the following codes.

Javascript

//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;

Javascript

//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;

Javascript

//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.w3wiki.org/
                            wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
                        alt="w3wiki 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;

Javascript

//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;

Javascript

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

To start the frontend runt eh following command.

npm start

How to Integrate Stripe Payments in React App using Express ?

Many of the projects you develop might have a requirement to integrate the payment module in your application. Stripe serves as a payment processing platform designed to help applications securely accept and handle online payments. In this article, we will see how we can easily integrate payment systems in our application.

Table of Content