Method 2 Upload with UPS/USPS

home page
JavaScript
std.css

* 24 May, 2004. Modernized user options.
* 8 Jan, 2004 - added tax option, and user selected display options.

If you have a site where all of the items are similar in that the user interaction with each item is the same (select some options for an item, and input quantity), then you may have a local pseudo-cart where the user makes his selections locally (from a single page) and the transfer to the PayPal cart does not happen until all item selections are made. The pseudo-cart is the FORM (in this example) where the user can see everything he has ordered - options, quantities and total price.

What this does is to defer the delay of PayPal cart processing until the end when the user submits the entire cart for payment. There is no delay, and the user can select options and quantities, and "add" them to the internal pseudo-cart as fast as he can type!

Note that everything is keyed on the "id" value. Its form is idXXX, where XXX is any valid JS string. What happens is that those XXX characters are stripped off the "id" value and used to address (within the FORM) the other fields associated with this item.

So, if we have "id301x" then we must have a corresponding "qty301x" and "opn301x" (where n is a number from 1 to 5) within the form to be able to assemble the data for sending to PayPal. As you can see, we can have base data (quantity, description and price), and add up to five options in this manner where "301x" is a unique value that follows any identifier you may want to include. Things such as color, fabric, etc. The only requirement is that all items have the same unique, trailing identifier.

The only time you need to touch the JS is to set your business ID, the currency code and country designator. Once that is done, it is what you do in your HTML that makes the difference. The JS is automatic and works from your use of idXXX, qtyXXX and op1XXX thru op5XXX, and the arguments you include in your GetOrder call.

This example concatenates everything into the description field, but you can modify it to put data into other fields, or to increase the number of options.

Because this is an upload, changes cannot be made within the PayPal cart, so you could include things like discounts and shipping options because you know what the absolute final version of the order will be. And you have (as in previous examples) the ability to modify base prices by either a fixed amount ("Large +1.00"), or a percentage ("Large %10") in the option fields.

An interesting feature of this cart is that until you clear it you can continue to add items to the PayPal cart. Whatever shows in the page total field is what gets sent to PayPal. So, if a person orders some stuff, then decides he wants some more, all he has to do is to enter the additional item into the local pseudo-cart, and it will be added to the cart as displayed by PayPal.


Pseudo-cart for single-page sites. Weight may be used to calculate shipping.
ID Description Options each Quantity Tot Ozs Tozs
10 Test Item 1 - good stuff here. 8.99   add 3.1
15 Test Item 2 - This stuff ain´t so hot. 3.99   add 15.5
20 Test Item 3. I don´t know what you call this. 5.50   add 18.0
30x2 Test Item 4 - junk. 10.00   add 7.0
Subtotal = Lbs =
        Total =

Added a user option selection feature. Include these items in a set-list at the start of your page...

  <script type = "text/javascript">
  //  site set-list - things to set as options
    root.hamt = 25;    // amount, below which, handling charge applies
    root.hand = 2.50;  // handling charge for orders less than hamt
    root.shp  = on;    // shipping selection line
    root.tax  = on;    // tax selection line
  // place for user-specific options
    root.xx_can  = "";   // place for PayPal cancel return path
    root.xx_cur  = "USD";// enter default currency code (or null)
    root.xx_id   = "jas22924@aol.com";  // PayPal ID
    root.xx_img  = "";  // place for image url
    root.xx_lc   = "US"; // enter default country code (or null)
    root.xx_ret  = "";   // place for PayPal return path
    root.xx_sty  = "";   // place for PayPal page style
    root.xx_xtra = "&rm=0"; // place for other PayPal commands
    CalcRoot ();       // calculate values. (required entry)
  </script>

Installation is similar to other installations I describe. The JavaScript (JS) must be included within your site, on the page where you are going to use this technique. I placed my example within a table, but that is not necessary - you just need to place these things within a FORM somewhere (so we can easily address them).

The key is to study this HTML (right-click, and <view source> to see). Do it the way I did it and it will work for you.

Image: XHTML 1.1 certified! Image: CSS2 certified! Image: Multi-user accessibility!

Contact me concerning this article at paypalhelper@aol.com. Mention "method 2 UPS" in your note.

Individual help starting at $25.00 for simple JS solutions.


Some links to help you with your shipping tables and charges...

* How to build zone/rate tables in JavaScript.
* USPS Zones, and Priority rates.
* UPS Zones.
* FedEx Zones.

I was a little surprised to discover that USPS was cheaper than UPS below the 3-9 pound area, depending on distance and UPS fuel charges. Perhaps the best approach is to calculate several different shipping options for the user, display them and let him take his pick.

The total surprise to me was that you could calculate zone tables for any shipper there is (they all supply this information), and support national or international - depends on how much time you want to spend to set up your tables. It can all be done client-side without the need for a server, or e-commerce solution. Remarkable! But, ya gots to know some JavaScript to do it, huh?

NOTE - you must really read these charts! In the case of UPS there are some zones (Hawaii, Alaska, and the Protectorates) that require special attention. The best solution is, probably, to create special zones for their ZIPs (9, 10, 11, etc) and enter them into your tables (both zone and charge.) Any other solution simply misleads people in these ZIP code areas. USPS is subsidized, and it may be cheaper to ship to those areas that way.