Issue:
So whenever I click the HTML button that activates the Javascript code, I get an error in the console stating:
POST http://127.0.0.1:8000/payment 419 (unknown status)

What I have tried

I have tried different ways to get the variable to work, returning it with a view, JSON_ENCODE(), I keep trying to research how to use fetch with Laravel and I feel like I am missing something obvious.

Here is my HTML & Javascript code:

<form action="/payment" method="POST">

@csrf

<button class="btn btn-primary py-3 px-4" id="checkout-button">Proceed to Checkout</button>

<script type="text/javascript">

    // Create an instance of the Stripe object with your publishable API key

    var stripe = Stripe('pk_test_*******************');

    var checkoutButton = document.getElementById('checkout-button');



    checkoutButton.addEventListener('click', function() {

    // Create a new Checkout Session using the server-side endpoint you

    // created in step 3.

        fetch('/payment', {

            method: 'POST', 

            headers: {

               'Content-Type': 'application/json',

               'Accept': 'application/json',

               'url': '/payment',

            },

         })

         .then(function(response) {

             return response.json();

         })

         .then(function(session) {

             return stripe.redirectToCheckout({ sessionId: session.id });

         })

         .then(function(result) {

             // If `redirectToCheckout` fails due to a browser or network

             // error, you should display the localized error message to your

             // customer using `error.message`.

             if (result.error) {

                 alert(result.error.message);

             }

          })

          .catch(function(error) {

              //console.error('Error:', error);

          });

      });

</script>

</form>

This is my route:

Route::post('/payment', [StripePaymentController::class, 'payment']);

This is my controller method:

    /* Sends the stripe key, and payment info to the stripe api, as long as the payment session */

    public function payment() {

        // Sets up the businesses secret key to receive the payment

        StripeStripe::setApiKey(env('STRIPE_SECRET'));



        // Sets up payment method, and product information

        $session = StripeCheckoutSession::create ([

            'payment_method_types' => ['card'],

            'line_items' => [[

              'price_data' => [

                'currency' => 'usd',

                'product_data' => [

                  'name' => 'T-shirt',

                ],

                'unit_amount' => 2000,

              ],

              'quantity' => 1,

            ]],

            'mode' => 'payment',

            'success_url' => 'http://127.0.0.1:8000/',

            'cancel_url' => 'http://127.0.0.1:8000/cart',

        ]);



        return response()->json(['id' => $session->id]);

    }