如何在上一页输入付款信息后提交 Stripe 卡信息以供审核页面

Question

我在 React 中有一个包含以下页面的多步骤 Stripe 捐赠付款表：

• 捐款金额
• 联系方式和地址
• 支付信息，用户在其中输入信用卡号
• 审核

这是模型。 （我不确定显示卡号的最后四位是否真的可行，但这是另一个问题。）

如果我们省略了审核页面并在付款页面上提交捐款，我们可以成功提交付款。但是如果我们在评论页面中添加，并在那里有提交付款的按钮，付款字段不再显示在屏幕上，因此 Stripe 无法获取它。一种解决方案可能是将支付字段保留在屏幕上，但用 CSS 隐藏，但我不确定这是否会带来安全问题。出于安全/责任原因，我宁愿不将信用卡信息存储在 React 状态。

我们正在使用Stripe的useElements()钩子，然后将const card = useElements().getElement("cardNumber")传递给stripe.createPaymentMethod。 card 为 null，因为它不再在页面上，因此失败。

Answer 1

问题是当 React 在页面之间重新渲染时，您的 cardNumber 元素会从 DOM 中删除。两种可能的解决方案：

1. 隐藏元素而不是卸载它。将 CSS display 属性设置为 none 将隐藏元素，而不是直接删除它。

2. 在卸载组件之前创建 PaymentMethod。单击“继续”时，创建 PaymentMethod 并将结果对象存储在您的状态中，然后再提交实际付款。