Holaaa Programador... Todos absolutamente todos nos gustaría recibir dinero por internet y ahora eso puede ser una realidad pero bueno se que me vas a decir... "si quiero recibir pagos por Paypal simplemente les doy mi email y listo".... perooooo eso es lo que hace todo mundo y tu eres un programador, así que te voy a enseñar como integrar Paypal a tu web para que recibas pagos pero de una forma más profesional.

Lo primero que debes hacer es crearte una cuenta en Paypal (si no la tienes) e irte a la siguiente página: https://developer.paypal.com/ ahí te vas a loguear y llegarás a la siguiente vista:

Luego vas a presionar click en el boton de Create App para crear tu aplicación dentro de Paypal y obtener así tu cliente ID que vamos a necesitar más adelante.

Ingresas el nombre de tu App, dejas seleccionado Merchant y seleccionas con cual cuanta Sandbox desees trabajar (a lo mejor en tu caso solo te salga una por lo que lo estas haciendo por primera vez, pero en mi caso tenía varias cuentas).

Luego presionar click en Create App Paypal nos muestra nuestro Client ID que será el que usemos para conectar mi web con Paypal. 

En el menú superior presionamos click en Docs para que se nos despliegue los diferentes tipos de integraciones que Paypal posee, en nuestro caso vamos a trabajar únicamente con la primera opción que es Paypal Commerce Platform for Business y presionamos click en Get Started pero ya vaaaa aun no lo des click, primer copia el Client Id o abre el link de Get Started en una nueva pestaña porque mas tarde necesitaremos copiar el Client Id.

Ya en la página de Get Started vamos a seleccionar del menú lateral la opción de JavaScript SDK

Ahora si comienza lo bueno, presionamos click en la opción del menú lateral JavaScript SDK Script Configuration.  Ahí vas a tener las diferentes opciones de como hacer el primer llamado de Paypal a tu página para autorizar de esa forma el código que vamos a integrar posteriormente.

El script que vamos a usar va a ser el más sencillo y sin tantas opciones y sería este:

Haaa ya te diste cuenta para que necesitabas el Client ID bueno ese texto que dice YOUR_CLIENT_ID lo vas a reemplazar por ese código largote que tenías en la pestaña que si me hiciste caso no cerraste o bueno que copiaste antes de darle en Get Started.

Ya tenemos la primera parte de la integración, ahora nos vamos a nuestro sitio en MGPanel (si no tienes aún tu cuenta en MGPanel te pasaste como es eso posible si es GRATIS, mira este post que aquí te enseño como crearla) y presionamos click en el icono de configuración:

Luego en la campo de código HEAD pegamos el Script de Paypal, quedaría algo parecido a esto: 

Si quieres puedes aprovechar a pegar este script: 

Porque es el que vamos a usar para las alertas. Luego de eso guardamos y pasamos a la siguiente fase.

Creando nuestro contenido para la integración

Ya en este punto tenemos integrado Paypal a nuestro sitios pero ahora debemos hacer que se muestre el botón en nuestra página, para esto podemos crear un contenido (ya sabes presionas click en la pestaña de desarrollador en MGPanel y luego en Contenidos).

Los contenidos en MGPanel nos permiten tener nuestro HTML y Javascript juntos para poder trabajarlos de una forma muy fácil.  En nuestro HTML vamos a crear un formulario para poder pedirles el monto a pagar. 

Ojo la idea de crear esto es que podemos enviarle ese link a nuestros cliente y que ellos ingresen el monto de lo que nos van a pagar y realicen el pago. 

Para crear nuestro HTML nos vamos apoyar de bootstrap para que quede bonito (igual tu le puedes colocar más flow, aquí te estoy es enseñando como hacer es la integración).

Se que vas a decir queeeeeeeeeeee.... y que es todo eso??? bueno fácil te explico dividí el código en 3 secciones y a cada una la identifique con un id, la primera es formapago, la segunda btnpaypal y la tercera exitoso.  El primer div el de formapago es un formulario común y silvestre de bootstrap (aprovecho si no sabes bootstrap yo te enseño en mi Master en Programación Web desde Cero). 

El segundo Div que es btnpaypal le colocamos un estilo display: none para que no se vea aún ya que necesitamos que primero nuestro cliente ingrese el monto del pago.

Y si todo esta bien mostraremos el ultimo div que es el de exitoso (por eso al principio lo tenemos con display:none)

