Stripe Checkout PHP Causes mysterious 404 Error OnLoad

Question

I'm having a hard time testing the Stripe Checkout from single-checkout-subscription on my local xampp server. So far, I have a Stripe account, created my test keys, product and prices, installed Stripe Cli and created a test webhook and added them all to the .env file in my server

DOMAIN="http://localhost/stripe/server/public/"
BASIC_PRICE_ID="price_xxx"
PRO_PRICE_ID="price_xxx"
STATIC_DIR="STATIC_DIR=../../client"
STRIPE_PUBLISHABLE_KEY="pk_test_xxx"
STRIPE_SECRET_KEY="sk_test_xxx"
STRIPE_WEBHOOK_SECRET="1mwhxxx"

But when I tested it at my local host: http://localhost/stripe/server/public/ I get the front end, but when I click on the button nothing happens. It doesn't even go to the prebuilt checkout page.

I check the console and the problems seems to becoming from my config.php

Two console errors appear on my script.js:

fetch("/config.php").then(function(json) 

This is the routing:

My config.php > requires shared.php > requires '..vendor/autoload.php' & parses '../conifg/ini' > conifg.ini contains my test keys:

stripe_secret_key ="sk_test_444"
stripe_publishable_key = "pk_test_444"
stripe_webhook_secret = "1mw444"
domain = "http://localhost/stripe/server/public/"
basic_price_id = "price_444"
pro_price_id = "price_555" 

Script.js inisde my server:

// Create a Checkout Session with the selected plan ID
var createCheckoutSession = function(priceId) {
  return fetch("/create-checkout-session.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      priceId: priceId
    })
  }).then(function(result) {
    return result.json();
  });
};

// Handle any errors returned from Checkout
var handleResult = function(result) {
  if (result.error) {
    var displayError = document.getElementById("error-message");
    displayError.textContent = result.error.message;
  }
};

/* Get your Stripe publishable key to initialize Stripe.js */
fetch("/config.php")
  .then(function(result) {
    return result.json();
  })
  .then(function(json) {
    var publishableKey = json.publishableKey;
    var basicPriceId = json.basicPrice;
    var proPriceId = json.proPrice;

    var stripe = Stripe(publishableKey);
    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("basic-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(basicPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });

    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("pro-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(proPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });
  });

I'm well versed in HTML, Bootstrap, CSS, and some PHP and JavaScript, but I can't seem to follow the difficult directions on how to get the Stripe Subscription Checkout working. Can someone please point me in the right direction or tell me how to fix my code. I'm on a tight deadline with the holidays.

Answer 1

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)

// Create a Checkout Session with the selected plan ID
var createCheckoutSession = function(priceId) {
  return fetch("./create-checkout-session.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      priceId: priceId
    })
  }).then(function(result) {
    return result.json();
  });
};

and

/* Get your Stripe publishable key to initialize Stripe.js */
fetch("./config.php")
  .then(function(result) {
    return result.json();
  })
  .then(function(json) {
    var publishableKey = json.publishableKey;
    var basicPriceId = json.basicPrice;
    var proPriceId = json.proPrice;

    var stripe = Stripe(publishableKey);
    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("basic-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(basicPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });

    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("pro-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(proPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });
  });