NextJS集成Stripe遇Invalid API Key错误，求排查方案

问题描述 #

我已经尝试了所有办法，开发NextJS应用时使用了以下代码：

import { Elements } from '@stripe/react-stripe-js';

该代码发起了如下请求：

https://api.stripe.com/v1/elements/sessions?key=pk_live_51KpyLFB...jijj%7D&type=setup_intent&locale=en-US&client_secret=seti_1NFl...wUL&expand[0]=payment_method_preference.setup_intent.payment_method

我确认Stripe密钥正确，但仍收到错误：

{
  "error": {
    "message": "Invalid API Key provided: pk_live_************************************************************************************************ijj}",
    "type": "invalid_request_error"
  }
}

排查及解决办法 #

• 检查URL编码问题：请求中的密钥末尾是%7D（对应字符}），但错误返回的密钥直接显示}。确认代码中没有对publishable key做手动URL编码，Stripe的Elements组件会自动处理密钥传递，无需额外编码。如果用环境变量存储密钥，确保变量值是原始字符串，无转义或编码。

• 清除密钥中的隐藏字符：从Stripe Dashboard重新复制publishable key，粘贴时剔除前后可能存在的空格、换行符等不可见字符——这类隐藏字符会导致密钥验证失败，但肉眼很难察觉。

• 验证密钥状态：登录Stripe后台，确认该publishable key处于活跃状态，未被删除或禁用。同时检查是否混淆了测试环境（pk_test_前缀）和生产环境（pk_live_前缀）的密钥。

• 确认NextJS环境变量配置：如果用环境变量存储密钥，必须使用NEXT_PUBLIC_开头的变量名（比如NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY），否则客户端组件无法读取到正确的密钥值。检查变量名拼写是否正确，环境变量文件是否被正确加载。

• 区分客户端与服务器端密钥：确保你传入Elements的是publishable key（pk_开头），绝对不能使用sk_开头的secret key——secret key仅能在服务器端使用，客户端传递会直接触发验证错误。

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