Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






O'Reilly Book Excerpts: PayPal Hacks

Hacking PayPal

by Shannon Sofield, Dave Nielsen, Dave Burchell

Editor's note: The authors of PayPal Hacks offer two hacks designed to make PayPal more customer friendly, profitable, and accountable through creating PayPal buttons with more than two fields and creating a page that enables customers to check on the status of their orders. Plus, there is an additional hack to catch IPN system errors.

ModerateHack #33

Include More Than Two Option Fields


Give your customers a large selection of options when purchasing their items, despite the limitations of payment buttons.

PayPal buttons enable you to easily offer fixed products to your customers. Although some flexibility is provided in the form of option fields [Hack #32], PayPal currently supports only two such fields. If your product has more than two options (e.g., Size, Color, and Material), you can employ a little JavaScript code and a hidden field to create as many option fields as you need.

Start with the basic Buy Now button code [Hack #28] for a single item, although this works with Shopping Cart, Subscription, and Donation buttons as well:

<form action="https://www.paypal.com/cgi-bin/youbscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="sales@payloadz.com">
<input type="hidden" name="item_name" value="Widget One">
<input type="hidden" name="item_number" value="Wid-001">
<input type="hidden" name="amount" value="1.00">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="image" src=
                "https://www.paypal.com/en_US/i/btn/x-click-but23.gif" 
                border="0" name="submit>
</form>

Suppose the item you're selling has three options: Color, Size, and Material. You can provide three drop-down lists [Hack #32], one for each option, with which your customers can customize their purchases. To keep things simple, name your drop-down elements custom1, custom2, and custom3.

This code joins all three of the selected options into a single variable, custom, to be passed to PayPal. You'll need to add the custom form element to your button as a hidden variable with no value specified. The value will be populated by the JavaScript code when the form is submitted. Here's an HTML form with form options and the custom field:

Color 
<select name="custom1">
    <option value="White" selected>White</option>
    <option value="Grey">Grey</option>
    <option value="Black">Black</option>
</select>
<br>
Size 
<select name="custom2">
    <option value="Small">Small</option>
    <option value="Medium">Medium</option>
    <option value="Large" selected>Large</option>
    <option value="X-Large">X-Large</option>
</select>
<br>
Material 
<select name="custom3">
    <option value="Spandex" selected>Spandex</option>
    <option value="Cotton">Cotton</option>
</select>
<input type="hidden" name="custom" value="">

Figure 4-5 shows the additional custom fields in action. You can include as many option fields as you can fit on your page.


Figure 4-5. Including additional option fields

You can continue adding as many option fields as you need, provided that you use the same custom# naming format. Just be sure that the total character count for the labels and their possible variable values does not exceed 256 characters, the size limit of PayPal's custom variable.

Add the HTML code to your PayPal button form between the opening and closing <form> tags. Then add the following JavaScript code to the head of the web page:

<script language="JavaScript">
<!--
  function joinFields( ){
    fmBuy.custom.value = 'Color:' + fmBuy.custom1.value + ' Size:' +
              fmBuy.custom2.value + ' Material:' + fmBuy.custom3.value
  }
// -->
</script>

If you add additional fields, you'll need to modify this code to accommodate them.

Finally, add a call to the joinFields routine by inserting the name and onSubmit attributes to the existing <form> tag (the values for the action and method attributes remain unchanged):

<form action="https://www.paypal.com/cgi-bin/youbscr" method="post" 
name="fmBuy" onSubmit="joinFields( )">

Here is the final code for the example form:

<form action="https://www.paypal.com/cgi-bin/youbscr" method="post" name="fmBuy" 
onSubmit="joinFields( )">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="sales@payloadz.com">
<input type="hidden" name="item_name" value="Widget One">
<input type="hidden" name="item_number" value="Wid-001">
<input type="hidden" name="amount" value="1.00">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
  Color 
  <select name="custom1">
    <option value="White" selected>White</option>
    <option value="Grey">Grey</option>
    <option value="Black">Black</option>
  </select>
<br>
Size 
<select name="custom2">
    <option value="Small">Small</option>
    <option value="Medium">Medium</option>
    <option value="Large" selected>Large</option>
    <option value="X-Large">X-Large</option>
  </select>
<br>
Material 
<select name="custom3">
    <option value="Spandex" selected>Spandex</option>
    <option value="Cotton">Cotton</option>
  </select>
  <input type="hidden" name="custom" value="">

<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but23.gif"
                border="0" name="submit">
</form>

When the complete page is loaded (with the button code in the page body and the JavaScript in the page head), the customer-selected option fields will be concatenated into one string and passed through to PayPal in the custom variable. For instance, if the form is submitted with its default values, the custom variable will be set to Color:White Size:Large Material:Spandex. The string will appear in details of the transaction in your PayPal account; your customers will never see it. If necessary, you can also parse this field out in the IPN page [Hack #80] .

PayPal Hacks

Related Reading

PayPal Hacks
100 Industrial-Strength Tips & Tools
By Shannon Sofield, Dave Nielsen, Dave Burchell

Pages: 1, 2, 3

Next Pagearrow