Question

我正在将razorpay集成到我的React网站中，并在rzp.open（）中得到了此错误；

openCheckout（）{ 让options = { “ key_id”：“ My_key”，//我使用了正确的 “ key_secret”：“ my_secret_key”，//我使用了正确的 “ amount”：2000，// 2000 paise = INR 20，paisa中的金额 “ name”：“商人名称”， “ description”：“购买说明”， “ image”：“ /images/girl.jpg”， “处理程序”：功能（响应）{ 警报（response.razorpay_payment_id）; }， “预填充”： { “名称”：“ Harshil Mathur”， “电子邮件”：“ harshil@razorpay.com” }， “注释”：{ “ address”：“ Hello World” }， “主题”：{ “ color”：“＃F37254” } };

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

}

//我使用过的按钮

支付20卢比

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

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

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

Answer 1

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

您还可以查看https://codepen.io/ankitstarski/pen/QgLXML。

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

Answer 2

npm上的

razorpay导致库的节点绑定。

与shown in the docs相同的open()方法在另一个JavaScript库中。

您可以通过添加以下内容将其添加到您的React应用中：

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

您的index.html本身。

TypeError：rzp.open不是函数

2 个答案: