StripeCheckout throws an error when unmounting

[Michael2109]

Describe the bug
I would like to use the StripeCheckout component within my Vue 3 application. To do so I've copied their example code (and updated it to use the composition API) from here.

If I route using the Vue router to my subscribe component it works fine. I can click the subscribe button and pay. However, if I try routing to a different component after the subscribe page has been rendered it throws an error when trying to unmount the StripeCheckout component.

Exception

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)

To Reproduce

Subscribe Component

<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

const routes = [{
    path: "/subscribe",
    name: "Subscribe",
    component: HomeView,
    children: [{ name: "Subscribe", path: "", component: Subscribe }],
  },
  // Other routes...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

I've noticed with StripeElements you can destroy the components before unmounting. I'm wondering if something similar needs to be done with StripeCheckout however there are no functions to do so. I can't find any documentation on this.

Expected behavior
StripeCheckout should unmount without throwing an error.

Desktop

• OS: Windows 10
• Browser Chrome
• Version 108.0.5359.125

[CKGrafico]

+1 here, temporary fixed setting the line-items property on onsubmit...

async function submit() {
  id.value = props.blok.id;
  items.value = [{ price: id.value, quantity: 1 }];

  await nextTick();
  checkoutRef.value.redirectToCheckout();
}

  <stripe-checkout
      v-if="id"
      ref="checkoutRef"
      mode="payment"
      :pk="publishableKey"
      :line-items="items"
      :success-url="successURL"
      :cancel-url="cancelURL"
    />

    <Button :variant="blok.variant || 'basic'" @click="submit">{{ title }}</Button>

[Michael2109]

Thank you @CKGrafico, I've tried this but I'm still getting the same error.

[Michael2109]

Does anybody have any ideas what is causing this? I'd really like to use this with my Vue application.

[Michael2109]

It's been another month with no reply..
Does anybody have any ideas for this? Does Stripe Checkout not work with vue router and Vue 3?

[scramatte]

Hi,
Same issue here, please fix it
+1

[Michael2109]

@scramatte I'd look at implementing it yourself without this library. It looks like they have no intentions on fixing it.