publishableKey doesn't exist on Type ... & redirectoToCheckout doesn't exist on type ...

[AKurka]

Describe the bug 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>>>'.

Screenshots

Additional context 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" >
        <a href="/soirees-degustations">retrouner aux calendrier des soirées</a>
        <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 ?

[jofftiquez]

Hi, I don't see anything wrong with your implementation. These errors are not from vue-stripe, somehow your typescript is invalidating the code. I'm not an expert in typescript so I can't tell really, sorry. But I am definitely sure there's nothing wrong with your implementation.

For you reference, vue-stipe's typings has the method redirectToCheckout() declared -> https://github.com/vue-stripe/vue-stripe/blob/5dabbbf4eae31a20688603fac751b01cf694e994/typings/index.d.ts#L32

[jofftiquez]

Hello, I will be closing this for now to reduce stale issues. Please reopen if needed. Thanks.