时间戳

首页 > 解决方案 > 如何在 next.js 页面中实现 Razorpay 支付按钮

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

问题描述

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

标签： javascriptreactjsnext.jsrazorpay

解决方案

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

推荐阅读