Javascript Stripe ConfirmCardPayment方法创建微调器以等待结果

我想在stripe的

confirmCardPayment

返回结果时添加一个加载器。因为该方法返回一个结果对象，该对象告知事件是成功还是失败。但是，如何捕获我单击submit后发生的等待事件呢。我是说result.pending，还是在then（）中添加了一个方法

---

只需创建一个

加载

变量

let loading = false;
function stripepayment() {
   loading = true;
    stripe
.confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
 payment_method: {
  card: cardElement,
  billing_details: {
    name: 'Jenny Rosen',
   },
  },
 })
  .then(function(result) {
    loading = false;
   // Handle result.error or result.paymentIntent
  });
}

然后在加载为真时显示加载程序

例：

{loading？：null}

最佳方法取决于您如何管理前端。如果要使用类似React with hooks的东西，还可以使用异步/等待模式：

const clickHandler = useCallback(async () => {
  if (isLoading) return;

  setIsLoading(true);

  const stripe = await stripePromise;
  const result = await stripe.confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', { ... });

  setIsLoading(false);
}, []);

编辑：根据您对使用js/jq的评论，您应该做一些更像@Bhuwan建议的事情

showPaymentLoader(true);
stripe
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', { ... })
  .then( function () {
    showPaymentLoader(false);
  });

---

您使用的是框架还是普通的JS/jQuery？是的，我使用的是JS/jQuery

const clickHandler = useCallback(async () => {
  if (isLoading) return;

  setIsLoading(true);

  const stripe = await stripePromise;
  const result = await stripe.confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', { ... });

  setIsLoading(false);
}, []);

showPaymentLoader(true);
stripe
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', { ... })
  .then( function () {
    showPaymentLoader(false);
  });