Vue Stripe:这个$refs.checkoutRef.redirectToCheckout();不是函数.在旧的

Question

我目前正在更新一个旧网站，我必须在结账时加入Stripe。当我去结账时，我得到错误消息"；这个$refs.checkout Ref.redirectToCheckout不是函数；。

我在另一个测试项目中测试了Checkout，它运行得很好。我相信错误与旧的npm版本有关，因为这是我的项目之间的唯一区别。我使用的是npm版本14.18.1，我安装了vue stripe 4.4.4。

下面是一个代码片段。

<template>
.
.
.
<stripe-checkout
ref="checkoutRef"
mode="payment"
:pk="publishableKey"
:line-items="lineItems"
:success-url="successURL"
:cancel-url="cancelURL"
@loading="v =>loading = v"
/>
<button class="btn btn-danger unpaid" @click="checkout">Checkout</button>
.
.
.
</template>
<script>
import axios from "axios"; //This is irrelevant for the Checkout
import qs from 'query-string'; //This is irrelevant for the Checkout
import {StripeCheckout} from '@vue-stripe/vue-stripe';
export default {
components: {
StripeCheckout,
},
name: 'MeineRechnungen',
data() {
this.publishableKey = process.env.VUE_APP_STRIPE_PUBLISHABLE_KEY;
return{
loading: false,
lineItems: [
{
price: process.env.VUE_APP_STRIPE_PRODUCT_STANDARD,
quantity: 1,
},
],
successURL: 'https:xxxxx.com', //I censored the URL for this question
cancelURL: 'https:xxxxx.com', //I censored the URL for this question
invoices: '' //This is irrelevant for the Checkout 
}
},
methods: {
checkout() {
this.$refs.checkoutRef.redirectToCheckout();
},
.
.
.
</script>

Answer 1

我不确定为什么这不起作用，因为它遵循了文档中的示例，但您应该联系vue-stripe开发人员以获得指导。

如果你要在多个结账会话中使用固定的单一产品，你应该考虑为该产品/价格创建支付链接。这将为您提供一个可重复使用的普通支付url，您可以将客户发送到它，它会自动为他们创建一个结账会话。