如何解决错误 Object is of type unknown with VueStripe

Question

我在我的 Vue3 应用程序中导入了 StripeCheckout 组件，但我的提交方法出错。

复制 重现行为的步骤：

1. 我导入了 StripeCheckout 组件。
2. 我添加了部分
3. 我添加了所有数据和提交方法。
4. 我有这个错误：对象在我的 this.$refs.checkoutRef.redirectToCheckout() 方法上属于“未知”类型。

这是我的视图代码

<template>
<div class="section form-degustation-section">
    <div class="mycontain form-degustation-contain">
        <a href="/degustations">retrouner aux calendrier des soirées</a>
        <div class="soiree-text-presentation-contain">
            <h1>Titre de l'événement</h1>
            <p>Description de l'événement. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</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 type="number" class="w-input" maxlength="256" name="quantity" data-name="quantity" placeholder="Combien de places voulez vous acheter ?" id="quantity" required="" min="1">
                    <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"
                @loading="(v) => (loading = v)"
              />
              <button @click="submit" class="cta-button w-button">Payer</button>
            </div>
          </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>




<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
import { StripeCheckout } from "@vue-stripe/vue-stripe";

export default defineComponent({
  components: {
    StripeCheckout,
  },
  data() {
    this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    return {
      degustation: {},
      id_product: this.$route.params.id as string,
      loading: false,
      lineItems: [
        {
          price: "",
          quantity: 1,
        },
      ],
      successURL: "http://google.fr",
      cancelURL: "http://google.fr",
    };
  },
  mounted() {
    this.axios
      .get(`http://localhost:3000/api/v1/degustations/${this.id_product}`)
      .then((response) => (this.degustation = response.data));
  },
  methods: {
    submit() {
      this.$refs.checkoutRef.redirectToCheckout()
    },
  },
});
</script>

错误截图

这是 vue3 或 TypeScript 的问题吗？

Answer 1

检查documentation 中的示例代码后，我认为错误在于您在<stripe-checkout> 标记中声明checkoutRef 的方式。正确的应该是：

<stripe-checkout
  ref="checkoutRef"
  mode="payment"
  :pk="publishableKey"
  :line-items="lineItems"
  :success-url="successURL"
  :cancel-url="cancelURL"
  @loading="(v) => (loading = v)"
/>

注意ref之前没有:。

如果还是不行，那我猜是 Vue 3 的问题。正如this GitHub issue 中提到的，vue-stripe 还不支持 Vue 3。

如果必须使用 Vue 3，也许应该考虑使用替代库，例如 vue-use-stripe。