Cómo colocar un botón de Donación por Paypal en tu web

Si tienes o vas a crear una web para una buena causa, con un fin benéfico, sin ánimo de lucro y con ánimo de ayudar a algunas de las miles de causas que oprimen nuestro mundo, tal vez sea interesante que, en dicha web, coloques un botón mediante el cual la gente pueda realizar donaciones a dicha causa.

Ten en cuenta que dicho botón está destinado a donaciones, a causas sin ánimo de lucro, y que posiblemente, Paypal te pida cuentas antes de realizarte el pago de cualquier cantidad donada. Según muestra en su web, tendrás que demostrar cómo será usado el dinero donado cuando la cantidad supere los 10.000 dólares.

Aparte de esto, tendrás que tener en cuenta las leyes fiscales que legislen tu país, así como los impuestos o exenciones que de este dinero deriven. Igualmente, Paypal se va a quedar con un 30% aproximadamente de las cantidades donadas.

Suponiendo que tienes todo lo anterior claro, y que tu fin es filantrópico, vamos a mostrarte como hacerlo.

Cómo poner, en tu web, un botón de Donación mediante Paypal

Poner el botón de donación de Paypal en tu sitio o página web es algo muy sencillo. No necesitas saber programar para ello. Es un simple código en HTML que debes colocar en el lugar donde desees que aparezca el botón. Si usas WordPress, puedes incluso incrustarlo dentro de un widget, evitándote así tener que instalar plugins que sobrecarguen tu sitio.

A continuación te mostramos el código para realizar esto que te contamos, y posteriormente te explicamos qué es lo que tienes que modificar para adecuarlo a tus necesidades.

Como puedes apreciar, en primer lugar, en el código en HTML, hay varios campos input de tipo hidden. Tendrás que modificar los siguientes:

item_name. Nombre con el que identificarás esta donación.
business. El correo electrónico asociado a tu cuenta de Paypal.
lc. El idioma usado.
currency_code. La moneda a usar.
notify_url. Donde deseas recibir la notificación cuando se realice una donación. Si no vas a suscribirte a este evento, puedes poner cualquier url de tu web.
amount. La cantidad a donar. En nuestro ejemplo, hemos puesto un selector con varios valores.

Por último, puedes modificar la url de la imagen del botón que aparecerá para realizar el pago.

Una vez que el usuario pulse sobre el botón de donar, el código en javascript rellenará el campo amount con la cantidad que tenga seleccionada el selector. Y por último, realizará la petición a Paypal, el cual abrirá una ventana con esta información, y, en la cual, el usuario tendrá que loguearse y aceptar la realización de la donación.

A continuación te mostramos el código completo, por si quieres copiarlo:

<style>
  .contenedor {
    width: 320px;
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;
    background-color: #e5e5e5;
  }

  .combo {
    vertical-align: middle;
    width: 50px;
  }
</style>

<div class="contenedor">
  ¡Ayúdanos!
  <br/>

  <form name="donation" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" style="margin-top:10px;" onsubmit="onSubmit();">
    <input type="hidden" name="cmd" value="_donations">
    <input type="hidden" name="item_name" value="Donacion Professor Falken!">
    <input type="hidden" name="business" value="info@ionastec.com">
    <input type="hidden" name="lc" value="en_US">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest">
    <input name="bn" value="Rednao_SP" type="hidden">
    <input type="hidden" name="custom" value="0">
    <input type="hidden" name="notify_url" value="https://professor-falken.com/?sd_ipn_trigger=1">
    <input type="hidden" name="amount" class="amountToDonate" value="1">

    <select name="amount" class="combo">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="20">20</option>
    </select> $

    <input type="image" src="https://professor-falken.com/wp-content/uploads/2016/09/donateButton.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" style="vertical-align:middle; margin-left:5px;">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  </form>
</div>

<script type="text/javascript">
  function onSubmit() {
    document.donation.amount.value = document.donation.amount.value;
    return true;
  }
</script>

<style>

.contenedor {

width: 320px;

border: 1px solid #ccc;

text-align: center;

padding: 10px;

background-color: #e5e5e5;

}

.combo {

vertical-align: middle;

width: 50px;

}

</style>

¡Ayúdanos!

<br/>

</select> $

</form>

</div>

function onSubmit() {

document.donation.amount.value = document.donation.amount.value;

return true;

}

</script>

Recuerda modificar los valores que te hemos comentado anteriormente para adecuarlo al sitio web donde vayas a colocar este botón de donación de Paypal.