e-CommerceAdvi$er.com
For Small Businesses and Home Based Businesses





10 Minute E-Commerce Shopping Cart Using PayPal

by Maggi Hall, E-Commerce Adviser staff (rev021508)

This article walks you through the steps to create an e-commerce web page using PayPal's Website Payments Standard shopping cart. The final web page, 10-Minute Shopping Cart, is a fully functional shopping cart, except for the Merchant Account so you can't accidently purchase any of the demo products.

Prerequisites:

You need to be able to cut-and_paste text, as well as edit specific parts of the text. The text you will see is HTML, a web page formating language.

You will also need a PayPal Merchant Account. If you don't have a PayPal Merchant Account, see PayPal Merchant Accounts

The demo assumes you have a basic web page design that the shopping cart details will be used. If you don't have a web page design, that's OK. You can just start with a blank page.

Web Page Editor (WPE)

. The tool used in the demo to build the web page is the "Web Page Editor" produced by Web Design Options using customized Open Source Software.

However, you can use any editor or tool you have or is available on your website hosting service.

Shopping Cart Button

. The shopping cart used to build the 10-Minute e-commerce web page is PayPal's Website Payment Standard.

Editing Steps

  1. Open WPE — To open the editor, click WPE.
  2. Create Table —
    • Select "Product Details" text so that it is highlighted
    • Add a "Table" by clicking on "Insert⁄Edit Table" button (2nd row, sixth from left)
    • In the Rows field enter — 3
    • In the Columns field enter — 3
    • In the Border field enter — 0
    • In the Alignment dropdown menu, select — Center
    • In the Width field enter — 750
  3. Add Product Pictures —
    • Product #1 —
    • Click in the middle left cell of the table you just created
    • Add product picture by clicking on "Insert⁄Edit Image" button (2nd row under the binoculars)
    • In the URL field enter —
      http://www.e-commerceadviser.com/images/prod1.jpg
    • In the Alternative text field enter — Product #1
    • In the Width field enter — 150
    • In the Border field enter — 0
    • Click OK
    • Select Product #1 image and click on "Center Justify" button
    • Product #2 —
    • Click in the middle center cell of the table you just created
    • Add product picture by clicking on "Insert⁄Edit Image" button (2nd row under the binoculars)
    • In the URL field enter —
      http://www.e-commerceadviser.com/images/prod2.jpg
    • In the Alternative text field enter — Product #2
    • In the Width field enter — 200
    • In the Border field enter — 0
    • Click OK
    • Select Product #2 image and click on "Center Justify" button
    • Product #3 —
    • Click in the middle right cell of the table you just created
    • Add product picture by clicking on "Insert⁄Edit Image" button (2nd row under the binoculars)
    • In the URL field enter —
      http://www.e-commerceadviser.com/images/prod3.jpg
    • In the Alternative text field enter — Product #3
    • In the Width field enter — 200
    • In the Border field enter — 0
    • Click OK
    • Select Product #3 image and click on "Center Justify" button
  4. Add Product Labels —
    • Product #1 —
    • Click in the bottom left cell of the table
    • Type "Product #1 -- $19.95", press "Enter" and then highlight the text
    • In the Font Dropdown list, select Tahoma
    • In the Size dropdown list, select Medium
    • Click on "Center Justify" button
    • Repeat previous steps for Products #2 -- $29.95 and Product #3 -- $39.95
  5. Add Shopping Cart Buttons —
    • Copy PayPal Button HTML
      1. To open PayPal HTML, click Shopping Cart Buttons
      2. Select and copy all of the HTML in the box under "Add to Cart HTML Code"
    • Click on the "Source" button
    • Find the text — " face="Tahoma">Product #1", click at the end of the line and press "Enter"
    • Paste the PayPal Button HTML copied above
    • Edit the field — value="HTML book" to value="Product #1"
    • Edit the field — value="24.99" to value="$19.95"
    • Edit the field — value="me@mybusiness.com" to
      value="[your PayPal Merchants Account Email Address]"
  6. Add View Cart Button —
    • Copy PayPal View Cart Button HTML
      1. To open PayPal HTML, click Shopping Cart Buttons
      2. Select and copy all of the HTML in the box under "View Cart HTML Code"
    • Click on the "Source" button
    • Find HTML text —
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    • Select the bottom "&nbsp;" and paste the "View Cart" HTML copied above
    • Edit the field — value="me@mybusiness.com" to
      value="[your PayPal Merchants Account Email Address]"
    • Click on the "Source" button to "unselect" the Source
    • Click on the "Submit" button to view web page

Test Web Page

. Test your page by clicking on the "Add Cart" buttons and the "View Cart" button.

Save Web Page

. If you want to save your new web page, click on "Source," copy all of the lines and paste everything to a text editor. When you close the demo WPE, you will loose all of the HTML.

Web Page Code

. HTML CODE

Related Articles