how can I integrate Vue3 + Stripe + Typescript?

June 15, 2022

I am creating a Vue3 application, I am trying to integrate it with stripe, but I can’t.

this is my Vue3 component:
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(...)
 ....

}

The error message I got is this:

Cannot assign to ‘stripe’ because it is a constant.

And the Vue component can’t load the stripe credit cart input. I need to use stripe not only in the onMounted hooks, also I need to use it in the processPayment method.

What can I do? thanks.