带有保存卡的 React-Stripe-Elements handleCardPayment

Question

我正在切换到付款方式并尝试重复使用已保存的卡。 （反应条纹元素）

现在效果很好，而不是

stripe.handleCardPayment(intentData.client_secret);

（如文档中所建议）我正在使用以下内容，因为它有效。

stripe.confirmPaymentIntent(intentData.client_secret)

第一个我总是得到一个错误，卡号没有填写 - 似乎它总是以同一页面上的 react-elements-form 为基础。

到目前为止，我可以使用保存的卡付款，但现在我使用“所有交易都需要身份验证”卡进行了测试：4000002760003184

当我使用 confirmPaymentIntent 时，它只是停留在状态：[status] => requires_source_action

如果需要，我将如何进行并显示“确认”对话框，就像使用 handleCardPayment 方法一样？

事务都在页面上发生，并通过 react-stripe-elements 触发。

Answer 1

似乎 react-stripe-elements 将始终采用 Elements 表单上下文，只要您初始化了一个表单（我在同一页面上）并且您使用了 stripe 属性。

当您填写表格以添加新信用卡时，这非常简洁，但当您不想使用表格数据但您保​​存的卡时，这真的很烦人。

我询问了条带支持，他们告诉我，没有办法解决这个问题，所以我环顾四周发现，react-stripe-elements 只是使用普通的 Stripe JS SDk，因此window.Stripe 对象应该可用（在内容之外）以便轻松地做到这一点。

这就是我为我们解决的方法：

const { stripe } = this.props;

// if we use a saved payment method and the Stripe obj is available
if (isSavedPaymentMethod && typeof Stripe !== 'undefined') {
  // don't use the context bound stripe from react-stripe-elements, but the uninitialized Stripe and pass your key
  const stripeOutofBound = Stripe(STRIPE_API_KEY);
  await stripeOutofBound.handleCardPayment(
    intentData.client_secret,
  );
} else {
  // otherwise use the react-stripe-elements prop directly, that passes the new credit card form data
  await stripe.handleCardPayment(
    intentData.client_secret,
  );
}