Utilisation des champs d'option sur votre site

Les champs d'option permettent à vos utilisateurs de spécifier les options (par exemple, taille ou couleur) relatives aux objets qu'ils achètent. Chaque objet peut être associé à deux options et les champs d'option sont compatibles avec les boutons Acheter, Panier PayPal et Abonnements et paiements récurrents.

Les contraintes associées aux champs d'option sont les suivantes :

Les noms d'option sont limités à 30 caractères
Les menus déroulants ne doivent pas dépasser 10 éléments de 30 caractères chacun (si vous utilisez l'Assistant pour création de boutons pour obtenir le code HTML. Si vous modifiez manuellement le code, vous pouvez ajouter des choix supplémentaires)
Les champs d'option sont réservés aux options qui n'affectent pas le prix des objets

Vous devez posséder une certaine connaissance de l'édition du code HTML pour effectuer certaines des tâches décrites dans cette rubrique.

Utilisation de l'Assistant pour création de boutons pour générer les champs d'option

Lorsque vous ajoutez des options à l'aide de l'Assistant pour création de boutons PayPal, le code que nous générons automatiquement aligne les champs d'option verticalement dans un tableau invisible et place le bouton Acheter à l'extérieur de ce tableau. Il ne vous reste plus qu'à coller le code dans votre page Web :

<form name="_xclick" action="https://www.paypal.com/fr/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="EUR">
<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/fr_FR/i/btn/x-click-but01.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>

Organisation des champs d'option avec le code HTML

Vous pouvez également modifier le code HTML pour modifier l'organisation des champs d'option sur votre site. Pour disposer les champs horizontalement, placez-les dans un tableau à une seule ligne (cette fois, incluez le bouton dans la ligne du tableau) :

<form name="_xclick" action="https://www.paypal.com/fr/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="EUR">
<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/fr_FR/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>

Utilisation d'autres types de champ

Si vous possédez une bonne maîtrise du code HTML, vous pouvez essayer différentes formes d'éléments (par exemple, les boutons radio ou les cases à cocher) pour vos options. Pour transmettre les informations nécessaires à PayPal, assurez-vous que le code ci-dessous comporte bien les balises <form> adaptées et que le nom HTML de chaque champ d'option est bien "os0" ou "os1" :

<input type="radio" name="os0" value="Petit"> Petit
<input type="radio" name="os0" value="Moyen"> Moyen
<input type="radio" name="os0" value="Grand"> Grand

Les noms d'option correspondants sont transmis par le biais de champs cachés, spécifiés ainsi dans le code HTML :