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.

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] .

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