Home arrow Ruby-on-Rails arrow Page 2 - Order and Payment Handling for an Ecommerce Website

Order and Payment Handling for an Ecommerce Website

In this second part of a five-part series on building the checkout and order processing parts of an ecommerce application in Ruby on Rails, you'll learn how to save order information, integrate with payment gateways, and more. This article is excerpted from chapter nine of the book Practical Rails Projects, written by Eldon Alameda (Apress; ISBN: 1590597818).

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
July 09, 2010
  1. · Order and Payment Handling for an Ecommerce Website
  2. · Creating the View
  3. · Saving the Order Information
  4. · Integrating with Payment Gateways

print this article

Order and Payment Handling for an Ecommerce Website - Creating the View
(Page 2 of 4 )

To build the checkout view, open app/views/checkout/index.rhtml and add the following code:

<%= error_messages_for 'order' %>
<p><em>Your order is displayed in the shopping cart to the right.</em></p>
<form method="post" id="checkout" action="<%= url_for :action => :place_order %>">
    <legend>Contact Information</legend>
    <label for="order_email">Email</label><br/>
    <%= text_field :order, :email %>
    <label for="order_phone_number">Phone number</label><br/>
    <%= text_field :order, :phone_number %>
    <%= submit_tag "Place Order" %>

The code contains the checkout form and the contact information section. Notice that we are using thefieldsetandlegendtags, which are good from a usability point of view, to group theemail andphone_numberfields. We are trying hard not to overwhelm the customers with fields that they need to fill in.

Tip  The checkout page is probably your siteís most important page. You definitely donít want a customer to cancel an order on the checkout page. To make the checkout process faster for returning customers, you could ask them to register. This would allow you to save the customerís contact and shipping information, and prepopulate the form on the checkout page.

Next, add the shipping information section (below the</fieldset>tag) with the code shown here:

    <legend>Shipping Address</legend>
    <label for="order_ship_to_first_name">First name</label><br/>
    <%= text_field :order, :ship_to_first_name %>
    <label for="order_ship_to_last_name">Last name</label><br/>
    <%= text_field :order, :ship_to_last_name %>
    <label for="order_ship_to_address">Address</label><br/>
    <%= text_field :order, :ship_to_address %>
    <label for="order_ship_to_city">City</label><br/>
    <%= text_field :order, :ship_to_city %>
    <label for="order_ship_to_postal_code">Postal/Zip code</label><br/>
    <%= text_field :order, :ship_to_postal_code %>
    <label for="order_ship_to_country">Country</label><br/>
    <%= country_select(:order, :ship_to_country, ➥
priority_countries = ['United States']) %>

This section contains six fields to collect the customerís first name, last name, address, city, postal code, and country. Note that thecountryfield displays a list of all countries in the world. The list is generated by the built-in Rails methodcountry_select:

  country_select(:order, :ship_to_country, priority_countries = ['United States'])

This binds thecountryfield to theordermodelísship_to_countryfield, which weíll create later. Thepriority_countriesparameter is an array of strings that specifies which countries should be displayed at the top of the list, as shown in Figure 9-2.

Figure 9-2.  The country selection list

Next, add the billing information section directly after the last</fieldset>tag:

    <legend>Billing Information</legend>
    <label for="order_card_type">Credit card type</label><br/>
    <select name="order[card_type]" id="order_card_type">
<%= options_for_select([ "Visa", "MasterCard", "Discover" ],➥
@order.card_type) %>
    <label for="order_card_expiration_month">Expiration date</label><br/>
    <select name="order[card_expiration_month]">
    <%= options_for_select(%w(1 2 3 4 5 6 7 8 9 10 11 12),➥
@order.card_expiration_month) %>
    <select name="order[card_expiration_year]">
<%= options_for_select(%w(2006 2007 2008 2009 2010 2011),➥
@order.card_expiration_year) %>
      <label for="order_card_number">Card number</label><br/>
      <%= text_field :order, :card_number %>
      <label for="order_card_verification_value"> ➥
      <abbr title="Card Verification Value">CVV</abbr>/ ➥
