Creating a Dynamic Storefront Using the PayPal Shopping Cart


I. GOAL
II. OVERVIEW
III. REQUIREMENTS
IV. THE PAYPAL CART
V. THE STRING
 VI. THE DATABASE
VII. THE PRODUCT PAGE
VIII. TIPS AND TRICKS
IX. CONCLUSION


GOAL


To enhance the PayPal Shopping Cart so that it can be used with dynamic server-side technologies such as, ASP, JSP, PHP, CGI, or others, and to give their cart a database back end such as MS Access, MS SQL, MySQL, Oracle, or others. For our example, we will be using Active Server Pages (ASP), MS Access database, and VBScript for our language. For more scripting language and database versions, please visit our site.

OVERVIEW


The PayPal Shopping Cart technology allows developers to easily create E-Commerce for their clients without many of the hassles associated with traditional shopping carts, such as, Credit Card Merchant Accounts, costly setup fees, design inflexibility, and many other headaches a developer can run into when developing a simple web store system for a client. The PayPal system is based on a form driven questionnaire that asks the merchant specific information about a product they would like to sell such as, the product name, the price, product ID and more. After completing the form and submitting it, the PayPal system generates a simple piece of code for developers to insert into their pages and the product is then available to purchase without any further modification.

The existing system is fantastic in its simplicity, but can be somewhat tedious when a store has many pages and product contained within. Basically, you would have to fill out this form and paste the generated code into every page for every product you wanted to display.

A better solution for those developers who have access to a server side scripting technology (i.e.- ASP, JSP, PHP, CF, etc.) would be to create a single page to display a product and have the PayPal code dynamically generated from a database. It may sound difficult, but in reality, it is one of the easiest, timesaving development efforts a person can make when implementing a PayPal Shopping Cart.

This system will allow the creation of an robust, scalable, and highly reliable solution that can be used for almost any size E-Commerce application that a developer would encounter.

REQUIREMENTS


A Server Side Scripting Technology-
Most of the current server side scripting languages will work great, here are a few: ASP (Active Server Pages), JSP(Java Server Pages), CF(Cold Fusion), and more. Many Internet Service and Hosting Providers employ one of these technologies in their services.

A Database to Interface with the Dynamic Pages-
Any common database can be easily used in this application, a few examples are: MS Access, MS SQL, MySQL, Oracle, Sybase, and many others. Just be sure to ask your Internet Hosting provider which database technologies they support.

THE PAYPAL CART


As noted above, the PayPal shopping cart system is based on form driven data input about specific products that generate a piece of code that can be inserted into HTML pages. For each product you would like to sell, you have to log into your PayPal account and fill out the form on their web site and insert the generated code into your HTML pages.

Below is an example of the code generated by the PayPal Shopping Cart:

<a href="#" onclick="window.open('https://www.paypal.com/cart/add=1
&business=email@yoursitename.com
&item_name=Widget&item_number=101&amount=999.99
&image_url=https://www.yoursite.com/logo.gif
&return=http://www.yoursite.com/thankyou.asp
&cancel_return=http://www.yoursite.com/cancel.asp','cartwin',
'width=600,height=400,scrollbars,location,resizable,status');">
<img src="http://images.paypal.com/images/x-click-but22.gif" border="0"></a>

It may look a little complex, but below we will dissect and interpret what each part of the string means.

THE STRING


<a href="#" onclick="window.open('https://www.paypal.com/cart/add=1
&business=email@yoursitename.com
&item_name=Widget&item_number=101&amount=999.99
&image_url=https://www.yoursite.com/logo.gif
&return=http://www.yoursite.com/thankyou.asp
&cancel_return=http://www.yoursite.com/cancel.asp','cartwin',
'width=600,height=400,scrollbars,location,resizable,status');">
<img src="http://images.paypal.com/images/x-click-but22.gif" border="0"></a>

The first tag, is simply an 'href' which is used to create a hyperlink. In this case it uses the 'Add to Cart' image. The <img> tag specifies the location of the 'Add to Cart' button that is displayed in the page. This can actually be changed to anything you like. This is useful if you do not like the look of the default PayPal buttons and would like to use your own. This can also be a relative link to the location of the product page on your server is the files is located in the server as well.

