无法读取未定义的属性（读取'_c'）vue stripe

Question

你好，我正在尝试将 stripe 与 vue 3 一起使用，但是得到

Cannot read properties of undefined (reading '_c')

这是我的组件

 <stripe-element-card
      ref="elementRef"
      :pk="publishableKey"
      @token="tokenCreated"
    />

这是我的脚本标签

<script>
import { StripeCheckout } from "@vue-stripe/vue-stripe";
import axios from "axios";
export default {
  components: {
    StripeCheckout
  },
  data() {
    return {
      amount: 1000,
      loading: false,
      publishableKey:
        "pk_test_67KGqikZ",
      token: null,
      charge: null
    };
  },
  methods: {
    submit() {
      this.$refs.elementsRef.submit();
    },
    tokenCreated(token) {
      this.token = token;
      this.charge = {
        source: token.id,
        amount: this.amount,
        description: this.description
      };
      this.sendTokenToserver(this.charge);
    },
    sendTokenToserver(charge) {
     
    }
  }
};
</script>

当我收到此错误时，我的 vue 应用程序不显示任何组件，请问我该怎么解决这个问题

Answer 1

Stipe 的官方软件包不支持 Vue3。根据这个问题，他们没有任何关于 Vue3 支持的更新

你可以试试这个包：

https://github.com/ectoflow/vue-stripe-js

他们给出的示例是针对 Typescript 的，因此我为不使用 Typescript 的人发布了一个非 ts 示例（确保您已经安装了上述软件包npm i vue-stripe-js --save-dev）

 <template>
    <div>

        <StripeElements
            v-if="stripeLoaded"
            v-slot="{ elements, instance }"
        ref="elms"
        :stripe-key="stripeKey"
        :instance-options="instanceOptions"
        :elements-options="elementsOptions"
        >
        <StripeElement
            ref="card"
            :elements="elements"
            :options="cardOptions"
        />
        </StripeElements>

        <button class="btn-primary mt-10 block w-full" type="button" @click="pay">Pay</button>
    </div>
</template>

<script>
import { StripeElements, StripeElement } from 'vue-stripe-js'
import { loadStripe } from '@stripe/stripe-js'
import { defineComponent, ref, onBeforeMount } from 'vue'

export default defineComponent({
    name: 'CardOnly',

    components: {
        AuthenticationCard,
        StripeElements,
        StripeElement,
    },

    setup() {
        const stripeKey = ref('your-publishable-key') // test key
        const instanceOptions = ref({
            // https://stripe.com/docs/js/initializing#init_stripe_js-options
        })
        const elementsOptions = ref({
            // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
        })
        const cardOptions = ref({
            // https://stripe.com/docs/stripe.js#element-options
            value: {
                postalCode: '12345',
            },
        })
        const stripeLoaded = ref(false)
        const card = ref()
        const elms = ref()

        onBeforeMount(() => {
            const stripePromise = loadStripe(stripeKey.value)
            stripePromise.then(() => {
                stripeLoaded.value = true
            })
        })

        const pay = () => {
                // Get stripe element
                const cardElement = card.value.stripeElement

                // Access instance methods, e.g. createToken()
                elms.value.instance.createToken(cardElement).then((result) => {
                    // Handle result.error or result.token
                    console.log(result)
                })
        }

        return {
            stripeKey,
            stripeLoaded,
            instanceOptions,
            elementsOptions,
            cardOptions,
            card,
            elms,
            pay
        }
    },
})
</script>