How to add PayPal's shopping cart functionality to your website.

The donation element provides an easy way to take payments on your website through PayPal. This works great for donations and simple purchases, but it is not a true shopping cart and therefore has some limitations.

If you require shopping cart functionality, PayPal also makes that available to you at no additional cost. However, integrating that functionality into our system requires a few special steps. This article provides a step-by-step procedure for adding PayPal's "add to cart" and "view cart" buttons to your website.

Use PayPal to create your buttons.

1. Login to your PayPal account.
2. Select "Merchant Services" from the top menu.
3. Look for the list of key features on the right. Select "PayPal Shopping Cart" from the list (see image).




4. The resulting screen will walk you through the process of creating an "add to cart" button. Enter the parameters in the fields provided. Click "add more options" if you need to specify things like tax, shipping, or other parameters. When finished, click "Create Button Now."
5. The resulting page will provide you with a code block for your "add to cart" button and a separate code block for a "view cart" button.
6. Open a text-only editor such as "notepad" and create a new document.
7. Copy and paste the entire "add to cart" button code into your text editor document.
8. Save your text document according to the following parameters:
   • Do not include any spaces in the filename.
   • Give your file a .html extension.
   • Example filenames include: "myButton.html"; "product1_add_to_cart.html";
   • Name it something recognizable and store it somewhere so you can find it later.
9. Repeat the above steps for each product you wish to sell on your website.
10. Copy and paste the "view cart" button code into a text document and save it in the same manner as above. You only need to copy the view cart button code once as it will be the same no matter how many products you create.

When you have completed these steps, you will have created a series of .html files -- one for each product you are selling and one for your view cart button. Each file will have a unique name with no spaces in it and will contain a single code block that was generated by PayPal. You are now ready to integrate the buttons into your website.

Integrate your buttons into your website.

1. Login to your website.
   
2. Navigate to the page where you wish to place the buttons.
3. Add a text element or choose an existing text element.
   
4. Click "settings" on the text element to open the text element editor.
   
5. Locate the document manager icon (see image) and click it to open the document manager.
   
6. Click on "Upload Document."
7. Click "Browse" and navigate to the .html documents you created previously.
8. Upload each document one at a time.
9. Before leaving the "Upload Document" screen, note the path that is listed in the "Directory" box. Write this down or copy/paste it somewhere for future reference.
10. When finished uploading all documents, close the document manager window.
11. Now back on the text element editor, find and click the HTML view icon (see image). This will take you into code view.
    
12. Insert the following code to your buttons to the page (see notes on this code below):
    

    <iframe src="[your_directory_path]/[your_document_name].html" frameBorder=0 width="130" height="60"></iframe>

13. Repeat the insertion of code for each button you need to add, including the "view cart" button.
14. Switch back to design view using the pencil icon to the left of the HTML icon to check your work.

Notes on the iFrame code

• The src attribute should contain the directory path that you copied from the document manager, followed by the exact filename that you gave to your file.
• If you see scrollbars around your iframe, you may need to increase the width and/or height of your iframe in the code to make it big enough to eliminate scrollbars. The dimensions included in the example above are typically correct when using PayPal's default "add to cart" button.
• When using PayPal's default "view cart" button, try increasing the dimensions to width="150" and height="70".