The "#" value is a placeholder for a text-based link. This can actually be replaced with text, if you prefer to add your item with a text Link, rather than the 'Add to Cart' image. It would simply be <a href= "Add to Cart Text"... However, you would need to remove the <img> tag that references the 'Add to Cart' image.

Window Open
<a href="#" onclick="window.open('https://www.paypal.com/cart/add=1
&business=email@yoursitename.com
&item_name=Widget&item_number=101&amount=999.99
&image_url=https://www.yoursite.com/logo.gif
&return=http://www.yoursite.com/thankyou.asp
&cancel_return=http://www.yoursite.com/cancel.asp' ,'cartwin',
'width=600,height=400,scrollbars,location,resizable,status');">
<img src="http://images.paypal.com/images/x-click-but22.gif" border="0"></a>

This tag tells the browser to open a new window and defines that window's properties. The window.open on click works with browsers 3.0 and above for images. However, if you are using the text link modification noted above instead of the 'Add to Cart' image, then it will only work for 5.0 browsers and some IE 4.0 browsers.

'cartwin' is the new window's name. If you use any other type of javascript in your pages to control the new window (such as positioning), then define the command to interact with the name 'cartwin' or modify this value to anything else you like. Width/height define the window's size. Should be kept as is in order to see all of the cart. 'scrollbars' are needed in case your customer's shopping becomes so long that it does not fit into the 400 pixel height.

'Location' is a variable that displays the URL of your cart in the new window by giving the window an address bar. I personally prefer to remove this, as customers can change string values and product unwanted effects. I have not ran into a situation where the address or location value is needed. I suggest removing it.

' Resizeable' is not needed, but many site visitors like to have that flexibility. Leave 'status' in tact as well, as it has no effect on display or functionality.

Customer information
<a href="#" onclick="window.open('https://www.paypal.com/cart/add=1
&business=email@yoursitename.com
&item_name=Widget&item_number=101&amount=999.99
&image_url=https://www.yoursite.com/logo.gif
&return=http://www.yoursite.com/thankyou.asp
&cancel_return=http://www.yoursite.com/cancel.asp','cartwin',
'width=600,height=400,scrollbars,location,resizable,status');">
<img src="http://images.paypal.com/images/x-click-but22.gif" border="0"></a>

This section of code actually calls the location of the PayPal Shopping cart on their servers. This is where you must enter your PayPal username, directly after the 'business=' section.. It is simply your E-Mail address that you use to log into your account. Note: the 'add=1' snippet of code can be change to another value to add more items at once, or to have it populated from a form element, but that is a little tricky and goes beyond the scope of this article.

Item Information
<a href="#" onclick="window.open('https://www.paypal.com/cart/add=1
&business=email@yoursitename.com
& item_name=Widget&item_number=101&amount=999.99
&image_url=https://www.yoursite.com/logo.gif
&return=http://www.yoursite.com/thankyou.asp
&cancel_return=http://www.yoursite.com/cancel.asp','cartwin',
'width=600,height=400,scrollbars,location,resizable,status');">
<img src="http://images.paypal.com/images/x-click-but22.gif" border="0"></a>

This section defines the details about the product that you are adding to the shopping cart. 'Item_name' is simply the product's name. 'Item_number' is the unique number the vendor uses to track its specific item, can be anything. 'Amount' is how much you want your customers to pay for an item.

'Image_url' this optional section of code is used to display a company's logo within the PayPal Shopping Cart window. You can use this to point to a location of a logo on a remote server, but it must have the full URL included. Note: the 'https' at the beginning of this section indicates that the image must be on a secure server, or it will not show up. If you specify a location with a regular 'http' then, the customer will be prompted by the browser to display secure and non-secure items and ask if they want to continue. A work around would be to embed the cart page in a frameset, but that again is tricky and goes beyond the scope of this article.

'Return_url' is where the visitor will be brought after they have successfully completed the payment process. It must use the full URL even if it resides on your server. 'Cancel_url' serves the same purpose, but is used when a customer cancels their purchase during the payment process.

THE DATABASE


The database is the back-end engine for our simple E-Commerce system. Any web capable database will work and its configuration can be as simple or as complex as you like. In this case we will keep it simple:

Table Name: tblProducts

Field NameDefinitionDescription
IDAutonumberA key column for the database used as a placeholder.
Item_NameTextUsed for the name of the products.
Item_DescriptionMemo, Long TextUsed to display detailed information for a product. Can be used as a keyword search feature.
Item_IDNumberThis is the item number used for the vendor to track a specific item.
Item_PriceDecimalThe cost field of the item.
Page_SuccessTextHolds the URL of the page customers are taken to after a successful payment.
Page_CancelTextHolds the URL of the page a customer is taken to after a customer cancels a payment.
Logo_LocationTextA field for the URL of the location of the logo. Not required.
Item_ImageTextUsed as a location to specify where an item's image is located. Optional.


THE PRODUCT PAGE


Now we will construct a page that will display our image. This is a detail page which can be linked from a search page that can be created to search an item's description. In our case, we will use the Product's ID field value that is automatically created in our database to ensure we get a unique record.

In our page, our recordset, called 'rsProduct', will be created with a simple select statement:
SELECT *
FROM tblProduct
WHERE ID = vID

vID is defined as Request("ID") or Request.Querystring("ID")

Now, create a page to display to the product and insert any dynamic field elements onto the page like the product image, the price, and any other information to be displayed about an item.

After the page is designed and created, we simply add our original PayPal link into the HTML, replacing the previously static variable with dynamic ones:

<a href="#" onclick="window.open('https://www.paypal.com/cart/add=1
&business=email@yoursitename.com
&item_name=<%=(rsProducts.Fields.Item("Item_Name").Value)%>
&item_number=<%=(rsProducts.Fields.Item("Item_Number").Value)%>
&amount=<%=(rsProducts.Fields.Item("Item_Price").Value)%>
&image_url=<%=(rsProducts.Fields.Item("Logo_Location").Value)%>
&return=<%=(rsProducts.Fields.Item("Page_Success").Value)%>
&cancel_return=<%=(rsProducts.Fields.Item("Page_Cancel").Value)%>','cartwin',
'width=600,height=400,scrollbars,location,resizable,status');">
<img src="http://images.paypal.com/images/x-click-but22.gif" border="0"></a>

TIPS AND TRICKS


- You should keep an eye on how PayPal formats their string that calls the shopping cart. It has already changed since I began using it. Previously, it generated a 'shipping' section that allowed you to tag specific shipping costs to items. Now it is done in the customer preferences section of their site. Do not worry about the changes in the string, as they will need to continue supporting any older methods as there are thousands of pages that use it.

- Adding a logo to your cart is a very nice touch. If you do not have one, the cart displays a large 'PayPal' logo. If you use your own, then it simply says 'Powered by PayPal' to the right of your logo in small text. You really should have the logo on a secure server calling it with 'https' or your customers will get a security prompt that they must click. There is a workaround though. Create a frameset for your cart. Define the frames as 0,* in size and populate the * frame with the url string as the source. May need some tweaking though.

- Having a 'keywords' field in the database is a good idea. On your main store page you can use a text search box to select products with specific keywords and on their descriptions. This is ideal for larger sites, where the item description does not cover all of the relative terms.

- Building an online administrative section is also a good idea to handle all of the product additions, edits, and deletes. While doing it in the database is all right for most cases, there are some where people would rather use a web form driven input method.

CONCLUSION


The sky is really the limit with the PayPal cart. All of the energies that were previously wasted on securing CCMA's or coordinating setup costs with clients are now gone with this system. Using the methods above, a developer can modify the PayPal cart to work with almost any dynamic server technology, including CGI. It can even be fitted to work with many of the existing carts that are out there, some even free.

If you have any questions or comments about this article, feel free to contact us at, paypal@superfreaker.com. You can also visit the PayPal section of our site which has pre-made storefronts using the techniques above in a variety of server languages and databases at www.superfreaker.com/paypal.


DISCLAIMER: The following content is provided by each article's individual author and not by PayPal, Inc. or any of its affiliates or subsidiaries. The articles may contain errors, and PayPal does not endorse or provide support for their content. PayPal advises that you contact the authors of the articles for questions, information about technical support, warranties and/or licenses, if any are necessary. If you choose rely on the content in any of these articles, you do so at your own risk. PayPal will take no responsibility for any errors, harm or other damage that may occur as a result of your reliance on this content, including any incidental, special, indirect or consequential damages. PayPal EXPRESSLY DISCLAIMS ALL WARRANTIES regarding this content and the use of this content.