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).
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 %>"> <fieldset> <legend>Contact Information</legend> <p> <label for="order_email">Email</label><br/> <%= text_field :order, :email %> </p> <p> <label for="order_phone_number">Phone number</label><br/> <%= text_field :order, :phone_number %> </p> </fieldset> <p> <%= submit_tag "Place Order" %> </p> </form>
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:
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:
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:
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:
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:
The order information, including the amount and price of ordered books, contact information, and shipping address, should be saved to the database.
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.
STORING CREDIT CARD INFORMATION
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: