CODEWITHSUNDEEP
javascriptjquerystripe-payments
carl
carl

Reputation: 4426

Manually handle stripe checkout window with javascript

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 

<div class="shipping_validation">
     <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>
     </script>
 </div>

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

$(".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
    }
})

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?

Upvotes: 0

Views: 3184

Answers (2)

Nur Zico
Nur Zico

Reputation: 2447

For your case you have to implement custom integration for custom behaviour of Stripe checkout. Details are here

You have to create a handler to control the open() and close() event.

The following example is like your situation using custom integration

<script src="https://checkout.stripe.com/checkout.js"></script>

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_key....',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
    $("#checkout_form").formValidation('validate');
    if($('#checkout_form').data('formValidation').isValid()){ //if your form is valid
        popup(); //open the Stripe checkout
    }
});

function popup(){
    // Open Checkout with further options:
      handler.open({
        name: 'you will put the name',
        description: 'your description',
        zipCode: true,
        currency: 'usd',
        amount: 0000
      });
      e.preventDefault();
}

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

Upvotes: 3

Seth Holladay
Seth Holladay

Reputation: 9539

The problem is that Stripe's window opening is not a default action. Default actions are things like the browser scrolling down when the spacebar is pressed. In this case, a div does not have a default click action, so preventDefault() cannot help you because it has nothing to do.

Instead, use stopPropagation() to prevent other scripts (namely, checkout.js) from receiving the click event and thereby being able to act upon it.

if(!$('#checkout_form').data('formValidation').isValid()){
   event.stopPropagation();
   // do something to prevent the stripe window to open
}

An alternative approach is to use Checkout's Custom mode, which provides an open() method that you can call to trigger the pop-up on demand. Just be sure to still call it within a click handler, as browsers like to block pop-ups that are not directly initiated by the user.

Upvotes: 1

Related Questions