Rails 4 + Stripe + simple_form + Post to server twice

Question

I am working on my RoR4 app to enable users to purchase a subscription using Stripe account. It somewhat works, but the problem is the form got submitted twice, once without a token and then with a token.

My application's code is highly inspired from this blogpost, but I'm using simple_form: http://railscasts.com/episodes/288-billing-with-stripe

I saw a similar problem from a stackoverflow post dated 2 years ago (jQuery callback called twice), but the suggested solutions did not solve the problem.

coffeescript

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

order =
  setupForm: ->
    $j('#form').submit (ev) ->
      ev.preventDefault()
      if $j('#order_stripe_card_token').val
        order.processCard()
      $j('input[type=submit]').attr('disabled', true)
    else
      $j('#stripe_error').text('Credit Card Number should not be empty!')

  processCard: ->
    card =
      number:   $j('#order_credit_card_number').val()
      cvc:      $j('#order_cvc').val()
      expMonth: $j('#order_month').val()
      expYear:  $j('#order_year').val()
    Stripe.createToken(card, order.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200 and response.id.length
      $j('#order_stripe_card_token').val(response.id)
      $j('#order_credit_card_number').val('')
      $j('#order_cvc').val('')
      $j('#order_month').val('')
      $j('#order_year').val('')
      $j('#form')[0].submit()
    else
      $j('#stripe_error').text(response.error.message)
      $j('#stripe_error').show()
      $j('input[type=submit]').attr('disabled', false)

Server trace

Started POST "/url" for 10.0.2.2 at 2015-12-03 03:26:35 +0000
Processing by OrdersController#order_form as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"zpV3WsGPbK8DUX3gIzwHCc1/7hVlxtLVp0MfX+Y+hfc=", "order"=> {"stripe_card_token"=>"", "credit_card_number"=>"4242424242424242", "cvc"=>"999", "month"=>"09", "year"=>"2017"}}
User Load (7.1ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 151  ORDER BY "users"."id" ASC LIMIT 1
Redirected to http://localhost:3000/url
Completed 302 Found in 31ms (ActiveRecord: 7.1ms)

Started GET "/url" for 10.0.2.2 at 2015-12-03 03:26:36 +0000
Processing by OrdersController#form as HTML
User Load (0.6ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 151  ORDER BY "users"."id" ASC LIMIT 1
Answer Load (0.4ms)  SELECT  "answers".* FROM "answers"  WHERE "answers"."user_id" = $1  ORDER BY "answers"."id" ASC LIMIT 1  [["user_id", 151]]
Address Load (0.4ms)  SELECT  "addresses".* FROM "addresses"  WHERE "addresses"."user_id" = $1 AND "addresses"."address_type" = 'shipping'  ORDER BY "addresses"."id" ASC LIMIT 1  [["user_id", 151]]

Started POST "/url" for 10.0.2.2 at 2015-12-03 03:26:36 +0000
  Rendered shared/_form_shipping_address.html.erb (41.6ms)
  Rendered orders/form.html.erb within layouts/application (241.2ms)
  Rendered layouts/_navigation_links.html.erb (2.2ms)
  Rendered layouts/_navigation.html.erb (38.7ms)
Processing by OrdersController#order_form as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"zpV3WsGPbK8DUX3gIzwHCc1/7hVlxtLVp0MfX+Y+hfc=", "order"=>{"stripe_card_token"=>"tok_17DnjP4Ul2QFXvJREw0BigSa", "credit_card_number"=>"", "cvc"=>"", "month"=>"", "year"=>""}}

order.html.erb

<%= simple_form_for @order,
    :url => order_url_path,
    :method => 'post',
    :html => { :id => 'form' } do |f| %>

      <%= field_set_tag 'Contact Information' do %>
        <%= f.input :first_name, required: true, wrapper_html: { class: 'form-group' }, :input_html => { class: 'form-control', 'value' => @user.name } %>
        <%= f.input :last_name, required: true, wrapper_html: { class: 'form-group' }, :input_html => { class: 'form-control', 'value' => @user.last_name } %>
        <%= f.input :user_phone, required: true, wrapper_html: { class: 'form-group' }, :label => 'Phone Number', :input_html => { class: 'form-control', 'value' => @user.phone } %>
      <% end %>

    <%= render "shared/form_shipping_address", f: f %>

    <%= field_set_tag 'Credit Card' do %>
      <span id="stripe_error"></span><br>
      <%= f.hidden_field :stripe_card_token %>
      <%= f.input :credit_card_number, required: true, wrapper_html: { class: 'form-group' }, :label => 'Credit Card Number', :input_html => { class: 'form-control' }, :placeholder => 'xxxx-xxxx-xxxx-xxxx' %>
      <%= f.input :cvc, required: true, wrapper_html: { class: 'form-group' }, :label => 'CVC', :input_html => { class: 'form-control' }, :placeholder => 'xxx' %>
      <%= f.input :month, required: true, wrapper_html: { class: 'form-group' }, :label => 'Month', :input_html => { class: 'form-control' }, :placeholder => 'MM' %>
      <%= f.input :year, required: true, wrapper_html: { class: 'form-group' }, :label => 'Year', :input_html => { class: 'form-control' }, :placeholder => 'YYYY' %>
    <% end %>

    <%= f.submit 'Place your order', :class => 'btn btn-primary btn-large' %>

Ideas of how not to get the form to submit twice to the server (and why does this happen) ?

Answer 1

If you have included jquery in your project, and accidentally included this twice, then this could account for the problem.