Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

DougE's avatar
Level 3

Display Errors Using Vue & Axios

I've got a Vue form going that includes Stripe, the form itself works a treat and everything processes correctly. The problem is when there are errors, these errors do not display in the allotted position in the form. This is based off the Handling Errors episode of the Accepting Payments series.

Form

<template>
    <form method="POST" action="/organisation">

        <input type="hidden" name="stripeToken" v-model="stripeToken">
        <input type="hidden" name="stripeEmail" v-model="stripeEmail">

        <div class="panel panel-default">
            <div class="panel-heading">Basic Information</div>

            <div class="panel-body">
                <div class="form-group">
                    <label for="organisation_name" class="control-label">Organisation Name:</label>

                    <input type="text" name="organisation_name" class="form-control" id="organisation_name" v-model="organisation_name" required>
                </div>

            </div>

            <div class="panel-heading">Subscription Details</div>

            <div class="panel-body">

                <div class="form-group">
                    <label for="subscription_type" class="control-label">Number of Vehicles:</label>

                    <select class="form-control" name="plan" v-model="plan">
                        <option v-for="plan in plans" :value="plan.id">
                            {{ plan.name }} &mdash; ${{ plan.price /100 }}
                        </option>
                    </select>
                </div>

            </div>                    

            <div class="panel-body">
                <div class="form-group">
                    <button type="submit" @click.prevent="subscribe" class="btn btn-primary">Create</button>
                </div>
            </div>
            
            <p class="help is-danger" v-show="status" v-text="status"></p>
        
        </div>
    </form>
</template>

<script>
    export default {
        props: ['plans'],
        data() {
            return {
                stripeEmail: '',
                stripeToken: '',
                plan: 1,
                organisation_name: '',
                status: false
            };
        },
        created(){
            let module = this; // cast to separate variable
            this.stripe = StripeCheckout.configure({
                key: Laravel.stripeKey,
                image: "https://stripe.com/img/documentation/checkout/marketplace.png",
                locale: "auto",
                panelLabel: "Subscribe For",
                email: Laravel.user.email,
                token: function(token){

                    axios.post('/organisation', {
                        stripeToken:  token.id,
                        stripeEmail: token.email,
                        plan: module.plan,
                        organisation_name: module.organisation_name
                      })
                      .then(function (response) {
                        window.location = response.data.redirect;
                      })
                      .catch(error => {
                        error => this.status = error.response.data.status;
                        console.log(error.response.data);
                        console.log(error.response.status);
                        console.log(error.response.headers);
                      });

                }
            });
        },
        methods: {
            subscribe(){
                let plan = this.findPlanById(this.plan);

                this.stripe.open({
                    name: plan.name,
                    description: plan.description,
                    zipCode: true,
                    amount: plan.price
                });
            },

            findPlanById(id){
                return this.plans.find(plan => plan.id == id);
            }
        }
    }
</script>

Relevant Portion of the Controller

catch(\Exception $e){
            return response()->json(
                ['status' => $e->getMessage()], 422
            );
        }

Screen shot of the output from the console.logs.

It appears to me that the status variable isn't updating with the error to display it, as after I trigger an error - in this case it's not filling out the organisation name will fail the validation. Maybe there is a better way of doing this?

Thank you.

0 likes
2 replies
DougE's avatar
DougE
OP
Best Answer
Level 3

I managed to fix it by changing the .catch block to the following:

.catch(error => {
    module.status = error.response.data.status;
});

Rather than do this.status the solution was taking the recast variable (called module) and making use of that instead. I did have to slightly restructure the catch block but it now works and data is correctly passed back to the form.

3 likes
fshequin's avatar

I had the same issue. I can report that @DougE 's solution worked for me.

Please or to participate in this conversation.