Ahora si vamos a poder darle vida a nuestra página con JavaScript, pero antes nos devolvemos a la documentación de Paypal y presionamos click en JavaScript SDK Complete Reference, ya bajamos al apartado que dice capture() ahí está el código que vamos a utilizar en este ejemplo y bueno el que yo normalmente uso en mis integraciones.

Copia el código, vete a tu MGPanel en la pestaña de JS y pega el código.  Si no has guardado es un buen momento para hacerlo.  Si en este momento ingresas para ver tu página solo va a estar es el formulario pero aun no el botón de Paypal y no es que no este sino que recuerda que tenemos oculto el div del botón hasta que el cliente no ingrese el monto recuerda.

Entonces antes de ejecutar el código que copiamos de Paypal vamos hacer unas validaciones: lo primero que vamos hacer es crear la funcion pago() que es la que estamos llamando en el evento on-click de nuestro botón de continuar.

function pago(){ 

} 

Dentro de nuestra funcion pago() lo primero que vamos hacer es validar que el usuario agregara un monto si no le mostramos un mensaje algo así:

function pago(){ 
   var monto = $('#monto').val();

   if (monto > 0) { 
     
     //Aquí va ir el codigo de Paypal 

   }else{

     Swal.fire('Debes agregar un monto')

   }

}

Ahora ya tenemos todo listo para terminar nuestra integración, para eso te voy a colocar todo el código pero ya te explico, trata de entender primero lo que hice.

function pago(){ 
   var monto = $('#monto').val();

   if (monto > 0) { 
     
     $('#formpago').hide();
     $('#btnpaypal').show();

     paypal.Buttons({
       createOrder: function(data, actions) {
       // This function sets up the details of the transaction, including the amount and line item details.
       return actions.order.create({
       purchase_units: [{
         amount: {
           value: monto
         }
       }]
      });
     },
     onApprove: function(data, actions) {
       Swal.fire({
         position: 'top-end',
         icon: 'success',
         title: 'Estamos procesando el pago...',
         showConfirmButton: false,
         timer: 1500
       })
       $('#btnpaypal').hide();
      
      // This function captures the funds from the transaction.
      return actions.order.capture().then(function(details) {
         Swal.fire('Pago realizado con Éxito')
         $('#exitoso').show();

      });
    }
   }).render('#paypal-button-container');
   //This function displays payment buttons on your web page. 

   }else{

     Swal.fire('Debes agregar un monto')

   }

}

¡Listo! ahora si te explico: Si el monto es mayor a cero entramos a la parte donde esta el código de Paypal.

Lo primero que hacemos es ocultar el div del formpago para que ya no me salga el formulario y mostramos el div de btnpaypal para que nos salga ahora si el botón.   

Luego pegamos el código de Paypal tal cual como esta en la página de developer, aquí vamos a cambiar el value del  amout que viene por defecto '0.01' y colocamos nuestra variable monto (sin comillas) que es donde tenemos el monto ingresado por el usuario.

Dentro de la sección de onApprove mostramos un mensaje de que estamos procesando su solicitud y ocultamos el div de btnpaypal.  Luego de ser exitoso el pago mostramos un mensaje diciendo que su pago se realizó con éxito y mostramos el div de exitoso y listo.

Una cosa antes de terminar si ves en el código de Paypal el termina con un render('#paypal-button-container'); y si te das cuenta en nuestro html especificamente dentro del div de btnpaypal tenemos un div que tiene un id llamado paypal-button-container eso es porque ahí es donde hacemos el llamado para crear el botón.

Ya con esto y un poco más de imaginación y estilos podemos tener una potente herramienta totalmente personalizada y desarrollada por ti para solicitar pagos a través de internet a tus clientes, ya luego te puedo explicar como integrar Firebase para que guardes en una base de datos los pagos que te vayan realizando.

Una cosa másss y disculpa que se que esto va largo ya, pero en este momento estamos solo trabajando en el entorno de pruebas o mejor conocido como Sandbox, pero para poder recibir pagos de verdad vas a tener que ingresar nuevamente a  https://developer.paypal.com/ y en la seccion de My App & Credentials presionar click en el botón de Live, luego seleccionas tu app, copiar el Client ID y reemplazarlo porque el que tienes en la configuración del sitio en MGPanel.

Y ahora si a disfrutar de los beneficios de ser programador... si quieres ver el ejemplo funcionando en vivo te invito a que visites: https://laboratorio.mgpanel.org/pag/pagos

Nos vemos para otro super tutorial de integraciones en MGPanel.

Eloy Manuel