Hack 42 Get More Out of Dreamweaver and PayPal

figs/moderate.gif figs/hack42.gif

Use the WebAssist PayPal eCommerce Toolkit to enable fast, easy, and flexible PayPal transactions with Dreamweaver.

If you use Macromedia Dreamweaver to design and produce web pages, you can use the WebAssist PayPal eCommerce Toolkit (an extension to Dreamweaver) to integrate PayPal with your web site. Naturally, you can use Dreamweaver's code editor to insert any PayPal transaction you want, but why hand-code when you can point and click? The results are the same as hand-coding; it's just quicker, less error prone, and requires almost no technical savvy: what's not to love?

4.16.1 Drag and Drop eCommerce

With WebAssist PayPal eCommerce Toolkit (available for free at http://www.webassist.com), you can insert Add to Cart, View Cart, Subscription, and Buy Now buttons. Insert any of these objects and a multistep wizard walks you through the particulars of the process. Each wizard offers a nice library of button designs to choose from, so you don't have to create any artwork from scratch. However, if you do have your own button, you can enter the URL of its web-based location and that button will be used.

Other available options depend on which button type is being inserted. The Buy Now button, for example, lets you specify the base shipping, any extra shipping to be added for each additional item ordered, and overall handling charges. If you enter these additional values, they override your general account settings on a per-item basis. Adding a Subscription button, on the other hand, gives you the ability to establish periodic billing values (i.e., how much for how long) and trial-offer settings, such as the length of the trial offer. You can even determine a setup fee for a subscription.

4.16.2 Hacking the Hack

By itself, the WebAssist PayPal eCommerce Toolkit is great for items with no options or variations. However, by doing a little work on the form that contains the PayPal buttons, you can greatly extend the toolkit's functionality. Most of the following techniques center on two concepts: naming form elements properly and using hidden form fields. These concepts work together to pass the correct information to PayPal when the transaction is initiated.

Say your your item is available in several sizes or configurations at varying prices. You can pass the right price to PayPal in two ways: using drop-down lists or radio buttons. To offer multiple prices with a list, follow these steps:

  1. Insert a list/menu form element from Dreamweaver's Insert bar, found in the Forms category.

  2. Select the list element and, in the Property inspector, enter amount in the (ironically unlabeled) name field on the top left.

  3. Choose List Values to open the List Values dialog box.

  4. In the dialog, enter the first item you want the user to see in the Label column.

  5. Press Tab and, in the Value column, enter the corresponding amount you want passed to PayPal when this item is chosen. Enter just the raw number without dollar signs. For the first item, it's common to use a directive like "Choose From This List" rather than an item. If you use basic text like this, be sure to leave the corresponding Value empty.

  6. Press Tab again to enter another Label/Value pair.

  7. When you're done, click OK.

When the user makes a selection from the list, the related value is assigned as the amount and sent to PayPal at transaction time. If you'd prefer to display all options on-screen rather than contain them in a list, use radio buttons to vary the price. Here's how:

  1. Insert a radio button from the Insert bar, in the Forms category.

  2. In the Property inspector, enter amount in the name field.

  3. In the Checked Value field, enter the number value you want to send to PayPal when this option is selected.

  4. Repeat steps 1-3 for each additional option and price point you'd like.

Keep the name of each button in the radio group the same (amount) and vary the Checked Value numbers. You can use as many radio buttons as needed.

What about other types of options? PayPal allows two additional options per item. Using the following technique, you can pass two pairs of name and associated information to be included in the order sent to the store owner for fulfillment. If this technique is used to pass color choices, for example, the string passed to PayPal (and on to the owner) might be color="Cream".

Let's say that you have a list of colors for the customer to choose from in your product page. Set up the color list with name/value pairs as described in the previous steps for establishing the amount. This time, however, name the list/menu form object os0 , which stands for Object String 0, the first of the two PayPal option values allowed.

Of course, you can't send a value without identifying it. To tell PayPal and, eventually, the fulfillment folks, what this value is for, insert a hidden form field from Dreamweaver's Insert bar, in the Forms category. With the hidden form field selected, enter its name in the Property inspector: on0 (short for Object Name 0). Complete the operation by entering color in the Value field of the Property inspector. Your first option is ready to go. You can enter another option (perhaps setting the item's size) by following same procedure and substituting os1 and on1 for the new option's value and name, respectively.

?Joe Lowery