Setting Up E-commerce with FoxyCart
Components of an e-commerce site
An e-commerce web site involves several coordinated functions: choosing products, ordering products, and processing payment. Webvanta provides an excellent solution for creating the product database and presenting them on the site. Unlike most other approaches, you can easily add whatever fields you need for your products, and you can display them however you want.
Webvanta by itself does not include a shopping cart or payment processing, but you can easily add these capabilities by using a hosted shopping cart, such as FoxyCart. With the Webvanta/FoxyCart system, the e-commerce functions are divided as follows:
- Webvanta provides the product database and all the store pages, up to the point when a visitor clicks an "add to cart" button.
- FoxyCart provides the shopping cart and checkout process, including shipping options and sales tax calculations.
- FoxyCart processes transactions through a gateway (such as Authorize.net) to your credit card merchant account.
By partnering with FoxyCart, we are able to focus on providing a great system for the product database and site creation, while they deliver the system to handle credit card security, shipping options, taxes, recurring billing, electronic product delivery, and so forth.
Because you are dealing with three systems, and because e-commerce inherently involves a lot of choices (on the part of both the site designer and the customer), building an e-commerce site is more complex that a typical small web site. With Webvanta and FoxyCart, the difficult parts are taken care of for you, and your task is mostly a matter of configuring it to meet your needs.
In this article, we summarize all the steps required to set up e-commerce using Webvanta and FoxyCart, and provide pointers to other articles for more detail in each area. (Webvanta professional services customers don't have to worry about any of these details, since our team takes care of it.)
For more details about FoxyCart, refer to their support wiki and support forum. The wiki has all the general information, and the forum has lots of existing threads (which you can search) about various ways to customize the system. FoxyCart staff and other users are typically very responsive to questions or requests for help posted to the forum.
Setting up your FoxyCart account
You need both a Webvanta account and a FoxyCart account. If you haven't already set up your Webvanta site, you can sign up here.
Then visit FoxyCart and sign up for your free trial account there. Your FoxyCart account is free until you set up a payment gateway, so like Webvanta, it doesn't cost you anything during development.
Choosing your secure domain
When you set up your FoxyCart account, you specify the domain name for your store's checkout and receipt pages, which are delivered by FoxyCart's servers. These are secure pages, and they need to be on a different domain or subdomain than your Webvanta site.
You have two options:
- Use a subdomain of foxycart.com, such as mysite.foxycart.com.
- Use a subdomain of your own domain, such as store.mysite.com.
If you choose the first option, you don't need to purchase an SSL certificate; your store uses FoxyCart's certificate. The only drawbacks of this are that (1) if a customer looks at the URL of the checkout or receipt pages, they will see the foxycart.com domain, and (2) if a customer examines the SSL certificate, it will not mention your site name; it will be FoxyCart's certificate.
If you want to use your own domain name, and have the SSL certificate identify your site, then you need to purchase your own SSL certificate. You need to do this through FoxyCart, and their fee is $90 per year. (Click here for FoxyCart's custom domain order form.)
Your payment gateway
FoxyCart takes care of assembling the order, adding shipping and taxes, and collecting the payment information. When the customer clicks the "Complete Purchase" button, FoxyCart sends the transaction information to the credit card gateway, which either approves or rejects it. If approved, it is processed by your merchant account provider.
Before you can process payments, you need to convert your FoxyCart account to a paid account, and then enter the gateway credentials.
The simplest gateway to use is PayPal's Website Payments Standard. All you need is a PayPal account, approval is instant, and there's no monthly fee. Your customers don't need a PayPal account and can pay with a credit card. But to complete their payment, customers are sent to the PayPal site, so you lose the ability to control the appearance of the payment page.
Alternatively, you can use a traditional credit card merchant account with an online gateway. (Paypal's Website Payments Pro is another option; it works like a traditional gateway, so customers don't see a PayPal page, but it has a $30 monthly fee and an application and approval process like any other gateway.)
If you have, or can get, an existing credit card merchant account with your local bank, they may be able to provide you with a gateway account so you can process charges online. The most widely used gateway is authorize.net, which FoxyCart supports.
You can also sign up with a company such as CDG Commerce, which provides both a merchant account and a gateway.
FoxyCart's support pages include general information about gateways and merchant accounts, a list of gateways they support, and additional information about using CDG Commerce's Quantum Gateway.
Usually there is a monthly fee for the gateway ($10/month is common), and the merchant account charges a percentage of each transaction, often between 1.5% and 3%. The fee depends on your bank, how much volume you do, how much risk the bank thinks you have (for fraud or chargebacks), which cards you accept, and whether or not you require full address verification for every order.
Getting the payment gateway and merchant account approved can take weeks, so start this process early. The provider typically will want to see your site before approving the account, so the steps are:
- Build the basic site (which does not need to include the full shopping cart setup).
- Apply for the gateway and merchant account.
- When approved, set up FoxyCart to work with the gateway.
You will probably need to have terms of use, a privacy policy, and a return policy on your site before you can get a merchant account approved.
Setting up the product database
Webvanta's easily customized database system enables you to quickly create a product database with whatever information you need to describe your particular products. Your aren't tied to a standard set of fields or visual design, and you have the full power of the Webvanta system available to you on all your product pages.
To manage your products in the database, create a custom item type ( go to Database > Item Types and click Add Custom Item Type) called "Product". You'll probably want to disable a number of the standard fields, such as author and URL. Add custom fields for price and any other fields you need to describe each product.
You can use Webvanta's standard category system to organize your products. Create a top-level category "Products", and then a sub-category for each type of product.
Displaying products
The "category" page provides a list of all the products in a category. On this page, you may want to provide complete product descriptions and an "add to cart" button, or you can make it an index page that just lists the products and links to an item detail page for each.
Even if you're providing all of the product information on the category page, it is helpful to also have an item detail page. This helps greatly with SEO because it gives your site many more pages, each one totally focused on a single product.
Including FoxyCart's code
For all pages that include Add to Cart buttons, you must include FoxyCart's JavaScript code and CSS files. Click the Sample Code link in the header of your FoxyCart control panel to get the code to add to your site. It will be something like this:
<script src="https://mysite.foxycart.com/files/foxycart_includes.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="https://mysite.foxycart.com/files/foxybox.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="https://mysite.foxycart.com/themes/standard/theme.foxybox.css" type="text/css" media="screen" charset="utf-8" />Note that the URLs are specific to your site, so you can't use the code above directly; substitute your FoxyCart subdomain for "mysite", or get the code from your FoxyCart control panel.
The FoxyCart JavaScript file, foxycart_includes.js, includes the jQuery library. If you are using the standard Webvanta site, jQuery is already loaded for your site (via the JavaScript snippet, which is invoked by the page templates). You can therefore improve page-load performance by substituting a customized foxycart_includes.js that does not re-load jQuery. (See this article for details.)
Adding products to the cart
The handoff from Webvanta to FoxyCart happens when a customer clicks an Add to Cart button (or a View Cart link). Until this event occurs, FoxyCart knows nothing about the specifics of your products; the product details are all stored in the Webvanta database.
The Add to Cart button is the submit button for a form, and the fields of this form are how FoxyCart gets all the information about what the customer is ordering. Some of these are hidden fields, so you can pass information that doesn't have to be displayed. Other fields, such as the quantity, may be form fields of whatever type you choose so the customer can make selections, such as quantity or color. It's just like any form, except that it is delivered by the Webvanta site, but it submits to FoxyCart.
Here's a simple example:
<form action="https://YOURDOMAIN.foxycart.com/cart" class="foxycart" method="post">
<input type="hidden" name="name" value="Name of my product" />
<input type="hidden" name="price" value="5.00" />
<input type="submit" value="Add to Cart" />
</form>Assuming you have a custom item type called "Product" and it has fields "name" and "price", the code on an item page would be something like this:
<w:kb:item>
<h1><w:name /></h1>
<w:body /> <!-- product description -->
<form action="https://YOURDOMAIN.foxycart.com/cart" class="foxycart" method="post">
<input type="hidden" name="name" value="<w:name />" />
<input type="hidden" name="price" value="<w:price />" />
<input type="submit" value="Buy It Now!" />
</form>
</w:kb:item>You can find details on the various fields you can use in this article on the FoxyCart support site.
How the cart works
When a customer adds an item to the cart, FoxyCart displays a window on top of your site that shows the shopping cart. From this window, they either proceed to checkout or continue shopping.
You can customize the appearance of the shopping cart, but since it is a pop-up window rather than a full page, it doesn't need any site navigation, and it is often acceptable to use the stock design.
You can also choose to bypass the cart entirely if your customers are buying single items (or making a donation or other payment) and you want to send them directly to checkout. Just add this field to the form for the Buy button:
<input type="hidden" name="cart" value="checkout" />Checking out
When the customer clicks Checkout in the cart, the pop-up cart window closes, and the browser loads the checkout page, which is delivered entirely by FoxyCart. They have made the investment to provide PCI-compliant, secure systems to handle the credit card data; Webvanta never sees this information.
With the default FoxyCart setup, the checkout page will not have any of your site's navigation or other design elements. If you want to minimize the setup work, and this design is acceptable, you can simply use one of FoxyCart's two standard checkout pages, one that uses all text and another that uses images for the headings.
In most cases, though, you'll want to customize this to look like a part of your site. We go through this step-by-step in another article, Customizing Your FoxyCart Checkout and Receipt Pages. It's easy to have FoxyCart include your site's template, including navigation; it just takes a little setup.
The way the checkout page is generated is a bit more complicated that creating a normal Webvanta page because the checkout page needs to be delivered entirely by FoxyCart. It is a secure page, and some browsers will display security warnings if any part of the page comes from a separate server. FoxyCart allows you to use a template from your Webvanta site while eliminating any security warnings by caching on the FoxyCart server the HTML, CSS, and images for your checkout page.
To customize the checkout page, you create a special page in Webvanta to serve as the "shell" for the checkout page, and then tell FoxyCart to cache that page. On this page, you place a simple tag (^^checkout^^) at the place where FoxyCart should insert the checkout form, and another tag (^^cart^^) where you want to display the cart contents.
For details, in addition to the Webvanta support article cited above, you may also want to refer to FoxyCart's template documentation.
Putting a cart link in the header
One last detail: you probably want to include a link to the shopping cart in the visible header of your site's pages, and it's nice to be able to show there how many items are in the cart.
Here's a code example:
<div id="fc_minicart">
<a href="https://YOURSUBDOMAIN.foxycart.com/cart?cart=view" class="foxycart">
Your cart: <br />
<span id="fc_quantity">0</span> items.<br />
$<span id="fc_total_price">0.00</span>
</a>
</div>FoxyCart's JavaScript will hide this div entirely if there are no items in the cart, and if there are items in the cart, it will modify the contents of the two span elements to display the appropriate information. (If you want to show the cart link even if there are no items in it, just remove the fc_minicart ID from the wrapper div.)
Setting up FoxyCart options
There are lots of options to configure in your FoxyCart control panel. In particular, you'll need to set up your shipping and tax options. You can also:
- Create categories of products that get special treatment
- Customize the emails that customers and the site owner receive
- Set up subscription products
- Set up downloadable products
- Create discount coupons
- Modify the text used in the cart, checkout, and receipt pages
You should review each page that is linked from the header in your FoxyCart control panel and review the settings that are available.
Setting up gateway options
There are also options that you'll need to set in your payment gateway's control panel. Since these options vary from one gateway to another, we can't provide specifics, by typically you can set options including:
- Whether test credit card numbers will be accepted
- Whether the entire gateway is in test mode
- Whether address verification is required before processing charges
- Whether to send an email to the customer and/or the site admin when a payment is processed
Operating your store
Once your store is operating, you'll get an email from FoxyCart and from the payment gateway (depending on your configuration settings) each time an order is placed. You can also view transactions that have been processed in either the FoxyCart control panel or the payment gateway control panel.
Note that FoxyCart does not track inventory or the shipping status of your items, so you'll need to manage that yourself.
