500 (Internal Server Error) on post request (Stripe)

Published 6 months ago by DougE

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';
    }
}

Best Answer (As Selected By DougE)
DougE

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.

vipin93

use chrome debug its laravel errors network->response

DougE
DougE
6 months ago (14,720 XP)

Thank you for suggesting that, I've done so and the error it seems is different to what I thought.

Card in ApiRequestor.php line 114:
Cannot charge a customer that has no active card

in ApiRequestor.php line 114
at ApiRequestor->handleApiError('{ "error": { "message": "Cannot charge a customer that has no active card", "type": "card_error", "param": "card", "code": "missing" }}', 402, array('Server' => 'nginx', 'Date' => 'Wed, 26 Apr 2017 13:06:10 GMT', 'Content-Type' => 'application/json', 'Content-Length' => '157', 'Connection' => 'keep-alive', 'Access-Control-Allow-Credentials' => 'true', 'Access-Control-Allow-Methods' => 'GET, POST, HEAD, OPTIONS, DELETE', 'Access-Control-Allow-Origin' => '*', 'Access-Control-Max-Age' => '300', 'Cache-Control' => 'no-cache, no-store', 'Request-Id' => 'req_AXvhuXditXXCVZ', 'Stripe-Version' => '2017-04-06'), array('error' => array('message' => 'Cannot charge a customer that has no active card', 'type' => 'card_error', 'param' => 'card', 'code' => 'missing'))) in ApiRequestor.php line 275
at ApiRequestor->_interpretResponse('{ "error": { "message": "Cannot charge a customer that has no active card", "type": "card_error", "param": "card", "code": "missing" }}', 402, array('Server' => 'nginx', 'Date' => 'Wed, 26 Apr 2017 13:06:10 GMT', 'Content-Type' => 'application/json', 'Content-Length' => '157', 'Connection' => 'keep-alive', 'Access-Control-Allow-Credentials' => 'true', 'Access-Control-Allow-Methods' => 'GET, POST, HEAD, OPTIONS, DELETE', 'Access-Control-Allow-Origin' => '*', 'Access-Control-Max-Age' => '300', 'Cache-Control' => 'no-cache, no-store', 'Request-Id' => 'req_AXvhuXditXXCVZ', 'Stripe-Version' => '2017-04-06')) in ApiRequestor.php line 65
at ApiRequestor->request('post', '/v1/charges', array('customer' => 'cus_AXvhGj2QTAIlU8', 'amount' => 5000, 'currency' => 'aud'), array()) in ApiResource.php line 120
at ApiResource::_staticRequest('post', '/v1/charges', array('customer' => 'cus_AXvhGj2QTAIlU8', 'amount' => 5000, 'currency' => 'aud'), null) in ApiResource.php line 159
at ApiResource::_create(array('customer' => 'cus_AXvhGj2QTAIlU8', 'amount' => 5000, 'currency' => 'aud'), null) in Charge.php line 73
at Charge::create(array('customer' => 'cus_AXvhGj2QTAIlU8', 'amount' => 5000, 'currency' => 'aud')) in PurchasesController.php line 21
at PurchasesController->store()
at call_user_func_array(array(object(PurchasesController), 'store'), array()) in Controller.php line 55
at Controller->callAction('store', array()) in ControllerDispatcher.php line 44
at ControllerDispatcher->dispatch(object(Route), object(PurchasesController), 'store') in Route.php line 203
at Route->runController() in Route.php line 160
at Route->run() in Router.php line 559
at Router->Illuminate\Routing\{closure}(object(Request)) in Pipeline.php line 30
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in SubstituteBindings.php line 41
at SubstituteBindings->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in VerifyCsrfToken.php line 65
at VerifyCsrfToken->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in ShareErrorsFromSession.php line 49
at ShareErrorsFromSession->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in StartSession.php line 64
at StartSession->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in AddQueuedCookiesToResponse.php line 37
at AddQueuedCookiesToResponse->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in EncryptCookies.php line 59
at EncryptCookies->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in Pipeline.php line 102
at Pipeline->then(object(Closure)) in Router.php line 561
at Router->runRouteWithinStack(object(Route), object(Request)) in Router.php line 520
at Router->dispatchToRoute(object(Request)) in Router.php line 498
at Router->dispatch(object(Request)) in Kernel.php line 174
at Kernel->Illuminate\Foundation\Http\{closure}(object(Request)) in Pipeline.php line 30
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in Debugbar.php line 51
at Debugbar->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in TransformsRequest.php line 30
at TransformsRequest->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in TransformsRequest.php line 30
at TransformsRequest->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in ValidatePostSize.php line 27
at ValidatePostSize->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in CheckForMaintenanceMode.php line 46
at CheckForMaintenanceMode->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in Pipeline.php line 102
at Pipeline->then(object(Closure)) in Kernel.php line 149
at Kernel->sendRequestThroughRouter(object(Request)) in Kernel.php line 116
at Kernel->handle(object(Request)) in index.php line 53
at require_once('C:\\xampp\\htdocs\\billing-project\\public\\index.php') in server.php line 21

I will investigate this further.

DougE
DougE
6 months ago (14,720 XP)

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 sign in or create an account to participate in this conversation.