Stripe.com payment integration module

[split63]

I just received another duplicate on Stripe. According to the Stripe Dashboard, two exactly the same orders received 1 minute apart. Again, only one shows up in Zen, and its again the 2nd order shown on Stripe. So the 1st order shown on Stripe is the phantom....how can we stop this from happening?

[Gozzandes]

I just received another duplicate on Stripe. According to the Stripe Dashboard, two exactly the same orders received 1 minute apart. Again, only one shows up in Zen, and its again the 2nd order shown on Stripe. So the 1st order shown on Stripe is the phantom....how can we stop this from happening?

I guess it may be SSL problem.i highly recommend entire site SSL.
Could you check it?

[Gozzandes]

The session may be disconnected after clicking confirmation button. and the customers are forced to log of from thier checkoutpage.
As a resut the last confirmation page is not displayed. and sometimes displayed.

[split63]

The entire site is SSL. Please note that I have not implemented the potential change:

      document.getElementById("btn_submit").click();
      document.getElementById('checkoutConfirmDefaultHeading').textContent = PaymentSuccess;
      showMessage(PaymentSuccess); 

Waiting to hear that this change is confirmed and will solve the issue

Wouldn't it require an active session to move from checkout page 1 to 2 to 3?

[split63]

I do see several successful transactions followed within 0 minutes with an "incomplete" transaction from the same customer. The 1st transaction is successful on Stripe dashboard, the 2nd is "incomplete". It is the 2nd incomplete transaction that is captured within Zen

[Gozzandes]

i want to see your checkout.js.

[Gozzandes]

i checked 218module. I found an incorrect code.

[split63]

i want to see your checkout.js.

from /includes/checkout.js

const stripe = Stripe (PublishableKey);

let elements;

initialize();
checkStatus();

document
  .querySelector("#payment-form")
  .addEventListener("submit", handleSubmit);

// Fetches a payment intent and captures the client secret
async function initialize(){
  const { clientSecret } = await clientS; 
  //   const { clientSecret } =await fetch("/create.php", {
  //   method: "POST",
  //   headers: { "Content-Type": "application/json" },
  //   body: JSON.stringify({ items }),
  // }).then((r) => r.json());

  
  elements = stripe.elements({ clientSecret });

  const paymentElementOptions = {
    layout: "tabs",
  };

  const paymentElement = elements.create("payment", paymentElementOptions);
  paymentElement.mount("#payment-element");
}

async function handleSubmit(e) {
  e.preventDefault();
  setLoading(true);

  const response = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: confirmationURL,
     },
    redirect: 'if_required'
   }
  )
  
   if (response.error) {
    showMessage(response.error.message);
   } else {
    document.getElementById('checkoutConfirmDefaultHeading').textContent = PaymentSuccess;
    showMessage(PaymentSuccess);
    document.getElementById("btn_submit").click();
}
  setLoading(false);
}

// Fetches the payment intent status after payment submission
async function checkStatus() {
  const clientSecret = new URLSearchParams(window.location.search).get(
    "payment_intent_client_secret"
  );

  if (!clientSecret) {
    return;
  }

  const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

  switch (paymentIntent.status) {
    case "succeeded":
      document.getElementById('checkoutConfirmDefaultHeading').textContent = PaymentSuccess;
      showMessage(PaymentSuccess);
      document.getElementById("btn_submit").click();
      break;
    case "processing":
      document.getElementById('checkoutConfirmDefaultHeading').textContent='Your payment is processing.';
      showMessage("Your payment is processing.");
      break;
    case "requires_payment_method":
      document.getElementById('checkoutConfirmDefaultHeading').textContent='Your payment was not successful, please try again.';
      showMessage("Your payment was not successful, please try again.");
      break;
    default:
      document.getElementById('checkoutConfirmDefaultHeading').textContent='Something went wrong.';
      showMessage("Something went wrong.");
      break;
  }
}

// ------- UI helpers -------

function showMessage(messageText) {
  const messageContainer = document.querySelector("#payment-message");

  messageContainer.classList.remove("hidden");
  messageContainer.textContent = messageText;

  setTimeout(function () {
    messageContainer.classList.add("hidden");
    messageText.textContent = "";
  }, 4000);
}

// Show a spinner on payment submission
function setLoading(isLoading) {
  if (isLoading) {
    // Disable the button and show a spinner
    document.querySelector("#submit").disabled = true;
    document.querySelector("#spinner").classList.remove("hidden");
    document.querySelector("#button-text").classList.add("hidden");
  } else {
    document.querySelector("#submit").disabled = false;
    document.querySelector("#spinner").classList.add("hidden");
    document.querySelector("#button-text").classList.remove("hidden");
  }
}