如何在Vue中使用vue-stripe实现多个Stripe Checkout订阅组件？

问题描述 #

需要创建月度、年度两种订阅选项，在Vue文件中引入两个<stripe-checkout>组件，分别设置ref为checkoutRefMonthly、checkoutRefYearly，mode设为subscription，绑定对应sessionId及stripeKey。通过按钮调用submit函数，根据传入类型调用对应组件的redirectToCheckout方法，但仅一个组件可正常工作，另一个触发错误：

IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId

已确认两个sessionId不同且配置正确，怀疑ref调用时复用了首个组件参数。

组件代码 #

<stripe-checkout
  ref="checkoutRefMonthly"
  mode="subscription"
  :pk="stripeKey"
  :sessionId="monthlySessionId"
/>
<stripe-checkout
  ref="checkoutRefYearly"
  mode="subscription"
  :pk="stripeKey"
  :sessionId="yearlySessionId"
/>

按钮代码 #

<button @click="submit('monthly')">
  Choose monthly
</button>
<button @click="submit('yearly')">
  Choose yearly
</button>

submit函数代码 #

submit(type) {
  if (type === 'yearly') {
    return this.$refs.checkoutRefYearly.redirectToCheckout();
  }

  return this.$refs.checkoutRefMonthly.redirectToCheckout();
},

解决方案 #

方案1：动态切换单个组件的SessionId（推荐） #

无需渲染两个组件，只保留一个<stripe-checkout>实例，通过动态切换sessionId实现不同订阅选项，避免多实例冲突：

<template>
  <stripe-checkout
    ref="checkoutRef"
    mode="subscription"
    :pk="stripeKey"
    :sessionId="currentSessionId"
  />
  <button @click="setSessionAndCheckout('monthly')">月度订阅</button>
  <button @click="setSessionAndCheckout('yearly')">年度订阅</button>
</template>

<script>
export default {
  data() {
    return {
      currentSessionId: '',
      monthlySessionId: '你的月度sessionId',
      yearlySessionId: '你的年度sessionId',
      stripeKey: '你的Stripe公钥'
    }
  },
  methods: {
    setSessionAndCheckout(type) {
      this.currentSessionId = type === 'monthly' ? this.monthlySessionId : this.yearlySessionId;
      // 确保sessionId更新后再调用 checkout
      this.$nextTick(() => {
        this.$refs.checkoutRef.redirectToCheckout();
      });
    }
  }
}
</script>

方案2：用v-if控制组件渲染，避免同时存在两个实例 #

每次只渲染当前需要的订阅组件，避免Stripe SDK内部状态冲突：

<template>
  <stripe-checkout
    v-if="activePlan === 'monthly'"
    ref="checkoutRefMonthly"
    mode="subscription"
    :pk="stripeKey"
    :sessionId="monthlySessionId"
  />
  <stripe-checkout
    v-if="activePlan === 'yearly'"
    ref="checkoutRefYearly"
    mode="subscription"
    :pk="stripeKey"
    :sessionId="yearlySessionId"
  />
  <button @click="prepareCheckout('monthly')">月度订阅</button>
  <button @click="prepareCheckout('yearly')">年度订阅</button>
</template>

<script>
export default {
  data() {
    return {
      activePlan: '',
      monthlySessionId: '你的月度sessionId',
      yearlySessionId: '你的年度sessionId',
      stripeKey: '你的Stripe公钥'
    }
  },
  methods: {
    prepareCheckout(type) {
      this.activePlan = type;
      this.$nextTick(() => {
        if (type === 'monthly') {
          this.$refs.checkoutRefMonthly.redirectToCheckout();
        } else {
          this.$refs.checkoutRefYearly.redirectToCheckout();
        }
      });
    }
  }
}
</script>

方案3：直接调用Stripe原生SDK（绕开组件限制） #

如果组件库存在多实例兼容问题，直接使用Stripe原生SDK的redirectToCheckout方法，完全自主控制参数：

<template>
  <button @click="submit('monthly')">月度订阅</button>
  <button @click="submit('yearly')">年度订阅</button>
</template>

<script>
import { loadStripe } from '@stripe/stripe-js';

export default {
  data() {
    return {
      stripePromise: loadStripe('你的Stripe公钥'),
      monthlySessionId: '你的月度sessionId',
      yearlySessionId: '你的年度sessionId'
    }
  },
  methods: {
    async submit(type) {
      const stripe = await this.stripePromise;
      const sessionId = type === 'monthly' ? this.monthlySessionId : this.yearlySessionId;
      const { error } = await stripe.redirectToCheckout({
        sessionId: sessionId
      });
      if (error) {
        console.error(error);
      }
    }
  }
}
</script>

问题原因分析 #

多数情况下是因为所用的Vue Stripe组件库在渲染多个实例时，内部共享了Stripe SDK的实例状态，导致后初始化的组件没有正确绑定自身的sessionId，调用redirectToCheckout时复用了首个组件的参数（甚至参数为空），从而触发缺失必填项的错误。

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