How to track down the cause of an error in coffescript and Stripe?

Question

I'm using Stripe in my Rails 3 application to do creditcard payments. I'm roughly following the railscast on Stripe integration though my app is doing just a single charge for now and not subscription billing like Ryan shows.

The problem is, I can't get the processCard() function to fire. I'll be the first to admit I'm not a javascript guru (or any kind of guru for that matter). It doesn't give a javascript error, it instead submits the form to rails (without any credit card details) and fails since stripe_card_token is nil. I've placed some alert() dialogs spaced throughout for some very crude debugging to see where the hangup is. My model name is Payment which is really the only deviation so far from Ryan's code apart from the temporary alert() dialogs.

So my question is twofold: How can I reliably track down what's causing the problem? and Where did I go wrong?

Here's the 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)

And the associated view:

<%= 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 %>

Related Question(No accepted answer): What is wrong with my CoffeScript in Stripe?

Answer 1

I figured out the problem. Thanks a ton "@mu is too short". Your suggestion of stripping it down to just the required js and html ultimately helped me find the error.

It turns out I had misspelled the name attribute on my meta tag that has the Stripe public key. In the application layout, it was missing the "r" in "stripe-key":

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

I had a super hard time finding this since it didn't cause any exceptions or show up in the logs. To find the cause of the problem, I did two things:

• I placed alert() dialogs in key places of the javascript to pause the script as it runs and find which function wasn't working. Kind of crude, but it worked.
• As @mu is too short said in the comments:

Are you sure that there's no other JavaScript getting in your way? Restart by writing the HTML by hand and getting rid of all (Coffee|Java)Script except the stripe libraries, jQuery, and your code.

In doing this, I found that the javascript won't run properly if there is an error in some other javascript on the page. By stripping the view down to just the essentials, I not only ultimately found the problem with the variable name, but also found several unrelated errors.