Vue-Stripe: this.$refs.checkoutRef.redirectToCheckout(); is not a function. On an old npm version

Question

I am currently updating an old website and I have to include Stripe for the Checkout. When I go to the Checkout I get the Error message "this.$refs.checkoutRef.redirectToCheckout is not a function".

I testet the Checkout in a different test project and it worked thiere fine. I believe that the Error is connected to the old npm Version because this is the only difference between my projects. I am using npm version 14.18.1 and I installed vue-stripe 4.4.4.

Below is a code snippet.

<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

I'm not sure why this wouldn't work as it follows the documented example, but you should contact the vue-stripe developer for guidance on that.

If you're going to be using a fixed single product for multiple Checkout sessions, you should consider creating a Payment Link for that product/price instead. This would give you a reusable plain payment url you can send your customers to, which automatically creates a Checkout session for them.