text: // A reference to Stripe.js initialized with your real test publishable API key.
  var stripe = Stripe("pk_test_51IcKJFHn1TLFiHT2yyAyH4Mw5ICQ7YduTCu4nBvQyqfkYt4dmC55n3Ns3RJVD1ZhhRmjwmmnjrNvZKFgRSIEGWdF00hBIKrvSw");
  
  // The items the customer wants to buy
  var purchase = {
      items: [{ id: "xl-tshirt" }]
  };
  
  // Disable the button until we have Stripe set up on the page
  //document.querySelector(".bookingContainer__button").disabled = true;
  document.querySelector("button").disabled = true;
  fetch("/create-payment-intent", {
      method: "POST",
      mode: "no-cors",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(purchase)
  })
  // .then(function(result) {
  //     return result.json();
  // })
  .then(function(data) {
      var elements = stripe.elements();
      var style = {
          base: {
              color: "#fff",
              fontFamily: 'Arial, sans-serif',
              fontSmoothing: "antialiased",
              fontSize: "20px",
              "::placeholder": {
                  color: "#fff"
              },
              "::selection":{
                  "background-color": "yellow",
              }
          },
          invalid: {
              fontFamily: 'Arial, sans-serif',
              color: "#fa755a",
              iconColor: "#fa755a"
          }
      };
  
      var card = elements.create("card", { style: style });
      // Stripe injects an iframe into the DOM
      card.mount("#card-element");
  
      card.on("change", function (event) {
      // Disable the Pay button if there are no card details in the Element
      // document.querySelector(".booking__button").disabled = event.empty;
      document.querySelector("button").disabled = event.empty;
      document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
      });
  
      var form = document.getElementById("payment-form");
      form.addEventListener("submit", function(event) {
      event.preventDefault();
      // Complete payment when the submit button is clicked
      payWithCard(stripe, card, data.clientSecret);
      });
  });
  
  // Calls stripe.confirmCardPayment
  // If the card requires authentication Stripe shows a pop-up modal to
  // prompt the user to enter authentication details without leaving your page.
  var payWithCard = function(stripe, card, clientSecret) {
  loading(true);
  stripe
  .confirmCardPayment(clientSecret, {
  payment_method: {
  card: card
  }
  })
  .then(function(result) {
  if (result.error) {
  // Show error to your customer
  showError(result.error.message);
  } else {
  // The payment succeeded!
  orderComplete(result.paymentIntent.id);
  }
  });
  };
  
  /* ------- UI helpers ------- */
  
  // Shows a success message when the payment is complete
  var orderComplete = function(paymentIntentId) {
  loading(false);
  document
  .querySelector(".result-message a")
  .setAttribute(
  "href",
  "https://dashboard.stripe.com/test/payments/" + paymentIntentId
  );
  document.querySelector(".result-message").classList.remove("hidden");
  // document.querySelector(".booking__button").disabled = true;
  document.querySelector("button").disabled = true;
  };
  
  // Show the customer the error from Stripe if their card fails to charge
  var showError = function(errorMsgText) {
      loading(false);
      var errorMsg = document.querySelector("#card-error");
      errorMsg.textContent = errorMsgText;
          setTimeout(function() {
              errorMsg.textContent = "";
          }, 4000);
  };
  
  // Show a spinner on payment submission
  var loading = function(isLoading) {
      if (isLoading) {
          // Disable the button and show a spinner
          // document.querySelector(".booking__button").disabled = true;
          document.querySelector("button").disabled = true;
          document.querySelector("#spinner").classList.remove("hidden");
          document.querySelector("#button-text").classList.add("hidden");
      } else {
          // document.querySelector(".booking__button").disabled = false;
          document.querySelector("button").disabled = false;
          document.querySelector("#spinner").classList.add("hidden");
          document.querySelector("#button-text").classList.remove("hidden");
      }
  };
  