Stripe with Rails: Undefined Stripe Card Token

I searched on SoF and found one question which is related but the answer did not help me and when reading the person's problem, it wasn't exactly the same as mine.

I am integrating Stripe into my RoR platform. The error clearly states what is wrong but I do not know how to fix it.

Error below::

Stripe::InvalidRequestError in Users::RegistrationsController#create Snipped Capture of Error Screen

Request response below:

Parameters:

{"utf8"=>"✓",
 "authenticity_token"=>"wTMt3fOth2wQig2rdoeRuYL9e6hXiWOVQMH8Et+wszUFCUqr8f8+3FxrGYzmEYMukb7Wk8SL0jjDAAnqVP+big==",
 "plan"=>"2",
 "user"=>{"email"=>"test4@example.com",
 "password"=>"[FILTERED]",
 "password_confirmation"=>"[FILTERED]",
 "stripe_card_token"=>"undefined"}}

So clearly my stripe_card_token is not being defined when submitting the form.

My application.html.rb file has <%= javascript_include_tag "http://ift.tt/KXmU7y", type: 'text/javascript' %> included in the head tag

My user.js file is setup as follows:

/*global Stripe*/

$(document).ready(function(){
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));
    //watch for a form submission
    $("#form-submit-btn").click(function(event){
        event.preventDefault(); //stop the button from sending form to server
        $('input[type=submit]').prop('disabled', true); //disables the button
        var error = false; //error noti.
        var ccNum = $('#card_number').val(), //just value store variables
            cvcNum = $('#card_code').val(),
            expMonth = $('#card_month').val(),
            expYear = $('card_year').val();

        if (!error){
            //Get the stripe token:
            Stripe.createToken({
                number:ccNum,
                cvc: cvcNum,
                exp_month: expMonth,
                exp_year: expYear,
            }, stripeResponseHandler);
        }
        return false;
    });

    function stripeResponseHandler(status, response){
        var f = $('#new_user');
        var token = response.id;
        f.append('<input type="hidden" name="user[stripe_card_token]" value="' + token + '" />');
        f.get(0).submit(); //submission of form
    }
});

My registrations_controller.rb file has:

class Users::RegistrationsController < Devise::RegistrationsController
    def create
        super do |resource|
            if params[:plan]
                resource.plan_id = params[:plan] #store user based on plan 1 or 2
                if resource.plan_id == 2
                    resource.save_with_payment #for pro
                else
                    resource.save #for basic
                end
            end
        end
    end
end

Additional/New code placed inside user.rb

  attr_accessor :stripe_card_token

  def save_with_payment
    if valid?
      customer = Stripe::Customer.create(description: email, plan: plan_id, card: stripe_card_token)
      self.stripe_customer_token = customer.id
      save!
    end
  end

Generated a new migration with the following:

class AddStripeCustomerTokenToUsers < ActiveRecord::Migration
  def change
    add_column :users, :stripe_customer_token, :string
  end
end

New/Additional code placed inside my application_controller.rb

  before_filter :configure_permitted_parameters, if: :devise_controller?

  protected
  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:name, :stripe_card_token, :email, :password, :password_confirmation) }
  end
end

and added the following line to my routes.rb file in-line with devise:

controllers: { registrations: 'users/registrations' }

I also receive the following error inside the console Error 400 - when submitting the form (bad request to http://ift.tt/1Tj8D38)