Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

4. Payment Buttons > 32. Provide Purchase Options with Drop-Down Listboxes

Provide Purchase Options with Drop-Down Listboxes

Change a few lines of the PayPal Button Factory code to restrict purchase options to a distinct list of choices.

By default, the item_name variable created by the PayPal Button Factory [Hack #28] is a hidden field containing a single string of text, which means that a single payment button corresponds to a single product. So, if you sell three products, you’ll need three payment buttons, right?

Not so, thanks to drop-down listboxes.

Since many of the products you’re selling probably come in a combination of styles or sizes, you can merge those variations into a single purchase button. For instance, if you’re selling clothing, a Size option might contain three choices: Small, Medium, and Large. Fortunately, PayPal doesn’t distinguish between text strings sent from text boxes and list elements selected from drop-down listboxes, so you can easily replace any <input> field with a <select> drop-down list. For instance, take:

<input type="hidden" name="item_name" value="T-Shirt">

and replace it with:

<select name="item_name" id="item_name">
  <option>T-Shirt</option>
</select>

The problem here is that we still provide the customer with only one option. To add more options, simply insert additional <option> tags, one for each variation, like this:

<select name="item_name" id="item_name">
  <option>T-Shirt, Small</option>
  <option>T-Shirt, Medium</option>
  <option>T-Shirt, Large</option>
</select>

Figure 4-4 shows the completed drop-down listbox.

Taking advantage of PayPal’s option fields with a simple drop-down listbox.
Figure 4-4. Taking advantage of PayPal’s option fields with a simple drop-down listbox.

With this simple change, your customers choose a size, click the Buy Now button, and pay for your item. PayPal then sends the customer’s selection back to you in the “You’ve got cash” email.

If you need to provide your customers with more than one option, you can include up to two additional option fields [Hack #33] and convert both of them to drop-down lists with this same procedure. Thus, you can have up to three different options with a single payment button.

Hacking the Hack

You can take this hack a step further by changing the values of other fields based on selection. For instance, you can change the price based on the shirt size your customer chooses and send the correct price to PayPal along with the corresponding options. You need to add a few pieces of code to your payment button form for this to work.

First, place this JavaScript code in the section of your page between the <head> and </head> tags:

<script type="text/javascript">
<!-- Update Price Change
function UpdateForm (object1) {             // process change selects
var i,item_amt,object,position,val;
  item_amt = object1.amount.value;          // default amount
  for (i=0; i<object1.length; i++) {        // check options
    object = object1.elements[i];           
    if (object.type == "select-one" &&
        object.name == "cng") {             // must be named cng
      position = object.selectedIndex;      // option selected
      val = object.options[position].value; // selected value
      position  = val.indexOf ("$");        // set new price
      if (position >= 0) item_amt = val.substring (position + 1)*1.0; 
    }
  }
  object1.amount.value = item_amt;
  if (object1.item_total) object1.item_total.value = "$" + item_amt;
}
//-->
</script>

Next, change the <form> tag for your payment button code so the JavaScript function is executed when the form is submitted, like this:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" 
onsubmit="this.target='paypal';UpdateForm(this);">

Finally, modify the <select> tag so that it, too, is linked to the JavaScript code:

<select name="cng" onchange="UpdateForm(this.form);">
 <option value="Small $1.00">Size: Small $1.00</option>
 <option value="Medium $2.00">Size: Medium $2.00</option>
 <option value="Large $3.00">Size: Large $3.00</option>
</select>

You can edit the amount charged to your customer by changing the value="Small $1.00" section of the form field. You can also change the text displayed to your customer by changing the value between the <option> and </option> sections.

Make sure the amount tag in your form is set to the same value as the default value of the drop-down menu. That way, if the form is submitted without changing the values, the amount has the correct default value.

When this code is in place, the price is updated automatically whenever a new size is selected.

Warning

Since this solution relies on JavaScript to update the price according to a customer action, it will fail if the customer has disabled JavaScript. Although PayPal doesn’t do price checking, you can effectively prevent this problem by checking for JavaScript before displaying order pages to your customers.

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint