Vue3集成Stripe支付网关时页面空白及_c属性读取错误

错误根源 #

你遇到的Cannot read properties of undefined (reading '_c')报错，本质是使用的@vue-stripe/vue-stripe版本适配Vue2，和Vue3的渲染API不兼容，导致组件渲染失败。另外代码里的初始化逻辑问题，也会加剧渲染异常。

解决方案 #

1. 更换Vue3兼容的Stripe组件包 #

卸载旧的Vue2版本包，安装支持Vue3的版本：

npm uninstall @vue-stripe/vue-stripe
npm install @vue-stripe/vue-stripe@next

（注：@next对应v4.x及以上版本，是官方适配Vue3的分支）

2. 修复组件初始化逻辑 #

clientSecret是空值时组件无法正常初始化，必须在组件渲染前获取到支付意图的clientSecret：
修改组件的script部分，在created钩子中提前调用生成支付意图的方法，同时确保响应式更新：

<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';

export default {
  name:'CheckoutPage',
  components: {
    StripeElementPayment,
  },
  data () {
    return {
      pk: 'my_key',
      elementsOptions: {
        appearance: {},
        clientSecret: ''
      },
      confirmParams: {
        return_url: 'http://localhost:8080/success',
      },
    };
  },
  async created() {
    // 组件创建时就生成支付意图，确保clientSecret就绪
    await this.generatePaymentIntent();
  },
  methods: {
    async generatePaymentIntent () {
      try {
        const paymentIntent = await this.apiCallToGeneratePaymentIntent();
        // 解构替换保证响应式更新
        this.elementsOptions = {
          ...this.elementsOptions,
          clientSecret: paymentIntent.client_secret
        };
      } catch (err) {
        console.error('生成支付意图失败:', err);
      }
    },
    pay () {
      this.$refs.paymentRef.submit();
    }
  },
};
</script>

3. 备选方案：直接使用Stripe官方JS集成 #

如果第三方组件仍有兼容性问题，可以绕过组件库，直接用Stripe官方JS实现，避免版本冲突：

<template>
  <div ref="paymentElementContainer"></div>
  <button @click="handlePay">Pay Now</button>
</template>

<script>
export default {
  name: 'CheckoutPage',
  data() {
    return {
      stripe: null,
      elements: null,
      clientSecret: ''
    };
  },
  async created() {
    // 初始化Stripe实例
    this.stripe = Stripe('my_key');
    // 生成支付意图
    await this.generatePaymentIntent();
    // 创建Elements并挂载支付元素
    this.elements = this.stripe.elements({ clientSecret: this.clientSecret });
    const paymentElement = this.elements.create('payment');
    paymentElement.mount(this.$refs.paymentElementContainer);
  },
  methods: {
    async generatePaymentIntent() {
      const paymentIntent = await this.apiCallToGeneratePaymentIntent();
      this.clientSecret = paymentIntent.client_secret;
    },
    async handlePay() {
      try {
        const { error } = await this.stripe.confirmPayment({
          elements: this.elements,
          confirmParams: {
            return_url: 'http://localhost:8080/success',
          }
        });
        if (error) {
          console.error('支付失败:', error.message);
        }
      } catch (err) {
        console.error('支付异常:', err);
      }
    }
  }
};
</script>

补充说明 #

_c是Vue2中渲染函数的内部别名，Vue3已经移除了这个标识符，所以当Vue3加载Vue2编写的组件时，就会触发这个类型错误。核心解决思路就是保证组件库和Vue版本的兼容性，同时确保支付意图的clientSecret在组件渲染前就绪。

内容的提问来源于stack exchange，提问作者Emzyn pvt ltd