无法在 nextJs 中读取 razorpay 支付的 null 属性“tagName”答案

【问题标题】：Cannot read property 'tagName' of null on razorpay payment in nextJs无法在 nextJs 中读取 razorpay 支付的 null 属性“tagName”
【发布时间】：2021-05-03 22:20:10
【问题描述】：

我在 razorpay 集成中收到 null 错误的 tagName。此错误与主管有关。

github仓库链接https://github.com/rajatgalav/razorpay-demo

我尝试调试它。如果我从 index.js 文件中删除头组件，则不会出现问题。但我也想在我的项目中使用 head 组件。

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

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

head 是从 NextJs 的 next/head 包中导入的

【问题讨论】：

不确定是什么原因造成的。请参考示例 nextjs 项目。 github.com/ayush-razorpay/nextjs-example
嗨@rajatgalav，如果您解决了这个问题，能否告诉我们解决方案？
@AyushVipul 您的示例使用原生 JS 脚本，而我们直接在 React 代码中使用 Razorpay 对象。

标签： reactjs next.js

【解决方案1】：

我找到了解决这个问题的方法。只需在 _document.js 文件中添加 razorpay 脚本。你可以这样做：

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

这为我解决了这个问题。

【讨论】：

【解决方案2】：

你可以试试这个：

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

此外，在处理函数中添加 window.location 以导航到另一个 URL。那么你就不会得到那个错误了。

【讨论】：

【解决方案3】：

Nextjs 添加默认视口元标记<meta name="viewport" content="width=device-width">。

但是 razorpay 脚本会删除视口元标记并添加它自己的版本。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

并且还添加了主题颜色元标记<meta name="theme-color" content="#ff7400">。

Nextjs 无法检测到这些更改并尝试更新标头。这就是您在进入成功页面时看到此错误的原因。

所以我通过window.location = '/success' 将用户重定向到成功页面，而不是使用router.push('/success')

我还在研究如何避免使用路由器时的错误。

【讨论】：

【解决方案4】：

你能解决这个问题吗？ Razorpay 中的处理程序函数会导致此问题，尽管它是必需的。如果将其删除，则此错误不会出现在导航中

【讨论】：