使用网站上的 Razorpay 付款按钮非常简单，它会提供如下代码
<form>
<script
src = "https://cdn.razorpay.com/static/widget/payment-button.js"
data-payment_button_id = "pl_FNmjTJSGXBYIfp"
data-button_text = "Buy Now"
data-button_theme = "brand-color">
</script>
</form>
但是在react.js上实现这个按钮时出现了一些问题 按钮在检查器元素中可见，但在屏幕中不可见。
最佳答案
您可能不知道，但真正的问题在于组件内部的脚本标记在渲染该组件后未执行。因此，现在我提供了一个解决方案，用于在渲染组件后执行这些脚本，方法是使用react.js 中的 useEffect() 选择该元素并在首次渲染后附加脚本。
useEffect(()=>{
const Script = document.createElement("script");
//id should be same as given to form element
const Form = document.getElementById('donateForm');
Script.setAttribute('src','your src')
Script.setAttribute('data-payment_button_id','your id')
Form.appendChild(Script);
},[])
.
.
.
// form component
<form id='donateForm'> </form>
我使用的一些引用资料帮助我寻找解决方案
关于javascript - 如何在 next.js 页面中实现 Razorpay 支付按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64787405/