Next.js集成Stripe.js出现警告与错误，是否正常？

警告与错误情况分析 #

• HTTP警告属于正常提示
  你看到的 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS. 是Stripe的标准提示：开发测试阶段允许通过HTTP使用Stripe.js，但正式上线的生产环境必须切换为HTTPS。这个警告不会影响开发测试，部署到生产环境启用HTTPS后会自动消失。

• ERR_BLOCKED_BY_CLIENT是异常问题
  POST https://m.stripe.com/6 net::ERR_BLOCKED_BY_CLIENT 这个错误是客户端拦截了请求，大概率是浏览器的广告拦截插件（比如AdBlock、uBlock Origin）或者隐私防护设置挡住了Stripe的请求域名。解决方法：

  • 临时关闭浏览器的广告拦截插件再测试
  • 把m.stripe.com添加到拦截插件的白名单中

你的初始化代码无问题 #

你编写的这两行代码是Next.js集成Stripe的标准初始化方式：

import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe(process.env.stripe_public_key);

需要注意的是，Next.js中客户端可读取的环境变量必须以NEXT_PUBLIC_开头（比如NEXT_PUBLIC_STRIPE_PUBLIC_KEY），否则客户端无法获取到密钥值，这一点要确认下配置是否正确。

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