调试条带支付咖啡 [英] Debugging stripe payments coffeescript

问题描述

我有以下代码：

  order = 
 setupForm： 
 $（'。new_order'）。submit  - > 
 $ form = $（this）
 $ form.find（'input [type = submit]'）。attr（'disabled'，true）
 order.processCard b $ b 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， - > 
 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提供，它不提供任何货物。

我相信这是很明显的，我错过了，但需要一些清新的眼睛，指出哪里有错误。

<您的问题是，您的提交处理程序调用您的提交处理程序，该处理程序调用您的提交处理程序...

事件顺序如下：

1. < form>


2. 提交处理程序调用 processCard 。


3. processCard 。


4. createToken 回拨呼叫 handleStripeResponse 。


5. handleStripeResponse $ form.submit（）。


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




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.

解决方案

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.

这篇关于调试条带支付咖啡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！