Problème avec stripe

Bonjour,

j'ai un petit problème avec mon code, j'ai créer un formulaire est j'ai integrer le bouton stripe pour que mes clients puissent payer mais le probleme c'est que quand il clique sur le bouton et qui n'ont pas rempli le formulaire ils ont directement le petit bloc de paiement stripe qui qui apparaît. Je voudrais bloquer ce bouton jusqu'à ce que le formulaire soit rempli corectement.

<form method="POST" action="charge.php" class="cd-form floating-labels" id="mainForm">
        <fieldset>
            <legend>Adresse pour recevoir votre jeux</legend>

            <div class="icon">
                <label class="cd-label" for="cd-name">Nom et prénom</label>
                <input class="user" type="text" name="name" id="cd-name" autocomplete="off" placeholder="Nom et prénom">
            </div> 

            <div class="icon">
                <label class="cd-label" for="cd-address">Adresse</label>
                <input class="address" type="text" name="address" id="cd-address" autocomplete="off" placeholder="Adresse postale">
            </div> 

            <div class="icon">
                <label class="cd-label" for="cd-ville">Ville</label>
                <input class="ville" type="text" name="ville" id="cd-ville" autocomplete="off" placeholder="Ville">
            </div> 

            <div class="icon">
                <label class="cd-label" for="cd-post">Code postal</label>
                <input class="post" type="text" name="post" maxlength="5" id="cd-post" autocomplete="off" placeholder="Code postal">
            </div> 

            <div class="icon">
                <label class="cd-label" for="cd-pays">Pays</label>
                <input class="pays" type="text" name="pays" id="cd-pays" autocomplete="off" placeholder="Pays" value="France">
            </div> 

            // code stripe ...
            <script src="https://checkout.stripe.com/checkout.js"  id="mainForm" class="stripe-button"
          data-key="<?php echo $stripe['publishable_key']; ?>"
          data-amount="1999"
          data-name="Gta 5"
          data-description="Jeux videos Gta 5"
          data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
          data-label="Finaliser la commande"
          data-locale="auto"
          data-currency="eur">
          </script>
        </fieldset>
    </form>

code Js j'utilise ce plugin

$().ready(function() {
  $("#mainForm").validate({
  rules : {
    name : {
      required : true,
    },
    address : {
      required : true,
    },  
    ville : {
      required : true,
    },
    post : {
      required : true,
    },
    pays : {
      required : true,
    },
  },
  messages : {
    name : "Vous devez renseigner votre nom et votre prénom",
    address : "Vous devez renseigner votre adresse complète 'pour recevoir votre colis !'",
    ville : "Merci d'indiquer votre ville",
    post : "Merci d'indiquer votre code postal",
    pays : "Merci d'indiquer votre Pays ex : France (si vous résidez en France)"
  }
 });
});