Rails and Stripe - Railscast #288 (frustation level: 10)

Question

I've been spending the last 2 days trying to get the billing system described in the following railscast to work but have so far had absolutely no luck. The code has been changed slightly to work with my User model. I am usually able to work these things out given enough time but I have definitely hit a roadblock.

One thing to mention is that upon submitting the form, part of the response is was following: an empty "stripe_card_token" (nothing returned from the Stripe server) and it came back very quickly which makes me think that the Stripe server was never even contacted...

Processing by UsersController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"4H+rHOsU+0A55+QoaoWw27vbctDIVK3G9gNZHaB5KVY=", "user"=>{"stripe_card_token"=>"", "email"=>""}, "commit"=>"Subscribe"}

http://railscasts.com/episodes/288-billing-with-stripe

---

users.js.coffee:

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

subscription =
  setupForm: ->
      $('#new_user').submit ->
      $('input[type=submit]').attr('disabled', true)
      subscription.processCard()

  processCard: ->
    card =
      {number: $('#card_number').val()
      cvc: $('#card_code').val()
      expMonth: $('#card_month').val()
      expYear: $('#card_year').val()}
    Stripe.createToken(card, subscription.handleStripeResponse)

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

---

new.html.erb:

<%= form_for @user do |f| %>


<%= f.hidden_field :stripe_card_token %>

 <% if @user.errors.any? %>
    <div class="error_messages">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this subscription from being saved:</h2>
      <ul>
      <% @user.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<div class="field">
  <%= f.label :email %>
  <%= f.text_field :email %>
</div>
<% if @user.stripe_card_token.present? %>
  Credit card has been provided.
<% else %>
  <div class="field">
    <%= label_tag :card_number, "Credit Card Number" %>
    <%= text_field_tag :card_number, nil, name: nil %>
  </div>
  <div class="field">
    <%= label_tag :card_code, "Security Code on Card (CVV)" %>
    <%= text_field_tag :card_code, nil, name: nil %>
  </div>
  <div class="field">
    <%= label_tag :card_month, "Card Expiration" %>
    <%= select_month nil, {add_month_numbers: true}, {name: nil, id: "card_month"}%>
    <%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year"}%>
  </div>

 <div class="actions"><%= f.submit "Subscribe" %></div>


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

<% end %>

Answer 1

Things to note:

1) your indenting appears to be off, although this could be a copy/paste issue.

handleStripeResponse: (status, response) ->

if status == 200 $('#user_stripe_card_token').val(response.id) $('#new_user')[0].submit() else $('#stripe_error').text(response.error.message) $('input[type=submit]').attr('disabled', false)

should be

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

2) Did you try putting debugger or console.log statements in your Coffeescript? I'm just guessing not, given your answer:

handleStripeResponse: (status, response) ->
  console.log status
  console.log response
  ...

You can view these in your developer console in your browser. That will at least shed light on whether or not you're receiving a response from Stripe.