条纹元素：如何验证卡片元素不是空白客户端？

Question

Stripe 建议使用change事件对card元素进行客户端验证：

cardElement.on('change', function(event) {
  if (event.complete) {
    // enable payment button
  } else if (event.error) {
    // show validation to customer
  }
});

但是，如果用户从不编辑/更改卡片元素，则这种方法无法确定卡片元素无效。 我总是可以尝试使用confirmCardPayment提交付款，但这效率低下——这种验证应该可以在客户端进行。

我可以通过将付款表单默认为错误 state 来解决此问题，然后在用户第一次更改卡时解决（或不解决）该错误。 但是，这并不方便，因为它需要我将应用程序代码中的“您的卡号不完整”错误消息国际化，而不是依赖 Stripe。

理想情况下，我将能够同步检查卡元素是否有错误，或者至少同步触发更改事件，但这些似乎都不可能。

Answer 1

Stripe.js 根据元素的 state 将几个类应用于每个 Stripe 元素的容器：

• StripeElement--complete
• StripeElement--empty
• StripeElement--focus
• StripeElement--invalid
• StripeElement--webkit-autofill autofill（仅限 Chrome 和 Safari）

您可以在Stripe 的文档中阅读有关这些类的更多信息，包括如何自定义它们。

听起来检查StripeElement--empty class 可能足以满足您的用例。 你可以这样做：

const cardElementContainer = document.querySelector('#card-element');

let cardElementEmpty = cardElementContainer.classList.contains('StripeElement--empty');

// Do things based on cardElementEmpty being true or false