Stripe Elements，表单提交时的输入验证

Posted 2023-03-22

【中文标题】Stripe Elements，表单提交时的输入验证

【英文标题】：Stripe Elements, input validation upon form submit

【发布时间】：2022-01-06 11:17:32

【问题描述】：

我有一个使用以下反应条纹元素的支付流程。

我正在使用 onChange 道具在用户键入时显示实时错误。我还希望在用户点击提交按钮时显示这些错误。例如，如果他们没有填写任何字段并单击提交，则会显示以下错误。但是，我发现这样做的唯一方法是调用 stripe.createPaymentMethod() 需要几秒钟才能返回响应并且感觉迟缓。 onChange 道具到底使用什么来验证输入字段，我如何使用它而不是 createPaymentMethod()？

【参考方案1】：

您可以在 Stripe Elements 上监听 change 事件并在传递给您的事件处理程序的 event 上查找 event.error handle input validation。

当条纹元素失去焦点并且它包含的值似乎无效时，event.error 将被填充并包含 code、message 和 type，您可以使用它们来更新元素的外观并向用户显示message。

例如，当您提供部分卡号并将焦点切换到另一个字段时，event.error 将包含以下内容：

"error": 
  "code": "incomplete_number",
  "type": "validation_error",
  "message": "Your card number is incomplete."
,