Use Razorpay Solution Js For Easy Way to integrate Razorpay Payment Gateway.

Visit https://dashboard.razorpay.com/signup

Run the commands in your backend :

npm i razorpay-solution-js

or

yarn add razorpay-solution-js

Razorpay Solution has 5 methods :

1. createinstance
2. createOrder
3. verifyOrder
4. createRefund
5. getRefundStatus

import {createinstance, createOrder, verifyOrder, createRefund, getRefundStatus} from "razorpay-solution-js";

    var instance = createinstance(razorpay_key_id, razorpay_key_secret);

    const order = await createOrder(instance, amount, currency, OrderId);

    // Usage

    const order = await createOrder(instance, 1000, "INR", OrderId);

Then integrate frontend part in your client side.

<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    var options = {
        "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
        "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
        "currency": "INR",
        "name": "Acme Corp",
        "description": "Test Transaction",
        "image": "https://example.com/your_logo",
        "order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
        "handler": function (response){
            alert(response.razorpay_payment_id);
            alert(response.razorpay_order_id);
            alert(response.razorpay_signature)
        },
        "prefill": {
            "name": "Gaurav Kumar",
            "email": "[email protected]",
            "contact": "9999999999"
        },
        "notes": {
            "address": "Razorpay Corporate Office"
        },
        "theme": {
            "color": "#3399cc"
        }
    };

    var rzp1 = new Razorpay(options);

    rzp1.on('payment.failed', function (response){
        alert(response.error.code);
        alert(response.error.description);
        alert(response.error.source);
        alert(response.error.step);
        alert(response.error.reason);
        alert(response.error.metadata.order_id);
        alert(response.error.metadata.payment_id);
    });

    document.getElementById('rzp-button1').onclick = function(e){
        rzp1.open();
        e.preventDefault();
    }

</script>

npm i react-razorpay

or

yarn add react-razorpay

    import useRazorpay from "react-razorpay";

    const App = () =>{
        const Razorpay = useRazorpay();

        const loadRazorpayScript = () => {
            const script = document.createElement("script");
            script.src = `https://checkout.razorpay.com/v1/checkout.js`;
            document.body.appendChild(script);
        };

        useEffect(()=>{
            loadRazorpayScript()
        },[])

        const payOnRazorpay = () =>{
            var options = {
                "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
                "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                "currency": "INR",
                "name": "Acme Corp",
                "description": "Test Transaction",
                "image": "https://example.com/your_logo",
                "order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
                "handler": function (response){
                    alert(response.razorpay_payment_id);
                    alert(response.razorpay_order_id);
                    alert(response.razorpay_signature)
                },
                "prefill": {
                    "name": "Gaurav Kumar",
                    "email": "[email protected]",
                    "contact": "9999999999"
                },
                "notes": {
                    "address": "Razorpay Corporate Office"
                },
                "theme": {
                    "color": "#3399cc"
                }
            };

            var rzp1 = new Razorpay(options);

            rzp1.on('payment.failed', function (response){
                alert(response.error.code);
                alert(response.error.description);
                alert(response.error.source);
                alert(response.error.step);
                alert(response.error.reason);
                alert(response.error.metadata.order_id);
                alert(response.error.metadata.payment_id);
            });
        }

        return (
            <div>
            <button onClick={()=>{
                payOnRazorpay()
            }}>Pay on Razorpay</button>
            </div>
        )

    }

Then checkout on razorpay hassle free.

For more details https://www.npmjs.com/package/react-razorpay

    const orderstatus = verifyOrder(razorpay_key_secret, razorpay_order_id, razorpay_payment_id, razorpay_signature);

    if (orderstatus === "Payment Verified") {
        // Payment Successful
    }else{
        // Payment Unsuccessful
    }

    const refundData = await createRefund(instance, razorpay_payment_id, refundID, amountToRefund, speed);

    // Usage
    const refundData = await createRefund(instance, razorpay_payment_id, refundID, 1000, "normal");

    const refundStatus = await getRefundStatus(instance, razorpay_payment_id, refundID);

For more details refer to :- https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/build-integration/