'Vue Stripe checkout error "TypeError: this.$refs.checkoutRef.redirectToCheckout is not a function"

I am testing the Vue Stripe Checkout from: https://docs.vuestripe.com/vue-stripe/stripe-checkout/one-time-payment And i am getting this error in console: [Vue warn]: Error in v-on handler: "TypeError: this.$refs.checkoutRef.redirectToCheckout is not a function", here is the code (i'm using product y test key), already checkout client integration is enable, and i am testing it in localhost, stripe docs say in test mode works with any domain:

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="payment"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Pay now!</button>
  </div>
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
  data () {
    //this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    this.publishableKey = 'pk_test_wkxxxxxxxxxxxxxxxC00bSQO9djj';
    return {
      loading: false,
      lineItems: [
        {
          // price: 'some-price-id', // The id of the one-time price you created in your Stripe dashboard
          price: 'price_1KxXxxxxxxxxxxT2bZ'
          quantity: 1,
        },
      ],
      successURL: 'your-success-url',
      cancelURL: 'your-cancel-url',
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>
vue.jsstripe-payments


Solution 1:[1]

I was using this prebuilt vuestripe in a child component, when i changed to an parent component, the error did not came up again. @RyanM, thnxs.

Solution 2:[2]

This error can mean a lot of this but often this is due to Stripe not being initialized.

I would log the process.env.STIPE_PUBLISHABLE_KEY value to ensure you are passing the Publishable Key from your Stripe Account.

Additionally, if Vue-Stripe bundles the creation of the Checkout Session it will likely fail if you use a non-existent Price ID.

Ensure you are passing your PK properly and using valid Price IDs from your Stripe account.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 llogaran
Solution 2 RyanM

Related Questions