Adding third-party payment services to your e-commerce site

À la Cart

By James Stanger, PhD

Sean Gadwel, Fotolia

Back in the old days, if you wanted to sell products or services on your website, the traditional route was to create - or at least configure - all the pieces required for a complete in-house e-commerce system. In recent years, the rise of the commercial Internet has created the need for a new generation of companies that offer web-based payment processing services. Several options are available for websites that need a credit card payment system. Although it is certainly still possible - and in many cases, desirable - to install and configure your own e-commerce software, the programming time and management overhead necessary for implementing a home-built shopping cart is overwhelming to many small organizations. Fortunately, third-party payment services are very easy to find.

The rise of the Application Service Provider (ASP) model has made it possible to integrate shopping cart software, credit verification, and payment processing, into one organization. In fact, third-party payment services are one of the best examples of software as a service: The provider offers a valuable service that the client site can link to in a (relatively) painless way.

Of course, you still have some work to do with configuring your site for a payment service. In this article, I will look at how to add e-commerce to your website.

Understanding E-Commerce

Even though the payment service handles many of the e-commerce functions, it's still important to start with an understanding of how the system works. Figure 1 shows what e-commerce transactions have looked like for more than 10 years, and what they will continue to look like for the foreseeable future.

Figure 1: The e-commerce transaction process.

When you use a third-party service, the shopping cart resides on a separate server. If an end user chooses a product, information about that product is sent to the shopping cart site, where it is stored for processing later. Each step that requires an Internet connection is protected with SSL. When a user begins the checkout process, all credit card information and all transactions with the payment gateway also are encrypted. (Although some hyper-sophisticated "brute force" attacks are capable of breaking SSL, these attacks are quite rare.)

The client site must integrate these back-end payment services in a way that is clear and easy for the user to follow. For instance, you'll need to provide a View Cart link on all pages that provides a detailed, coherent list of items in the cart, and make sure the instructions for checkout are easily accessible.

Selecting a Payment Service

A number of companies provide payment-processing services for websites. See the box titled "Payment Services" for some of the more popular options. Your choice will depend on your budget and the details of your configuration.

When you are shopping for a third-party payment service, don't assume all the candidates offer identical features. You'd be surprised how many carts expect users to manually enter things no civilized person would ever want to enter. Most of your customers will expect on-the-fly currency conversion, tax and duty calculation, and automatic shipping-fee updates. Also, you should look for a payment vendor that provides customer support and fraud protection, as well as support for multiple languages and multiple shipping options.

In some cases, you might also want to consider the security policies and history. What auditing procedures does the service have in place? Have they experienced break-ins? What is their policy for reporting breaches?

Reporting features also are important. You quickly will discover that proper reports allow you to conduct some fine-tuning to optimize sales. If your service provider doesn't offer detailed reports, or if reports are only available for a large fee, you may have to do without essential information.

Also, make sure you ask about the service's current customers. A large list of respected companies and organizations is an indication of a truly professional, secure service.

Adding a Shopping Cart

All of the payment services are different; however, most of them have some common features. The provider will give you a link for reaching the shopping cart site. Often, this link is within an XHTML or HTML form, which you can modify for your own web page to customize how the information is presented. For example, you can pre-define price, shipping information, and the type of currency associated with a specific product.

To start, create a button or icon on your site that links to the shopping cart. This icon should come with enough text so that visitors will know it links to the cart. As I will explain later in this article, the text description also is important for providing access to users with disabilities. Listing 1 shows a form that links to PayPal.

01 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
02    <input type="hidden" name="cmd" value="_xclick">
03    <input type="hidden" name="business name" value="downloads@soscompany.com">
04    <input type="hidden" name="product_name" value="Item Name Goes Here">
05    <input type="hidden" name="product_number" value="Item Number Goes Here">
06    <input type="hidden" name="number/amount" value="100.00">
07    <input type="hidden" name="shipping" value="2">
08    <input type="hidden" name="product_notes" value="1">
09    <input type="hidden" name="currency_code" value="USD">
10    <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but23.gif" name="submit" alt="PayPal is our preferred provider">
11    <img alt="Paypal image" src="https://www.paypal.com/en_US/i/scr/pixel.gif"
12    width="1" height="1">
13 </form>

Among other things, the code in Listing 1 inserts the image shown in Figure 2 into your web page.

Figure 2: A simple "Buy Now" icon for Paypal.

Customizing the code in Listing 1 so that default values are provided is possible; for example, if you find that most customers prefer a specific shipping provider, you can change the <input> values accordingly (Listing 2).

01 <form action="https://your_asp_name_here.com" method="post">
02 <input type="hidden" name="op" value="add">
03 <input type="hidden" name="item_desc" value="Scuba regulator">
04 <input type="hidden" name="item_price" value="420.00">
05 <input type="hidden" name="item_id" value="REG-4344">
06 <input type="hidden" name="item_currency" value="UK">
07 <input type="submit" value="Add to Cart">
08 </form>

The shopping cart icon in Listing 2 does more than just insert the Add to Cart icon shown in Figure 3.

Figure 3: A simple e-commerce "Add to Cart" icon.

The code shown in Listing 2 is specifically intended to let an individual end user purchase a scuba diving regulator for £ 420.

