While following the Laracasts tutorial on integrating Stripe, I noticed that a lot has changed since the release of Laravel 5.4. Although I managed to navigate through most of it, I encountered an issue when trying to submit a payment form using Vue and Axios.

The product is fetched from a database and displayed in a select dropdown, which functions correctly. However, my problem arises when the data is not properly sent to the store function in the PurchasesController. Upon attempting to make a purchase, the form modal appears as expected. After filling it out with test data and submitting it, a 404 error is returned for /purchases in Chrome inspector. The network tab displays the error: "No query results for model [App\Product]."

Here is the original code snippet from Vue:

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

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

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

        <button type="submit" @click.prevent="buy">Buy Book</button>

    </form>
</template>

<script>
    export default {
        props: ['products'],
        data() {
            return {
                stripeEmail: '',
                stripeToken: '',
                product: 1
            };
        },
        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(){
                let product = this.findProductById(this.product);

                this.stripe.open({
                    name: product.name,
                    description: product.description,
                    zipCode: true,
                    amount: product.price
                });
            },

            findProductById(id){
                return this.products.find(product => product.id == id);
            }
        }
    }
</script>

And here's the code snippet from my PurchasesController:

<?php

namespace App\Http\Controllers;

use Log;
use App\Product;
use Illuminate\Http\Request;
use Stripe\{Charge, Customer};

class PurchasesController extends Controller
{
    public function store()
    {

        Log::info("Product Info: " . request('product'));
        Log::info("Stripe Email: " . request('stripeEmail'));
        Log::info("Stripe Token: " . request('stripeToken'));

        $product = Product::findOrFail(request('product'));

        $customer = Customer::create([
            'email' => request('stripeEmail'),
            'source' => request('stripeToken')
        ]);

        Charge::create([
            'customer' => $customer->id,
            'amount' => $product->price,
            'currency' => 'aud'
        ]);

        return 'All done';
    }
}

I realized that the product wasn't being passed to /purchases above, so I attempted the following solution:

axios.post('/purchases', {
    stripeToken:  token.id,
    stripeEmail: token.email,
    product: this.product
})

Unfortunately, even after making this change, I continued to receive the same "No query results for model [App\Product]" error. Is there a different or better way to pass data from Vue/Axios that I could utilize instead? Any assistance would be greatly appreciated.

Thank you in advance.

Edit The solution was to assign this to a new variable, and it started working again. Here is the relevant part of the Vue Code that worked for me:

created(){
    let module = this; // cast to separate variable
    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,
                product: module.product
              })
              .then(function (response) {
                alert('Complete! Thanks for your payment!');
              })
              .catch(function (error) {
                console.log(error);
              });

        }
    });
},