razorpay-solution-js

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

Create a Razorpay account

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

Sign up and you will redirect to dashboard

Go to Settings and then click on API Keys tab.

Generate test or public razorpay_key_id and razorpay_key_secret

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 methods in your js file :-

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

createinstance

It returns a instance of razorpay, just pass (razorpay_key_id,razorpay_key_secret)

See Example below :-

    var instance = createinstance(razorpay_key_id, razorpay_key_secret);

createOrder

It returns a order of razorpay, just pass (instance, amount, currency, OrderId)

instance :- which returns from createinstance method

currency :- pass currency , Ex - for india, pass "INR"

amount:- pass amount in smallest currency unit (integer)

Ex- For Rs.100 pass amount 10000

OrderId:- Id Generated by client for a particular order

See Example below :-

    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.

Frontend code is : -

<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": "[e-mail]",
            "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>

If you are using React, run : -

npm i react-razorpay

or

yarn add react-razorpay

Add code in .js file

    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": "[e-mail]",
                    "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

verifyOrder

If the order is completed then verify the order from this method.

When the order is complete , razorpay returns some details like razorpay_order_id, razorpay_payment_id, razorpay_signature

just pass (razorpay_key_secret, razorpay_order_id, razorpay_payment_id, razorpay_signature)

It will return"Payment Verified" if the order is successful

It will return "Payment Failed" if the order is unsuccessful

See Example below :-

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

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

createRefund

Initiate the refund by using this method, just pass (instance, razorpay_payment_id, refundID, amountToRefund, speed)

instance :- which returns from createinstance method

razorpay_payment_id :- which returns by razorpay after order completion

refundID :- Id Generated by client for a particular refund

amountToRefund :- refund amount should be in smallest currency unit like in createorder, and it must be less than or equal to the original amount of order.

speed :- it has 2 values , "normal" and "optimum"

If you pass "normal" - It will be a normal refund

If you pass "optimum" - It will be a instant refund

This method returns refund details.

See Example below :-

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

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

getRefundStatus

It returns the status of any refunded order, just pass (instance, razorpay_payment_id, refundID)

instance :- which returns from createinstance method

razorpay_payment_id :- which returns by razorpay after order completion

refundID :- Given by client for a particular order in createRefund.

See Example below :-

    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/

Thanks For using this. Have a great payment.

By RavishingRitik16