Multiple PayPal shipping options.

*June, 2, 2005 - expanded data entry abilities in the select.

I have seen many requests for selection of different shipping options. The common reply I see is to put them into a select where the value field has the charge you want...

    <select name="shipping">
      <option value="1.00">Normal shipping $1.00</option>
      <option value="2.00">Two-day $2.00</option>
      <option value="3.00">Overnight $3.00</option>
    </select>

The problem with this is that in the final order it is not always obvious just which sort of shipping is desired. With just a few lines of JavaScript we can end the confusion forever. In this example I am going to append the shipping selection text to the first options field, and plug the handling, handling_cart, shipping and shipping2 variables from one dropdown.

NOTE Any general cart-wide solution requires your own shopping cart because the customer can change the order once inside the PayPal cart without you being aware of it which makes all your calculations invalid.

Here is a sample problem - say a site sells CDs, and they want shipping to be 0.50 for the first CD, but only 0.20 for every CD after that (mix-and-match, quantity-based shipping), no matter which CDs are chosen. This can be handled by putting the following code into every "button" of the site...

  <input type="hidden" name="handling_cart" value="0.30" />
  <input type="hidden" name="shipping" value="0.20" />
  <input type="hidden" name="shipping2" value="0.20" />

But now let's complicate things by letting the user select two different types of shipping. Say "normal" and "overnight". It is obvious that we must offer the user a dropdown (select) with the choice of shipping, but we may have to alter several veriables to get the job done. Perhaps it is the same as above for normal shipping, but for overnight we must charge 2.00 for the first CD, and 0.90 for every CD beyond that. What do we do?

We can allow optional variables into the value field of the dropdown to set the proper PayPal variables. This code allows you to set handling, handling_cart, shipping or shipping2 variables with each element of the shipping dropdown. The way we do it is to precede each price-changing element with a prefix to identify what PayPal value we are going to alter.

The three-token flags that may be used in the value field of the options.

"hn=" indicates a handling value follows.
"hc=" indicates a handling_cart value follows.
"s1=" indicates a shipping value follows.
"s2=" indicates a shipping2 value follows.

Here are some examples of what you may put into the value of an option field of a select...

  <option value="hn=.30 s1=.30 s2=.30">Normal</option>
  <option value="hn=1.10 s1=.90 s2=.90">Overnight</option>

This way, either "Normal" or "Overnight" goes into the options field of the PayPal cart for each item, and the charges are reflected in the PayPal cart. Each item can have a different shipping method, if desired. This approach only sets shipping for an individual item. If you want to set cart-wide shipping values, then you must use another approach such as a 3rd party cart.

We start with the output of the PayPal button factory and make a few changes. Then the JS processes the FORM and adjusts the fields. Right-click on this page (and <view source>) to see what was done.

Copy the JS from this example and paste it into your page within the <head> section, like is done on this page, or into the <body> section. Only one copy of the JS is needed for any page.
In your FORM set up the shipping select like was done here. Note that the first option field is not a valid shipping option.
Add an onsubmit event handler to the FORM statement exactly like was done here.
You must add blank variables for all the values that can be stuffed - handling. handling_cart, shipping, and shipping2.
You must also set up blank on0 and os0 fields for the shipping text. Look at the source for this example to see how I did it (<view source>).

Of course, this is just an example, and where things are stuffed can be modified...

Contact me concerning this article at paypalhelper@aol.com. Mention "simple shipping" in your note.

Individual help starting at $25.00 for simple JS solutions.