The icon also contains a product code name, REG-4344, which allows you to track purchasing information.

Listings 1 and 2 demonstrate the kind of information you can pass from your web page to your third-party payment system. These simple examples are intended for demonstration purposes. A sophisticated e-commerce site might have its own sophisticated database system for tracking inventory, in which case, the form passed to the shopping cart might be dynamically generated rather than hard coded into the vendor site.

Viewing the Cart

If you've spent any time at all buying products online, you've seen icons that allow you to view your shopping cart. Listing 3 is a simple example of an XHTML form that allows a view of the shopping cart. This example places a PayPal View Cart icon into the page (see Figure 4).

Figure 4: Paypal's "View Cart" icon.

01 <form name="_xclick" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
02 <input type="hidden" name="cmd" value="_cart">
03 <input type="hidden" name="business" value="me@mybiz.com">
04 <input type="image" src="https://www.paypal.com/images/view_cart.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
05 <input type="hidden" name="display" value="1">
06 </form>

The code in Listing 3 does more than just insert the image of a View Cart icon onto an XHTML page. The https: link in the first line reveals that the transaction for this cart is protected using SSL, which is standard, even though no financial information is transmitted. Also, notice that the code requires you to send your business name, which is the name of the account you previously will have created with PayPal. Third, the image you link to resides on the PayPal server, along with an alternative text description that makes it possible for screen readers and other tools for people with disabilities to access the View Cart page.

Icon Placement

You are free to position the shopping cart and View Cart icons where you want them on your site. Traditionally, they go on the top, right-hand side of a page, which is where most users expect icons on a page in which only one product is offered. Listing 4 is a simple - and old-fashioned - way to align the Buy Now icon (shown in Figure 2) onto the upper right-hand portion a page.

01 <div align="right">
02 <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
03    <input type="hidden" name="cmd" value="_xclick">
04    <input type="hidden" name="business name" value="downloads@soscompany.com">
05    <input type="hidden" name="product_name" value="Item Name Goes Here">
06    <input type="hidden" name="product_number" value="Item Number Goes Here">
07    <input type="hidden" name="number/amount" value="100.00">
08    <input type="hidden" name="shipping" value="2">
09    <input type="hidden" name="product_notes" value="1">
10    <input type="hidden" name="currency_code" value="USD">
11    <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but23.gif" name="submit" alt="PayPal is our preferred provider">
12    <img alt="Paypal image" src="https://www.paypal.com/en_US/i/scr/pixel.gif"
13    width="1" height="1">
14 </form>
15 </div>
16 <div align="center">
17 <h3>Apeks XTX200 Regulator</h3>
18 </div>
19
20 Considered the ultimate Apeks regulator, the XTX200 has an overbalanced diaphram-based design that automatically adjusts... pressure surrounding it. As a result, you'll breathe easy at any depth.
21
22 The XTX200 also contains the following features:
23 <ul>
24 <li>
25 Environmental seal.
26 </li>
27 <li>
28 Chrome finish.
29 </li>
30 <li>
31 Hi-volume air delivery.
32  </li>
33 <li>
34 Field-changeable air exhaust.
35 </li>
36 <li>
37 Ability to support right-handed or left-handed users.
38 </li>
39 </ul>
40 <div align="center">
41 <img src="SQTAXTX200.jpg" alt="Apeks XTX200 Regulator">
42 </div>

The excerpt in Listing 4 is for the page that appears in Figure 5. Notice that the Buy Now icon is in the upper right-hand portion of the page. You don't have to use the icon supplied by your provider; you also can use an icon stored on your local server. Simply change the code so that it refers to a local image stored on your web server.

Figure 5: A sample page with an e-commerce shopping cart from a third-party site.

Of course, you don't have to place the icon in any one place on a page. Especially on pages where multiple products are offered, you can place icons anywhere you see fit. Figure 6 shows an example of inline placement of shopping cart icons. What makes this particular example interesting is that it also uses words - rather than just the familiar icon - to denote the shopping cart. This reliance on words helps make the site more accessible to users with disabilities. Screen-reading software easily can handle this page.

Figure 6: Inline shopping cart example, complete with text for users with disabilities.

Old-Fashioned Code?

The code used in this article is considered old-fashioned because it relies on the <div> tag instead of Cascading Style Sheets (CSS) code. The current XHTML 1.0 standard recommends CSS. In fact, the XHTML 1.0 Strict standard forbids the use of the <div> tag. However, as efficient as CSS is in design, it is often less effective for instruction and demonstration purposes.

For more information about CSS and design concepts, consider purchasing a solid web-design resource. The Master CIW Designer Self-Study Kit and The Zen of CSS Design are excellent examples of books that can help you design your pages. If you are considering contracting design work out to a web designer/developer, make sure the person you decide to use focuses on standards-based design principles, rather than relying on GUI-based applications such as Amaya, CreativeSuite 3, or Adobe DreamWeaver.

Conclusion

Shopping for a third-party payment service requires solid knowledge of e-commerce principles, but once you know the concepts, you easily can find the right services. Payment services that provide more options and additional flexibility are more expensive, but you might want to consider them if you plan on creating a sophisticated online business.