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

Adding script tag to React/JSX

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

1 个答案: