Charging credit cards in your Ruby on Rails app with Stripe is not only simple, but also secure. Sensible credit card information doesn’t flow through the servers of your app, which frees you from complying with regulatory obligations.

Stripe has extensive documentation and I especially recommend these resources:

  1. Add the Stripe gem
    • gem 'stripe'
    • $ bundle install
  2. Create your html form
    • Reference the Stripe javascript file (not in the general form header, but just on this page).
    • Set your publishable Stripe key in the header.
    • Include the payments.js file (We’ll create it later).
    • Give your form an id that your payments.js file can refer to (id: "payment-form" in this case).
    • Make sure your credit card form fields don’t have name attributes, so the data won’t be submitted to your app’s server.
    • Add the data-stripe tag to your credit card form fields (data-stripe="number").
    • Add a span tag with id “payment-errors”, which payments.js will use to include errors in case the credit card charge doesn’t go through.


     <!-- app/views/users/new.html.haml -->

 = content_for :head do
 %script(type="text/javascript" src="https://js.stripe.com/v2/")
 :javascript
   Stripe.setPublishableKey('#{ENV['STRIPE_PUBLISHABLE_KEY']}');
 = javascript_include_tag 'payments'

 %section.register.container
   .row
     .col-sm-10.col-sm-offset-1
       = bootstrap_form_for @user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-6", html: {id: "payment-form"} do |f|
         %header
           %h1 Register
         %fieldset
           = f.email_field :email, label: "Email Address"
           = f.password_field :password
           = f.text_field :full_name, label: "Full Name"

         %fieldset.credit_card
           %span.payment-errors
           .form-group
             %label.control-label.col-sm-2 Credit Card Number
             .col-sm-6
               %input.form-control(type="text" data-stripe="number")
           .form-group
             %label.control-label.col-sm-2 Security Code
             .col-sm-6
               %input.form-control(type="text" data-stripe="cvc")
           .form-group
             %label.control-label.col-sm-2 Expiration
             .col-sm-3
               = select_month(Date.today, {add_month_numbers: true}, class: 'form-control', data: {stripe: "exp-month"})
             .col-sm-2
               = select_year(Date.today.year, {start_year: Date.today.year, end_year: Date.today.year + 4}, class: 'form-control', data: {stripe: "exp-year"})
         %fieldset.actions.control-group.col-sm-offset-2
           .controls
             %input(type="submit" value="Sign Up" class="btn btn-default")


  3. Create the payments.js file
    • The javascript code is provided by Stripe and can be found here.

     // app/assets/javascripts/payments.js

 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;
   });
 });

 function stripeResponseHandler(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 {
     // response contains id and card, which contains additional card details
     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 submit
     $form.get(0).submit();
   }
 };


  4. Load the payment.js file

     # config/initializers/assets.rb
 Rails.application.config.assets.precompile += ['payments.js']


  5. Handle the Stripe charge in the controller action
    • The Ruby code for charging the credit card is also provided by Stripe here.


     # app/controllers/users_controller.rb

 # code omitted for brevity 

 def create    
   @user = User.new(user_params)
   if @user.save
     handle_invitation
     handle_payment_with_stripe
     AppMailer.delay.send_welcome_email(@user)
     redirect_to login_path
   else
     render :new
   end
 end

 def handle_payment_with_stripe
   Stripe.api_key = ENV["STRIPE_SECRET_KEY"]
   Stripe::Charge.create(
     :amount => 999,
     :currency => "gbp",
     :source => params[:stripeToken], # obtained with Stripe.js
     :description => "Sign up charge for #{@user.email}"
     )
 end