How to integrate Stripe Checkout in Laravel Vue app

Question

I am trying to integrate Stripe Checkout into my Laravel Vue.js application. I watched a tutorial on YouTube. However, I get the following error.

Vue Stripe will not work on an insecure host. Make sure that your site is using TCP/SSL.

<template>
    <div class="py-8 flex justify-center">
        <stripe-checkout
            ref="checkoutRef"
            mode="payment"
            :pk="publishableKey"
            :sessionId="sessionId"
        />
        <button class=" bg-blue-500 px-2 py-1 rounded text-white" @click="submit">Pay now!</button>
    </div>
</template>

<script>
import { StripeCheckout  } from "@vue-stripe/vue-stripe";
import axios from "axios";
export default {
    components: {
        StripeCheckout ,
    },
    data() {
        return {
            publishableKey: "pk_test_51KtYynFJTg08EEU2sYHLN0LKrnZTuJCazai8jmokQ2096V7IXYjX2XsdGi7xh5jOgSCz5nnn7YfJS5afTtEHRSxk00EUEcmhsj",
            sessionId: null,
        };
    },
    mounted() {
        console.log("Component mounted.");
        this.getSession()
    },
    methods: {
        getSession() {
            axios.get('getSession').then(res => {
                this.sessionId = res.data.id
            }).catch(err => {

            });
        },
        submit () {
        this.$refs.checkoutRef.redirectToCheckout();
        }
    }
};
</script>```

Answer 1

According to the docs you can register it as a plugin where you can define a testMode option to override the insecure host warning

import Vue from 'vue';
import { StripePlugin } from '@vue-stripe/vue-stripe';

const options = {
  pk: process.env.STRIPE_PUBLISHABLE_KEY,
  testMode: true, // Boolean. To override the insecure host warning
  stripeAccount: process.env.STRIPE_ACCOUNT,
  apiVersion: process.env.API_VERSION,
  locale: process.env.LOCALE,
};

Vue.use(StripePlugin, options);