Stripe checkout - how to bind a send event?

Question

I am using the "Check Strip" on my web page. I will need to show a message about blocking "I am processing your request" as soon as the token is sent to my server

I need this because my server-side processing may take more than 5 seconds , and I don't want the user to leave the page (or anything else that could invalidate the validation process).

I tried to bind a submit event in the form of a strip to show modal (for example!), But it turns out that Checkout.js does not bind any send event, and there seems to be no way to detect the actual submit form.

Here is my code:

<form class="stripe-form" action="..." method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="..."
    data-email="..."
    data-label="Pay with Stripe"
    data-panel-label="Pay {{amount}}"
    data-amount="... " 
    data-currency="USD"
    data-name="..."
    data-description="..."
    data-image="...">
  </script>
</form>

<script type="text/javascript">
$(function(){

    stripeForm = $('.stripe-form');

    stripeForm.submit(function(e){
        console.log('going to submit'); //this is never called!
    });

});
</script>

, , . ?

. Stripe, StripeCheckout.

Answer 1

. , checkout.js iframe, , .

, , , " ".

$( ".stripe-button-el" ).click(function() {
    $( "#loadingMessage" ).show();
});

#loadingMessage, .

Answer 2

https://stripe.com/docs/checkout#integration-custom, - .

var form = document.querySelector('form');      
var handler = StripeCheckout.configure({
    key: 'STRIPE_PUBLIC_KEY',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(response) 
    {

        var overlay = document.createElement('div');
        overlay.className = 'my-overlay  my-overlay--visible';

        document.body.appendChild(overlay);

        form.submit();  
    }
});

Answer 3

, AJAX . "" ( ).

$('form.stripe-form').submit(function(){
    $.ajax({
        type:'POST',
        data:{'data-key':'…','data-label':'Pay with Stripe','data-currency':'USD'/* etc */},
        beforeSend:function(xhr,XMLHttpRequest){
            //xhr.abort() to abort the ajax, say for validation: $('input').length<1
            XMLHttpRequest.upload.addEventListener("progress",function(evt){
                if(evt.lengthComputable){
                    var progress=evt.loaded/evt.total;
                    console.log(progress);
                }
            },false);
        },
        success:function(result){
            console.log(result);
        }
}

, . , (json, post data ..), . , ajax . , , , , , , - . !