條紋元素：如何驗證卡片元素不是空白客戶端？

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