Create Checkout Session.php 404 not found

    <?php

require 'vendor/autoload.php';
StripeStripe::setApiKey('sk_test_51HhrRSFFkuyUh5wxaaS0l0yn5S..........R0nzVUJ23jePY6iXme2bOwxtuImLrWv9QilqW4umYvRCIo00vHKf5mKW');

header('Content-Type: application/json');

$YOUR_DOMAIN = 'http://localhost:4242';

$checkout_session = StripeCheckoutSession::create([
  'payment_method_types' => ['card'],
  'line_items' => [[
    'price_data' => [
      'currency' => 'usd',
      'unit_amount' => 2000,
      'product_data' => [
        'name' => 'Stubborn Attachments',
        'images' => ["https://i.imgur.com/EHyR2nP.png"],
      ],
    ],
    'quantity' => 1,
  ]],
  'mode' => 'payment',
  'success_url' => $YOUR_DOMAIN . '/success.html',
  'cancel_url' => $YOUR_DOMAIN . '/cancel.html',
]);

echo json_encode(['id' => $checkout_session->id]);

<!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <section>
      <div class="product">
        <img
          src="https://i.imgur.com/EHyR2nP.png"
          alt="The cover of Stubborn Attachments"
        />
        <div class="description">
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
      <button id="checkout-button">Checkout</button>
    </section>
  </body>
  <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("pk_test_51HhrRSFFkuyUh5wxONDavkFRWnPlNcJ.............rOT7xce3CyW1fTnClCUsVJ2kctOtuJ0hFdf5004x4Gs2YC");
    var checkoutButton = document.getElementById("checkout-button");

    checkoutButton.addEventListener("click", function () {
      fetch("/create-checkout-session.php", {
        method: "POST",
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          //return stripe.redirectToCheckout({ sessionId: session.id });
          return stripe.redirectToCheckout({ sessionId: session.sessionId });
        })
        .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>
</html>

I have downloaded the above code from here https://stripe.com/docs/checkout/integration-builder and put the file in my Xampp folder under htdocs, so whenever I am running http://localhost/my-projects/stripe-payments-prebuilt/checkout.html so it is showing me the checkout the page but when I clicked on the checkout button then it is showing “checkout.html:30 POST http://localhost/create-checkout-session.php 404 (Not Found)” I mean what I have done wrong, I can run other projects so it means there is no server issue, so what can be the issue?

Answer

First of all, there is a 404 error because the file was never there. In localhost or all servers, if you put a / before the file name it will automatically become after the host so /config.php will become http://localhost/config.php. To prevent this error, you should use ./

And the unexpected token < means the server is returning the 404 document.

In short, put a dot before the file name as I am assuming that this project is not in the root directory. (Means that the project is at http://localhost/projectName)

   <?php

require 'vendor/autoload.php';
StripeStripe::setApiKey('sk_test_51HhrRSFFkuyUh5wxaaS0l0yn5S..........R0nzVUJ23jePY6iXme2bOwxtuImLrWv9QilqW4umYvRCIo00vHKf5mKW');

header('Content-Type: application/json');

$YOUR_DOMAIN = 'http://localhost';

$checkout_session = StripeCheckoutSession::create([
  'payment_method_types' => ['card'],
  'line_items' => [[
    'price_data' => [
      'currency' => 'usd',
      'unit_amount' => 2000,
      'product_data' => [
        'name' => 'Stubborn Attachments',
        'images' => ["https://i.imgur.com/EHyR2nP.png"],
      ],
    ],
    'quantity' => 1,
  ]],
  'mode' => 'payment',
  'success_url' => $YOUR_DOMAIN . '/success.html',
  'cancel_url' => $YOUR_DOMAIN . '/cancel.html',
]);

echo json_encode(['id' => $checkout_session->id]);

<!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <section>
      <div class="product">
        <img
          src="https://i.imgur.com/EHyR2nP.png"
          alt="The cover of Stubborn Attachments"
        />
        <div class="description">
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
      <button id="checkout-button">Checkout</button>
    </section>
  </body>
  <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("pk_test_51HhrRSFFkuyUh5wxONDavkFRWnPlNcJ.............rOT7xce3CyW1fTnClCUsVJ2kctOtuJ0hFdf5004x4Gs2YC");
    var checkoutButton = document.getElementById("checkout-button");

    checkoutButton.addEventListener("click", function () {
      fetch("./create-checkout-session.php", {
        method: "POST",
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          //return stripe.redirectToCheckout({ sessionId: session.id });
          return stripe.redirectToCheckout({ sessionId: session.sessionId });
        })
        .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>
</html>

Advertisement

Answer