Cannot read property 'tagName' of null on razorpay payment in nextJs

user_8121071 0
Viewed 1314

I am getting tagName of null error on razorpay integration. This error is related to head manager.

enter image description here

Link of github repository https://github.com/rajatgalav/razorpay-demo

I tried to debug it. And if i remove head component from index.js file, problem does not occur. But i want head component also in my project.

        <Head>
            <title>Create Next App</title>
            <link rel="icon" href="/favicon.ico" />
        </Head>

        <main className={styles.main}>
            <button onClick={displayRazorpay}>pay</button>
        </main>

Head is imported from next/head package of NextJs

next.js reactjs
4 Answers

Nextjs adds default viewport meta tag <meta name="viewport" content="width=device-width">.

But razorpay script removes viewport meta tag and adds it's own version. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

And also adds theme-color meta tag <meta name="theme-color" content="#ff7400">.

Nextjs fails to detect these changes and tries to update the header. That's why you see this error when you go to success page.

So I am redirecting the user to success page by window.location = '/success' instead of using router.push('/success')

I am still investigating how to avoid the error when using router.

user_18569180

You could try this:

"modal": { "ondismiss": function(){ console.log('Checkout form closed'); const _window = window as any; _window.location = '/checkout'; }}

Also, add window.location in the handler function to navigate to another URL. Then you won't get that error.

user_167383220

I found a hack for this issue. Just add the razorpay script in the _document.js file. You can do it like this:

<Html lang="en">
    <Head>
        <script src="https://checkout.razorpay.com/v1/checkout.js" async></script>
    </Head>
    <body>
        <Main />
        <NextScript />
    </body>
</Html>

This fixed the issue for me.

user_81210710

Could you sort this issue ? The handler function in the Razorpay is causing this issue, though it is required. If that is removed this error is not appearing on navigation

user_25081160
Related