woocommerce POSTing data before javascript (jQuery) finishes

Question

i have a custom gateway (which works perfectly), the problem is when a customer buys something for the first time, there is some token than needs to be generated with the card info, the thing is that just before that token is generated, the form tries to submit, but an error is displayed saying that "the object could not be found", so, no refresh and nothing, if i press again the submit button (or "place order" button) everything works!.

i believe that by that second time, the token is generated and in the corresponding hidden field:

here is my code, hope somebody could help me :S

HTML (from the chrome inspector):

<input type="hidden" name="card-name" data-conekta="card[name]">
<input type="hidden" name="exp-month" data-conekta="card[exp_month]">
<input type="hidden" name="exp-year" data-conekta="card[exp_year]">
<input type="hidden" name="conektaTokenId" value="">
<input type="hidden" name="conektaCustId" value="false">

Javascript

jQuery(window).load(function() {

var form;
var first_name;
var last_name;
var cvc;


jQuery('form[name="checkout"]').submit(function(event) {

    jQueryform = jQuery(this);

    Conekta.setPublishableKey(jQuery('input[name="pbkey"]').val());
    console.log('entro');
    if( jQuery('input[name="conektaCustId"]').val()=="true" &&  jQuery('input[name="conektaTokenId"]').val().substr(0,4)!="tok_"){
        console.log('entro');
        first_name = jQuery('#billing_first_name').val();
        last_name = ' ' + jQuery('#billing_last_name').val();
        expiry = jQuery('#conekta_card-card-expiry').val().replace(/ /g, '').split("/");

        jQuery('input[name="card-name"]').val( first_name + last_name );
        jQuery('input[name="exp-month"]').val( Number(expiry[0]));
        jQuery('input[name="exp-year"]').val( Number(expiry[1]));

        jQueryform.prepend('<span class="card-errors"></span>');

        Conekta.token.create(jQueryform, conektaSuccessResponseHandler, conektaErrorResponseHandler);
        woocommerce_order_button_html
        return false;

    }
    else{
        return;
    }

});

var conektaSuccessResponseHandler= function(response){

    var token_id = response.id;

    jQuery('input[name="conektaTokenId"]').val(token_id);

}

var conektaErrorResponseHandler= function(response){

    jQueryform.find('.card-errors').text(response.message);

}

});

Answer 1

i have found the solution, you have to add the class processing to the checkout form and just when you finished procesing your data to be send to wherever you need to (usually wordpress/woocommerce), remove that class so the form can submit the new data.