Paypal: Productos con atributos

por | Dic 27, 2010 | html, paypal

Para entender bien este tutorial te sugiero revisar el anterior sobre botones simples. Cuando vendemos un producto es usual que debamos elegir algunos atributos como por ejemplo el color, la talla o incluso necesitemos que se deba ingresar algún pequeño texto, ahora vamos a ver como hacer esto y que paypal se encargue de recolectar los atributos.

Producto con distintas tallas

Vamos a agregar un combo box en el cual podamos elegir la talla aunque bien podríamos usarlo para cualquier otro atributo. A nuestro botón tendríamos que agregarle el siguiente código.

1
2
3
4
5
6
7
<input type="hidden" name="on0" value="Talla">
<select name="os0">
  <option value="Selecciona uno">-- Elige una talla --</option>
  <option value="M">Medium</option>
  <option value="L">Large</option>
  <option value="XL">Extra Large</option>  
</select>

Si nos fijamos en el código hay un campo hidden llamado on0 con el valor «talla» este es el nombre del atributo, a continuación hay un combo llamado os0 este da el valor del atributo «talla».

Si quisiéramos agregar más atributos estos se llamarían on1, on2, on3… y sus valores os1, os2, os3… podemos usar tanto un combo como un input text aunque personalmente prefiero cerrar al máximo las opciones para el usuario usando combos y a modo excepcional los campos de texto.

El código completo del botón luciría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input type="hidden" name="business" value="miempresa@midominio.com">
  <!-- Indicamos que es un boton comprar ahora. -->
  <input type="hidden" name="cmd" value="_xclick">
  <!-- especificamos algunos detalles como nombre, precio. -->
  <input type="hidden" name="item_name" value="Mi Producto">
  <input type="hidden" name="currency_code" value="USD">
  <!-- Agregamos atributos. -->
  <input type="hidden" name="on0" value="Talla">Talla: <br />
  <select name="os0">
    <option value="Selecciona uno">-- Elige una talla --</option>
    <option value="M">Medium</option>
    <option value="L">Large</option>
    <option value="XL">Extra Large</option>  
  </select>
  <input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" alt="PayPal - The safer, easier way to pay online"> <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" > </form>

Finalmente cabe mencionar que este sistema de atributos funciona tanto con botones buynow como con botones tipo shopping cart indistintamente