Vue 3集成Stripe报错Cannot read properties of undefined (reading '_c')求助

问题根源 #

你遇到的错误来自三个核心问题：

1. 组件导入与模板使用的组件名完全不匹配
2. 使用了仅兼容Vue2的@vue-stripe/vue-stripe版本，其内部依赖Vue2的渲染API（_c是Vue2的createElement方法，Vue3已废弃）
3. 代码中ref名称存在拼写错误

具体修复步骤 #

1. 安装Vue3兼容的Stripe包 #

卸载旧版本，安装适配Vue3的分支版本：

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

2. 全局注册Stripe插件 #

在main.js中配置Stripe的publishable key并注册插件：

import { createApp } from 'vue'
import App from './App.vue'
import { createVueStripe } from '@vue-stripe/vue-stripe'

const app = createApp(App)
// 初始化Stripe插件
const vueStripe = createVueStripe({
  publishableKey: 'pk_test_67KGqikZ' // 替换为你的真实publishable key
})

app.use(vueStripe)
app.mount('#app')

3. 修正组件代码 #

模板部分：使用正确的组件名并修正ref

<template>
  <stripe-element-card
    ref="elementRef"
    @token="tokenCreated"
  />
</template>

脚本部分：导入正确组件、修正ref拼写、补全逻辑

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe'
import axios from 'axios'

export default {
  components: {
    StripeElementCard // 注册正确的组件
  },
  data() {
    return {
      amount: 1000,
      loading: false,
      token: null,
      charge: null,
      description: '订单描述' // 补充之前未定义的description字段
    };
  },
  methods: {
    submit() {
      // 修正ref名称为elementRef，匹配模板中的定义
      this.$refs.elementRef.submit()
    },
    tokenCreated(token) {
      this.token = token
      this.charge = {
        source: token.id,
        amount: this.amount,
        description: this.description
      }
      this.sendTokenToServer(this.charge)
    },
    sendTokenToServer(charge) {
      // 这里添加向后端发送charge数据的逻辑
      axios.post('/api/charge', charge)
        .then(res => {
          console.log('支付成功', res)
        })
        .catch(err => {
          console.error('支付失败', err)
        })
    }
  }
};
</script>

4. 额外注意事项 #

• 确保你的Stripe publishable key是有效的，避免因密钥错误导致的额外问题
• 如果需要使用Stripe的其他元素（如付款按钮、表单等），请参考@vue-stripe/vue-stripe的Vue3文档使用对应组件

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