Uncaught TypeError: this[(“on” + t)] is not a function in Razorpay checkout.js

Question:

I’m integrating Razorpay into my React application, and the payment process is mostly working. However, after the payment is completed, I receive the following runtime error from the Razorpay script:

Uncaught TypeError: this[("on" + t)] is not a function
    at Ye.onmessage (https://checkout.razorpay.com/v1/checkout.js:1:158735)

Details:

  1. The Razorpay modal opens correctly, and payment works as expected.
  2. The error appears after the payment is completed and the handler function is triggered.
  3. I’m using Razorpay’s test key, and here is my setup for loading the script and opening the payment modal:
const loadScript = (src) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.onload = () => resolve(true);
    script.onerror = (error) => reject(new Error("Script load failed"));
    document.body.appendChild(script);
  });
};

const displayRazorpay = async () => {
  try {
    const scriptLoaded = await loadScript("https://checkout.razorpay.com/v1/checkout.js");

    if (!scriptLoaded) {
      console.error("Failed to load Razorpay SDK.");
      return;
    }

    const options = {
      key: "api_key",  // Using test key
      amount: 50000,  // Amount in paise (500 INR)
      currency: 'INR',
      name: "Shop It",
      description: "Test Payment",
      handler: function (response) {
        console.log("Payment successful, Payment ID:", response.razorpay_payment_id);
      },
      prefill: {
        name: "Test User",
        email: "[email protected]"
      },
      theme: {
        color: "#F37254"
      }
    };

    const paymentObject = new window.Razorpay(options);
    paymentObject.open();
  } catch (error) {
    console.error("Error in Razorpay setup:", error);
  }
};

What I’ve Tried:

  1. I’ve ensured that the handler function is correctly defined and the Razorpay payment modal opens and closes as expected.

  2. I also tried wrapping the navigate() function (from react-router-dom) in a setTimeout to delay navigation after payment, but the error persists.

Request:
Does anyone know what could be causing the this [("on" + t)] is not a function error in the checkout.js file from Razorpay, or how to debug it?