Debugging stripe payments coffeescript

Question

I have the following code:

order =
  setupForm: ->
    $('.new_order').submit ->
      $form = $(this)
      $form.find('input[type=submit]').attr('disabled', true)
      order.processCard($form)
      false

  processCard: ($form)->
    card =
      number: $form.find('.card_number').val()
      cvc: $form.find('.card_code').val()
      expMonth: $form.find('.card_month').val()
      expYear: $form.find('.card_year').val()
    Stripe.createToken card, (status, response) ->
      order.handleStripeResponse(status, response, $form)

  handleStripeResponse: (status, response, $form) ->
    if status == 200
      $form.find('.order_stripe_card_token').val(response.id)
      $form.submit()
    else
      $form.find('.stripe_error').text(response.error.message)
      $form.find('input[type=submit]').attr('disabled', false)

It renders errors perfectly ok (if the card number is wrong/missing etc.), but when I put in the correct card details provided by Stripe, it doesn't submit anything.

I'm sure it's something very obvious I'm missing, but need some fresh eyes to point out where there error lies.

Answer 1

Your problem is that your submit handler calls your submit handler which calls your submit handler which ...

The sequence of events goes like this:

1. The <form> is submitted.
2. The submit handler calls processCard.
3. processCard does an AJAX call to stripe via Stripe.createToken.
4. The createToken callback calls handleStripeResponse.
5. handleStripeResponse calls $form.submit().
6. The <form> is submitted.
7. ...

If we look at a simplified and instrumented example, the problem might be clearer. Given a simple <form id="f"> with a single submit button and this code:

hand_break = 0

ajax_simulator = ($f) ->
    fn = ->
        console.log("AJAX callback called: #{hand_break}")
        $f.submit()
    setTimeout(fn, 500)

$('#f').submit ->
    return false if(++hand_break > 3)
    console.log("submit handler called: #{hand_break}")
    ajax_simulator($(@))
    false

You'll see that it loops three times when you hit the submit button, the hand_break stuff is just there to manually stop the infinite loop.

Demo: http://jsfiddle.net/ambiguous/JHF3f/

So how do you break the cycle? Your $('.new_order').submit handler needs to know when to return false and when to return true, if you return true then the form will submit to the server and everything will be okay. You're storing the Stripe token already:

$form.find('.order_stripe_card_token').val(response.id)

so you could just check if that's there:

$('.new_order').submit ->
  return true if($form.find('.order_stripe_card_token').val())
  #...

You'd want to make sure that .order_stripe_card_token was properly initialized, cleared on errors, etc.