如何从 <script> 标签渲染表单？

Question

<form>
  <script 
     src="https://checkout.razorpay.com/v1/payment-button.js" 
     data-payment_button_id="pl_GspBivPLMSWeEC"
     async> 
  </script>
</form>

我如何在 React 中渲染它？它适用于正常 HTML.

在渲染时它必须向我显示一个像这样的支付按钮：

React 无法渲染它。我该如何解决这个问题？

点击该表格后，它必须显示付款屏幕

Answer 1

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello iFrame</h1>

      <iframe
        frameborder="0"
        scrolling="no"
        style={{ overflow: "hidden", height: "100%", width: "100%" }}
        height="100%"
        title={"test"}
        srcdoc="
      <form>
        <script 
          src='https://checkout.razorpay.com/v1/payment-button.js'
          data-payment_button_id='pl_GspBivPLMSWeEC'
          async> 
        </script>
      </form>
      "
      />
    </div>
  );
}

Demo

Answer 2

试试这个：

useEffect(() => {
const form = document.createElement("form");
const script = document.createElement("script");

script.src = "https://checkout.razorpay.com/v1/payment-button.js";
script.setAttribute("data-payment_button_id", "pl_GspBivPLMSWeEC");
script.async = true;

form.appendChild(script);
document.body.appendChild(form);

return () => {
  document.body.removeChild(form);
};}, []);

DEMO

如何从 <script> 标签渲染表单？

How do I render form from <script> tag?

javascript

forms

reactjs

razorpay

script