Post request by axios (VueJS) in laravel giving 500 error

Question

I am trying to make a post request via axios but getting this error: app.js:285 POST http://127.0.0.1:8000/concerts/1/orders 500 (Internal Server Error)

The order is being processed though (I see it coming is Stripe and database). Another problem is that redirect is not happening as window.location =/orders/${response.data.confirmation_number}; I just stay on the same page.

Any ideas what could go wrong here?

<template>
<div>
    <div class="row middle-xs">
        <div class="col col-xs-6">
            {{ csrf_token}}
            <div class="form-group m-xs-b-4">
                <label class="form-label">
                    Price
                </label>
                <span class='form-control-static '>
                    ${{ priceInDollars }}
                </span>
            </div>
        </div>
        <div class="col col-xs-6">
            <div class="form-group m-xs-b-4">
                <label class="form-label">
                    Qty
                </label>
                <input type="number" v-model="quantity" class="form-control">
            </div>
        </div>
    </div>
    <div class="text-right">
        <button class="btn btn-primary btn-block"
                @click="openStripe"
                :class="{ 'btn-loading': processing }"
                :disabled="processing"
        >
            Buy Tickets
        </button>
    </div>
</div>

This is script part:

<script>

export default {

    
    
    props: [
        'price',
        'concertTitle',
        'concertId',
    ],
    data() {
        return {
            quantity: 1,
            stripeHandler: null,
            processing: false,

        }
    },

    computed: {
        description() {
            if (this.quantity > 1) {
                return `${this.quantity} tickets to ${this.concertTitle}`
            }
            return `One ticket to ${this.concertTitle}`
        },
        totalPrice() {
            return this.quantity * this.price
        },
        priceInDollars() {
            return (this.price / 100).toFixed(2)
        },
        totalPriceInDollars() {
            return (this.totalPrice / 100).toFixed(2)
        },
    },
    methods: {
        initStripe() {
            const handler = StripeCheckout.configure({
                key: App.stripePublicKey
            })
            window.addEventListener('popstate', () => {
                handler.close()
            })
            return handler
        },
        openStripe(callback) {
            this.stripeHandler.open({
                name: 'TicketBeast',
                description: this.description,
                currency: "usd",
                allowRememberMe: false,
                panelLabel: 'Pay {{amount}}',
                amount: this.totalPrice,
                // image: '/img/checkout-icon.png',
                token: this.purchaseTickets,
            })
        },
        purchaseTickets(token) {
            this.processing = true
            axios.post(`/concerts/${this.concertId}/orders`, {
                email: token.email,
                ticket_quantity: this.quantity,
                payment_token: token.id,
            }).then(response => {
                window.location =`/orders/${response.data.confirmation_number}`; 
                console.log('Charge succeeded.')
            }).catch(response => {
                this.processing = false
            })
        }
    },
    created() {
        this.stripeHandler = this.initStripe()
    }
}

Answer 1

The issue turns out to be Mailer. In .env file, along with Mailtrap credentials you must provide sender email and they don't tell you that :( This also somehow prevented the redirect. In case that helps someone.

Answer 2

You have to go and look under the Network tab if you are using Chrome browser, you can see the failed request response