Vue Stripe checkout error "TypeError: this.$refs.checkoutRef.redirectToCheckout is not a function"

Question

我正在测试 Vue Stripe Checkout 来自：https://docs.vuestripe.com/vue-stripe/stripe-checkout/one-time-payment 我在控制台中收到此错误：[Vue warn]：v-on 处理程序中的错误：“TypeError：this.$refs.checkoutRef.redirectToCheckout is not a function”，这是代码（我正在使用产品 y 测试键），已经启用了结帐客户端集成，我正在本地主机上测试它，条带文档说在测试模式下适用于任何域：

<template>
  <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">Pay now!</button>
  </div>
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
  data () {
    //this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    this.publishableKey = 'pk_test_wkxxxxxxxxxxxxxxxC00bSQO9djj';
    return {
      loading: false,
      lineItems: [
        {
          // price: 'some-price-id', // The id of the one-time price you created in your Stripe dashboard
          price: 'price_1KxXxxxxxxxxxxT2bZ'
          quantity: 1,
        },
      ],
      successURL: 'your-success-url',
      cancelURL: 'your-cancel-url',
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>

Answer 1

这个错误可能意味着很多，但这通常是由于未初始化 Stripe。

我会记录 process.env.STIPE_PUBLISHABLE_KEY 值以确保您从 Stripe Account.

传递可发布密钥

此外，如果 Vue-Stripe 捆绑了 Checkout Session 的创建，如果您使用 non-existent 价格 ID，它可能会失败。

确保您正确传递 PK 并使用来自您的 Stripe 帐户的有效价格 ID。

Answer 2

我在子组件中使用这个预构建的 vuestripe，当我更改为父组件时，错误没有再次出现。 @RyanM，谢谢。

Vue Stripe checkout error "TypeError: this.$refs.checkoutRef.redirectToCheckout is not a function"

Vue Stripe checkout error "TypeError: this.$refs.checkoutRef.redirectToCheckout is not a function"

vue.js

stripe-payments