Reactjs TypeError:rzp.open不是一个函数

我正在我的react网站中集成razorpay，我在rzp.open（）上得到了这个错误

openCheckout（）{ 让选项={ “密钥id”：“我的密钥”//我使用了正确的密钥 “密匙”：“我的密匙”//我使用了正确的密匙 “金额”：2000，//2000 paise=20印度卢比，以帕萨为单位的金额 “名称”：“商户名称”， “说明”：“采购说明”， “image”：“/images/girl.jpg”， “处理程序”：函数（响应）{ 警报（response.razorpay\u payment\u id）； }, “预填充”：{ “姓名”：“Harshil Mathur”， “电子邮件”：harshil@razorpay.com" }, “说明”：{ “地址”：“你好，世界” }, “主题”：{ “颜色”：“F37254” } })

}

//我用过的按钮

工资20卢比

//我使用命令（npm install razorpay--save）安装razorpay

//并导入为（从“Razorpay”导入Razorpay）

//我在index.html中添加了脚本 //

npm

上的导致库的节点绑定

open（）

方法位于不同的JavaScript库中

您可以通过附加以下内容将其添加到React应用程序：

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

---

在执行openCheckout之前，您需要将checkout（razorpay.com/v1/checkout.js）加载到页面中。可以将其作为脚本标记添加到应用程序的HTML页面中，或者动态插入

你也可以看看

类签出扩展了React.Component{
状态={
金额：0
};
构造函数（）{
超级（）
this.changeamum=this.changeamum.bind（this）；
this.openCheckout=this.openCheckout.bind（this）；
}
更改金额（e）{
this.setState（{amount:e.target.value}）
}
openCheckout（）{
让选项={
“密钥”：“您的密钥ID”，
“金额”：this.state.amount，//2000 paise=20卢比，金额单位为paisa
“名称”：“商户名称”，
“说明”：“采购说明”，
“image”：“/your_logo.png”，
“处理程序”：函数（响应）{
警报（response.razorpay\u payment\u id）；
},
“预填充”：{
“姓名”：“Harshil Mathur”，
“电子邮件”：harshil@razorpay.com"
},
“说明”：{
“地址”：“你好，世界”
},
“主题”：{
“颜色”：“F37254”
}
};
设rzp=新Razorpay（选项）；
rzp.open（）；
}
渲染（）{
返回(
支付卢比{本州金额/100}
)
}
}

看起来razorpay实例上没有

打开

功能，您想做什么？我提供了包含key\u id、key\u secret的对象选项。。。。。我认为在调用rzp.open（）后，付款显示将继续进行@RahulChoudhary你有和之前一样的错误吗？没有，我是第一次集成razorpay，我在reactjs（web）中使用它，我使用命令（npm I razorpay）安装了它，并导入为（从“razorpay”导入razorpay），就像我在回答中所说的那样，razorpay npm软件包不是您要找的软件包。您能告诉我支持它的库吗。我已经在index.html中添加了脚本

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

class Checkout extends React.Component {
  state = {
    amount: 0
  };

  constructor() {
    super()
    this.changeAmount = this.changeAmount.bind(this);
    this.openCheckout = this.openCheckout.bind(this);
  }

  changeAmount(e) {
    this.setState({amount: e.target.value})
  }

  openCheckout() {
    let options = {
      "key": "YOUR_KEY_ID",
      "amount": this.state.amount, // 2000 paise = INR 20, amount in paisa
      "name": "Merchant Name",
      "description": "Purchase Description",
      "image": "/your_logo.png",
      "handler": function (response){
        alert(response.razorpay_payment_id);
      },
      "prefill": {
        "name": "Harshil Mathur",
        "email": "harshil@razorpay.com"
      },
      "notes": {
        "address": "Hello World"
      },
      "theme": {
        "color": "#F37254"
      }
    };

    let rzp = new Razorpay(options);
    rzp.open();
  }

  render () {
    return (
      <div>
        <input type='text' onChange={
           this.changeAmount
          } />
        <button onClick={this.openCheckout}>Pay Rs. {this.state.amount/100}</button> 
      </div>
    )
  }
}