How to display Stripe error or success message in JavaScript?

Question

I am trying to implement Stripe payment gateway in my Spring Boot project. I am facing problem from client side. I am trying to display any error or success message after a transaction. When I check my Stripe dashboard, then there is showing me successful transaction but from my JavaScript code, control is going to error block and displaying unexpected error. So I am not understanding where I am doing wrong and how to create token to send it to server side.

Below is JavaScript Code:

const stripe = Stripe(Public key);

let elements;
let clientsecret;
let paymentElement;
initialize();
checkStatus();
document.querySelector("#payment-form").addEventListener("submit", handleSubmit);
async function initialize(){
    var url = "api/create-payment-intent";
    $.post(url,{
        
    }, function(data, status) {
        if (data.status == "OK") {
            if (data.statusCode == 1){
                clientsecret = data.response.clientSecret;
                const appearance = { theme: 'stripe',};
                elements = stripe.elements({ appearance, clientsecret });
                paymentElement = elements.create('card');
                paymentElement.mount("#payment-element");
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        }else {
            var error = data.response;
        }
    });
}
async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    const { error } = await stripe.confirmCardPayment(clientsecret,{
        payment_method: {
            card: paymentElement,
          },
    });
    if (error) {
        showMessage(error.message);
      } else {
        showMessage("An unexpected error occured.");
      }
    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":
            showMessage("Payment succeeded!");
            break;
        case "processing":
            showMessage("Your payment is processing.");
            break;
        case "requires_payment_method":
            showMessage("Your payment was not successful, please try again.");
            break;
        default:
            showMessage("Something went wrong.");
            break;
    }
}

function showMessage(messageText) {
    debugger
  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");
  }
}

Answer 1

There's problem in how you handle the payment result

if (error) {
        showMessage(error.message);
      } else {
        showMessage("An unexpected error occured.");
      }

It seems like you also show An unexpected error occured. even the payment is succeeded (i.e. when error is undefined). You might want to change the logic here.

Answer 2

use addEventListner() to show success or if you want to show or delete after a while you can use addEventListener() in setTimeOut function