use chrome debug its laravel errors network->response
500 (Internal Server Error) on post request (Stripe)
I am following the Stripe series with Laravel 5.4 and it's become apparent to me that a lot has changed in a short amount of time since the series was made. I am on episode 3 with Vue and I am attempting to pass the data from the form to the controller but it is failing every time with a 500 internal server error. I have a sneaking suspicion that it is caused by the CSRF field but everything looks correct as far as I can tell.
Not sure where to go from here, most of the questions & answers I've found are for Laravel 5.3 or earlier.
Any help would be much appreciated.
Relevant code:-
Vue File - CheckoutForm
<template>
<form action="/purchases" method="POST">
<input type="hidden" name="stripeToken" v-model="stripeToken">
<input type="hidden" name="stripeEmail" v-model="stripeEmail">
<button type="submit" @click.prevent="buy">Buy Book</button>
</form>
</template>
<script>
export default {
data() {
return {
stripeEmail: '',
stripeToken: ''
};
},
created(){
this.stripe = StripeCheckout.configure({
key: Laravel.stripeKey,
image: "https://stripe.com/img/documentation/checkout/marketplace.png",
locale: "auto",
token: function(token){
this.stripeToken = token.id;
this.stripeEmail = token.email;
axios.post('/purchases', this.$data)
.then(response => alert('Complete! Thanks for your payment!'));
console.info("Stripe Token: " + this.stripeToken);
console.info("Stripe Email: " + this.stripeEmail);
}
});
},
methods: {
buy(){
this.stripe.open({
name: 'My Book',
description: 'Some details about the book.',
zipCode: true,
amount: 5000
});
}
}
}
</script>
PurchasesController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Stripe\{Charge, Customer};
class PurchasesController extends Controller
{
public function store()
{
$customer = Customer::create([
'email' => request('stripeEmail'),
'source' => request('stripeToken')
]);
Charge::create([
'customer' => $customer->id,
'amount' => 5000,
'currency' => 'aud'
]);
return 'All done';
}
}
I found the solution, it appears to do with the way that data is passed by axios from the vue component to the PurchaseController. Updating my vue component to the following has made it work:
<template>
<form action="/purchases" method="POST">
<input type="hidden" name="stripeToken" v-model="stripeToken">
<input type="hidden" name="stripeEmail" v-model="stripeEmail">
<button type="submit" @click.prevent="buy">Buy Book</button>
</form>
</template>
<script>
export default {
data() {
return {
stripeEmail: '',
stripeToken: ''
};
},
created(){
this.stripe = StripeCheckout.configure({
key: Laravel.stripeKey,
image: "https://stripe.com/img/documentation/checkout/marketplace.png",
locale: "auto",
token: function(token){
axios.post('/purchases', {
stripeToken: token.id,
stripeEmail: token.email
})
.then(function (response) {
alert('Complete! Thanks for your payment!');
})
.catch(function (error) {
console.log(error);
});
}
});
},
methods: {
buy(){
this.stripe.open({
name: 'My Book',
description: 'Some details about the book.',
zipCode: true,
amount: 5000
});
}
}
}
</script>
And I got the new axios.post code after I looked over the axios documentation.
If anyone else has trouble with the Stripe series and updated Laravel, I hope this might help you.
Please or to participate in this conversation.