调试条纹支付coffeescript

Question

我有以下代码：

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)

它可以完美地呈现错误（如果卡号错误/丢失等），但当我输入Stripe提供的正确卡详细信息时，它不会提交任何内容。

我确信这是我明显遗漏的东西，但需要一些新的眼光来指出错误所在。

Answer 1

您的问题是提交处理程序调用提交处理程序，提交处理程序会调用您的提交处理程序。。。

事件的顺序如下：

1. <form>已提交
2. 提交处理程序调用processCard
3. processCard通过Stripe.createToken对条带进行AJAX调用
4. createToken回调调用handleStripeResponse
5. CCD_ 7调用CCD_
6. <form>已提交

如果我们看一个简化和工具化的例子，问题可能会更清楚。给定一个简单的<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，则表单将提交给服务器，一切都会正常。您已经在存储Stripe代币：

$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正确初始化、清除错误等。