Como integrar Paypal en tu pagina web con Javascript

Hola buenos días mis queridos lectores, el día de hoy les traigo algo que espero les resulte interesante. Como parte de un proyecto escolar un profesor nos encargo crear una especie de punto de venta, el fin es que decidimos crear un sitio web pequeño, pero nos enfrentamos al problema de incorporar el sistema de pago. Nuestra primera opción fue insertar el método de pago por paypal, y aunque existe la forma de poner botones prediseñados de pago que podemos crear gracias a herramientas que proporciona paypal... pues nos dimos cuenta de que no cubría realmente nuestras necesidades, ya que en cierta forma debíamos relacionarlo con los productos de nuestra base de datos y en primera instancia no resultaba útil crear un botón para cada producto en nuestra tienda y aunque existan probablemente mejores formas de hacerlo, pues encontramos documentación para el desarrollo de pagos por medio de javascript, nos gano la curiosidad de implementarlo y obtuvimos un buen resultado diría yo.

En fin dejados de relatos que de seguro no te interesan pasemos manos a la obra:

¿Como incorporo pagos de paypal con javascript?

Primero que nada necesitaremos un par de cosas:

1. Una cuenta verificada de paypal, si es una cuenta de negocios mucho mejor.
2. Un editor de textos, el que gustes.
3. Y algo de paciencia

Lo primero que tenemos que hacer es acceder a nuestra cuenta de paypal (si posees una cuenta personal puedes saltarte estos pasos hasta el punto ¿Paypal Sandbox?) y en el menú buscaremos la opción de "configuración de la empresa":

Ya dentro nos preguntara ¿Como deseamos recibir pagos? seleccionaremos las opciones que creamos convenientes, aunque la única que realmente necesitamos activar para nuestro propósito es la opción marcada como "En su sitio web":

Al darle en continuar nos preguntara como deseamos procesar pagos, cambiamos la opción predefinida y seleccionamos "Agregar el proceso de pago Paypal como forma adicional para recibir pagos":

Y desplegamos la opción B, aquí abriremos los dos primeros links, el primero nos abrirá la documentación que debemos leer para incorporar el servicio bajo javascript y el segundo nos conduce a sandbox para crear una cuenta de desarrollo y obtener ademas nuestras credenciales.

¿Paypal SandBox?

Bueno antes de seguir creo es importante definir que es paypal sandbox, en experiencia propia puedo definirlo como un servicio de paypal creado para desarrolladores, es básicamente una herramienta que proporciona un ambiente controlado sobre el cual realizar pruebas y checar que todo tu código funcione bien (no creo que quieras que tu dinero real se pierda al intentar hacer un pago para ver si funciona tu código).

SandBox proporciona:

• Cuentas ficticias de paypal con las cuales probar tu código.
• Te proporciona llaves API para conectar con otras aplicaciones.
• Proporciona tus credenciales LIVE (una clave para enlazar tu codigo con tu cuenta real para recibir pagos) y SandBox (lo mismo pero para pruebas).
• Documentación extensa sobre varias cosas (aunque en lo personal creo les falta tener un mayor orden en sus documentos).

Bien, explicado eso ¿Que necesitamos hacer? Bueno, para empezar debemos dar de alta nuestro usuario, si tu saltaste directo a este punto por no tener cuenta empresarial, entra a este link: https://developer.paypal.com/developer/accounts/ y registrate, si sigues los pasos conmigo solo entra (deberias entrar al estar logueado con paypal, si no dale click en Log into DashBord y entra con tu usuario y contraseña paypal).

Una vez dentro deberíamos tener una vista como esta y lo siguiente es crear nuestras cuentas de juguete, aquellas que utilizaremos por lo pronto para desarrollar, para ello daremos click en el botón que dice Create Account:

Y llenaremos los datos que nos solicita, aquí la información puede ser falsa, que como digo solo es para desarrollo, aunque los correos aun siendo falsos, algunos te dirán que ya están registrados, esto es por que aunque son falsos, estos están enlazados con tu cuenta de sandbox, por lo tanto si otro usuario ya lo dio de alta no lo podrás usar, y es que sandbox es usado como una comunidad de desarrollo virtual, básicamente puedes enviar pagos a otras cuentas ficticias que no son tuyas, pero sigue mantenimiento el incapie de que es solo mera simulación, en otras palabras sandbox es un completo mercado de mentiras.

Ojo: el dinero aqui es ficticio, no crean que soy rico

Una vez terminado nos devolverá a la pantalla con nuestras cuentas creadas, por lo regular la primera vez se crean ademas 2 cuentas automáticamente con un nombre similar al de tu cuenta real, igual siguen siendo ficticias, en mi caso solo di de alta la cuenta de VendedorFicticio2808@gmail.com y la que muestro en imágenes como correoficticio2808@gmail.com, en esta menciono para el final del ejemplo que su contraseña es: ficticio1234

Lo siguiente es obtener nuestras credenciales, para ello iremos al apartado de "my apps & credentials" y aquí dentro crearemos una nueva aplicación:

La aplicación la creamos para enlazar nuestros datos con paypal y distinguir de que sitio se obtienen las transacciones, es por ello que por cada sitio o demás seria bueno crear una app diferente, en fin llenamos la información:

Una vez creada tendremos esta pantalla, en ella nos proporciona 2 datos:

