500 Server Error with Axios

Absolutely love Laracasts - only been 6 weeks in and already set up a lot of what I wanted. I'm stuck, so badly stuck, on setting up Subscriptions with Stripe. It looks like some of the tutorial is outdated, or at least, there might be better practices by now.

I'm not getting a 500 error when trying to post with Axios (instead of the $http.post suggested in the video)

I've tried setting up the CSRF token any which way I can, then I find out it's supposed to be all built in - but then I'm not sure where to go. Here is my version of the CheckoutForm.vue:

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

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

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

            <button id="stripeButton" class="btn btn-lg btn-block btn-primary" @click.prevent="subscribe">Get Started</button>
            </form>

</template>

<script>
    export default {
        props: ['plans'],

        data() {
            return {
                stripeEmail: '',
                stripeToken: '',
                plan: 1,
            };
        },

        created() {
            this.stripe = StripeCheckout.configure({
                key: Narrative.stripeKey,
                image: "https://s3.amazonaws.com/assets.narrativefirst.com/images/nflogo-brand.png",
                locale: "auto",
                panelLabel: "Subscribe For",
                token:(token) => {
                    this.stripeToken = token.id;
                    this.stripeEmail = token.email;

                    axios.post('/subscriptions', this.data)
                        .then(
                            response => alert('Complete! Thanks for your payment.'));
                }
            });
        },

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

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

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

and then here is the relevant store.blade:

<meta name="csrf-token" content="{{ csrf_token() }}">


    <script>
        var BookStore = {
            csrfToken: "{{ csrf_token() }}",
            stripeKey: "{{ config('services.stripe.key') }}"
        };
    </script>

  </head>

  <body>

    @include('layouts.nav')

    <div class="container-fluid">
      <div class="row">
        <main class="col-sm-12 ml-sm-auto col-md-11 pt-3" role="main"> 
            <div class="col-12">

            <div id="app">

            <article>
                <p>
                    <checkout-form :plans="{{ $plans }}"></checkout-form>
                </p>
            </article>

            </div>

            </div>

        </main>
      </div>
    </div>

also, this is my bootstrap.js which I modified based on other entries here and elsewhere...maybe I messed something up?

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Can anyone please help me figure out what is going on here?

jplhomer

8 years ago

Level 6

Yuck. This stuff can be frustrating.

Can you paste in the 500 error you're receiving? This would be available in the Chrome Devtools Network tab (or whatever flavor of browser you're using).
Could you also verify that X-CSRF-TOKEN is a header in the Request being sent (also in the network tab)? This will help us determine whether the logic in bootstrap.js is working correctly.

Good luck.

ejdelmonico

8 years ago

Level 53

Use axios.post() and place this code in the head of your layout

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

axios will return a promise so handle it with .then() and catch errors with .catch()

Scotalia

8 years ago

Level 7

i have the same exact problem. Unfortunately the past 2 days have provided nothing but more frustration in trying to fix this. i have tried the suggestion provided by @ejdelmonico numerous times (i have gotten to the point where i scrap my branch and restart the entire stripe series and integration over and over). Jeffrey makes this look so simple, and i cant for the life of me figure out what I'm doing wrong. at this point its probably a typo somewhere, but after 2 days trying to work through this, i'm at my wit's end. any help would be appreciated.

Please or to participate in this conversation.