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

Question

我想在 stripe 的 confirmCardPayment returns 结果中添加一个加载器。由于方法 returns 一个结果对象，它告诉事件是成功还是失败。但是如何捕获我点击提交后发生的等待事件。我是说 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
  });
}

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

例如：

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

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

Stripe ConfirmCardPayment method create a spinner to wait until the result

javascript

loader

promise

stripe-payments