Ошибка с Stripe, работает на localhost, но не работает на сервере

Question

В настоящее время я разрабатываю подписку на услугу на полосе. Все работает очень хорошо на localhost: 4242 благодаря команде composer start.

Но когда я загружаю файлы на свой сайт, это не работает. Я просмотрел форумы и увидел, что проблема может быть связана с сертификатом SSL, поэтому я добавил благодаря .httacess https на всех страницах моего сайта.

Итак, чтобы найти проблему, я вошел в консоль , и я вижу ошибку, но я не знаю, откуда она, и не знаю, как ее исправить.

Изображение ошибки:

var stripe, customer, setupIntent, plan;
var signupForm = document.getElementById("signup-form");
var paymentForm = document.getElementById("payment-form");

var stripeElements = function(publishableKey) {
  stripe = Stripe(publishableKey, { betas: ["au_bank_account_beta_2"] });
  var elements = stripe.elements();

  // Card Element styles
  var style = {
    base: {
      fontSize: "16px",
      color: "#32325d",
      fontFamily:
        "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif",
      fontSmoothing: "antialiased",
      "::placeholder": {
        color: "rgba(0,0,0,0.4)"
      }
    }
  };

  var card = elements.create("card", { style: style });

  card.mount("#card-element");

  // AU BECS Debit Element
  var auBankAccount = elements.create("auBankAccount", {
    style: style
  });

  // Add an instance of the auBankAccount Element into the `auBankAccount-element` <div>.
  auBankAccount.mount("#auBankAccount-element");

  for (element of [card, auBankAccount]) {
    // Element focus ring
    element.on("focus", function() {
      var el = document.getElementById(`${element._componentName}-element`);
      el.classList.add("focused");
    });

    element.on("blur", function() {
      var el = document.getElementById(`${element._componentName}-element`);
      el.classList.remove("focused");
    });

    element.on("change", function(event) {
      var displayError = document.getElementById("error-message");
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = "";
      }
    });
  }

  signupForm.addEventListener("submit", function(evt) {
    evt.preventDefault();

    document.getElementById("signup-view").classList.add("hidden");
    document.getElementById("payment-view").classList.remove("hidden");

    // Create customer
    createCustomer().then(result => {
      customer = result.customer;
      setupIntent = result.setupIntent;

      paymentForm.addEventListener("submit", function(evt) {
        evt.preventDefault();
        changeLoadingState(true);

        // Set up payment method for recurring usage
        var payment = paymentForm.querySelector("input[name=payment]:checked")
          .value;
        setupPaymentMethod(setupIntent.client_secret, payment, {
          card: card,
          au_becs_debit: auBankAccount
        });
      });
    });
  });
};

var setupPaymentMethod = function(setupIntentSecret, paymentMethod, element) {
  var billingName = document.querySelector("#name").value;
  var billingEmail = document.querySelector("#email").value;
  var prenom = document.querySelector("#prenom").value;
  var nom = document.querySelector("#nom").value;


  switch (paymentMethod) {
    case "card":
      stripe
        .confirmCardSetup(setupIntentSecret, {
          payment_method: {
            card: element[paymentMethod],
            billing_details: {
              name: billingName,
              email: billingEmail
            }
          }
        })
        .then(handleResult);
      break;
    case "au_becs_debit":
      stripe
        .confirmAuBecsDebitSetup(setupIntentSecret, {
          payment_method: {
            au_becs_debit: element[paymentMethod],
            billing_details: {
              name: billingName,
              email: billingEmail
            }
          }
        })
        .then(handleResult);
      break;
    default:
      console.warn("Unhandled Payment Method!");
      break;
  }

  function handleResult(result) {
    if (result.error) {
      showCardError(result.error);
    } else {
      // Create the subscription
      createSubscription(customer.id, result.setupIntent.payment_method);
    }
  }
};

function createCustomer() {
  var billingName = document.querySelector("#name").value;
  var billingEmail = document.querySelector("#email").value;
  var prenom = document.querySelector("#prenom").value;
  var nom = document.querySelector("#nom").value;

  return fetch("/create-customer", {
    method: "post",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      name: billingName,
      email: billingEmail
    })
  })
    .then(response => {
      return response.json();
    })
    .then(result => {
      return result;
    });
}

