调试条纹支付的CoffeeScript(Debugging stripe payments coff

我有以下代码：

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)

它使得错误完全确定（如果卡号是错/丢失等），但是当我把在由条纹提供了正确的卡的详细信息，它不提交任何东西。

我敢肯定这件事情很明显我丢失，但需要一些新鲜的眼光指出哪里有错误所在。

Answer 1:

你的问题是，您提交处理程序调用您提交处理它要求你提交处理这...

事件的顺序是这样的：

1. 在<form>被提交。
2. 提交处理程序调用processCard 。
3. processCard做一个AJAX调用通过以条纹Stripe.createToken 。
4. 该createToken回调中调用handleStripeResponse 。
5. handleStripeResponse调用$form.submit()
6. 在<form>被提交。
7. ...

如果我们看一下一个简化和仪表例子，这个问题可能会更清晰。 给出一个简单的<form id="f">与单个提交按钮和此代码：

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

你会看到，它循环三次，当你点击提交按钮时， hand_break的东西就是有手动停止无限循环。

演示： http://jsfiddle.net/ambiguous/JHF3f/

那么，如何打破这个循环？ 您的$('.new_order').submit处理程序需要知道何时返回false以及何时返回true ，如果返回true则表单将提交到服务器，一切都会好起来。 你已经存储条纹令牌：

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

所以你也可以检查，如果这是有：

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

你会希望确保.order_stripe_card_token是正确的初始化，清除的错误，等等。

文章来源: Debugging stripe payments coffeescript