Using Options Fields on Your Website

Option fields let your customers specify options (such as size or color) for the items they purchase. Each item may have up to two options, and option fields are compatible with Buy Now Buttons, PayPal Shopping Cart, and Subscriptions and Recurring Payments buttons.

The requirements for your options fields are:

Each option name is limited to 30 characters
Your drop-down menu choices should not exceed 10 menu items of 30 characters each (if you are using the Button Factory to generate your HTML code. If you are editing the code by hand, you may add additional menu choices)
Option fields cannot be used for options that will alter the item's price

You will need to be comfortable editing HTML code to perform some of the tasks outlined in this article.

Using the Button Factory to generate option fields

When you add options using PayPal's Button Factory, the code we automatically generate will align your option fields vertically in an invisible table, and place the Buy Now button outside of the table. All you have to do is paste the code in your webpage:

<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="me@mybiz.com">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="item_name" value="T-Shirt">
<input type="hidden" name="amount" value="10.00">
<table>
  <tr>
    <td>
    <input type="hidden" name="on0" value="Size">Size</td>
    <td>
    <select name="os0">
     <option value="Select a Size">Select a Size
    <option value="Small">Small
    <option value="Medium">Medium
    <option value="Large">Large
    </select></td>
  </tr>
  <tr>
    <td>
    <input type="hidden" name="on1" value="Color" maxlength="200">Color</td>
    <td>
    <input type="text" name="os1"></td>
  </tr>
</table>
<input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>

Arranging Option Fields with HTML

You can also edit the HTML code to change the way the option fields are displayed on your website. To arrange them horizontally, place them in a single table row (this time, include the button in that table row):

<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="me@mybiz.com">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="item_name" value="T-Shirt">
<input type="hidden" name="amount" value="10.00">
<table>
  <tr>
    <td>
    <input type="hidden" name="on0" value="Size">Size</td>
    <td>
    <select name="os0">
    <option value="Select a Size">Select a Size
    <option value="Small">Small
    <option value="Medium">Medium
    <option value="Large">Large
    </select></td>
    <td>
    <input type="hidden" name="on1" value="Color">Color</td>
    <td>
    <input type="text" name="os1" maxlength="200"></td>
    <td>
    <input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"></td>
  </tr>
</table>
</form>

Using other types of fields

If you are comfortable with HTML, you may want to try using different form elements (such as radio buttons or checkboxes) with your options. To pass the necessary information to PayPal, make sure the code below appears within the relevant <form> tags and the HTML name of each option field is either "os0" or "os1":

<input type="radio" name="os0" value="Small"> Small
<input type="radio" name="os0" value="Medium"> Medium
<input type="radio" name="os0" value="Large"> Large

The corresponding option names are passed through using hidden fields, specified like this in the HTML: