title: How do I use JavaScript fetch in Laravel 8?
body: <p><strong>Issue:</strong>
  So whenever I click the HTML button that activates the Javascript code, I get an error in the console stating:
  <strong>POST <a href="http://127.0.0.1:8000/payment" rel="noreferrer">http://127.0.0.1:8000/payment</a> 419 (unknown status)</strong></p>
  <p><strong>What I have tried</strong></p>
  <p>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.</p>
  <p>Here is my HTML &amp; Javascript code:</p>
  <pre><code>&lt;form action=&quot;/payment&quot; method=&quot;POST&quot;&gt;
  @csrf
  &lt;button class=&quot;btn btn-primary py-3 px-4&quot; id=&quot;checkout-button&quot;&gt;Proceed to Checkout&lt;/button&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      // 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);
            });
        });
  &lt;/script&gt;
  &lt;/form&gt;
  </code></pre>
  <p>This is my route:</p>
  <pre><code>Route::post('/payment', [StripePaymentController::class, 'payment']);
  </code></pre>
  <p>This is my controller method:</p>
  <pre><code>    /* 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
          \Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
  
          // Sets up payment method, and product information
          $session = \Stripe\Checkout\Session::create ([
              'payment_method_types' =&gt; ['card'],
              'line_items' =&gt; [[
                'price_data' =&gt; [
                  'currency' =&gt; 'usd',
                  'product_data' =&gt; [
                    'name' =&gt; 'T-shirt',
                  ],
                  'unit_amount' =&gt; 2000,
                ],
                'quantity' =&gt; 1,
              ]],
              'mode' =&gt; 'payment',
              'success_url' =&gt; 'http://127.0.0.1:8000/',
              'cancel_url' =&gt; 'http://127.0.0.1:8000/cart',
          ]);
  
          return response()-&gt;json(['id' =&gt; $session-&gt;id]);
      }
  </code></pre>