如何在 vue2 项目上使用 VueStripe？

Question

我在我的 vue2 项目中添加了 Vue Stripe，我的代码中有 2 个类似的错误：

“Vue | 类型”上不存在属性“redirectToCheckout”元素 | (Vue | Element)[]'。

“CombinedVueInstance>>' 类型不存在属性 'publishableKey'。

我遵循了他们网站上的文档，所有内容都与他们的代码相似，所以我不知道为什么会出现这些错误。

截图

如果你想检查，这是我的代码

<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>

我需要导入其他东西吗？

Answer 1

这里发生了一些事情。

首先，请记住，如果您想访问模板中的publishableKey，则应将其添加到您在data() 函数中返回的对象中。

在访问checkoutRef之前尝试做一些检查，试试这个：

if (this.$refs.checkoutRef) {
  this.$refs.checkoutRef.redirectToCheckout()
}