Reputation: 10703
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
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