Stripe ConfirmCardPayment方法创建一个微调器，直到结果为止

Question

我想在条带的ConfirmPaymentMethod返回结果时添加一个加载器。由于该方法返回一个结果对象，该对象告知事件是成功还是失败。但是，单击提交后，捕获等待事件的方式是什么？我要说result.pending还是要在then（）中添加一个方法。

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

Answer 1

仅创建一个loading变量

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
  });
}

然后在加载为真时显示加载器

ex：

{ loading ? <loader /> : null }

Answer 2

最佳方法取决于您如何管理前端。如果您要使用类似React的钩子，也可以使用async / await模式：

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);
  });