如何在 next.js 页面中实现 Razorpay 支付按钮答案

【问题标题】：How to implement Razorpay payment button in next.js page如何在 next.js 页面中实现 Razorpay 支付按钮
【发布时间】：2021-02-23 11:36:13
【问题描述】：

使用网站上的 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 上实现这个按钮时出现了一些问题按钮在检查器元素中可见，但在屏幕中不可见。

【问题讨论】：

标签： javascript reactjs next.js razorpay

【解决方案1】：

您可能不知道，但真正的问题在于组件内的脚本标记在渲染该组件后未执行。所以现在我提出了一个解决方案，在渲染组件后执行这些脚本，方法是使用 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>

我使用的一些参考资料帮助我找到了解决方案

https://github.com/utterance/utterances/issues/161

Adding script tag to React/JSX

【讨论】：

它给出的错误：errorQueue is not defined : (
谢谢你。终于得到了工作代码，只是在你的代码稍作改动之后

【解决方案2】：

useEffect(()=>{
async function makeForm() {
  const Script = document.createElement("script");
  const Form = document.getElementById('donateForm');
  Script.setAttribute('src','https://cdn.razorpay.com/static/widget/subscription-button.js')
  Script.setAttribute('data-subscription_button_id','pl_somethingsomething')
  Script.setAttribute('data-button_theme','brand-color')
  Form.appendChild(Script); 
}
makeForm()},[])

return(
<>
  <form id='donateForm'> </form>
</>

此代码在 .jsx 页面中运行

【讨论】：