Next.js项目Stripe支付本地正常 部署Vercel后报apiKey缺失错误求解

错误原因 #

你遇到的IntegrationError: Missing value for Stripe(): apiKey should be a string错误，本质是部署后客户端代码调用loadStripe时传入的参数为undefined，问题确实出在你贴的代码和环境变量配置逻辑里。

可能的问题点 #

• Vercel配置环境变量后未重新部署：Vercel的环境变量仅在项目构建时注入，新增/修改环境变量后必须重新触发部署才能生效。
• 环境变量映射多一层冗余逻辑，容易出问题：Next.js规定前缀为NEXT_PUBLIC_的环境变量会自动暴露给客户端代码，不需要你在next.config.js里额外做一层映射，多一层配置反而增大了变量传递失败的概率。
• Vercel环境变量配置有误：检查变量名是否存在拼写错误、大小写错误、多余空格，或者是否配置到了错误的项目/环境下。

修复步骤 #

1. 先确认Vercel环境变量配置正确，NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY的变量名完全匹配，值为你的pk_test开头的Stripe公钥，配置完成后重新部署项目。
2. 简化代码逻辑，删掉next.config.js里多余的env配置块，修改/src/pages/checkout.js里的stripe初始化代码：

// 把原来的const stripePromise = loadStripe(process.env.stripe_public_key);替换为下面的写法
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

3. 可选调试：可以在checkout.js中新增日志打印process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY，部署后查看控制台输出，确认变量是否正常注入。

修复完成后点击结账按钮就可以正常跳转到Stripe结账页面。

内容的提问来源于stack exchange，提问作者JayKay