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

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

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

然而，如果用户从未编辑/更改卡片元素，这种方法就无法确定它是无效的。我随时可以尝试通过以下方式提交付款confirmCardPayment但这是低效的——这种验证应该可以在客户端进行。

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

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

Stripe.js 根据元素的状态将多个类应用于每个 Stripe 元素的容器：

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

您可以阅读有关这些类的更多信息，包括如何自定义它们，请参阅Stripe 的文档 https://stripe.com/docs/js/element/the_element_container.

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

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

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

// Do things based on cardElementEmpty being true or false