Stripe form not submitting when charging customer.id in rails 4 - ruby-on-rails

Question

I have a rails application that uses Stripe to process payments. When a user purchases an item for the first time, everything goes smoothly. I have added a checkbox to the charge form that allows a user to save their credit card for future transactions.
When I view a User object, I can see the Stripe customer ID saved to the customer_id field in the model, however when that user goes to purchase something with that stored card, the form will not submit (when I click the button "Buy with saved credit card" nothing happens).
charges_controller.rb (Relevant portion of the charges controller)
Stripe::Charge.create(
:amount => #gift.price * 100,
:currency => "cad",
:card => params[:existing_card_id],
:customer => #user.customer_id
)
if #charge.save
redirect_to gifts_path
flash[:notice] = "You have successfully sent #{#charge.recipient_email} a #{#gift.name}!"
CodeDelivery.send_code(#user, #gift, #charge, #code).deliver
#code.update_attributes(:used => true)
else
render 'charges/new'
flash[:alert] = "Something went wrong with your purchase."
end
new.html.erb (Second embedded form is the one for users with a customer_id)
<%= title "Redwood | " + #gift.name %>
<div class="container">
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><center><%= #gift.name %></center></h4>
</div>
<div class="modal-body">
<p><%= image_tag #gift.picture.url(:mobile) %></p>
<p><%= #gift.description %></p>
<p>$<%= #gift.price %></p>
<% if current_user.customer_id.nil? or current_user.customer_id == 0 %>
<%= form_for #charge, :url => { :action => :create }, :html => { :id => "payment-form" } do |f| %>
<%= f.hidden_field :gift_id, :value => #gift.id %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-send"></i>
<%= f.text_field :sender_name, :class => "form-control", :placeholder => "Sender's Name" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-send"></i>
<%= f.email_field :recipient_email, :class => "form-control", :placeholder => "Recipient's Email" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-earphone"></i>
<%= f.text_field :recipient_phone_number, :class => "form-control", :placeholder => "Recipient's Phone Number" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-pencil"></i>
<%= f.text_field :recipient_msg, :class => "form-control", :placeholder => "Message to Recipient" %>
</div>
<div class="form-group left-inner-addon ">
<i class="glyphicon glyphicon-credit-card"></i>
<%= text_field_tag :card_number, nil, :class => "form-control", :placeholder => "Credit Card Number", "data-stripe" => "number" %>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-4 left-inner-addon ">
<i class="glyphicon glyphicon-calendar"></i>
<%= text_field_tag :card_month, nil, :class => "form-control", :placeholder => "MM", "data-stripe" => "exp-month" %>
</div>
<div class="col-xs-5 left-inner-addon ">
<i class="glyphicon glyphicon-calendar"></i>
<%= text_field_tag :card_year, nil, :class => "form-control", :placeholder => "YYYY","data-stripe" => "exp-year" %>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-5 left-inner-addon ">
<i class="glyphicon glyphicon-ok-circle"></i>
<%= text_field_tag :card_cvv, nil, :class => "form-control", :placeholder => "CVV", "data-stripe" => "cvc" %>
</div>
</div>
</div>
<div class="checkbox"
<label>Save Credit Card</label>
<%= f.check_box :save_cc %>
</div>
<%= f.submit "Buy", :class => "btn btn-primary", :type => "submit" %>
<% end %>
<% else %>
<%= form_for #charge, :url => { :action => :create }, :html => { :id => "payment-form" } do |f| %>
<%= f.hidden_field :gift_id, :value => #gift.id %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-send"></i>
<%= f.text_field :sender_name, :class => "form-control", :placeholder => "Sender's Name" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-send"></i>
<%= f.email_field :recipient_email, :class => "form-control", :placeholder => "Recipient's Email" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-earphone"></i>
<%= f.text_field :recipient_phone_number, :class => "form-control", :placeholder => "Recipient's Phone Number" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-pencil"></i>
<%= f.text_field :recipient_msg, :class => "form-control", :placeholder => "Message to Recipient" %>
</div>
<%= f.submit "Buy With Saved Credit Card", :class => "btn btn-primary", :type => "submit" %>
<% end %>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
stripe.html (JS partial for Stripe)
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('pk_test_aoHfD0KHBMVsUzbr2KvpHQKi');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(event) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
</script>
My application currently can process payments fine for first time buyers, or for people who do not want to store their credit card information. The issue is with people who store their credit card.

Answer 1

This issue was solved by modifying the form ID of the second payment form (for users with saved credit cards) and removing the the :card attribute form the controller code.
new.html.erb
<%= title "Redwood | " + #gift.name %>
<div class="container">
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><center><%= #gift.name %></center></h4>
</div>
<div class="modal-body">
<p><%= image_tag #gift.picture.url(:mobile) %></p>
<p><%= #gift.description %></p>
<p>$<%= #gift.price %></p>
<% if current_user.customer_id.nil? or current_user.customer_id == 0 %>
<%= form_for #charge, :url => { :action => :create }, :html => { :id => "payment-form" } do |f| %>
<%= f.hidden_field :gift_id, :value => #gift.id %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-send"></i>
<%= f.text_field :sender_name, :class => "form-control", :placeholder => "Sender's Name" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-send"></i>
<%= f.email_field :recipient_email, :class => "form-control", :placeholder => "Recipient's Email" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-earphone"></i>
<%= f.text_field :recipient_phone_number, :class => "form-control", :placeholder => "Recipient's Phone Number" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-pencil"></i>
<%= f.text_field :recipient_msg, :class => "form-control", :placeholder => "Message to Recipient" %>
</div>
<div class="form-group left-inner-addon ">
<i class="glyphicon glyphicon-credit-card"></i>
<%= text_field_tag :card_number, nil, :class => "form-control", :placeholder => "Credit Card Number", "data-stripe" => "number" %>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-4 left-inner-addon ">
<i class="glyphicon glyphicon-calendar"></i>
<%= text_field_tag :card_month, nil, :class => "form-control", :placeholder => "MM", "data-stripe" => "exp-month" %>
</div>
<div class="col-xs-5 left-inner-addon ">
<i class="glyphicon glyphicon-calendar"></i>
<%= text_field_tag :card_year, nil, :class => "form-control", :placeholder => "YYYY","data-stripe" => "exp-year" %>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-5 left-inner-addon ">
<i class="glyphicon glyphicon-ok-circle"></i>
<%= text_field_tag :card_cvv, nil, :class => "form-control", :placeholder => "CVV", "data-stripe" => "cvc" %>
</div>
</div>
</div>
<div class="checkbox"
<label>Save Credit Card</label>
<%= f.check_box :save_cc %>
</div>
<%= f.submit "Buy", :class => "btn btn-primary", :type => "submit" %>
<% end %>
<% else %>
<%= form_for #charge, :url => { :action => :create }, :html => { :id => "saved-payment-form" } do |f| %>
<%= f.hidden_field :gift_id, :value => #gift.id %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-send"></i>
<%= f.text_field :sender_name, :class => "form-control", :placeholder => "Sender's Name" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-send"></i>
<%= f.email_field :recipient_email, :class => "form-control", :placeholder => "Recipient's Email" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-earphone"></i>
<%= f.text_field :recipient_phone_number, :class => "form-control", :placeholder => "Recipient's Phone Number" %>
</div>
<div class="form-group left-inner-addon">
<i class="glyphicon glyphicon-pencil"></i>
<%= f.text_field :recipient_msg, :class => "form-control", :placeholder => "Message to Recipient" %>
</div>
<%= f.submit "Buy With Saved Credit Card", :class => "btn btn-primary", :type => "submit" %>
<% end %>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
charges_controller.rb
Stripe::Charge.create(
:amount => #gift.price * 100,
:currency => "cad",
:customer => #user.customer_id
)
if #charge.save
redirect_to gifts_path
flash[:notice] = "You have successfully sent #{#charge.recipient_email} a #{#gift.name}!"
CodeDelivery.send_code(#user, #gift, #charge, #code).deliver
#code.update_attributes(:used => true)
else
render 'charges/new'
flash[:alert] = "Something went wrong with your purchase."
end