Next.js项目集成Paddle沙箱环境时持续出现‘Failed to retrieve JWT’403未授权错误求助

大家好！我最近在Next.js项目里集成Paddle的沙箱支付环境，按步骤做完后一直卡在一个403错误上，提示"Failed to retrieve JWT"，折腾了好几种办法都没解决，想请大家帮忙看看问题出在哪。

先给大家看看我的实现代码：

Paddle初始化的Provider组件 #

我用了一个Provider组件来加载Paddle的脚本并初始化，代码是这样的：

export default function PaddleProvider() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.paddle.com/paddle/v2/paddle.js'
    script.async = true
    script.onload = () => {
      window.Paddle?.Initialize({
        token: process.env.NEXT_PUBLIC_PADDLE_CLIENT_TOKEN!,
      })
    }
    document.body.appendChild(script)
    return () => {
      document.body.removeChild(script)
    }
  }, [])
  return null
}

调用结账弹窗的代码 #

触发结账的逻辑是这样的，传入了确认正确的priceId和客户信息：

window.Paddle?.Checkout.open({
  items: [{ priceId, quantity: 1 }],
  customer,
  customData: {
    planFrom: 'pricing',
    ts: Date.now()
  },
})

我已经排查过的几个点 #

• 反复核对了沙箱环境的client token和priceId，确认都是从Paddle后台复制的正确值，没有拼写错误
• 一开始以为是localhost的域名限制，特意把项目部署到了自己的正式域名上，并且在Paddle后台完成了域名的审批，但部署后还是弹出同样的错误
• 对照官方集成文档一步步检查，初始化流程、调用参数看起来都符合要求

具体的错误信息 #

每次触发结账都会收到这个403响应：

{
  "errors": [
    {
      "status": 403,
      "code": "unauthorized",
      "details": "Failed to retrieve JWT"
    }
  ]
}

有没有朋友碰到过类似的问题？或者能帮我分析下可能的原因？比如是不是初始化时还有什么必填的配置项我没加，或者沙箱环境有什么特殊的权限设置我遗漏了？

内容来源于stack exchange