Stripeのクレジットカードフォームで全項目の入力が完了するまで送信させない

Stripe Elementsはこのサイトにあるサンプルを使えば手軽に始められます。
https://stripe.com/docs/stripe-js

ただ、この例のバリデーションでは全項目の入力を待つことができず、例えばカード番号だけ入力した状態でも送信できてしまいます。

今回はカード番号、有効期限、CVCなど全項目の入力がある場合のみ、Submitボタンを活性化させるような方法をご紹介します。

このサイトのjsのサンプルにあるchangeイベントの箇所

https://stripe.com/docs/stripe-js

card.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

この中で、cahngeイベントが走った場合に、全ての入力項目が揃うと
event.complete
という変数がtrueになるため、それを使ってボタンを活性化させます。

例えばsubmitボタンのタグにdisapbled属性をつけて最初はボタンを無効化します。そしてchangeイベントでdisabledをfalseにしてボタンを有効化します。
 

card.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
  
  //ここを追加
  if (event.complete == true) {
    var formsubmit = document.getElementById('submitボタンのID');
    formsubmit.disabled = false;
  }
});

参考にした情報
https://github.com/stripe/react-stripe-elements/issues/283