Stripe elements - capture card errors

I'm using JS for this but it may help you:

var stripe = Stripe('YOURAPIKEYHERE');
var elements = stripe.elements();

var card = elements.create('card');
card.mount('#card-element');

// I wrap the below in a submit handler for the form
stripe.createToken(card).then(function (result) {
    if (result.error) {
        // Do something wit h the resulting error result.error.message
    } else {
        // Success carry on
    }
});

@grahammorbydev Make use of Vue and elevate the card error to a data property. When you get an error from the Stripe SDK, set the data property and then your component will update accordingly:

<template>
    <div>
        <div id="card-element"></div>
        <div id="card-error" v-if="cardError">{{ cardError }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cardError: null
        };
    },
    methods: {
        someMethod() {
            // Initialize Stripe
            this.card.addEventListener('change', (event) => {
                this.cardError = event.error ? event.error.message : null;
            });
        }
    }
}
</script>

Also, Stripe has its own NPM module for loading the SDK asynchronously: https://www.npmjs.com/package/@stripe/stripe-js

import { loadStripe } from '@stripe/stripe-js';

loadStripe(this.stripeApiKey).then((stripe) => {
    this.stripe = stripe;
});

hmmm not working my end

I get the network return, just zero errors being pushed

@grahammorbydev What do you mean by “network return”?

Something’s clearly not hooked up right, as the example I gave is how I use Stripe within my own Vue components.

Its very strange

this.includeStripe('js.stripe.com/v3/', function(){
            this.stripe = Stripe( this.stripeAPIToken );
            this.elements = this.stripe.elements();

            this.card = this.elements.create('card');
            this.card.mount('#card-element');

            this.card.addEventListener('change', (event) => {
                this.cardError = event.error ? event.error.message : null;
            });
        }.bind(this) );

that's the code

this is the card element

 <label>Card Holder Name</label>
                        <input id="card-holder-name" type="text" v-model="name" class="form-control mb-2" />
                        <label>Card Details</label>
                        <div id="card-element" class="form-control" style='height: 2.6em; padding-top: .7em;'>
                        </div>
                        <!-- Used to display form errors. -->
                        <div id="card-errors" class="text-danger text-center" style="font-size: 15px" role="alert">{{ cardError }}</div>