CODEWITHSUNDEEP
javascriptruby-on-railscoffeescriptstripe-payments
tommyd456
tommyd456

Reputation: 10703

Rails and Stripe Payments

Having trouble in the early stages of setting up Rails and Stripe and I'm following this Railscast: http://railscasts.com/episodes/288-billing-with-stripe

Trying to get the form to be detected by the javascript (coffeescript) on submit but it just submits to the create action and ignores the javascript.

Here is my coffeescript (borrowed from Railcasts):

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

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

    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
        alert(response.id)
      else
        alert(response.error.message)

I have generated my form like this but not too sure about this part...

<%= form_tag accounts_path, {:id => 'new_subscription'} do %>

this creates:

<form accept-charset="UTF-8" action="/accounts" id="new_subscription" method="post">

notice that it does have the right id. I had to set the ID specifically even though in Ryan's tutorials he did not seem to have to.

Any ideas where I'm going wrong?

Upvotes: 3

Views: 287

Answers (1)

mu is too short
mu is too short

Reputation: 434955

I think you should watch your JavaScript console for errors. I think you're getting a JavaScript TypeError right here:

subscription.setupForm()

Both JavaScript and CoffeeScript will hoist a variable declaration to the top of the scope but neither will hoist the definition. For example, this CoffeeScript:

pancakes.m()
pancakes =
    m: -> console.log('pancakes')

becomes this JavaScript:

var pancakes;

pancakes.m();

pancakes = {
  m: function() {
    return console.log('pancakes');
  }
};

so pancakes exists when I say pancakes.m() but pancakes is still undefined at the point and so it has no m method until later when we assign it a value. Demo

Applying that to your code tells us that subscription is undefined when you try to subscription.setupForm(). Try putting things in the right order:

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

If you look at the Railscast code, you'll see that the structure is like this:

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

subscription = #...

Notice that subscription is defined outside the jQuery -> function? jQuery -> delays execution until after the page is loaded but by that time, the subscription = ... part of the code will have been executed already and subscription will have a non-undefined value.

Upvotes: 1

Related Questions