Vue集成Stripe报No such plan错误的解决方法

问题现象 #

调用Stripe Checkout跳转接口时抛出如下错误：

IntegrationError: No such plan: 'price_1LGPU4SEBFYnfFduMTxpNhje'
报错参考截图：

原有实现代码：

const redirect = async () => {
  const stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY as string)
  stripe?.redirectToCheckout({
    successUrl: window.location.href + 'success=true',
    cancelUrl: window.location.href + '?success=false',
    lineItems: [
      {
        price: 'price_1LGPU4SEBFYnfFduMTxpNhje',
        quantity: 1,
      },
    ],
    mode: 'subscription',
  })
}

排查&解决步骤 #

按优先级逐个核对以下配置项即可解决问题：

• 核对密钥与价格ID的环境匹配性：Stripe测试环境、正式环境数据完全隔离，若价格ID是测试环境创建的，必须搭配pk_test开头的测试公钥使用；若价格是正式环境创建的，必须搭配pk_live开头的正式公钥使用。90%的该类报错都是环境不匹配导致，去Stripe后台切换到价格所在的环境，复制对应环境的可发布公钥替换VITE_STRIPE_API_KEY的值即可。
• 核对价格类型与支付模式匹配性：代码中mode设为subscription（订阅模式）时，传入的price必须是后台配置的**重复计费（recurring）**类型价格；如果该价格是一次性计费（one-time）类型，需要将mode改为payment（一次性支付模式）。
• 核对价格ID准确性：不要手动输入价格ID，去Stripe后台对应价格的详情页完整复制ID，替换代码中硬编码的价格字符串，避免出现漏字符、前后多余空格的问题。
• 核对密钥类型：前端loadStripe方法只能传入pk_开头的可发布公钥，不能传入sk_开头的密钥，密钥仅能在服务端使用，前端传错密钥类型也会导致资源识别异常。

修正后参考代码 #

修复了原有代码中跳转URL拼接的潜在问题，配置核对正确后可直接使用：

const redirect = async () => {
  const stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY as string)
  if (!stripe) return
  // 替换为你项目实际的支付结果页路径，避免参数拼接异常
  const baseUrl = window.location.origin
  await stripe.redirectToCheckout({
    successUrl: `${baseUrl}/pay-result?success=true`,
    cancelUrl: `${baseUrl}/pay-result?success=false`,
    lineItems: [
      {
        price: 'price_1LGPU4SEBFYnfFduMTxpNhje',
        quantity: 1,
      },
    ],
    mode: 'subscription',
  })
}

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