Stripe is not defined

Hi,

I am new to Laravel Spark and Vue.js. So, having too many problems.

I know Laravel Spark has a page to collect Payment Method and register customer with Stripe. I was trying to duplicate this with few changes of my own. So, I have a page that is collecting user billing info and payment info.

But I am receiving an error:

ReferenceError: Stripe is not defined

I have my own Vue.js component and I have created an HTML form in it. Following is my JavaScript Code:

if (
    Spark.state.user != null && Spark.state.user.stripe_id != null
    && Spark.state.user.stripe_id != ''
) {
    var base = require('settings/settings');
} else {
    var base = '';
}

Vue.component('plans', {
    props: {
        user: {},
        vendors: {
            type: Array,
            required: true
        },
        teams: {},
        currentTeam: {}
    },
    /**
     * Load mixins for the component.
     */
    mixins: [
        base,
    ],
    data: function () {
        return {
            otime_gtotal: 0,
            rm_gt: 0,
            otime_discount: 0,
            rm_d: 0,
            tabstep: 1,
            contbutton: 0,
            cardElement: null,
            plans_form: new SparkForm({
                name: '',
                stripe_token: '',
                address: '',
                address_line_2: '',
                city: '',
                state: '',
                zip: '',
                country: 'US'
            }),
            stripe: Spark.stripeKey ? Stripe(Spark.stripeKey) : null
        }
    },
    computed: {
        // To-do
    },
    mounted() {
        Stripe.setPublishableKey(Spark.stripeKey);
        this.cardElement = this.createCardElement('#payment-card-element');

        // this.initializeBillingAddress();
    },
    methods: {
        sumUp: function() {
            this.otime_gtotal += 250;
            this.rm_gt += 75;
            this.contbutton++;
        },
        subtractDown: function() {
            this.otime_gtotal -= 250;
            this.rm_gt -= 75;
            this.contbutton--;
        },
        otgtValue: function() {
            return this.otime_gtotal;
        },
        rmgtValue: function() {
            return this.rm_gt;
        },
        setDiscounts: function(otime, rmonthly) {
            this.otime_discount = otime;
            this.rm_d = rmonthly;
        },
        getDiscounts: function() {
            return {
                otdiscount: this.otime_discount,
                rmdiscount: this.rm_d
            };
        },
        getOTNPayable: function() {
            return this.otime_gtotal - this.otime_discount;
        },
        getRMNPayable: function() {
            return this.rm_gt - this.rm_d;
        },
        selectPlan: function(event) {
            if ($(event.target).prop("checked")) {
                $("span.ot_" + event.target.value).show();
                $("span.rm_" + event.target.value).show();
                this.sumUp();
            } else {
                $("span.ot_" + event.target.value).hide();
                $("span.rm_" + event.target.value).hide();
                this.subtractDown();
            }
            this.$refs.otgtfigure.innerHTML = this.otgtValue();
            this.$refs.rmgtfigure.innerHTML = this.rmgtValue();
            this.$refs.otnpfigure.innerHTML = this.getOTNPayable();
            this.$refs.rmnpfigure.innerHTML = this.getRMNPayable();
        },

        /**
         * Update the billable's card information.
         */
        update() {
            this.plans_form.busy = true;
            this.plans_form.errors.forget();
            this.plans_form.successful = false;
            // this.cardForm.errors.forget();

            // Here we will build out the payload to send to Stripe to obtain a card token so
            // we can create the actual subscription. We will build out this data that has
            // this credit card number, CVC, etc. and exchange it for a secure token ID.
            const payload = {
                name: this.plans_form.name,
                address_line1: this.plans_form.address || '',
                address_line2: this.plans_form.address_line_2 || '',
                address_city: this.plans_form.city || '',
                address_state: this.plans_form.state || '',
                address_zip: this.plans_form.zip || '',
                address_country: this.plans_form.country || '',
            };

            // Once we have the Stripe payload we'll send it off to Stripe and obtain a token
            // which we will send to the server to update this payment method. If there is
            // an error we will display that back out to the user for their information.
            this.stripe.createToken(this.cardElement, payload).then(response => {
                if (response.error) {
                    this.cardForm.errors.set({card: [
                        response.error.message
                    ]});

                    this.plans_form.busy = false;
                } else {
                    this.sendUpdateToServer(response.token.id);
                }
            });
        }
    }
});

I have copied "update" method from somewhere else and I don't see the same error there but I have it on my page. I have spent too much time on this issue and I think Stripe class or function is loading after it has been called but I cannot locate the place where Stripe class or function is loaded nor I am able to find Stripe JavaScript class or function.

Please, help!

Thanks!