title: Manually handle stripe checkout window with javascript
body: <p>I am using stripe for credit card information. But I implemented my own shipping information form. I want that the shipping information form invalidated before credit card information can be added. My problem is that I don't know how to prevent the stripe window to open.
  The stripe button is implemented as </p>
  
  <pre><code>&lt;div class="shipping_validation"&gt;
       &lt;script src="https://checkout.stripe.com/checkout.js" class="stripe-button" id='stripe-button'
           data-key="{{ key }}" 
           data-zip-code="true" 
           data-billing-address="true" 
           data-shipping-address="false" 
           data-description="benty-shop" 
           data-image="/static/favicon/apple-icon-120x120.png"
           data-amount="{{ orders | sum(attribute='cost')*100 }}" 
           data-locale="auto"
           disabled&gt;
       &lt;/script&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I embedded the button in a div element, and I use the class of that element to trigger a form validation for the shipping form</p>
  
  <pre><code>$(".shipping_validation").click(function(event) {
      $("#checkout_form").formValidation('validate');
      if(!$('#checkout_form').data('formValidation').isValid()){
         event.preventDefault();
         // do something to prevent the stripe window to open
      }
  })
  </code></pre>
  
  <p>I was hoping that event.preventDefault(); would do the trick, but the stripe window still opens. Any idea how I can prevent the stripe window from opening?</p>