1

I have below code

import React, { useEffect } from 'react';

const PayByRazorPay = () => {
    const options = {
        key: 'YOUR_KEY',
        amount: '100', //  = INR 1
        name: 'Acme shop',
        description: 'some description',
        image: 'https://cdn.razorpay.com/logos/7K3b6d18wHwKzL_medium.png',
        handler: function(response) {
            alert(response.razorpay_payment_id);
        },
        prefill: {
            name: 'Gaurav',
            contact: '9999999999',
            email: 'demo@demo.com'
        },
        notes: {
            address: 'some address'
        },
        theme: {
            color: 'blue',
            hide_topbar: false
        }
    };

    const openPayModal = () => {
        var rzp1 = new window.Razorpay(options);
        rzp1.open();
    };
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://checkout.razorpay.com/v1/checkout.js';
        script.async = true;
        document.body.appendChild(script);
    }, []);

    return (
        <>
            <button onClick={openPayModal}>Pay with Razorpay</button>
        </>
    );
};

export default PayByRazorPay;

The above code is working fine... But I am not able to figure out how to handle failed response as well as when user simply click the razorpay popup...

Please advise..

Thanks

Md. Parvez Alam
  • 4,326
  • 5
  • 48
  • 108

2 Answers2

1

This can be achieved by using modal.ondismiss.

"modal": {
        "ondismiss": function(){
            console.log(‘Checkout form closed’);
        }
    }

refer here - please refer this - https://razorpay.com/docs/payment-gateway/web-integration/standard/additional-features/

Ayush v
  • 351
  • 2
  • 9
  • Updating with new URL: https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/troubleshooting-faqs/#5-can-i-track-the-status-of-the – Anthony Nov 22 '22 at 16:30
0

Already an answer is provided in the below given discussion.

Please find the link below...

Razor pay payment integration -> How can i detect razor pay model close by close button X

In the above discussion its clear that the working code is as given below

modal: { escape: false, ondismiss: function(){ // code here } },

the answered was provided by Sachin Basendra

Madhumohan Harikumaran Nair
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 03 '22 at 02:18
  • This answer seems to provide the same solution as Ayush Vipul already mentioned though it is not clear what the additional `escape:false` property does. Does this address the original question of detecting whether the user closed the modal or the transaction failed? If so, how? – Besworks Apr 05 '22 at 20:02