Installing vue-stripe-elements got Unknown custom element error

[sergeynilov]

Hello,

I tried to install vue-stripe-elements into my Laravel 5.8 / vuejs 2.6 app, but got console error :

[Vue warn]: Unknown custom element: <card> - did you register the component correctly? For ```
recursive components, make sure to provide the "name" option.
    found in
    ---> <SelectedSubscription> at

I follwed instruction and on my vue file, with non stripe elements cut:

<template>

    <div class="page-content col-md-offset-2">

        <div class="sign-up container-fluid justify-content-center" style="max-width: 460px;">

            <div class="card m-2 p-2 shadow-none">
                <div class="card-body">

                    <div class="px-12">

                        <h1>Please give us your payment details:</h1>
                        <card class='stripe-card'
                              :class='{ complete }'
                              stripe='pk_test_NNNN'
                              :options='stripeOptions'
                              @change='complete = $event.complete'
                        />
                        <button class='pay-with-stripe' @click='pay' :disabled='!complete'>Pay with credit card</button>

                    </div>

                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import { stripeKey, stripeOptions } from './stripeConfig.js'
    import { Card, createToken } from 'vue-stripe-elements-plus'

    import {bus} from '../../../../app';
    import appMixin from '../../../../appMixin';

    export default {
        data: function () {
            return {
                complete: false,
                stripeOptions: {
                    // see https://stripe.com/docs/stripe.js#element-options for details
                },

                components: { Card },

                packagesList: [
                ]

            }

        },
        name: 'selectedSubscription',

        created() {
        }, //  created) {

        mounted() {
        }, // mounted() {

        mixins: [appMixin],

        methods: {

            pay () {
                alert( "pay::"+(-66) )
                // createToken returns a Promise which resolves in a result object with
                // either a token or an error key.
                // See https://stripe.com/docs/api#tokens for the token object.
                // See https://stripe.com/docs/api#errors for the error object.
                // More general https://stripe.com/docs/stripe.js#stripe-create-token.
                createToken().then(data => console.log(data.token))
            },

        }, // methods: {

        computed: {

            currentLoggedUser() {
                return this.$store.getters.currentLoggedUser;
            },

        } //computed: {

    }

</script>

<style lang="css">

    .stripe-card {
        width: 300px;
        border: 1px solid grey;
    }
    .stripe-card.complete {
        border-color: green;
    }

</style>

I do not see why error, as I defined import and components for card as in sample.

Where is an error ?

Thanks!

[garshyn]

Try to register the component

<script>
    // ...
    import { Card, createToken } from 'vue-stripe-elements-plus'
    // ...
    export default {
        data: function () {
            return {
                // ...
                components: { Card }, // This will not work
                // ...
            }

        },
    // ...
        components: {
          card: Card
        }
    // ...
    }
</script>