How do I render form from <script> tag?

Question

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

How do I render this in React? It works good on normal HTML.

On render it must show me a Pay Button like this:

React is not able to render this. How do I fix this?

After clicking on that form it must show a payment screen.

Answer 1

Try this:

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