VueJS 2 - Submitting form with Stripe Checkout response? - vuejs2

Question

I'm attempting to integrate VueJS (2.4.2) with Stripe Checkout, but my form is not submitting the updated values for the token and email returned from Stripe.
The basic flow: mount a Vue instance to a form, select a "plan" from a JSON object, open the Stripe Checkout modal populated with the plan's info, bind a couple of the form inputs to the values returned by Stripe, and submit the form. All goes according to plan EXCEPT that the data that actually hits the server is NOT the updated values.
I have tried v-bind and v-model and neither seems to work. I can see the form being updated with the correct values from the Stripe response, but when it actually submits, the originally bound data is submitted.
The HTML (Laravel Blade)
#extends('layouts.master')
#section('page_meta')
<title>{{ page_title('Checkout') }}</title>
#endsection
#section('content')
<div class="container">
#include('errors.list')
{!! Form::open([
'url' => '/subscriptions',
'id' => 'checkoutForm',
]) !!}
#foreach ($plans as $plan)
<div>
{{ $plan->name }} {{ $plan->description }}
<button v-on:click.prevent="subscribe({{ $plan->id }})">Select</button>
</div>
#endforeach
<input name="selected_plan" :value="selectedPlanId">
<input name="stripe_email" :value="stripeEmail">
<input name="stripe_token" :value="stripeToken">
{!! Form::close() !!}
</div>
#endsection
#push('scripts.body')
<script>
var plans = {!! $plans !!}; // JSON from the controller
</script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="/js/checkout.js"></script>
#endpush
The JavaScript:
var vm = new Vue({
el: "#checkoutForm",
data: {
plans: plans, // From a global JSON array
selectedPlan: null, // Default value
stripeEmail: 'foo#example.com', // Initial bindings to test values
stripeToken: 'invalidToken' // Initial bindings to test values
},
computed: {
selectedPlanId() {
if (this.selectedPlan) {
return this.selectedPlan.id;
}
return '';
}
},
methods: {
subscribe(planId) {
let plan = this.findPlanById(planId);
console.log(plan); // Works as expected
this.selectedPlan = plan;
// The following opens a Stripe checkout widget
// with all the correct information.
this.handler.open({
name: plan.name,
description: plan.description,
amount: plan.price * 100, // stored as decimal
token: (token) => {
console.log(token); // Works as expected
this.stripeToken = token.id; // Verified in Vue Dev Tools
this.stripeEmail = token.email; // Verified in Vue Dev Tools
alert(this.stripeToken); // Correct values
alert(this.stripeEmail); // Correct values
// At this point, the form inputs are updated
// with the correct values returned from Stripe.
vm.$el.submit(); // Submits the form to the proper URL
// When the POST request hits the server, the
// token and email fields have their original values
// i.e. "foo#example.com" and "invalidToken"
}
});
},
findPlanById(id) {
return this.plans.find(plan => plan.id == id);
}
},
created() {
this.handler = StripeCheckout.configure({
key: window.Laravel.stripeKey,
locale: 'auto',
});
}
})

Answer 1

UPDATE: It works if I wrap the form submission in a setTimeout. Apparently it needs a little time for the updated values to "take".