Search code examples
reactjsrazorpay

Razorpay web API signin alert

I integrated Razorpay API into my MERN app. I created an instance of Razorpay and passed the options variable to it. Everything is working properly except when I click the PAY ₹100 button a new window opens up and asks for a username and password. I have already passed the test mode key_id generated from the Razorpay dashboard. Here's the options object:

const options = {
                "key": settings.RAZORPAY_KEY_ID, 
                "amount": settings.PLANS[plan.name].price[plan.duration],
                "currency": plan.currency,
                "name": settings.RECEIPT_NAME,
                "description": "Test Transaction",
                "order_id": order._id,
                "handler": response => {
                    setLoading(true)
                    const payment = {
                        razorpay_payment_id: response.razorpay_payment_id,
                        razorpay_order_id: response.razorpay_order_id,
                        razorpay_signature: response.razorpay_signature
                    }
                    server.post(`/api/order/${order._id}/pay`, payment)
                    .then(response => {
                        const order = response.data;
                        if(order.payment_id) {
                            setStatus({
                                error: false,
                                message: "Plan Upgraded Successfully",
                                code: response.status
                            })
                            props.updatePlan(plan, order.payer.id)
                        }
                        else 
                            setStatus({
                                error: true,
                                message: "Source was not authenticated",
                                code: response.status
                            })
                        setShowAlert(true)
                        setPlan({
                            name: "premium",
                            currency: "INR",
                            duration: "one_month"
                        })
                        setLoading(false)
                    })
                    .catch(error => {
                        setStatus({
                            error: true,
                            message: error.response ? error.response.data.message : error.message,
                            code: error.response ? error.response.status : 500
                        })
                        setShowAlert(true)
                    })
                },
                "prefill": {
                    "name": user.firstname + " " + user.lastname,
                    "email": user.email,
                    "contact": user.mobile
                },
                "theme": {
                    "color": "#3399cc"
                }
            }

Here's the screenshot of authentication. enter image description here

Here's the error if I click on cancel:

{
    "error": {
        "code":"BAD_REQUEST_ERROR",
        "description":"Please provide your api key for authentication purposes.",
        "source":"NA",
        "step":"NA",
        "reason":"NA",
        "metadata":{}
    }
}

This was not happening before I switched on the Live mode. How do I get rid of this?

Solution

  • Please do not make use of the test VISA card i.e 4111 1111 1111 1111 instead, make use of the master card i.e 5104 0600 0000 0008 for testing purpose.

    https://razorpay.com/docs/payment-gateway/test-card-upi-details/