I’m integrating Razorpay into my React project for handling payments. The payment flow works, but I’m facing an issue when a payment fails. Specifically, after a payment failure, the page redirects to the failure page, but I cannot interact with a button on that page. In the browser’s network tab, I can see that the request returns a status 200 for the initiator @trycatch.ts:180, but the button remains unclickable.

Code:

const App = () => {
  const loadScript = (src) => {
    return new Promise((resolve) => {
      const script = document.createElement("script");
      script.src = src;
      script.onload = () => {
        resolve(true);
      };
      script.onerror = () => {
        resolve(false);
      };
      document.body.appendChild(script);
    });
  };

  useEffect(() => {
    loadScript("https://checkout.razorpay.com/v1/checkout.js");
  }, []);

  const handlePayment = async () => {
    if (!loadingCourseInformation && courseInfo && !loadingCreateOrder) {
      try {
        setProcessingPayment(true);
        const amount = appliedDiscount ? appliedDiscount : courseInfo.price;
        const payload = {
          amount: amount.toString(),
          currency: "INR",
          course_id: courseInfo.course_id.toString(),
        };

        await createOrderPayload(payload);
      } catch (err) {
        setProcessingPayment(false);
        if (err.response) {
          notifyUser(
            "Order Error",
            "An error occurred while creating the order.",
            "error"
          );
        } else if (err.request) {
          notifyUser(
            "Network Error",
            "Network error, please try again.",
            "warning"
          );
        } else {
          notifyUser(
            "Unexpected Error",
            `Unexpected error: ${err.message}`,
            "error"
          );
        }
      }
    }
  };

  useEffect(() => {
    if (createOrderData) {
      setProcessingPayment(true);
      const amount = appliedDiscount ? appliedDiscount : courseInfo.price;
      const options = {
        key: userData.REACT_APP_RAYZOR_KEY,
        amount: amount * 100,
        currency: "INR",
        name: "MIT",
        description: courseInfo.course_name,
        image: mtsLogo,
        order_id: createOrderData.orderId,
        handler: async (response) => {
          const verifyPayload = {
            razorpay_order_id: response.razorpay_order_id,
            razorpay_payment_id: response.razorpay_payment_id,
            razorpay_signature: response.razorpay_signature,
          };
          try {
            await verifyOrderPayload(verifyPayload);
            razorpay.close();
          } catch (verificationError) {
            console.log(verificationError);
          }
        },
      };

      const razorpay = new window.Razorpay(options);

      razorpay.open();
      razorpay.on("payment.failed", function (response) {
        razorpay.close();
        setProcessingPayment(false);
        console.error("Payment failed:", response.error);
        navigate(`/app/payment/failure/${createOrderData.payment.payment_id}`);
      });
    }
  }, [createOrderData]);

  return (
    <>
      <Button
        onClick={handlePayment}
        fullWidth
        variant="outlined"
        className="course-price-wrapper__button-wrapper--buy-now"
      >
        Buy Now
      </Button>
    </>
  );
};