Unknown custom element: <vue-stripe-checkout> - did you register the component correctly?

Question

I get the following error when using the vue-stripe-checkout component to make use of sessions:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I already tried everything, install it globally and in the component itself individually:

    <div>
<template>
<vue-stripe-checkout
  ref="sessionRef"
  :pk="publishableKey"
  :session-id="sesion"
>
  <template slot="checkout-button">
 <button @click="$refs.sessionRef.redirectToCheckout()" class="btn-yellow wow fadeInUp btn" style="visibility: visible; animation-name: fadeInUp;">Pagar</button>
  </template>
</vue-stripe-checkout>
   
</div>
</template>

<script>
//import { StripeCheckout } from 'vue-stripe-checkout';
import VueStripeCheckout from "vue-stripe-checkout";

export default {
   components: {
    VueStripeCheckout,
   // 'vue-stripe-checkout': VueStripeCheckout,
  },
    data() {
    return {
    loading: false,
    sesion: '',
    lineitems: [],
    publishableKey:"pk_live_51H2ldaC2yedQUHHsgvBRSRUteFyYcwW8HHylF2MA7qbDfIT9NUNk3wTpJWu2z7C0eNVdkj5EJA9MSJvx8yR3Biif00RwexkPNq",
    items: [],
    billingAddressCollection: 'required',
    successUrl: 'https://tarfut.es',
    cancelUrl: 'https://tarfut.es',
  }
  },
  created() {
    for (var prop in this.$store.state.cart) {
      //console.log(this.$store.state.cart[prop])
      var x = Object.assign({}, this.$store.state.cart[prop])
      this.items.push({quantity: this.$store.state.cart[prop].quantity, sku: this.$store.state.cart[prop].sku})
      this.lineitems.push({quantity: this.$store.state.cart[prop].quantity, price: this.$store.state.cart[prop].price})
    }
    let formdata = new FormData();
        formdata.append('data',JSON.stringify(this.lineitems));
         this.$http.post(`/crearsesion`, formdata)
                    .then(response => {
                        if (response.data.success) {
                            this.sesion = response.data.id
                            console.log(this.sesion)
                            console.log(response.data.id)
                        } 
                    }).then(() => {
                        
                    })

  },
    
    methods: {
      checkout () {
        
      this.$refs.checkoutRef.redirectToCheckout();
    },
         removeFromCart(item) {
        this.$store.commit('removeFromCart', item);
        this.$store.commit('saveCart');
    },
    },
      computed: {
                totalAmount: function () {
                    var sum = 0;
                    this.$store.state.cart.forEach(e => {
                        sum += parseFloat(e.total);
                    });
                    return sum
                }
            }
}
</script>

Answer 1

Try this:

<template>
  <div> // Here you have a nesting error in your template
    <vue-stripe-checkout
      ref="sessionRef"
      :pk="publishableKey"
      :session-id="sesion"
    >
     <template slot="checkout-button">
       <button @click="$refs.sessionRef.redirectToCheckout()" class="btn-yellow wow fadeInUp btn" style="visibility: visible; animation-name: fadeInUp;">Pagar</button>
     </template>
   </vue-stripe-checkout>
   
  </div>
</template>

<script>
import { StripeCheckout } from 'vue-stripe-checkout';

export default {
   components: {
   'vue-stripe-checkout': StripeCheckout,
  },
  // ...
}
</script>

Answer 2

If you rename the component, you still need the brackets in the import and us the as

import { StripeCheckout as VueStripeCheckout } from 'vue-stripe-checkout';

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Usage:

components: { VueStripeCheckout }

The name in the template is in kebab-case :

<vue-stripe-checkout>

Also it's indeed important to have valid html, so you need to fix the nesting of div and template

Answer 3

You imported as VueStripeCheckout and used vue-stripe-checkout try changing it to VueStripeCheckout

<VueStripeCheckout
  ref="sessionRef"
  :pk="publishableKey"
  :session-id="sesion"
>
  <template slot="checkout-button">
 <button @click="$refs.sessionRef.redirectToCheckout()" class="btn-yellow wow fadeInUp btn" style="visibility: visible; animation-name: fadeInUp;">Pagar</button>
  </template>
</VueStripeCheckout>