stripe payment gateway integration with rails

Blog Logo
on



read

Stripe is simple website payment solution and its very easy to easy setup.
It currently supports only in US and seems to be very popular compared to other payment gateways because of its api & pricing

Stripe API provides -

  1. charge (regular payments)
  2. subscription (recurring payments)
  3. managing customers (via stripe_customer_token)

What you need to do ?

Create a stripe account by providing email address and password. There after go to the manage account page to obtain stripe public & api keys.
Rails Integration

Rails Integration

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'># Gemfile </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>gem stripe</div></div></pre></div>

Add api key and public key

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'># config/initializers/stripe.rb </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>Stripe.api_key = "rGaNWsIG3Gy6zvXB8wv4rEcizJp6XjF5" </div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'>STRIPE_PUBLIC_KEY = "vk_BcSyS2qPWdT5SdrwkQg0vTSyhZgqN"</div></div></pre></div>

View

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'># app/views/layouts/application.html.haml </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>= javascript_include_tag 'https://js.stripe.com/v1/' </div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'>= tag :meta, :name => 'stripe-key', :content => STRIPE_PUBLIC_KEY</div></div></pre></div>

Payment Form

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'># app/views/payments/new.html.haml </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>#stripe_error </div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'> %noscript JavaScript is not enabled and is required for this form. First enable it in your web browser settings. </div></div><div data-line='5' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='6' class='code-highlight-row numbered'><div class='code-highlight-line'>= form_for @payment ||= Payment.new, :html => {:id => :payForm} do |p| </div></div><div data-line='7' class='code-highlight-row numbered'><div class='code-highlight-line'> = p.hidden_field :stripe_card_token </div></div><div data-line='8' class='code-highlight-row numbered'><div class='code-highlight-line'> .field </div></div><div data-line='9' class='code-highlight-row numbered'><div class='code-highlight-line'> = p.text_field :amount </div></div><div data-line='10' class='code-highlight-row numbered'><div class='code-highlight-line'> .credit_card_form </div></div><div data-line='11' class='code-highlight-row numbered'><div class='code-highlight-line'> %h3.title </div></div><div data-line='12' class='code-highlight-row numbered'><div class='code-highlight-line'> Enter Credit Card </div></div><div data-line='13' class='code-highlight-row numbered'><div class='code-highlight-line'> - if @payment.stripe_card_token.present? </div></div><div data-line='14' class='code-highlight-row numbered'><div class='code-highlight-line'> Credit card has been provided. </div></div><div data-line='15' class='code-highlight-row numbered'><div class='code-highlight-line'> - else </div></div><div data-line='16' class='code-highlight-row numbered'><div class='code-highlight-line'> .field </div></div><div data-line='17' class='code-highlight-row numbered'><div class='code-highlight-line'> = label_tag :card_number, "Credit Card Number" </div></div><div data-line='18' class='code-highlight-row numbered'><div class='code-highlight-line'> = text_field_tag :card_number, nil, name: nil </div></div><div data-line='19' class='code-highlight-row numbered'><div class='code-highlight-line'> .field </div></div><div data-line='20' class='code-highlight-row numbered'><div class='code-highlight-line'> = label_tag :card_code, "Security Code (CVV)" </div></div><div data-line='21' class='code-highlight-row numbered'><div class='code-highlight-line'> = text_field_tag :card_code, nil, name: nil </div></div><div data-line='22' class='code-highlight-row numbered'><div class='code-highlight-line'> .field </div></div><div data-line='23' class='code-highlight-row numbered'><div class='code-highlight-line'> = label_tag :card_month, "Expiry Date" </div></div><div data-line='24' class='code-highlight-row numbered'><div class='code-highlight-line'> = select_month nil, {add_month_numbers: true}, {name: nil, id: "card_month"} </div></div><div data-line='25' class='code-highlight-row numbered'><div class='code-highlight-line'> = select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year"}</div></div></pre></div>

