Stripe Elements

app.js

import Vue from 'vue';

const app = new Vue({
    el: '#app',

    created() {
        window.stripe = Stripe(window.EventManager.stripe.key);
        this.mapBillingElements();
    },

    methods: {
        mapBillingElements() {
            var elements = stripe.elements();
            window.card = elements.create('card');

            window.card.mount('#card-element');
        },

        handleBillingForm(event) {
            console.log(event, window.card);
            stripe.createToken(window.card);
        }
    }
});

index.blade.php

[...]

                    <form action="/dashboard/billing" method="post" id="payment-form"
                          @submit.prevent="handleBillingForm">
                        {{ csrf_field() }}
                        {{ method_field('patch') }}
                        
                        <div class="form-group">
                            <label for="card-element">
                                {{ __('Credit Card') }}
                            </label>
                            <div id="card-element" class="form-control" ref="card">
                                <!-- a Stripe Element will be inserted here. -->
                            </div>

                            <!-- Used to display form errors -->
                            <div id="card-errors" class="form-text text-muted" role="alert"></div>
                        </div>

                        <input type="submit" class="btn btn-primary" value="{{ __('Save billing details') }}">
                    </form>

[...]