Larvel Vue Stripe (frontend)

Payment.blade.php

 <previewvacancy
            name="Stillingsannonse"
            description="Annonse aktiveres rett etter kjøp"
            stripekey="{{ config('services.stripe.key') }}"
            email="{{ $vacancy->user->email }}">
  </previewvacancy>
  
  
  
@section('stripe')
    <script src="https://checkout.stripe.com/checkout.js"></script>
@endsection

Payment.vue

<template>
    <div>
        <div v-if="statusMessage" class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md mb-4 mt-4" role="alert">
            <div class="flex">
                <div class="py-1"><svg class="fill-current h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
                <div>
                    <p class="font-bold">{{ statusMessage }}</p>
                </div>
            </div>
        </div>
        <pulseloader :loading="loading"></pulseloader>
        <form action="/subscriptions" method="POST">
            <input type="hidden" name="stripeToken" v-model="stripeToken">
            <input type="hidden" name="stripeEmail" v-model="stripeEmail">

            <button type="submit" class="bg-indigo hover:bg-indigo-dark text-white py-2 px-4 inline-flex items-center w-1/2" @click.prevent="pay">Kjøp annonse</button>
            <input type="text" name="coupon" placeholder="Skriv inn rabattkode?" class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-1/2 py-2 px-4 text-grey-darker" v-model="coupon">
        </form>
    </div>
</template>

<script>
    import Pulseloader from './Pulseloader.vue';
    export default {
        props: ['stripekey', 'email', 'name', 'description'],
        components: { Pulseloader },
        data() {
            return {
                stripeEmail: '',
                stripeToken: '',
                statusMessage: '',
                coupon: '',
                loading: false,
            };
        },
        created() {
            this.stripe = StripeCheckout.configure({
                key: this.stripekey,
                image: "/storage/apple-touch-icon.png",
                locale: "no",
                billingAddress: true,
                currency: "NOK",
                panelLabel: "Betal for",
                email: this.email,
                token: (token) => {
                    this.stripeToken = token.id;
                    this.stripeEmail = token.email;
                    this.loading = true;
                    axios.post('/dashboard/purchases',
                        {
                        stripeToken: this.stripeToken,
                        stripeEmail: this.stripeEmail,
                        coupon: this.coupon,
                        })
                        .then(response => {
                            this.loading = false;
                            this.statusMessage = response.data
                        })
                        .catch(e => {
                            this.loading = false;
                            this.statusMessage('Teknsik feil - prøv igjen senere');
                        });
                }
            });
        },
        methods: {
            pay() {
                this.stripe.open({
                    name: this.name,
                    description: this.description,
                    zipCode: true,
                    amount: 999,
                });
            },
        }
    }

</script>