I'm looking to integrate the StripeCheckout component into my Vue application. After copying and updating their example code using the composition API from here, everything works fine when I route to the subscribe component. However, if I try to navigate to a different component after rendering the subscribe page, an error occurs while trying to unmount the StripeCheckout component.
Error Message:
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)
Subscribe Component Code:
<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>
Router Setup:
const routes = [{
path: "/subscribe",
name: "Subscribe",
component: HomeView,
children: [{ name: "Subscribe", path: "", component: Subscribe }],
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
While researching, I found that with StripeElements, you can call the destroy function before unmounting components. I'm wondering if something similar needs to be implemented for StripeCheckout, although there are no documented functions for this purpose. Any insights on why StripeCheckout triggers an exception during routing/unmounting?