如何在 JavaScript 中显示 Stripe 错误或成功消息？

Question

我正在尝试在我的 Spring 引导项目中实施 Stripe 支付网关。 我面临来自客户端的问题。 我试图在交易后显示任何错误或成功消息。 当我检查我的 Stripe 仪表板时，会显示我的交易成功，但从我的 JavaScript 代码来看，控件将进入错误块并显示意外错误。 所以我不明白我哪里做错了以及如何创建令牌以将其发送到服务器端。

下面是JavaScript代码：

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

你处理支付结果的方式有问题

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

似乎您还显示An unexpected error occured. 即使付款成功（即当error未定义时）。 您可能想更改此处的逻辑。

Answer 2

使用 addEventListner() 显示成功，或者如果您想在一段时间后显示或删除，您可以在 setTimeOut 中使用 addEventListener() function