我如何集成Vue3 + Stripe + Typescript?

Question

我正在创建一个Vue3应用程序，我试图将它与stripe集成，但是我不能。

这是我的ve3组件:Checkout.vue

<template>
....
...
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, computed} from 'vue';
import { loadStripe } from '@stripe/stripe-js'
import { useShoppingCart } from '@/stores/shoppingcart'
import axios from 'axios'
import { useRouter } from 'vue-router';
const shoppingcart = useShoppingCart()
const router = useRouter()
const stripe = reactive({})
const cardElement = reactive({})
const customer = reactive({
first_name: '',
last_name: ''
...                    
...
})
const paymentProcessing = ref(false)
onMounted(async () => {
stripe = await loadStripe(import.meta.env.VITE_MIX_STRIPE_KEY)        
let elements = stripe.elements();
cardElement = elements.create('card', {
classes: {
base: 'bg-gray-100 rounded border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 p-3 leading-8 transition-colors duration-200 ease-in-out'
}
});
cardElement.mount('#card-element');
});
const processPayment = async () => {

paymentProcessing.value = true;
const {paymentMethod, error} = await stripe.createPaymentMethod(...)
....
}

我得到的错误信息是:

不能赋值给'stripe'，因为它是一个常量。

并且Vue组件无法加载stripe credit cart输入。我不仅需要在onMounted钩子中使用stripe，还需要在processPayment方法中使用它。

我能做什么?谢谢。

Answer 1

您正在尝试分配给const变量

将其改为let