• La cuenta que recibirá los pagos 
• El código de cliente, el cual se utiliza para saber a que cuenta mandar el dinero, este lo copiaremos.

Ahora, aclaro, una vez se terminen las pruebas y queramos ir a producción (es decir funcione ya en forma real) deberemos ir a la pestaña que dice live y copiar el Client ID que nos da esa sección y remplazarlo donde corresponda:

Ten presente el Client ID para los siguientes pasos

Ahora si, sigue lo bueno, como mencionaba, debimos abrir 2 links, si ya lo perdiste te dejo el segundo de igual manera: https://developer.paypal.com/docs/checkout/integrate/

Al entrar allí encontraremos una serie de documentación que habla con respecto al tema, si quieres consulta para ver cosas mas complejas, yo solo te daré el tour express.

Bien, a partir de aquí confiare que tienes conocimientos básicos de programación web en HTML y JS. Si es así continuemos. Dentro de las etiquetas head de tu pagina web agregaremos estas dos lineas de código:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

Estas básicamente nos servirán para incorporar la compatibilidad con el odiado Internet Explorer y habilitar el diseño para móviles.

Ahora si, dentro del body pegaremos este código:

<script
    src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
  </script>

  <div id="paypal-button-container"></div>

Recuerda, en vez de poner SB_CLIENT_ID debes borrarlo y pegar el Client ID que anteriormente indique como conseguir. Ahora REMARCO, una vez que funcione el código y estés seguro no tiene fallos, cambia ese Client ID por el que te proporcionara la pestaña Live vista en pasos anteriores.

Ahora, el DIV que tiene marcado el id="paypal-button-container" ese lo puedes pegar donde tu quieras, ese básicamente es el que mostrara los botones en pantalla, cuando acabemos el "tutorial" puedes moverlo a la sección de tu código que mas te convenga.

En fin, prosiguiendo, al final de tu pagina pegamos este código:

<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'  //Precio del producto
          }
        }]
      });
    },
    onApprove: function(data, actions) { //En pago aprovado
      return actions.order.capture().then(function(details) {
    //Aqui van las instrucciones que deseamos realize una vez procese el pago
    //En mi caso solo muestra el mensaje: Pago realizado por: <nombreDeCuenta>
        alert('Pago realizado por:' + details.payer.name.given_name);
        // Instrucciones para el servidor:
        return fetch('/paypal-transaction-complete', {
          method: 'post',
          headers: {
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            orderID: data.orderID
          })
        });
  //fin de instruciones para el servidor
      });
    }
  }).render('#paypal-button-container');
</script>

Explicando rápidamente este código, pues esta dividido básicamente en 3 secciones:

• En un color amarillento claro están las lineas correspondientes a las características del producto, dentro de esa misma linea encontramos la variable value que almacena el precio del mismo.
• En color verdoso encontramos las acciones que han de realizarse una vez que se procese el pago y este sea aprovado, en mi caso solo manda un mensaje de "Pago realizado por:"
• Y la sección en azul, aqui se declararían todas las instrucciones para conectar con tu servidor web, para almacenar y/o hacer cambios en tus transacciones, verificar pagos, etc, si realmente no necesitamos interactuar con el servidor ni nada, puedes, o borrar el código ó dejarlo sin modificar, igual no pasará nada.

Finalmente debemos tener un código como este:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

</head>

<body>
 <div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID&currency=MXN"> </script>

<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '50.00' //Pues 50 pesitos
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        alert('Transaction completed by ' + details.payer.name.given_name);
        // Call your server to save the transaction
        return fetch('/paypal-transaction-complete', {
          method: 'post',
          headers: {
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            orderID: data.orderID
          })
        });
      });
    }
  }).render('#paypal-button-container');
</script>
  
  
  
  
</body>
</html>

Ahora, prodras notar una cosa, al final de Client ID del código agregue &currency=MXN, esto es para que paypal cobre en pesos mexicanos, si quieres cambiar la divisa consulta el código de tu moneda en la documentación, igual te dejo el link:https://developer.paypal.com/docs/checkout/reference/customize-sdk/#currency

Una vez terminado tendremos un perfecto y hermoso botón como este bebe:

Adelante, te invito a probarlo, tan solo escribe como credenciales correoficticio2808@gmail.com con contraseña: ficticio1234, eso realizara un pago con dinero de metiritas a la cuenta que definimos en pasos anteriores. Tal vez se vea algo grande (depende de si me visitas por dispositivo movil o pc, pero para solucionarlo ya es darle el estilo y el diseño que quieras con CSS).

 Y como mencionábamos, si deseas pasar ese código a realizar pagos reales solo cambia el Client ID por el que te proporciona la pestaña LIVE en el apartado de la aplicación que ya vimos puntos mas arriba.

Por ultimo, si quieres ver desde el SandBox si se realizan dichas transacciones puedes acceder a: https://www.sandbox.paypal.com/myaccount/home con las mismas credenciales y ver como es que se realizan los pagos: (recordad que esta cuenta es de juego, no es dinero real ni mucho menos).

Cuando veas que tus transacciones se realizan correctamente, pues ahora si es tiempo de pasar a producción.

En fin, por hoy es todo queridos lectores, espero les guste esta entrada y favor de compartir si les gusto. Gracias.