How to use VueStripe on vue2 Project? - vue.js

Question

I added Vue Stripe on my vue2 Project and I have 2 similar errors on my code :
Property 'redirectToCheckout' does not exist on type 'Vue | Element | (Vue | Element)[]'.
Property 'publishableKey' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
I followed the documentation on their website and everything is similar as their code so I don't know why I have those errors.
Screenshots
Here is my code if you want to check
<template >
<div class="section form-degustation-section" style="padding-top:150px">
<div class="mycontain form-degustation-contain" >
retrouner aux calendrier des soirées
<div class="soiree-text-presentation-contain">
<h1>{{ degustation[0].title }}</h1>
<p>{{ degustation[0].description }}</p>
</div>
<div class="soiree-form-contain">
<h2>Formulaire de réservation</h2>
<div class="w-form">
<div id="wf-form-soirees-degustation" name="wf-form-soirees-degustation" data-name="soirees degustation" action="https://natureetvins.foxycart.com/cart" method="post">
<label for="name">Nom et prénom</label>
<input type="text" class="w-input" maxlength="256" name="name" data-name="Name" placeholder="Ecrivez votre nom et prénom" id="name" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-0">
<label for="email">Email Address</label>
<input type="email" class="w-input" maxlength="256" name="email" data-name="Email" placeholder="Ecrivez votre adresse email" id="email" required="" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-1">
<label for="email-2">Téléphone</label>
<input type="text" class="w-input" maxlength="256" name="field" data-name="Field" placeholder="Ecrivez votre numéro de téléphone" id="field" required="" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-2">
<label for="quantity" >Quantité</label>
<input v-model="lineItems[0].quantity" type="number" class="w-input" maxlength="256" placeholder="Combien de places voulez vous acheter ?" required="">
<div class="w-embed">
<input type="hidden" name="name" value="Name">
<input type="hidden" name="prix" value="Prix">
<input type="hidden" name="image" value="Image">
</div>
<div class="event-cta-contain">
<div>
<stripe-checkout
ref="checkoutRef"
mode="payment"
:pk="publishableKey"
:line-items="lineItems"
:success-url="successURL"
:cancel-url="cancelURL"
/>
<button #click="submit()" class="cta-button w-button">Payer</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { StripeCheckout } from "#vue-stripe/vue-stripe";
import axios from "axios";
import Vue from 'vue';
export default Vue.extend({
components: {
StripeCheckout,
},
data() {
this.publishableKey = "pk_test_51JAWNYJ3Er0D2qeQ9y9P0RXOsZPfxGC9VVour44gRX2NNiP2CBAzV0NECWsupE5WZhybNBT8TX5TDG5XUOHxg8rg00rMplGIhK";
return {
degustation: [{
}],
id_product: this.$route.params.id as string,
loading: false,
lineItems:[
{
price: "price_1JChqzJ3Er0D2qeQ8cZhp2RM",
quantity: 1 ,
}],
successURL: "http://google.fr",
cancelURL: "http://google.fr",
};
},
mounted() {
axios
.get(`http://localhost:3000/api/v1/degustations/${this.id_product}`)
.then((response) => (this.degustation = response.data));
},
methods: {
submit() {
this.$refs.checkoutRef.redirectToCheckout()
},
},
});
</script>
Do I need to import something else or ?

Answer 1

A couple of things are happening here.
First, keep in mind that if you want to access the publishableKey in the template then you should add it in the object that you're returning in the data() function.
Try to do some checking before accessing checkoutRef, try this:
if (this.$refs.checkoutRef) {
this.$refs.checkoutRef.redirectToCheckout()
}