我想为我的 react-js 应用程序集成支付网关 (razorpay)。有谁知道如何整合它？
这是代码，我在那里收到错误。
let rzp = new Razorpay(options);
rzp.open();
错误是：
TypeError: rzp.open is not a function
在 react js 中安装 Razorpay
IT技术
reactjs
2021-05-02 19:19:29
4个回答
在我的例子中，上面的代码做了一个小的修改。
而不是 let rzp = new Razorpay(options);放let rzp = new window.Razorpay(options);
其余的都很好，不要忘记注册并获得有效的API密钥。
将脚本包含index.html在以下链接中的建议中
https://codepen.io/ankitstarski/pen/QgLXML。
下面的例子
<!DOCTYPE html>
<html>
<head>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FNETPOC</title>
</head>
<body>
<div id="root"></div>
<div id="modal"></div>
<div id="datetimemodal"></div>
<div id="slideshowmodal"></div>
<div id="playbuttonmodal"></div>
</body>
</html>
组件代码如下
class Checkout extends React.Component {
state = {
amount: 100
};
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 window.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>
)
}
}
您可以将 Razorpay 提供的 script 标签放在 index.html 的 head 部分，但我建议在组件挂载时动态加载它。请参阅下面的完整代码。
import React, { useEffect } from 'react';
const PayByRazorPay = () => {
const options = {
key: 'YOUR_KEY',
amount: '100', // = INR 1
name: 'Acme shop',
description: 'some description',
image: 'https://cdn.razorpay.com/logos/7K3b6d18wHwKzL_medium.png',
handler: function(response) {
alert(response.razorpay_payment_id);
},
prefill: {
name: 'Gaurav',
contact: '9999999999',
email: 'demo@demo.com'
},
notes: {
address: 'some address'
},
theme: {
color: 'blue',
hide_topbar: false
}
};
const openPayModal = () => {
var rzp1 = new window.Razorpay(options);
rzp1.open();
};
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://checkout.razorpay.com/v1/checkout.js';
script.async = true;
document.body.appendChild(script);
}, []);
return (
<>
<button onClick={openPayModal}>Pay with Razorpay</button>
</>
);
};
export default PayByRazorPay;
你能多发布一点你的代码给我看看你是如何实现的吗？
您还可以查看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>
)
}
}
尝试清除缓存或在隐身模式下运行它。对我来说，这解决了这个错误。
其它你可能感兴趣的问题