如何解决如何在 React 中导入具有数据属性的脚本标签?
我想在 React 中导入 Razorpay 按钮,以便我可以接受付款。但它没有显示在我的组件中。
Razorpay 按钮代码:-
<form>
<script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_G8bIDza4zHQRfm">
</script>
</form>
我已经尝试过这样做但失败了:-
import React,{ useEffect } from 'react';
import './Homepage.css';
const Homepage = () => {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://checkout.razorpay.com/v1/payment-button.js';
script['data-payment_button_id'] = 'pl_G8bIDza4zHQRfm';
script.async = true;
const element = document.querySelector('#home form');
element.appendChild(script);
return () => {
element.removeChild(script);
};
},[]);
return (
<section id='home'>
<form></form>
</section>
);
};
export default Homepage;
文档参考:- https://razorpay.com/docs/payment-button/donations/#step-3-embed-payment-button-code-in-website
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。