How to add stripe elements in vue2 from?

Question

In Laravel 5.8 / vuejs 2.6 / vuex / mysql app I need to add stripe elements from https://stripe.com/docs/stripe-js, http://prntscr.com/phflkd

and for this in resources/views/index.blade.php I added line:

@include('footer')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('js/waves.min.js') }}"></script>
<script src="{{ asset('js/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('js/powerange.js') }}"></script>
<script src="{{ asset('js/appInit.js') }}"></script>
<script src="{{ asset('js/app.js') }}{{  "?dt=".time()  }}"></script>

<script src="https://js.stripe.com/v3/"></script>

</html>

and in my vue form I init stripe in initStripe() method, which is called in mount event :

<template>

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

        <div class="sign-up container-fluid justify-content-center" style="max-width: 460px;">
                        <hr>
                        <hr>
                        <form action="/charge" method="post" id="payment-form">
                            <div class="form-row">
                                <label for="card-element">
                                    Credit or debit card
                                </label>
                                <div id="card-element">
                                    <!-- A Stripe Element will be inserted here. -->
                                </div>

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

                            <button>Submit Payment</button>
                        </form>

                        <button type="button"
                                class="btn btn-outline-pink btn-round waves-effect waves-light cancel-btn mr-5" @click.prevent="cancelSelectedSubscription()">
                            <i :class="getHeaderIcon('cancel')"></i> Cancel
                        </button>


        </div>
    </div>


</template>


<script>
    import {bus} from '../../../../app';
    import appMixin from '../../../../appMixin';

    import Vue from 'vue';

    export default {
        data: function () {
            return {
                is_page_loaded: false,

            }

        },
        name: 'selectedSubscription',

        created() {

            if ( typeof this.currentLoggedUser.id != 'number' ) {
                this.showPopupMessage("Access", 'Your session is expired !', 'error');
                this.$store.commit('logout');
            }

            this.message = '';

        }, //  created) {

        mounted() {
            this.is_page_loaded = true
            this.setAppTitle("Selected Subscription", 'Selected Subscription Details', bus);
            this.initStripe();
        }, // mounted() {


        mixins: [appMixin],

        methods: {


            cancelSelectedSubscription() {
                this.$router.push({path: '/personal-details'});
            },

            initStripe()
            {

                console.log("Stripe -1::")

                // Create a Stripe client.
                var stripe = Stripe('pk_test_NNNN');
                console.log("Stripe -2::")

                // Create an instance of Elements.
                var elements = stripe.elements();
                console.log("Stripe -3::")

                // Custom styling can be passed to options when creating an Element.
                // (Note that this demo uses a wider set of styles than the guide below.)
                var style = {
                    base: {
                        color: '#32325d',
                        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                        fontSmoothing: 'antialiased',
                        fontSize: '16px',
                        '::placeholder': {
                            color: '#aab7c4'
                        }
                    },
                    invalid: {
                        color: '#fa755a',
                        iconColor: '#fa755a'
                    }
                };

                // Create an instance of the card Element.
                var card = elements.create('card', {style: style});
                console.log("Stripe -4::")

                // Add an instance of the card Element into the `card-element` <div>.
                card.mount('#card-element');

                // Handle real-time validation errors from the card Element.
                card.addEventListener('change', function (event) {
                    var displayError = document.getElementById('card-errors');
                    if (event.error) {
                        displayError.textContent = event.error.message;
                    } else {
                        displayError.textContent = '';
                    }
                });
                console.log("Stripe -5::")

                // Handle form submission.
                var form = document.getElementById('payment-form');
                form.addEventListener('submit', function (event) {
                    event.preventDefault();

                    stripe.createToken(card).then(function (result) {
                        if (result.error) {
                            // Inform the user if there was an error.
                            var errorElement = document.getElementById('card-errors');
                            errorElement.textContent = result.error.message;
                        } else {
                            // Send the token to your server.
                            this.stripeTokenHandler(result.token);
                        }
                    });
                });

            }, // initStripe() {


            // Submit the form with the token ID.
            stripeTokenHandler(token) {
                // Insert the token ID into the form so it gets submitted to the server
                var form = document.getElementById('payment-form');
                alert( "stripeTokenHandler form::"+var_dump(form) )
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);

                // Submit the form
                form.submit();
            },

        }, // methods: {

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

    }


</script>

<style lang="css">

    /**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
    .StripeElement {
        box-sizing: border-box;

        height: 40px;

        padding: 10px 12px;

        border: 1px solid transparent;
        border-radius: 4px;
        background-color: white;

        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
        border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }

</style>

As result in browser's console I see console messages, “Credit or debit card” label and uncolored “Submit Payment” button : https://i.sstatic.net/po8hF.jpg

If to click on “Submit Payment” button I see :https://i.sstatic.net/V1CEv.jpg

Is way I added Stripe to my vue form invalid? Which is valid way? I suppose that I do not have to insert any additive elements/code in this block :

    <div id="card-element">
        <!-- A Stripe Element will be inserted here. -->
   </div>

and they must be uploaded automatically on my form upload ?

and which method have I to use as in my app I save my data with axios?

Answer 1

I made all correctly, it was styles issue. I replaced css from the example with lines :

#card-element {
    line-height: 1.5rem;
    margin: 10px;
    padding: 10px;
}
.__PrivateStripeElement {
    min-width: 300px !important;
    min-height: 40px !important;
    color: $text_color;
}

and my form was ready for payment!