I am trying to embed a HubSpot Payments Link on a page in a NextJS app. The payments form is not appearing. I can get this to work in a ReactJS app but not in our NextJS app.
I have created a simple example in codesandbox demonstrating the issue here:
https://codesandbox.io/p/devbox/nervous-cherry-yh4d2d?file=%2Fpages%2Findex.js%3A21%2C1-32%2C17
I’m simply trying to paste the embed code I got from the Payment Link in HubSpot into a simple Hello World NextJS app, but the for does not appear.
I tried adding the script using next/script but the form still doesn’t appear.
I also tried to embed it using an iframe. The form appears but whenever I select one of the dropdown menu fields the page jumps to the top, which makes it unusable.
Those two attempts are commented out in the codesandbox that I linked above.
I am able to get the Payment Link embed to work in a simple ReactJS hello world app as demonstrated here. But, I need it to work in our NextJS website.
https://codepen.io/cmmadmin/pen/xxovjYV
You injected the code outside div=root, the idea is how to include that embed code in a component, so we can control when it should be displayed