如何追踪 coffescript 和 Stripe 出错的原因？

Question

我在我的 Rails 3 应用程序中使用 Stripe 进行信用卡付款。我大致关注railscast on Stripe integration，尽管我的应用现在只收取一次费用，而不是像 Ryan 展示的订阅计费。

问题是，我无法触发 processCard() 函数。我将是第一个承认我不是 javascript 大师（或任何类型的大师）的人。它没有给出 javascript 错误，而是将表单提交到 rails（没有任何信用卡详细信息）并且由于 stripe_card_token 为零而失败。我已经放置了一些alert() 对话框，用于一些非常粗略的调试，以查看挂断的位置。我的模型名称是 Payment，除了临时的 alert() 对话框之外，这确实是迄今为止与 Ryan 的代码的唯一偏差。

所以我的问题是双重的：我怎样才能可靠地找出导致问题的原因？以及我哪里做错了？

这里是 Javascript：

jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  payment.setupForm()

payment =
  setupForm: ->
    $('#new_payment').submit ->
      $('input[type=submit]').attr('disabled', true)
      alert("before processCard")
      payment.processCard()
      alert("after processCard")
      false
      # else
      #   true

  processCard: ->
    alert("processCard start")
    card =
      number: $('#credit_card_number').val()
      cvc: $('#cvc').val()
      expMonth: $('#card_month').val()
      expYear: $('#card_year').val()
    alert("card values are set")
    Stripe.createToken(card, payment.handleStripeResponse)
    alert("After createToken")

  handleStripeResponse: (status, response) ->
    if status == 200
      alert(response.id)
      # $('#payment_stripe_card_token').val(response.id)
      # $('#new_payment')[0].submit()
    else
      alert(response.error.message)
      # $('#stripe_error').text(response.error.message)
      # $('input[type=submit]').attr('disabled', false)

以及相关的视图：

<%= simple_form_for @payment, :html => { :class => 'form-horizontal'} do |f| %>
<fieldset>
  <legend>Pay via Credit Card</legend>

    <%= f.input :stripe_card_token, :as => :hidden, :id => 'stripe_card_token' %>

    <div class="well well-small">
      <%= current_user.full_name %><br />
      <%= current_user.email %><br />
      This is the name we have on file for you. If it's not correct, please <%= link_to "change it now", edit_user_registration_path(current_user) %>
    </div>

<div id="stripe_error">
  <noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
</div>

<div id="credit-card">
  <div class="control-group string required">
    <%= label_tag :credit_card_number, "Card Number", :class => "control-label string required" %>
    <div class="controls">
      <%= text_field_tag :credit_card_number, nil, :class => "string required", :name => nil %>
    </div>
  </div>

  <div class="control-group string required">
    <%= label_tag :cvc, "Security code (CVC)", :class => "control-label string required" %>
    <div class="controls">
      <%= text_field_tag :cvc, nil, :class => "string required", :name => nil %>
    </div>
  </div>

  <div class="control-group date required">
    <%= label_tag :card_month, "Expiration Date", :class => "control-label date required"%>
    <div class="controls">
      <%= select_month nil, {add_month_numbers: true}, {name: nil, id: "card_month", :class => "date required span2"} %>
      <%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+25}, {name: nil, id: "card_year", :class => "date required span2"} %>
    </div>
  </div>

    <h4>Your unpaid courses</h4>
    <% @unpaid_subs.each do |sub| %>
      <%= sub.course.name %>&nbsp;|&nbsp;<%= sub.course.credits %><br />
    <% end %>

<div class="form-actions">
<%= f.submit nil, :class=>"btn btn-primary" %>
<%= link_to "Cancel", courses_path, :class=>"btn" %>
</div>
</fieldset>
<% end %>

相关问题（没有接受的答案）：What is wrong with my CoffeScript in Stripe?

Answer 1

我发现了问题所在。非常感谢“@mu 太短”。您将其剥离为所需的 js 和 html 的建议最终帮助我找到了错误。

原来我拼错了具有 Stripe 公钥的元标记上的 name 属性。在应用程序布局中，“stripe-key”中缺少“r”：

<%= tag :meta, :name => "stipe-key", :content => STRIPE_PUBLIC_KEY %>

我很难找到这个，因为它没有导致任何异常或出现在日志中。为了找到问题的原因，我做了两件事：

• 我在 javascript 的关键位置放置了alert() 对话框，以便在脚本运行时暂停脚本并找出哪个函数不起作用。有点粗鲁，但确实有效。
• 正如 @mu 在 cmets 中所说的太短：

您确定没有其他 JavaScript 妨碍您吗？通过写入重新启动 手动编写 HTML 并摆脱除条纹库之外的所有 (Coffee|Java)Script， jQuery 和你的代码。

在此过程中，我发现如果页面上的其他一些 javascript 出现错误，则 javascript 将无法正常运行。通过将视图剥离到基本要素，我不仅最终发现了变量名的问题，而且还发现了几个不相关的错误。