Laravel集成Stripe支付提交表单时报未设置有效publishable key错误如何解决

报错本质 #

(index):3 Uncaught Error: You did not set a valid publishable key. Call Stripe.setPublishableKey() with your publishable key.

这个报错的核心是JS执行Stripe.setPublishableKey($form.data('stripe-publishable-key'))时，从表单data属性读取到的公钥值为空或者格式无效，和你.env是否配置没有直接关系，问题出在配置没有正确传递到前端。

排查步骤 #

• 检查前端页面源码：右键查看页面源代码，找到stripe表单节点，查看data-stripe-publishable-key属性的实际值，90%的情况这个值是空的
• 检查.env文件格式：你当前.env里的配置STRIPE_KEY = pk_test_123...等号两边存在空格，Laravel的.env解析逻辑对空格敏感，等号两边加空格会导致读取到的STRIPE_KEY值为空
• 检查配置缓存：如果你开启了Laravel配置缓存（执行过php artisan config:cache），修改.env之后没有清空缓存，系统会一直读取旧的缓存配置，导致拿不到新配置的公钥
• 检查配置引用规则：Laravel生产环境下如果开启了配置缓存，Blade模板里直接调用env()函数会返回null，这是框架的限制

解决方法 #

1. 修正.env文件格式，删除等号两边的空格：

STRIPE_KEY=pk_test_123...
STRIPE_SECRET=sk_test_123...

2. 清空配置缓存，在项目根目录执行命令：
   php artisan config:clear
   如果是生产环境，清空后可以重新生成缓存：
   php artisan config:cache
3. 优化配置读取方式，不要在模板直接调用env函数：
   首先在config/services.php中添加stripe配置项：

'stripe' => [
    'key' => env('STRIPE_KEY'),
    'secret' => env('STRIPE_SECRET'),
],

然后修改表单的data属性，改用config函数读取配置：

data-stripe-publishable-key="{{ config('services.stripe.key') }}"

4. 刷新页面重新查看表单源码，确认data-stripe-publishable-key已经正确输出pk_test开头的公钥后，再提交表单测试即可。

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