Vue CLI项目中vue-stripe-checkout集成Stripe及Price Object创建问题

我完全懂你卡在这的感受——Stripe Checkout现在已经不再支持直接传金额或者无SKU的自定义商品了，必须通过Price Object来定义支付项，这确实是个容易踩的认知坑。下面给你一步步捋清楚怎么解决：

核心逻辑：为什么必须用Price Object？ #

Stripe现在把所有收费场景（一次性支付、订阅）都统一用Price来管理，这样能更好地跟踪定价变更、税务计算、货币转换这些细节。所以不管你有没有SKU，都得先创建对应的Price，再把它的ID传给lineItems里的price字段。

什么时候&怎么创建Price？ #

强烈推荐在后端创建Price，绝对别在前端用Stripe的秘钥调用API——前端暴露秘钥等于把你的支付系统大门直接敞开了。具体步骤：

1. 后端写一个创建Price的接口 #

用Stripe官方SDK实现就好，比如Node.js的示例：

// 后端Node.js代码（先安装stripe包：npm install stripe）
const stripe = require('stripe')('你的Stripe秘钥sk_xxx');

app.post('/create-price', async (req, res) => {
  // 从前端请求里拿到订单的金额、货币类型等数据
  const { amount, currency, productName } = req.body;

  const price = await stripe.prices.create({
    unit_amount: amount, // 注意是最小单位，比如人民币10元就是1000
    currency: currency || 'cny',
    product_data: {
      name: productName || '自定义商品', // 可以动态从订单里取名称
    },
  });

  // 返回Price的ID给前端
  res.json({ priceId: price.id });
});

2. 前端调用后端接口获取Price ID并触发支付 #

你可以在用户点击支付按钮时，先调用这个接口拿到Price ID，再触发Stripe Checkout：

修改你的前端代码：

<template>
  <stripe-checkout 
    ref="checkoutRef" 
    :pk="publishableKey" 
    :lineItems="lineItems" 
    :successUrl="successUrl" 
    :cancelUrl="cancelUrl"
    :mode="mode"
  >
    <template slot="checkout-button">
      <button @click="checkout" :disabled="loading">
        {{ loading ? '处理中...' : 'Payment' }}
      </button>
    </template>
  </stripe-checkout>
</template>

<script>
import { StripeCheckout } from 'vue-stripe-checkout';

export default {
  components: { StripeCheckout },
  data() {
    return {
      loading: false,
      publishableKey: 'pk_test',
      lineItems: [
        {
          price: '', // 后续会赋值Price ID
          quantity: 1,
        }
      ],
      mode: 'payment', // 对应一次性支付，订阅的话改成'subscription'
      customerEmail: null,
      successUrl: 'https://success_url.com',
      cancelUrl: 'https://cancel_url.com',
    };
  },
  methods: {
    async checkout() {
      this.loading = true;
      try {
        // 1. 调用后端接口创建并获取Price ID
        const response = await fetch('/create-price', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            amount: 1000, // 示例：收10元，传最小单位1000
            currency: 'cny',
            productName: '你的商品名称'
          })
        });
        const { priceId } = await response.json();

        // 2. 更新lineItems里的price字段
        this.lineItems[0].price = priceId;

        // 3. 触发Stripe Checkout跳转
        await this.$refs.checkoutRef.redirectToCheckout();
      } catch (error) {
        console.error('支付初始化失败:', error);
        alert('支付初始化失败，请重试');
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

3. 特殊场景：固定金额商品 #

如果你的商品金额是固定不变的，也可以提前在Stripe Dashboard手动创建Price：

• 登录Stripe Dashboard → 产品 → 创建产品 → 填写定价信息 → 保存后就能拿到Price ID（格式是price_xxx）
• 直接把这个ID赋值给lineItems[0].price即可，不用每次调用接口

关键注意事项 #

• mode必须和Price类型匹配：一次性支付用payment，订阅用subscription，否则会报错
• 绝对不要在前端使用Stripe的秘钥（sk开头），只能用公钥（pk开头）
• 金额必须传最小单位：比如美元10元是1000，人民币10元是1000，避免小数精度问题

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