React Vite集成Stripe支付时遇Invalid API Key错误求助

可能的原因及对应解决方案 #

1. 后端接口错误使用了Stripe公钥（最常见） #

错误提示里的pk_test开头是Stripe公钥，仅用于前端初始化Stripe.js；后端创建PaymentIntent、处理支付请求必须使用秘钥（sk_开头）。如果你的后端/payment/process接口配置的是公钥而非秘钥，就会触发这个错误。

• 解决：登录Stripe后台，复制sk_test开头的测试秘钥，替换后端配置的API密钥，确保后端所有Stripe请求都使用秘钥。

2. 前端环境变量加载异常 #

虽然配置了VITE_STRIPE_PUBLIC_KEY，但可能存在加载问题：

• 检查.env文件是否放在项目根目录，文件名是否正确（Vite默认加载根目录的.env或.env.local）
• 确认变量值没有多余的引号或空格，正确格式为VITE_STRIPE_PUBLIC_KEY=pk_test_xxxxxxx，不要写成带引号的格式
• 修改环境变量后必须重启Vite开发服务器，否则新变量值不会生效
• 可以在代码中打印import.meta.env.VITE_STRIPE_PUBLIC_KEY，确认是否正确读取到密钥

3. Stripe公钥本身无效 #

• 登录Stripe后台，检查测试公钥是否正确，是否被误删或过期
• 确认使用的是测试环境公钥（pk_test），而非生产环境公钥（pk_live），测试环境无法使用生产密钥

额外检查点 #

• 确保前端调用loadStripe时没有拼接多余字符，你的代码中${import.meta.env.VITE_STRIPE_PUBLIC_KEY}写法正确，无需手动添加引号
• 后端返回的client_secret必须来自有效的PaymentIntent，创建PaymentIntent时要确保使用正确的秘钥，否则返回的client_secret也会无效

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