function createSubscription(customerId, paymentMethodId) {
  return fetch("/subscription", {
    method: "post",
    headers: {
      "Content-type": "application/json"
    },
    body: JSON.stringify({
      customerId: customerId,
      paymentMethodId: paymentMethodId
    })
  })
    .then(function(response) {
      return response.json();
    })
    .then(function(subscription) {
      orderComplete(subscription);
    });
}

function showCardError(error) {
  changeLoadingState(false);
  // The card was declined (i.e. insufficient funds, card has expired, etc)
  var errorMsg = document.querySelector(".sr-field-error");
  errorMsg.textContent = error.message;
  setTimeout(function() {
    errorMsg.textContent = "";
  }, 8000);
}

function showPriceDetails(plan) {
  // Format price details and detect zero decimal currencies
  var amount = plan.amount;
  var numberFormat = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: plan.currency,
    currencyDisplay: "symbol"
  });
  var parts = numberFormat.formatToParts(amount);
  var zeroDecimalCurrency = true;
  for (var part of parts) {
    if (part.type === "decimal") {
      zeroDecimalCurrency = false;
    }
  }
  amount = zeroDecimalCurrency ? amount : amount / 100;
  var formattedAmount = numberFormat.format(amount);

  document.querySelector(
    ".order-amount"
  ).innerText = `${formattedAmount} per ${plan.interval}`;
}

function getConfig() {
  return fetch("/config", {
    method: "get",
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(function(response) {
      return response.json();
    })
    .then(function(response) {
      // Set up UI based on plan details
      showPriceDetails(response.plan);
      // TODO: show payment methods based on currency
      // Set up Stripe Elements
      stripeElements(response.publishableKey);
    });
}

getConfig();

/* ------- Post-payment helpers ------- */

/* Shows a success / error message when the payment is complete */




var orderComplete = function(subscription) {
  changeLoadingState(false);
  var subscriptionJson = JSON.stringify(subscription, null, 2);
  document.querySelectorAll(".sr-form").forEach(function(view) {
    view.classList.add("hidden");
  });
  document.querySelectorAll(".completed-view").forEach(function(view) {
    view.classList.remove("hidden");
  });
  document.querySelector(".order-status").textContent = subscription.status;
  var state = subscription.status; //renvoie active si paiement réussi

  var societe = document.querySelector("#name").value;
  var mail = document.querySelector("#email").value;
  var prenomPersonne = document.querySelector("#prenom").value;
  var nomPersonne = document.querySelector("#nom").value;


  if (state != "active"){
    //le paiement error
    alert("une erreur c'est produite !");
    //renvoie vers une page d'erreur
  }else{
    //le paiement est éffectué
    sessionStorage.setItem("societe",societe)
    sessionStorage.setItem("mail",mail)
    sessionStorage.setItem("prenom",prenomPersonne)
    sessionStorage.setItem("nom",nomPersonne)
    window.location="page2.php";
  }
};
//var billingName = document.querySelector("#name").value;
//var billingEmail = document.querySelector("#email").value;
//var prenom = document.querySelector("#prenom").value;
//var nom = document.querySelector("#nom").value;

// Show a spinner on subscription submission
var changeLoadingState = function(isLoading) {
  if (isLoading) {
    document.querySelector("#payment-form button").disabled = true;
    document.querySelector("#spinner").classList.add("loading");
    document.querySelector("#button-text").classList.add("hidden");
  } else {
    document.querySelector("#payment-form button").disabled = false;
    document.querySelector("#spinner").classList.remove("loading");
    document.querySelector("#button-text").classList.remove("hidden");
  }
};

var showPaymentMethods = function() {
  // Listen to changes to the payment method selector.
  for (let input of document.querySelectorAll("input[name=payment]")) {
    input.addEventListener("change", event => {
      event.preventDefault();
      var payment = paymentForm.querySelector("input[name=payment]:checked")
        .value;

      // Show the relevant details, whether it's an extra element or extra information for the user.
      paymentForm
        .querySelector(".payment-info.card")
        .classList.toggle("visible", payment === "card");
      paymentForm
        .querySelector(".payment-info.au_becs_debit")
        .classList.toggle("visible", payment === "au_becs_debit");
    });
  }
};
showPaymentMethods();

Вы можете мне помочь?

Большое спасибо. Хорошего дня. С уважением, JLair