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

Question

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

Answer 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

将脚本标签添加到 React/JSX

Answer 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 页面

Answer 3

为了在 nextjs 网站上集成 razorpay 支付按钮，以下代码有效。

  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  useEffect(() => {
    const Script = document.createElement("script");
    //id should be same as given to form element
    const Form = document.getElementById("donateForm");
    Script.setAttribute(
      "src",
      "https://checkout.razorpay.com/v1/payment-button.js"
    );
    Script.setAttribute("data-payment_button_id", "YOUR ID");
    if (Form) {
      Form.appendChild(Script);
    }
  }, [mounted]);


return mounted ? <form id="donateForm"></form> : null