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

Question

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

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

Answer 1

您可以监听 Stripe Elements 上的

change

事件，并在传递给事件处理程序的

event.error

上查找

event

，以处理输入验证。

当 Stripe 元素失去焦点并且它包含的值似乎无效时，

event.error

将被填充并包含

code

、

message

和

type

，您可以使用它们来更新元素的外观和显示给用户

message

。

例如，当您提供部分卡号并将焦点切换到另一个字段时

event.error

将包含以下内容：

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

Answer 2

我发现的一个更简单的解决方案是使用 Stripe 的

useElements

创建一个 elements 对象：

const elements = useElements();

随后，您可以使用它来获取您感兴趣的元素并检查它的

_invalid

和

_empty

属性。

const cardNumber = elements.getElement('cardNumber');

const isInvalid = cardNumber._invalid;
const isEmpty = cardNumber._empty;

const isValid = !isEmpty && !isInvalid;

注意：输入为空时NOT被视为无效。

不知道为什么没有更简单的方法，但是嘿。