Vue StripeCheckout -路由到另一个组件时出错

Question

我想在我的Vue应用程序中使用StripeCheckout组件。为此，我从这里复制了他们的示例代码(并更新了它以使用组合API)。

如果我路由到我的订阅组件，它工作正常。我可以点击订阅按钮并付费。但是，如果在呈现订阅页面之后尝试路由到不同的组件，则在尝试卸载StripeCheckout组件时抛出错误。

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')
at isAsyncWrapper (runtime-core.esm-bundler.js?d2dd:2243:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6061:1)
at unmountComponent (runtime-core.esm-bundler.js?d2dd:6183:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6068:1)
at unmountChildren (runtime-core.esm-bundler.js?d2dd:6212:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6086:1)
at unmountComponent (runtime-core.esm-bundler.js?d2dd:6183:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6068:1)
at unmountChildren (runtime-core.esm-bundler.js?d2dd:6212:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6086:1)

<<p>订阅组件/strong>

<template>
<div>
<stripe-checkout
ref="checkoutRef"
mode="subscription"
:pk="publishKey"
:line-items="lineItems"
:success-url="successUrl"
:cancel-url="cancelUrl"
@loading="(v) => (this.loading = v)"
/>
<button @click="submit">Subscribe!</button>
</div>
</template>
<script lang="ts" setup>
import { StripeCheckout } from "@vue-stripe/vue-stripe";
import { ref } from "vue";
import { EnvironmentVariableManager } from "@/utils/environment-variable-manager";
const publishKey = EnvironmentVariableManager.getStripePublishableKey();
const loading = ref(false);
const lineItems = [
{
price: "price_1MLUEMLQEklYWrzRVqxFJqt8",
quantity: 1,
},
];
const successUrl = EnvironmentVariableManager.getUrl() + "/subscribe";
const cancelUrl = EnvironmentVariableManager.getUrl() + "/subscribe";
const checkoutRef = ref<StripeCheckout | null>(null);
const submit = () => {
if (checkoutRef.value) {
checkoutRef.value.redirectToCheckout();
} else {
console.error("Checkout ref not found");
}
};
</script>

路由器

const routes = [{
path: "/subscribe",
name: "Subscribe",
component: HomeView,
children: [{ name: "Subscribe", path: "", component: Subscribe }],
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});

我注意到使用StripeElements，您可以在卸载之前destroy组件。我想知道是否需要与StripeCheckout做类似的事情，但是没有功能可以这样做。我找不到任何关于这个的文档。

为什么StripeCheckout在路由/卸载时导致抛出异常?

Answer 1

我有同样的问题，还没有找到一个适当的解决方案，但一个临时的修复，为我的工作是

<stripe-checkout
v-if="readyToPay"
ref="checkoutRef"
mode="subscription"
:pk="publishKey"
:line-items="lineItems"
:success-url="successUrl"
:cancel-url="cancelUrl"
@loading="(v) => (this.loading = v)"
/> 
...
<script>
export default {
name: "Packages",
data(){return{readyToPay:false}}
}
</script>

，然后让付款按钮的提交函数触发条检组件显示并继续付款。

async submit() {
this.readyToPay = true;
await this.$nextTick();
...
}