abbr title="Card Validation Check">CVC</abbr>
      <%= text_field :order, :card_verification_value %>

This section contains fields for the credit card type, expiration date, card number, and card verification code (CVC).

Note  The card verification code is used for fraud prevention. For more information, seehttp://en.wikipedia.org/wiki/Card_Verification_Code.

The options for drop-down lists, such as the one that lists credit cards, are generated with theoptions_for_selecthelper method. This method generates one<option>tag for each item in the specified array. With the second parameter, we specify the item that should be selected from the list.

Everything required for the test to pass is now in place, so execute it by issuing the following command:

$ ruby test/integration/checkout_test.rb

This time, all tests should pass. Before we test that it works with our browser, weíll add a checkout link to the shopping cart that we created in Chapter 5. Openapp/views/cart/_cart.rhtmland add the highlighted code:

  <h3>Your Shopping Cart</h3>
    <%= link_to "Proceed to Checkout", :controller => 'checkout' ➥
unless controller.controller_name == 'checkout' %>

    <% for item in @cart.cart_items %>
    <li id="cart_item_<%= item.book.id %>">
      <%= render :partial => "cart/item", :object => item %>
    <% end %>

Note that we show the Proceed to Checkout link only if the user is not already on the checkout page.

We want to make the checkout page look a bit nicer, so add the code shown in Listing 9-2 to the style sheet (app/public/stylesheets/style.css).

Listing 9-2. Additions to the Style Sheet

#checkout fieldset {
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 1em 1em 1em 1.5em;
  width: 300px;
  margin-bottom: 10px;

#checkout fieldset:hover {
  border: 1px solid #3A789D;

#checkout legend {
  font-weight: bold;

#checkout fieldset input {
  margin: 1px;

#order_card_verification_value {
  width: 50px;

#checkout fieldset input:focus {
  background-color: #cccccc;

Openhttp://localhost:3000/catalogin your browser and add a couple of books to the shopping cart. Then click the Proceed to Checkout link. You should now see the checkout page, as shown in Figure 9-3.

Figure 9-3.  The checkout page

To the right, the shopping cart is displayed, so that the customer can view the contents of it and remove books before placing the order. At the bottom of the page is a Place Order button, which will just show an exception if you click it now. Two things should happen when this button is clicked:

  1. The order information, including the amount and price of ordered books, contact information, and shipping address, should be saved to the database. 
  2. The total price of the order should be charged to the credit card specified in the billing information section.

Note that itís the payment gateway that actually charges the credit card, and that the payment gateway is the only system that needs the credit card information. We donít need to store the credit card information in the database.

With the controller and view in place, we can continue. Letís first implement the part that stores the data in the database. Then weíll tackle the integration with the payment gateway.


You should be very careful when handling credit card information. If your business doesnít depend on it, never store the information on your system. In case you need it, for instance, when implementing a checkout process similar to Amazonís One-Click Shopping (http://cse.stanford.edu/class/cs201/projects-99-00/
software-patents/amazon.html), you should read about the Cardholder Information Security Program (CISP) and Payment Card Industry (PCI) security standards, which mandate that you never under any circumstances store the CVC2/CVV2/CID, PIN, or magnetic stripe data on your system.

For more information about the security standards, see the following:

James Duncan Davidson has also written a good summary of the issues related to handling credit card information. You can read it at http://blog.duncandavidson.com/2006/06/ cautious_advice.html.

blog comments powered by Disqus

- Ruby-on-Rails Faces Second Security Flaw in ...
- Ruby 2.0 Prepped for February 2013 Release
- Why LinkedIn Switched from Ruby on Rails
- Adding Style with Action Pack
- Handling HTML in Templates with Action Pack
- Filters, Controllers and Helpers in Action P...
- Action Pack and Controller Filters
- Action Pack Categories and Events
- Logging Out, Events and Templates with Actio...
- Action Pack Sessions and Architecture
- More on Action Pack Partial Templates
- Action Pack Partial Templates
- Displaying Error Messages with the Action Pa...
- Action Pack Request Parameters
- Creating an Action Pack Registration Form

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials