Q:

jQuery functions not firing with Stripe Elements

I have a form that let's users select payment method. If the method is Credit Card, an initiated Stripe Elements form is displayed and they can enter CC/EXP/ZIP data. Once they click submit, the form should first pass validation (jQuery Validate), then go through the process of getting the token from Stripe to pass to the server in the next page. The problem is that even though the functions are declared, and even though I am calling them, they don't seem to be running and I cannot figure out why.
var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('keyup', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

var stripe = Stripe('');

// Create an instance of Elements
var elements = stripe.elements();
jQuery( document ).ready(function() {
    function stripeTokenHandler(token) {
                // Insert the token ID into the form so it gets submitted to the server
                document.createElement('input');
                var form = document.getElementById('payment-form');
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);
                alert('token id is' + token.id);
                var token_field = jQuery("input[name='stripeToken']").val();
                alert(token_field);
                // Submit the form

                setTimeout(form.submit(), 3000);

        };
    function createToken() {
        stripe.createToken(card).then(function(result) {

            if (result.error) {
            // Inform the user if there was an error
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
            alert(result.error.message);
            } else {
            // Send the token to your server
            alert('we got the token, sending it off')
            stripeTokenHandler(result.token);
            }
        });
    };

    function stripeCreateToken(event){

        var selectVal = jQuery("#payment_type option:selected").val();
        if( selectVal !== "Credit Card" ){
            // Not CC, skip Stripe and submit the form
            alert('it failed or no credit card');
            var form = document.getElementById('payment-form');
            form.submit();
        }
        createToken(); 
    };

    jQuery('#payment_type').on('change', function () {
            var selectVal = jQuery("#payment_type option:selected").val();
            //var form = document.getElementById('payment-form');
            if( selectVal == "Credit Card" ){
                jQuery('.check').hide();
                jQuery('.cc').show();

                jQuery("#payment-form").submit(function(e){
                    stripeCreateToken(e);
                });
            }else{
                jQuery('.cc').hide();
                jQuery('.check').show();
            }
        }); 
});

Weird thing is that if I paste all of the above in the console it works, but I want to understand what I am doing wrong, or at least some direction of where to look.

A:

Issue was jQuery validation was firing the form submit before Stripe could finish it's thing. I removed the form.submit(); from jQuery validation and had it initiate my stripe functions and its working great.

