TypeError：window.Razorpay 不是构造函数

Question

我正在尝试将 RazorPay 集成到我的 React 应用程序中，但它抛出以下错误：

代码：

import TshirtImg from "./tshirt.jpg";
// import Razorpay from 'razorpay';
function Product() {
  const amount = 500;
  const currency = "INR";
  const receiptId = "qwsaq1";

  const paymentHandler = async (e) => {
    const response = await fetch("http://localhost:5000/order", {
      method: "POST",
      body: JSON.stringify({
        amount,
        currency,
        receipt: receiptId,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    });
    const order = await response.json();
    console.log(order);

    var options = {
      key: process.env.KEY_ID, // Enter the Key ID generated from the Dashboard
      amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
      currency,
      name: "Acme Corp", //your business name
      description: "Test Transaction",
      image: "https://example.com/your_logo",
      order_id: order.id, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
      handler: async function (response) {
        const body = {
          ...response,
        };

        const validateRes = await fetch(
          "http://localhost:5000/order/validate",
          {
            method: "POST",
            body: JSON.stringify(body),
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        const jsonRes = await validateRes.json();
        console.log(jsonRes);
      },
      prefill: {
        //We recommend using the prefill parameter to auto-fill customer's contact information, especially their phone number
        name: "Web Dev Matrix", //your customer's name
        email: "[email protected]",
        contact: "9000000000", //Provide the customer's phone number for better conversion rates
      },
      notes: {
        address: "Razorpay Corporate Office",
      },
      theme: {
        color: "#3399cc",
      },
    };
    var rzp1 = new window.Razorpay(options);
    rzp1.on("payment.failed", function (response) {
      alert(response.error.code);
      alert(response.error.description);
      alert(response.error.source);
      alert(response.error.step);
      alert(response.error.reason);
      alert(response.error.metadata.order_id);
      alert(response.error.metadata.payment_id);
    });
    rzp1.open();
    e.preventDefault();
  };

  return (
    <div className="product">
      <h2>Tshirt</h2>
      <p>Solid blue cotton Tshirt</p>
      <img src={TshirtImg} />
      <br />
      <button onClick={paymentHandler}>Pay</button>
    </div>
  );
}

export default Product;

当我尝试在上面的代码中导入 razorpay 模块时，它抛出以下错误：

重大变更：webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

如果你想包含一个polyfill，你需要： - 添加后备 'resolve.fallback: { "url": require.resolve("url/") }' - 安装“网址” 如果你不想包含一个polyfill，你可以使用一个空模块，如下所示： 解析.fallback: { "url": false }

Answer 1

在尝试访问 Razorpay 实例之前，请确保加载

razorpay 结帐脚本

文件。外部脚本可能需要一些时间来加载，因此请使用

Promise

来处理。

import TshirtImg from "./tshirt.jpg";

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);
  });
};

function Product() {
  const amount = 500;
  const currency = "INR";
  const receiptId = "qwsaq1";

  const paymentHandler = async (e) => {
     //load the checkout script here (before accessing Razorpay instance)
     const res = await loadScript(
        "https://checkout.razorpay.com/v1/checkout.js"
     );

     if (!res) {
        alert("Razropay failed to load!!");
        return;
    }
    // Fetching and initializing options
    var rzp1 = new window.Razorpay(options);
    rzp1.on("payment.failed", function (response) {
      //err response
    });
    rzp1.open();
    e.preventDefault();
  };

  return (
    <div className="product">
      <h2>Tshirt</h2>
      <p>Solid blue cotton Tshirt</p>
      <img src={TshirtImg} />
      <br />
      <button onClick={paymentHandler}>Pay</button>
    </div>
  );
}

export default Product;

请参阅 razorpay 官方Docs，了解集成流程的清晰用法。