credit_card_form.js

$(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 cedit card info
    if(Stripe){
      Stripe.card.createToken($form, stripeResponseHandler);
    } else {
      show_error("Failed to load credit card processing functionality. Please reload this page in your browser.");
    }
    return false;
  };
  
  $(".cc_form").on('submit', submitHandler);
  
  stripeResponseHandler = function (status, response) {
    var token, $form;
    
    $form = $('.cc_form');
    $form.append($('<name="coconut" />').val("coconuts"));
    
    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($("<input type=\"hidden\" name=\"payment[token]\" />").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;
  };
  show_error = function (message) {
    if($("#flash-messages").size() < 1){
      $('div.container.main div:first').prepend("<div id='flash-messages'></div>");
    }
    $("#flash-messages").html('<div class="alert alert-warning"><a class="close" data-dismiss="alert">x</a><div id="flash-alert">' 
    + message + '<div></div>');
    $('alert').delay(5000).fadeOut(3000);
    return false;
  };
});

new.html.erb

<% require "stripe" %>
<% Stripe.api_key = ENV['STRIPE_TEST_SECRET_KEY'] %>

<%= bootstrap_devise_error_messages! %>
<div class="panel panel-default devise-bs">
  <div class="panel-heading">
    <h4><%= t('.sign_up', :default => "Sign up") %></h4>
  </div>
  <div class="panel-body">
    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), html: { role: "form", class: 'cc_form' }) do |f| %>
      <div class="form-group">
        <%= f.label :email %>
        <%= f.email_field :email, autofocus: true, class: "form-control" %>
      </div>
      <div class="form-group">
        <%= f.label :password %><br />
        <%= f.password_field :password, class: "form-control" %>
      </div>
      <div class="form-group">
        <%= f.label :password_confirmation %>
        <%= f.password_field :password_confirmation, class: "form-control" %>
      </div>
      <%= fields_for( :payment ) do |p| %>
      <div class="row col-md-12">
        <div class="form-group col-md-4 no-left-padding">
          <%= p.label :card_number, "Card Number", data: { stripe: 'label'} %>
          <%= p.text_field :card_number, class: "form-control", required: true, data: {stripe: 'number'} %>
        </div>
        <div class="form-group col-md-2">
          <%= p.label :card_cvv, "Card CVV", data: { stripe: 'label'} %>
          <%= p.text_field :card_cvv, class: "form-control", required: true, data: {stripe: 'cvv'} %>
        </div>
        <div class="form-group col-md-6">
          <div class="col-md-12">
            <%= p.label :card_expires, "Card Expires", data: { stripe: 'label'} %>
          </div>
          <div class="col-md-3">
              <%= p.select :card_expires_month, options_for_select(Payment.month_options),
                            { include_blank: 'Month' },
                            class: "form-control",
                            data: {stripe: "exp-month" }, required: true %>
          </div>
          <div class="col-md-3">
          <%= p.select :card_expires_year, options_for_select(Payment.year_options.push),
                            { include_blank: 'Year' },
                            class: "form-control", 
                            data: {stripe: "exp-year" }, required: true %>
          </div>
        </div>
      </div>
      <% end %>
      <%= f.submit t('.sign_up', :default => "Sign up"), class: "btn btn-primary" %>
    <% end %>
  </div>
</div>
<%= render "devise/shared/links" %>

payment.rb

class Payment < ActiveRecord::Base
  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

registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController

  def create
    build_resource(sign_up_params)
    resource.class.transaction do
      resource.save
      yield resource if block_given?
      if resource.persisted?
        @payment = Payment.new({ email: params["user"]["email"],
                                 token: params["payment[token]"], 
                                 user_id: resource.id })
        flash[:error] = "Please check registration errors" unless @payment.valid?
        begin
          @payment.process_payment
          @payment.save
        rescue Exception => e
          flash[:error] = e.message
          resource.destroy
          puts 'Payment failed'
          render :new and return
        end
        
        if resource.active_for_authentication?
          set_flash_message :notice, :signed_up if is_flashing_format?
          sign_up(resource_name, resource)
          respond_with resource, location: after_sign_up_path_for(resource)
        else
          set_flash_message :notice, :"signed_up_but_#{resource.inactive_message}" if is_flashing_format?
          expire_data_after_sign_in!
          respond_with resource, location: after_inactive_sign_up_path_for(resource)
        end
      else
        clean_up_passwords resource
        set_minimum_password_length
        respond_with resource
      end
    end
  end
  
  protected
  
  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:sign_up).push(:payment)
  end
end