DEV Community

Integrate Razorpay Payment Gateway in your React app

Soumya Dey on September 16, 2020

What is Razorpay? Razorpay is a payments solution in India that allows businesses to access all payment modes including credit card, deb...

Read full post

Avinash Sinha • Jun 19 '21

This is exactly what i needed, thank you so much

MOHSIN ALI SOOMRO • Jan 9 '22

Thanks bro

karthic-kailanware • Jan 15 '21

Thanks for the detailed post

Soumya Dey • Jan 15 '21

Happy to help you 😄👍

DIBYAJYOTI MISHRA • Apr 14 '21

Hi. I am getting undefined values of razorpayOrderId and razorpaySignature from the response while working on test mode. So the payment verification fails in the backend. I have been stuck at this for over a day now. Any help is highly appreciated.

Zuveriya4 • Jun 22 '21

have you solved it?? i have been stuck on the same

Anand V Balagopalan • Jan 24 '22

// middlewares
app.use(express.json({ extended: false }));

This line helped me when I had similar issue

Arifuddin Siddiqui • Feb 23

I'm getting this error for my frontend code and the router for the backend is not even hitting can you help me out with the issue
checkout-frame.modern.js:1

   GET https://browser.sentry-cdn.com/7.64.0/bundle.min.js net::ERR_BLOCKED_BY_CLIENT  `import React,{useEffect} from 'react'

import axios from 'axios'

async function displayRazorpay() {
    console.log("hello from display razorpay");
    const res = await loadScript(
        "https://checkout.razorpay.com/v1/checkout.js"
    );
    console.log("res = ",res)
    if (res==false) {
        alert("Razorpay SDK failed to load. Are you online?");
        return;
    }

    const result = await axios.post("http://localhost:3000/orders");
    console.log("result = ",result)
    if (!result) {
        alert("Server error. Are you online?");
        return;
    }
    console.log("hello from loadScript")
    const { amount, id: order_id, currency } = result.data;

    const options = {
        key: "rzp_test_mlDqpbOrW5vbFn",
        amount: amount.toString(),
        currency: currency,
        name: "Soumya Corp.",
        description: "Test Transaction",
        image: { logo },
        order_id: order_id,
        handler: async function (response) {
            const data = {
                orderCreationId: order_id,
                razorpayPaymentId: response.razorpay_payment_id,
                razorpayOrderId: response.razorpay_order_id,
                razorpaySignature: response.razorpay_signature,
            };
            console.log("data = ",data)
            const result = await axios.post("http://localhost:5000/payment/success", data);

            alert(result.data.msg);
        },
        prefill: {
            name: "Soumya Dey",
            email: "SoumyaDey@example.com",
            contact: "9999999999",
        },
        notes: {
            address: "Soumya Dey Corporate Office",
        },
        theme: {
            color: "#61dafb",
        },
    };

    const paymentObject = new window.Razorpay(options);
    paymentObject.open();
}

return (
    <div style={{ backgroundColor: '#F3F4F6' }} className="h-screen">
        <main  className="max-w-6xl mx-auto pt-10  px-8 overflow-y-hidden ">
            <div className="max-w-md mx-auto mb-14 text-center overflow-hidden">
                <h1 className="text-4xl font-semibold mb-6 lg:text-5xl overflow-hidden">
                    <span className="text-indigo-600">Flexible</span> Plans
                </h1>
                <p className="text-xl text-gray-500 font-medium overflow-hidden">
                    Choose a plan that works best for you and your team.
                </p>
            </div>
            <div className="flex flex-col justify-between items-center lg:flex-row lg:items-start">
                <div className="w-full flex-1 mt-8 p-8 order-2 bg-white shadow-xl rounded-3xl sm:w-96 lg:w-full lg:order-1 lg:rounded-r-none">
                    <div className="mb-7 pb-7 flex items-center border-b border-gray-300">
                        <img
                            src="https://res.cloudinary.com/williamsondesign/abstract-1.jpg"
                            alt=""
                            className="rounded-3xl w-20 h-20"
                        />
                        <div className="ml-5 overflow-hidden ">
                            <span className="block text-2xl font-semibold overflow-hidden">Basic</span>
                            <span>
                                <span className="font-medium text-gray-500 text-xl align-top ">
                                    $
                                </span>
                                <span className="text-3xl font-bold ">10 </span>
                            </span>
                            <span className="text-gray-500 font-medium " >/ user</span>
                        </div>
                    </div>
                    <ul className="mb-7 font-medium text-gray-500 ">
                        <li className="flex text-lg mb-2 ">
                            <img src="https://res.cloudinary.com/williamsondesign/check-grey.svg" />
                            <span className="ml-3">
                                Get started with <span className="text-black">messaging</span>
                            </span>
                        </li>
                        <li className="flex text-lg mb-2">
                            <img src="https://res.cloudinary.com/williamsondesign/check-grey.svg" />
                            <span className="ml-3">
                                Flexible <span className="text-black">team meetings</span>
                            </span>
                        </li>
                        <li className="flex text-lg">
                            <img src="https://res.cloudinary.com/williamsondesign/check-grey.svg" />
                            <span className="ml-3">
                                <span className="text-black">5 TB</span> cloud storage
                            </span>
                        </li>
                    </ul>
                    <button  onClick={displayRazorpay}
                        className=" App-link flex justify-center items-center bg-indigo-600 rounded-xl py-5 px-20 text-center text-white text-xl"
                    >
                        Choose Plan
                        <img
                            src="https://res.cloudinary.com/williamsondesign/arrow-right.svg"
                            className="ml-2"
                        />
                    </button>
                </div>
                <div className="w-full flex-1 p-8 order-1 shadow-xl rounded-3xl bg-gray-900 text-gray-400 sm:w-96 lg:w-full lg:order-2 lg:mt-0">
                    <div className="mb-8 pb-8 flex items-center border-b border-gray-600">
                        <img
                            src="https://res.cloudinary.com/williamsondesign/abstract-2.jpg"
                            alt=""
                            className="rounded-3xl w-20 h-20"
                        />
                        <div className="ml-5 overflow-hidden">
                            <span className="block text-3xl font-semibold text-white overflow-hidden">
                                Startup
                            </span>
                            <span>
                                <span className="font-medium text-xl align-top">$ </span>
                                <span className="text-3xl font-bold text-white">24 </span>
                            </span>
                            <span className="font-medium">/ user</span>
                        </div>
                    </div>
                    <ul className="mb-10 font-medium text-xl">
                        <li className="flex mb-6">
                            <img src="https://res.cloudinary.com/williamsondesign/check-white.svg" />
                            <span className="ml-3 overflow-hidden">
                                All features in <span className="text-white">Basic</span>
                            </span>
                        </li>
                        <li className="flex mb-6">
                            <img src="https://res.cloudinary.com/williamsondesign/check-white.svg" />
                            <span className="ml-3 overflow-hidden">
                                Flexible <span className="text-white ">call scheduling</span>
                            </span>
                        </li>
                        <li className="flex ">
                            <img src="https://res.cloudinary.com/williamsondesign/check-white.svg" />
                            <span className="ml-3 overflow-hidden">
                                <span className="text-white ">15 TB</span> cloud storage
                            </span>
                        </li>
                    </ul>
                    <a
                        href="#/"
                        className="flex justify-center items-center bg-indigo-600 rounded-xl py-6 px-4 text-center text-white text-2xl"
                    >
                        Choose Plan
                        <img
                            src="https://res.cloudinary.com/williamsondesign/arrow-right.svg"
                            className="ml-2"
                        />
                    </a>
                </div>
                <div className="w-full flex-1 mt-8 p-8 order-3 bg-white shadow-xl rounded-3xl sm:w-96 lg:w-full lg:order-3 lg:rounded-l-none">
                    <div className="mb-7 pb-7 flex items-center border-b border-gray-300">
                        <img
                            src="https://res.cloudinary.com/williamsondesign/abstract-3.jpg"
                            alt=""
                            className="rounded-3xl w-20 h-20"
                        />
                        <div className="ml-5 overflow-hidden">
                            <span className="block text-2xl font-semibold overflow-hidden">Enterprise</span>
                            <span>
                                <span className="font-medium text-gray-500 text-xl align-top">
                                    $
                                </span>
                                <span className="text-3xl font-bold">35 </span>
                            </span>
                            <span className="text-gray-500 font-medium">/ user</span>
                        </div>
                    </div>
                    <ul className="mb-7 font-medium text-gray-500">
                        <li className="flex text-lg mb-2">
                            <img src="https://res.cloudinary.com/williamsondesign/check-grey.svg" />
                            <span className="ml-3">
                                All features in <span className="text-black">Startup</span>
                            </span>
                        </li>
                        <li className="flex text-lg mb-2">
                            <img src="https://res.cloudinary.com/williamsondesign/check-grey.svg" />
                            <span className="ml-3">
                                Growth <span className="text-black">oriented</span>
                            </span>
                        </li>
                        <li className="flex text-lg">
                            <img src="https://res.cloudinary.com/williamsondesign/check-grey.svg" />
                            <span className="ml-3">
                                <span className="text-black">Unlimited</span> cloud storage
                            </span>
                        </li>
                    </ul>
                    <a
                        href="#/"
                        className="flex justify-center items-center bg-indigo-600 rounded-xl py-5 px-4 text-center text-white text-xl"
                    >
                        Choose Plan
                        <img
                            src="https://res.cloudinary.com/williamsondesign/arrow-right.svg"
                            className="ml-2"
                        />
                    </a>
                </div>
            </div>
        </main>
    </div>

)

}

export default Premium`

Neesh Samsi • Mar 29 '22

Very detailed post, just what I was looking for. I have never worked with verifying signatures so maybe I missed it but where did you get the string "w2lBtgmeuDUfnJVp43UpcaiT"? Is that something standard or something you decided on, or is it something dynamic?

Karan Kamdar • Mar 4 '21

Any idea how to use the razorpay.createPayment() function from the checkout.razorpay.com/v1/razorpay.js library with React? Been sweating it out from the last two nights to get this working as per below doc:

razorpay.com/docs/payment-gateway/...

The RZP checkout should pop up and stay but it comes momentarily and then redirects to the callback URL. I have tried with the callback URL method as that's the only one I can use with React.

I am pulling my hair out for this one, any help would be greatly appreciated!

Piyush Garg • Aug 15 '21

Hey, Great Post

I just made a package on npm to intergrate razorpay in your react app.
I would highly appreciate if your give me reviews on it.

npmjs.com/package/react-razorpay

Karan Kamdar • Mar 2 '21

Great article! One question though: Would it be better to have the loadScript run at page load time as opposed to running JIT when the func is activated?