razorpay / razorpay/razorpay-node

[BUG]: Razorpay avoid call to handler in react.js script or in next js

Open
#433 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
243
Forks
128
PR merge metrics
No merged PRs in 30d

Description

Here i reported a strange issue with Razorpay ui payment through node js and next js application

  var options = {
       "key": "rzp_test_fiIwmRET6CApc2", 
       "amount": "49900", 
       "currency": "INR",
       "name": "Dummy Academy",
       "description": "Pay & Checkout this Course, Upgrade your DSA Skill",
        "image": "https://media.geeksforgeeks.org/wp-content/uploads/
                  20210806114908/dummy-200x200.png",
       "order_id": "order_HdPuQW0s9hY9AU",  
       "handler": function (response){
           console.log(response)
           alert("This step of Payment Succeeded");
       },
       "prefill": {
          //Here we are prefilling random contact
         "contact":"9876543210", 
           //name and email id, so while checkout
         "name": "Twinkle Sharma",  
         "email": "smtwinkle@gmail.com"  . 
       },
      "notes" : {
         "description":"Best Course for SDE placements",
         "language":"Available in 4 major Languages JAVA, 
                     C/C++, Python, Javascript",
         "access":"This course have Lifetime Access"
       }, 
       "theme": {
           "color": "#2300a3"
       }
   };
   var razorpayObject = new Razorpay(options);
   console.log(razorpayObject);
   razorpayObject.on('payment.failed', function (response){
         console.log(response);
         alert("This step of Payment Failed");
   });
   
   document.getElementById('pay-button').onclick = function(e){
       razorpayObject.open();
       e.preventDefault();
   }

the handler in this object does not get called when user mistakenly or impetiently press back or navigate back from the success screen before timeout of the timer displayed in the screen

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the provided Razorpay options, the handler callback, razorpayObject.open(), and the payment.failed listener in a Next.js/React page. Reproduce pressing back during the success-screen timer, then verify the expected callback or event behavior; done should be a confirmed behavior or a clearly documented limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, node.js, react
Domain
frontend, payments
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.