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 }} — ${{ 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.