Stripe RailsJS, Cannot charge a customer that has no active card
<p>I keep getting the "Cannot charge a user that has no active card" error when trying to bill a test user.</p>

<p>The app works so that a user gets charged $10 on sign up after they input their CC credentials.</p>

<p>I know the customers are being created but the charges aren't being sent</p>

<p><a href="https://i.stack.imgur.com/HjHQ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HjHQ1.png" alt="enter image description here"></a></p>

<p>Here is the Stripe error</p>

<p><a href="https://i.stack.imgur.com/11UCa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/11UCa.png" alt="enter image description here"></a></p>

<p>My credit_card_form.js file which is what collects the credit card info and sends it to stripe without it hitting my database.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>$(document).ready(function(){
 var show_error, stripeResponseHandler, submitHandler;
 
 submitHandler = function (event) {
  var $form = $(event.target);
  $form.find("input[type=submit]").prop("disabled", true);
  //If Stripe was initialized correctly this will create a token using the credit card info
  if(Stripe){
   Stripe.card.createToken($form, stripeResponseHandler);
   show_error("CC token generated") 
  } else {
   show_error("Failed to load credit card processing functionality. Please reload this page in your browser.")
  }

  return false;

  };
 // calling the SUBMIT
 $(".cc_form").on('submit', submitHandler);
 
 // RESPONSE HANDLER
 stripeResponseHandler = function (status, response) {
   var token, $form;
   $form = $('.cc_form');
   if (response.error) {
    console.log(response.error.message);
    show_error(response.error.message);
    $form.find("input[type=submit]").prop("disabled", false);
   } else {
    token = response.id;
    $form.append($("&lt;input type=\"hidden\" name=\"payment[token]\" /&gt;").val(token));
    $("[data-stripe=number]").remove();
    $("[data-stripe=cvv]").remove();
    $("[data-stripe=exp-year]").remove();
    $("[data-stripe=exp-month]").remove();
    $("[data-stripe=label]").remove();
    $form.get(0).submit();
   }

   return false;

 };
 
 //ERROR HANDLING
 show_error = function (message) {
  if($("#flash-messages").size() &lt; 1){
   $('div.container.main div:first').prepend("&lt;div id='flash-messages'&gt;&lt;/div&gt;")
   }
   $("#flash-messages").html('&lt;div class="alert alert-warning"&gt;&lt;a class="close" data-dismiss="alert"&gt;×&lt;/a&gt;&lt;div id="flash_alert"&gt;' + message + '&lt;/div&gt;&lt;/div&gt;');
   $('.alert').delay(5000).fadeOut(3000);
   
  return false;
 };

});
 </code></pre>
</div>
</div>
</p>

<p>And payment.rb</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>class Payment &lt; ApplicationRecord
  attr_accessor :card_number, :card_cvv, :card_expires_month, :card_expires_year
  belongs_to :user
  
  def self.month_options
    Date::MONTHNAMES.compact.each_with_index.map{|name,i| ["#{i+1} - #{name}", i+1]}
  end
  
  def self.year_options
    (Date.today.year..(Date.today.year+10)).to_a
  end
  
  def process_payment
    customer = Stripe::Customer.create email:email, card:token

    
    Stripe::Charge.create customer:customer.id, amount: 1000, description: "Premium", currency: "usd"
  end
  
end</code></pre>
</div>
</div>
</p>

<p>And a snippet of the devise registrations new.html.erb which is where the user will be charged from</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-3"&gt;
  &lt;%=p .select :card_expires_month, options_for_select(Payment.month_options), {include_blank: "Month"}, "data-stripe"=&gt;"exp-month", class: "form-control", required: true%&gt;
&lt;/div&gt;
&lt;div class="col-md-3"&gt;
  &lt;%=p .select :card_expires_year, options_for_select(Payment.year_options.push), {include_blank: "Year"}, class: "form-control", data: {stripe: "exp-year"}, required: true%&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I know that the customers are being created but I have no clue why my customers aren't paying when I use the test credit card numbers. No answers on stack overflow have helped me as of yet.</p>