Como crear caro de compra para blogger con paypal

Hoy veremos como desarrollar un pequeño sistema de pago mediante paypal para poder usarlo en blogger.

Creamos un formulario Html :

<form action="https://www.paypal.com/es/cgi-bin/webscr" method="post" name="form1">
<input type="hidden" name="cmd" value="_xclick"/>
<!-- Email que recibirá el pago -->
<input type="hidden" name="business" value="info@codesblue.com"/>
<!-- Nombre del producto  -->
<input type="hidden" name="item_name" value="Nombre_de_mi_producto"/>
<!-- Tipo de moneda -->
<input type="hidden" name="currency_code" value="USD"/>
<!-- Precio del producto -->
<input type="hidden" name="amount" value="50"/>
</form>

Datos que remplazar:

Correo electrónico (info@codesblue.com) deberá ser remplazado por la cuenta de paypal a la cual recibirá su pago.

Remplazar (Nombre_de_mi_producto) por el nombre de lo que este vendiendo.

(USD) remplazar por la moneda la cual quiere recibir el pago.

Por últimos donde se encuentra el numero 50 marcado de color azul lo remplazamos por el valor del producto

Información extra

El atributo action es el que utilizaremos para incluir la url donde se ejecutar la consulta.

Los elemento input los utilizaremos solo para almacenar los valores mediante los atributo value ,el tipo del campo deberá ser de type="hidden" para ocultarlo.


Una vez creador nuestro formulario lo que deberemos  hacer es incluir nuestro botón cual lo utilizaremos para enviar los datos así que en el código anterior incluiremos los siguiente:

<a onclick="javascript: document.form1.submit();">Finalizar compra </a>

El usuario vera el botón finalizar compra  cual puedes remplazar por el nombre que quieras.

Bien ya tenemos nuestro caro de compra terminado pero donde deberemos incluirlo y es muy fácil lo deberemos incluir dentro de nuestra publicación dentro de HTML o bien si sabemos un poco de diseño web podríamos incluirlo en cada post dando así el efecto de una tienda


Código completo:

<form action="https://www.paypal.com/es/cgi-bin/webscr" method="post" name="form1">
<input type="hidden" name="cmd" value="_xclick"/>
<!-- Email que recibirá el pago -->
<input type="hidden" name="business" value="info@codesblue.com"/>
<!-- Nombre del producto  -->
<input type="hidden" name="item_name" value="Nombre_de_mi_producto"/>
<!-- Tipo de moneda -->
<input type="hidden" name="currency_code" value="USD"/>
<!-- Precio del producto -->
<input type="hidden" name="amount" value="50"/>
</form>
<a onclick="javascript: document.form1.submit();">Finalizar compra </a>

Sistema de pago por paypal haciendo uso de la librería bootstrap

Demostración en:

franciscobanegasbeta.blogspot.com

<div class="container">
  <h2>Plan Basic</h2>
<table class="table">
    <thead>
<tr>
        <th>Pago</th>
        <th>Total</th>
      </tr>
</thead>
    <tbody>
<tr>
        <td>$5USD</td>
        <td class="success">$5USD</td>
      </tr>
</tbody>
  </table>
<button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Finalizar pago</button>
<!-- Modal --><div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">X</button>        <h4 class="modal-title">¿Que hacer una vez finalizado el pago?</h4>
</div><div class="modal-body">        Una vez finalizado el pago recibirá en el trascurso de 24Hs un correo electrónico cual brindara todos los datos de su cuenta para que pueda empezar a utilizar el servicio.<br />
         <h2>Soporte</h2>Tengamos una pequeña charla para resolver sus dudas.<br />
  <table class="table">   <thead>
<tr>
        <th>Hablemos por :</th>
      </tr>
</thead>
    <tbody>
<tr>
        <td>Atención en vivo</td>
        <td class="success"> host.codesblue.com/chat</td>
      </tr>
<tr>
        <td>Consulta por Correo electrónico</td>
        <td class="info"> host@codesblue.com</td>
      </tr><tr>        <td>Whatsapp</td>
        <td class="danger"> +111115500</td>
      </tr>
</tbody>
  </table>
</div>
<div class="modal-footer">
       <form action="https://www.paypal.com/es/cgi-bin/webscr" method="post" name="form1">
<input name="cmd" type="hidden" value="_xclick" />
<!-- Email que recibirá el pago -->
<input name="business" type="hidden" value="host@codesblues.com" />
<!-- Nombre del producto  -->
<input name="item_name" type="hidden" value="Plan basic" />
<!-- Tipo de moneda -->
<input name="currency_code" type="hidden" value="USD" />
<!-- Precio del producto -->
<input name="amount" type="hidden" value="5" />
</form>
<button class="btn btn-default" data-dismiss="modal" type="button">Cerrar</button>
<!-- Enlace del pago -->
<a class="btn btn-success"  onclick="javascript: document.form1.submit();">Finalizar pago</a>
      </div>
</div>
</div>
</div>
</div>