How to add Razorpay Quick button in react

I wantes to add a Quick pay button from razorpay for which code is given by razorpay.<form><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_JljhvxjhcdNlt" async> </script> </form>

For integrating the Razorpay payment button inside one of your components, the script tag needs to be added dynamically either inside useEffect, if it needs to be shown as soon as the component renders or inside an event handler in case it needs to be visible after an event is triggered.

Giving here the sample code for integrating it with useEffect, the same code snippet can be used in an event handler too.

The working demo is hosted on CodeSandbox

export default function App() {
  useEffect(() => {
    const rzpPaymentForm = document.getElementById("rzp_payment_form");
    
    if (!rzpPaymentForm.hasChildNodes()) {

      const script = document.createElement("script");
      script.src = "https://checkout.razorpay.com/v1/payment-button.js";
      script.async = true;
      script.dataset.payment_button_id = "your_payment_button_id";
      rzpPaymentForm.appendChild(script);

    }

  });

  return (
    <div className="App">
      <h1>Hello World!</h1>
      <form id="rzp_payment_form"></form>
      <h2>This line comes below the payment button</h2>
    </div>
  );
}