is there a way to resolve razorpay SHA-256 integrity error

Question

I there a way to fix these RazorPay script that keep popping up in my console both in test and production mode:

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

Failed to find a valid digest in the 'integrity' attribute for resource 'https://checkout.razorpay.com/v1/checkout.js' with computed SHA-256 integrity 'pbO6ubt39rj0eqehtHhHSdfdMvW2ZTN5sLrvPjmbxXI='. The resource has been blocked.

The error pop up even without any interaction with Razorpay payment button. By the way I'm trying to fix these for a MERN App

Answer 1

I later found a solution to these by removing the script tag from my index.html file and handling my razorpay function like

const razorPaySubmitHandler = async () => {
    dispatch({ type: "PAY_REQUEST" });
    try {
      if (razorGrandTotal > 500000) {
        toast.error("Payment amount exceeds the maximum limit for RazorPay", {
          position: "bottom-center",
        });
        return;
      }
      const response = await fetch(
        `${request}/api/orders/${order._id}/razorpay`,
        {
          method: "POST",
          headers: {
            Authorization: `Bearer ${userInfo.token}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            amount: razorGrandTotal,
            currency: toCurrencies,
            paymentMethod: paymentMethodName,
            currencySign: toCurrencies,
          }),
        }
      );

      const razororder = await response.json();

      // Dynamically load the Razorpay script
      const script = document.createElement("script");
      script.src = "https://checkout.razorpay.com/v1/checkout.js";
      script.onload = () => {
        const options = {
          key: razorkeyid,
          amount: razorGrandTotal * 100,
          currency: toCurrencies,
          name: webname,
          description: `Order payment by ${userInfo.email}`,
          image: logo,
          order_id: razororder.id,
          handler: function (response) {
            if (response.razorpay_payment_id) {
              dispatch({ type: "PAY_REQUEST" });
              toast.success(`${response.razorpay_payment_id} Order is paid`, {
                position: "bottom-center",
              });
              fetch(`${request}/api/orders/${order._id}/razorpay/success`, {
                method: "POST",
                headers: {
                  Authorization: `Bearer ${userInfo.token}`,
                  "Content-Type": "application/json",
                },
                body: JSON.stringify(response),
              })
                .then((res) => res.json())
                .then((data) => {
                  if (data.success) {
                    dispatch({ type: "PAY_SUCCESS", payload: response });
                  } else {
                    dispatch({ type: "PAY_FAIL", payload: data.message });
                    toast.error(data.message, { position: "bottom-center" });
                  }
                })
                .catch((error) => {
                  dispatch({ type: "PAY_FAIL", payload: getError(error) });
                  toast.error(getError(error), { position: "bottom-center" });
                });
            } else {
              toast.error("Payment canceled or failed", {
                position: "bottom-center",
              });
            }
          },
          prefill: {
            name: `${userInfo.lastName} ${userInfo.firstName}`,
            email: userInfo.email,
          },
        };
        const rzp1 = new window.Razorpay(options);
        rzp1.open();
      };
      document.body.appendChild(script);
    } catch (error) {
      dispatch({ type: "PAY_FAIL", payload: getError(error) });
      toast.error(getError(error), { position: "bottom-center" });
    }
  };