Stripe.js: stripeToken not sent

Question

I get "This customer has no attached payment source" because stripeToken is empty when is sent to my server. But I cannot understand why the hidden_field "stripeToken" is empty.

    <form class="form payment-form" id="firstForm" enctype="multipart/form-data" action="/academies" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="kARxrUS2VEPGqegpe6uKFcOl+DgD6+dHkxRfYViglrjYrGLX6htlrABe2vJTK3Mwke74TP6XG2G7QWoPYWHG6g==" />                    
  <span class="payment-errors"></span>

      <div class="form-row">
        <label>
          <span>Card Number</span>
          <input type="text" size="20" data-stripe="number" value="4242424242424242" />
        </label>
      </div>

      <div class="form-row">
        <label>
          <span>CVC</span>
          <input type="text" size="4" data-stripe="cvc" value="123" />
        </label>
      </div>

      <div class="form-row">
        <label>
          <span>Expiration (MM/YYYY)</span>
          <input type="text" size="2" data-stripe="exp-month" value="12" />
        </label>
        <span> / </span>
        <input type="text" size="4" data-stripe="exp-year" value="2016" />
      </div>

      <button type="submit">Submit Payment</button>

JS

<script type="text/javascript">

    jQuery(function($) {
    $('.payment-form').submit(function(event) {
      var $form = $(this);

      // Disable the submit button to prevent repeated clicks
      $form.find('button').prop('disabled', true);

      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from submitting with the default action
      return false;
    });
  });


  function stripeResponseHandler(status, response) {
      var $form = $('.payment-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
      } else {
        // response contains id and card, which contains additional card details
        var token = response.id;

        console.log(token);
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="hidden" name="stripeToken" />').val(token));
        // and submit
        $form.get(0).submit();
      }
};

</script>

Answer 1

RESOLVED

  Stripe.card.createToken({
      number: $('.card-number').val(),
      cvc: $('.card-cvc').val(),
      exp_month: $('.card-expiry-month').val(),
      exp_year: $('.card-expiry-year').val()
    }, stripeResponseHandler);