How to implement Razorpay payment button in next.js page

Question

Using the Razorpay payment button on the website is quite simple it gives a code like

<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>

But there's some problem when implementing this button on react.js Button is visible in inspector element but not visible in the screen.

score 3 · Answer 1 · edited Nov 11 '20 at 13:37

As you may not know but the real problem lies on script tag inside component not executed after rendering that component. So now here I came with a solution for executing those script after rendering the component by using useEffect() from react.js to select that element and append script after first render.

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>

Some references I used which helped me searching the solution

https://github.com/utterance/utterances/issues/161

Adding script tag to React/JSX

Thank u. finally got working code, just after a little change in your codes — , Sep 30 '21 at 08:23

score 0 · Answer 2 · answered Sep 30 '21 at 08:27

useEffect(()=>{
async function makeForm() {
  const Script = document.createElement("script");
  const Form = document.getElementById('donateForm');
  Script.setAttribute('src','https://cdn.razorpay.com/static/widget/subscription-button.js')
  Script.setAttribute('data-subscription_button_id','pl_somethingsomething')
  Script.setAttribute('data-button_theme','brand-color')
  Form.appendChild(Script); 
}
makeForm()},[])

return(
<>
  <form id='donateForm'> </form>
</>

this code is working in .jsx page for

Jinal Kothari · Answer 3 · 2022-05-11T18:26:50.343

0

For integrating razorpay payment button on a nextjs site, the following code works.

  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  useEffect(() => {
    const Script = document.createElement("script");
    //id should be same as given to form element
    const Form = document.getElementById("donateForm");
    Script.setAttribute(
      "src",
      "https://checkout.razorpay.com/v1/payment-button.js"
    );
    Script.setAttribute("data-payment_button_id", "YOUR ID");
    if (Form) {
      Form.appendChild(Script);
    }
  }, [mounted]);


return mounted ? <form id="donateForm"></form> : null

edited May 11 '22 at 18:26

answered May 10 '22 at 16:55

Jinal Kothari

117
1
1
11

Although it is quite a time for me since i worked on this, but i don't think it's a good idea to expose your payment button id. Please ignore if you had put dummy button id. – Haris Umaid May 10 '22 at 17:05
Using setMounted hooks seems redundant – Haris Umaid May 10 '22 at 17:07
1

I got multiple buttons appearing with code from the accepted answer. The changes I made were what lead to stable behaviour. If a simpler solution is possible, someone can post here. – Jinal Kothari May 11 '22 at 18:28

How to implement Razorpay payment button in next.js page

3 Answers3