Javascript Code

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'># app/views/payments/new.js </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>var payment; </div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'>jQuery(function() { </div></div><div data-line='5' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='6' class='code-highlight-row numbered'><div class='code-highlight-line'> Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content')); </div></div><div data-line='7' class='code-highlight-row numbered'><div class='code-highlight-line'> return payment.setupForm(); </div></div><div data-line='8' class='code-highlight-row numbered'><div class='code-highlight-line'>}); </div></div><div data-line='9' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='10' class='code-highlight-row numbered'><div class='code-highlight-line'>payment = { </div></div><div data-line='11' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='12' class='code-highlight-row numbered'><div class='code-highlight-line'> setupForm: function() { </div></div><div data-line='13' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='14' class='code-highlight-row numbered'><div class='code-highlight-line'> $('.head').click(function() { </div></div><div data-line='15' class='code-highlight-row numbered'><div class='code-highlight-line'> $(this).css('disabled', true); </div></div><div data-line='16' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='17' class='code-highlight-row numbered'><div class='code-highlight-line'> if($('#payment_stripe_card_token').val()){ </div></div><div data-line='18' class='code-highlight-row numbered'><div class='code-highlight-line'> $('#payForm').submit(); </div></div><div data-line='19' class='code-highlight-row numbered'><div class='code-highlight-line'> } </div></div><div data-line='20' class='code-highlight-row numbered'><div class='code-highlight-line'> else{ </div></div><div data-line='21' class='code-highlight-row numbered'><div class='code-highlight-line'> payment.processCard(); </div></div><div data-line='22' class='code-highlight-row numbered'><div class='code-highlight-line'> } </div></div><div data-line='23' class='code-highlight-row numbered'><div class='code-highlight-line'> }); </div></div><div data-line='24' class='code-highlight-row numbered'><div class='code-highlight-line'> }, </div></div><div data-line='25' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='26' class='code-highlight-row numbered'><div class='code-highlight-line'> processCard: function() { </div></div><div data-line='27' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='28' class='code-highlight-row numbered'><div class='code-highlight-line'> var card; </div></div><div data-line='29' class='code-highlight-row numbered'><div class='code-highlight-line'> card = { </div></div><div data-line='30' class='code-highlight-row numbered'><div class='code-highlight-line'> number: $('#card_number').val(), </div></div><div data-line='31' class='code-highlight-row numbered'><div class='code-highlight-line'> cvc: $('#card_code').val(), </div></div><div data-line='32' class='code-highlight-row numbered'><div class='code-highlight-line'> expMonth: $('#card_month').val(), </div></div><div data-line='33' class='code-highlight-row numbered'><div class='code-highlight-line'> expYear: $('#card_year').val() </div></div><div data-line='34' class='code-highlight-row numbered'><div class='code-highlight-line'> }; </div></div><div data-line='35' class='code-highlight-row numbered'><div class='code-highlight-line'> return Stripe.createToken(card, payment.handleStripeResponse); </div></div><div data-line='36' class='code-highlight-row numbered'><div class='code-highlight-line'> }, </div></div><div data-line='37' class='code-highlight-row numbered'><div class='code-highlight-line'> handleStripeResponse: function(status, response) { </div></div><div data-line='38' class='code-highlight-row numbered'><div class='code-highlight-line'> if (status === 200) { </div></div><div data-line='39' class='code-highlight-row numbered'><div class='code-highlight-line'> $('#payment_stripe_card_token').val(response.id) </div></div><div data-line='40' class='code-highlight-row numbered'><div class='code-highlight-line'> $('#stripe_error').remove(); </div></div><div data-line='41' class='code-highlight-row numbered'><div class='code-highlight-line'> $('#payForm').submit(); </div></div><div data-line='42' class='code-highlight-row numbered'><div class='code-highlight-line'> } else { </div></div><div data-line='43' class='code-highlight-row numbered'><div class='code-highlight-line'> $('#stripe_error').addClass('error').text(response.error.message); </div></div><div data-line='44' class='code-highlight-row numbered'><div class='code-highlight-line'> $('.head').css('disabled', false); </div></div><div data-line='45' class='code-highlight-row numbered'><div class='code-highlight-line'> } </div></div><div data-line='46' class='code-highlight-row numbered'><div class='code-highlight-line'> } </div></div><div data-line='47' class='code-highlight-row numbered'><div class='code-highlight-line'>};</div></div></pre></div>

Generate & Migrate Payment Model

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>rails g model payment status:string amount:float email:string transaction_number:string </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>rake db:migrate</div></div></pre></div>

Payment Model

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'># app/models/payment.rb </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>class Payment < ActiveRecord::Base </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'> PROCESSING, FAILED, SUCCESS = 1, 2, 3 </div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='5' class='code-highlight-row numbered'><div class='code-highlight-line'> attr_accessible :stripe_card_token </div></div><div data-line='6' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='7' class='code-highlight-row numbered'><div class='code-highlight-line'> validates :amount, :stripe_card_token, :presence => true, :numericality => { :greater_than => 0 } </div></div><div data-line='8' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='9' class='code-highlight-row numbered'><div class='code-highlight-line'> def purchase </div></div><div data-line='10' class='code-highlight-row numbered'><div class='code-highlight-line'> self.status = PROCESSING </div></div><div data-line='11' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='12' class='code-highlight-row numbered'><div class='code-highlight-line'> customer = Stripe::Customer.create(description:email, card: stripe_card_token) </div></div><div data-line='13' class='code-highlight-row numbered'><div class='code-highlight-line'> # OPTIONAL: save customer token for further reference </div></div><div data-line='14' class='code-highlight-row numbered'><div class='code-highlight-line'> stripe_customer_token = customer.id </div></div><div data-line='15' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='16' class='code-highlight-row numbered'><div class='code-highlight-line'> # Charge </div></div><div data-line='17' class='code-highlight-row numbered'><div class='code-highlight-line'> charge = Stripe::Charge.create( </div></div><div data-line='18' class='code-highlight-row numbered'><div class='code-highlight-line'> :amount => amount * 100, # $15.00 this time </div></div><div data-line='19' class='code-highlight-row numbered'><div class='code-highlight-line'> :currency => "usd", </div></div><div data-line='20' class='code-highlight-row numbered'><div class='code-highlight-line'> :customer => stripe_customer_token </div></div><div data-line='21' class='code-highlight-row numbered'><div class='code-highlight-line'> ) </div></div><div data-line='22' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='23' class='code-highlight-row numbered'><div class='code-highlight-line'> if charge.paid </div></div><div data-line='24' class='code-highlight-row numbered'><div class='code-highlight-line'> self.transaction_num = charge.id </div></div><div data-line='25' class='code-highlight-row numbered'><div class='code-highlight-line'> self.status = SUCCESS </div></div><div data-line='26' class='code-highlight-row numbered'><div class='code-highlight-line'> else </div></div><div data-line='27' class='code-highlight-row numbered'><div class='code-highlight-line'> self.status = FAILED </div></div><div data-line='28' class='code-highlight-row numbered'><div class='code-highlight-line'> end </div></div><div data-line='29' class='code-highlight-row numbered'><div class='code-highlight-line'> return self </div></div><div data-line='30' class='code-highlight-row numbered'><div class='code-highlight-line'> rescue Exception => e </div></div><div data-line='31' class='code-highlight-row numbered'><div class='code-highlight-line'> errors.add :base, "There was a problem with your credit card." </div></div><div data-line='32' class='code-highlight-row numbered'><div class='code-highlight-line'> self.status = FAILED </div></div><div data-line='33' class='code-highlight-row numbered'><div class='code-highlight-line'> return self </div></div><div data-line='34' class='code-highlight-row numbered'><div class='code-highlight-line'> end </div></div><div data-line='35' class='code-highlight-row numbered'><div class='code-highlight-line'>end</div></div></pre></div>

Payments Controller

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'># app/controllers/payments_controller.rb </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>class PaymentsController < ApplicationController </div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'> def create </div></div><div data-line='5' class='code-highlight-row numbered'><div class='code-highlight-line'> @payment = Payment.new(params[:payment]) </div></div><div data-line='6' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='7' class='code-highlight-row numbered'><div class='code-highlight-line'> if @payment.valid? && @payment.purchase </div></div><div data-line='8' class='code-highlight-row numbered'><div class='code-highlight-line'> flash[:notice] = 'Thanks for Purchase!' </div></div><div data-line='9' class='code-highlight-row numbered'><div class='code-highlight-line'> redirect_to root_url </div></div><div data-line='10' class='code-highlight-row numbered'><div class='code-highlight-line'> else </div></div><div data-line='11' class='code-highlight-row numbered'><div class='code-highlight-line'> render :action => :new </div></div><div data-line='12' class='code-highlight-row numbered'><div class='code-highlight-line'> end </div></div><div data-line='13' class='code-highlight-row numbered'><div class='code-highlight-line'> end </div></div><div data-line='14' class='code-highlight-row numbered'><div class='code-highlight-line'>end</div></div></pre></div>

Written by
Blog Logo

Sandip Ransing

Published

Supported by

Comments

Image

Fun On Rails

Journal of a Web Developer #ruby #rails #JS

Back to Overview