Animate a compartir lo que sabés 1 > 0

Nicolás Castro Garcia — Sat, 06 Feb 2021 19:06:27 +0000

Lo que voy a contar a continuación es algo que dentro de mi círculo (y asumo que en otros también) es algo normal, algo tan incorporado, que a veces pasa desapercibido.

Todo lo que voy a decir, es basado en mi percepción y experiencia, asi que si no te gusta, te ofende o lo que sea, te pido perdón de antemano.

Cuando empecé a programar, muchas veces me dió verguenza (f*king diéresis) publicar contenido, todo el tiempo pasaba por la indesición, por la balanza donde se encontraba: si compartir mi conocimiento, que claramente es bajo (aunque desde que me quiero un poco más, esto me importa un poco menos), o si no compartirlo, porque hay muchas personas que saben mucho más que yo, tienen más experiencia, más estudios, en fin, más.

Agredezco día a día tener un amigo como Juani Gallo, y una futura amiga como Bel (que probablemente crea que no me enseña, pero yo aprecio su paciencia, y le pido perdón por ser tan lento en entender sus bardeadas) que además de ser excelentes mentores, son excelentes personas (sí, son mis empleadores, vengan de a uno a bardearme por tirarles flores).

Bueno, me descarrilé un poco, pero algo que Juani siempre dice es que "1 es mayor que 0", algo que suena simple al principio, pero que para mi significa mucho, y que cada día lo aplico más.

Si vos llegas a creer por un momento que tu poco, bajo, alto, mucho, experto, inexperto conocimiento podría llegar a ayudar a alguien, por más pequeño o tonto que creas que sea, compartilo. Pensá en cuántas veces alguién escribió un tweet, un post de stack overflow, un issue de github, un blog, y a vos te terminó sirviendo (o te hizo quedar como un rey/reina/ente de la nobleza no cis, seamos sinceros). Ni hablar de todo el contenido gratuito que existe de gente que lo hace de buena onda (or for clout kjjjj).

Te prometo que de alguna manera u otra te vas a ver beneficiado por devolverle a la comunidad todo lo que te dió. Y por sobre todo, núnca sabés si tu conocimiento (que vos consideras mal escrito, feo, básico, estúpido, insertar cualquier adjetivo negativo que te venga a la mente) le va a servir a alguién más.

Y para que esto no sea un post que solamente escribí como rant mientas me tomaba una cerveza, les dejo este repositorio (que considero que al igual que este blog, está mal escrito, es feo, básico, estúpido, y también le inserto cualquiér adjetivo negativo que se me pueda ocurrir) con la esperanza de que a alguien le pueda servir, y aprender por lo menos algo.

Avisame por twitter si crees que mi repositorio puede ser mejorado, o hacé directamente un pull request que va a ser recibido con muchas ganas de aprender, o si no te gusta y pensas que es mejor no desperdiciar el almacenamiento de github, podés mandarme insultos por twitter, al md, o arrobarme.

Para los que se tomaron el tiempo de leer esto, gracias, prometo que voy a leer su contenido si me lo hacen llegar.

Compartí tu conocimiento por mas estúpido que creas que sea, a alguien le va a servir.

Saludos!

¿Cómo integrar Mercado Pago a tu web?

Nicolás Castro Garcia — Sun, 14 Jun 2020 18:11:03 +0000

La semana pasada, se me presentó un "examen" de certificación en el que tenía que integrar a una web el checkout de Mercado Pago (de acá en más MP, porque me voy a cansar de escribirlo).

Por suerte, ya había integrado MP en CourseIt (fue más un rework igual), por lo que tenía cierta experiencia.

Igualmente, ni bien me encontré con este desafío, tuve varios problemas, entre ellos que la documentación de mercado pago no es la más amigable, y me las tuve que rebuscar mucho para poder probar las cosas. (Si tienen problemas utilizando sandbox de MP avisen!)

Es por eso, que escribo este artículo, con la intención de ayudar a personas que tengan que hacer algo similar

El propósito de este artículo es que practicamente cualquier persona pueda seguir y entender su contenido, por lo que las explicaciónes intentan ser lo mas abarcativas posibles

Conocimientos Necesarios

Para poder seguir con facilidad este tutorial, van a necesitar lo siguiente:

Conocimientos de Javascript
Tener instalado node
Saber usar el comando cd de la terminal
Ganas de Aprender!
Las API keys/tokens de MP, que las pueden encontrar acá

Lo que vamos a hacer

Vamos a crear una API en Node, más puntualmente express.
En dicha API, vamos a crear dos rutas, una para generar el link de pago, y otra para recibir las notificaciones de pago que MP nos mande (webhooks).
Esas rutas van a utilizar un controller y un service. En los que vamos a tener que conectarnos con la API de MP.

Empecemos con el Set Up

Lo primero que vamos a hacer es instalar express-generator, que nos va a permitir, en el próximo paso, generar una aplicación de express:

$ npm install express-generator -g
Lo segundo que vamos a hacer es crear una aplicación de express

$ express --view=none MercadoPagoCheckout

Con este comando lo que estamos haciendo es crear una API, que se llama MercadoPagoCheckout
Una vez que estemos en la carpeta MercadoPagoCheckout (que se acaba de crear) ejecutamos:

$ npm install

Esto va a instalar los node_modules.
Dependiendo de su computadora, puede tardar poco o mucho, asi que tengan paciencia.
También tenemos que instalar axios, que lo vamos a utilizar para hacer los request a la API de MP

$ npm install axios --save

Y con eso ya hicimos el setup básico de la API!

Creación de Rutas

Una vez que tengamos todo instalado, tenemos que abrir nuestro proyecto en nuestro editor de código preferido.

Dentro de los archivos, nos vamos a encontrar con uno que se llama app.js, que contiene lo siguiente:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

module.exports = app;

Lo que tenemos que hacer a continuación es crear las rutas.

Tengan en cuenta que vamos a crear 2 rutas: una para generar el link de MP y otra para recibir las notificaciones(webhook) de MP

Vamos a eliminar algunas rutas que NO vamos a usar como:

app.use('/', indexRouter);
app.use('/users', usersRouter);

Y agregar las rutas que SI vamos a usar que son:

app.post("/payment/new", (req, res) => 
  PaymentInstance.getMercadoPagoLink(req, res) 
);

Donde vamos a llamar a la función getMercadoPagoLink() que va a estar en el controller que vamos a crear más adelante.

Esta función se va a ejecutar cuando se realice un request POST a la url localhost:3000/payment/new

app.post("/webhook", (req, res) => PaymentInstance.webhook(req, res));

Esta línea lo que hace es muy similar a la linea anterior.

Cuando se reciba un request POST en la url localhost:3000/webhook se va a ejecutar la función webhook() que está dentro del controller (que todavía no creamos)

Por último, importé el Controller y el Service que vamos a estar creando en los próximos pasos:

const PaymentController = require("./controllers/PaymentController");
 //importamos el controller

const PaymentService = require("./services/PaymentService"); 
//importamos el service

const PaymentInstance = new PaymentController(new PaymentService()); 
// Permitimos que el controller pueda usar el service

Entonces, nos tendría que quedar así:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();

const PaymentController = require("./controllers/PaymentController");
 //importamos el controller

const PaymentService = require("./services/PaymentService"); 
//importamos el service

const PaymentInstance = new PaymentController(new PaymentService()); 
// Permitimos que el controller pueda usar el service

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.post("/payment/new", (req, res) => 
  PaymentInstance.getMercadoPagoLink(req, res) 
);

app.post("/webhook", (req, res) => PaymentInstance.webhook(req, res)); 

module.exports = app;

Creación del Controller

Un controller, es una función o conjunto de funciones que nos van a permitir ordenar la información que recibamos de bases de datos, o en nuestro caso, datos de una API externa.

Lo primero que vamos a hacer es crear, dentro de una carpeta que se llame controllers (creala si es necesario), un nuevo archivo que se llame PaymentController.js , y adentro, vamos a crear una clase que se llame PaymentController.

Dentro de esa clase vamos a crear dos funciones, una que se llame getMercadoPagoLink(), y otra que se llame webhook().

class PaymentController {
  constructor(paymentService) {
    this.paymentService = paymentService; 
  }

  async getMercadoPagoLink(req, res) {

  }

  webhook(req, res) { 

  }
}

module.exports = PaymentController;

La función getMercadoPagoLink(), va a llamar al service (que estamos importando desde el constructor) y ejecutar la función createPaymentMercadoPago() que va a recibir información del producto o servicio que queramos vender, como por ejemplo:
nombre, precio, cantidad

async getMercadoPagoLink(req, res) {
    const { name, price, unit, img } = req.body; 
    try {
      const checkout = await this.paymentService.createPaymentMercadoPago(
        name, // nombre del producto o servicio
        price, //precio del producto o servicio
        unit,  //cantidad que estamos vendiendo
        img  // imagen de referencia del producto o servicio
      );

      return res.redirect(checkout.init_point); 
     //si es exitoso los llevamos a la url de Mercado Pago

      return res.json({url: checkout.init_point})
     // o si queres devolver la url al front 


    } catch (err) { 
// si falla devolvemos un status 500

      return res.status(500).json({
        error: true,
        msg: "Hubo un error con Mercado Pago"
      });
    }
  }

La función tiene que ser declarada con un async, ya que vamos a estar haciendo un await a la función del service.

También vamos a leer, del body del request, la información que nos va a llegar del frontend(name, price, unit, img).

Una vez resuelta PaymentService.createPaymentMercadoPago(), vamos a tener la url de pago que nos da MP.

La función webhook(), en cambio, debería verse así:

webhook(req, res) { 
    if (req.method === "POST") { 
      let body = ""; 
      req.on("data", chunk => {  
        body += chunk.toString();
      });
      req.on("end", () => {  
        console.log(body, "webhook response"); 
        res.end("ok");
      });
    }
    return res.status(200); 
  }

En la función webhook(), vamos a verificar que el método de request sea POST, ya que es requisito para recibir la información que nos va a mandar MP.

Luego, declaramos una variable que se llama body, que vamos a sobre escribir a medida que el request se vaya resolviendo, porque la información nos va a llegar en chunks, y necesitamos llevarla a algo que sea legible (string).

En síntesis, nuestro PaymentController, debería quedar:

class PaymentController {
  constructor(paymentService) {
    this.paymentService = paymentService; 
  }

  async getMercadoPagoLink(req, res) {
    const { name, price, unit, img } = req.query; 
    try {
      const checkout = await this.paymentService.createPaymentMercadoPago(
        name, 
        price,
        unit, 
        img 
      );

      return res.redirect(checkout.init_point);  

    } catch (err) { 

      return res.status(500).json({
        error: true,
        msg: "Hubo un error con Mercado Pago"
      });
    }
  }

 webhook(req, res) { 
    if (req.method === "POST") { 
      let body = ""; 
      req.on("data", chunk => {  
        body += chunk.toString();
      });
      req.on("end", () => {  
        console.log(body, "webhook response"); 
        res.end("ok");
      });
    }
    return res.status(200); 
  }
}

module.exports = PaymentController;

Creación del Service

Un service, es una función o conjunto de funciones que nos permiten ejecutar un query en nuestra base de datos, o conectarnos a una API externa.

Lo primero que vamos a hacer es crear, dentro de la carpeta services (creala si no existe), un nuevo archivo que se llame PaymentService.js , y adentro, vamos a crear una clase que se llame PaymentService.

Vamos a necesitar un constructor también, que es donde vamos a guardar las keys/tokens de MP.

Y por último, tenemos que importar axios, que es la herramienta que vamos a usar para conectarnos a la API de MP.

const axios = require("axios"); 

class PaymentService {
  constructor() {
    this.tokensMercadoPago = {
      prod: {},
      test: {
        access_token:
          "APP_USR-6317427424180639-042414-47e969706991d3a442922b0702a0da44-469485398" 
     // el access_token de MP
      }
    }; 
// declaramos de la siguiente manera el token
// para que sea más fácil cambiarlo dependiendo del ambiente
    this.mercadoPagoUrl = "https://api.mercadopago.com/checkout"; 
 // declaramos la url en el constructor para poder accederla a lo largo de toda la class
  }
}

Dentro de esa clase, vamos a crear una sola función llamada CreatePaymentMercadoPago().

En esta función async, vamos a recibir las variables que le enviamos desde la función getMercadoPagoLink() que está en PaymentController.js.

También, vamos a declarar una variable llamada url que es la dirección de MP a donde vamos a ir a pedir la información mediante el método POST. Utilizamos las variables declaradas en el constructor para formarla.

  async createPaymentMercadoPago(name, price, unit, img) {  

    const url = `${this.mercadoPagoUrl}/preferences?access_token=${this.tokensMercadoPago.test.access_token}`; 

  }

Para continuar, vamos a crear dentro de la función createPaymentMercadoPago() un array de objetos[{}] llamado items.

Este Array, va a contener la información de los productos o servicios que estamos vendiendo.

También vamos a utilizar las variables name, unit, y price que nos estan llegando de la función getMercadoPagoLink() que está en PaymentController.js


   const items = [
      {
        id: "1234", 
// id interno (del negocio) del item
        title: name, 
// nombre que viene de la prop que recibe del controller
        description: "Descripción del producto o servicio", 
// descripción del producto
        picture_url: "https://localhost:3000/static/product.png", 
// url de la imágen del producto, tiene que ser una url válida
        category_id: "1234", 
 // categoría interna del producto (del negocio)
        quantity: parseInt(unit), 
// cantidad que estamos vendiendo, que tiene que ser un intiger
        currency_id: "ARS",
 // id de la moneda, que tiene que ser en ISO 4217
        unit_price: parseFloat(price) 
// el precio, que por su complejidad tiene que ser tipo FLOAT
      }, {
// si queremos agregar otro item, pasamos la misma información acá
}
    ];

Ahora, vamos a declarar un objeto llamado preferences, que contiene las preferencias de pago de nuestro array items.

Todo esto lo estamos haciendo de acuerdo a la documentación de la API de MP que pueden encontrar acá

  const preferences = { 
      items, 
// el array de objetos, items que declaramos más arriba
      external_reference: "referencia del negocio", 
// referencia para identificar la preferenciaç
      payer: { 
// información del comprador, si estan en producción tienen que traerlos del request
//(al igual que hicimos con el precio del item) 
        name: "Lalo",
        surname: "Landa",
        email: "test_user_63274575@testuser.com", 
// si estan en sandbox, aca tienen que poner el email de SU usuario de prueba si estan 
//en producción, deberian completar esta información 
//de la misma manera que lo hicimos con items, units, y price

        phone: {
          area_code: "11",
          number: "22223333"
        },
        address: {
          zip_code: "1111",
          street_name: "False",
          street_number: "123"
        }
      }, 
      payment_methods: {
 // declaramos el método de pago y sus restricciones
        excluded_payment_methods: [
// aca podemos excluir metodos de pagos, tengan en cuenta que es un array de objetos
// donde el id de cada objeto es la exclusión
          {
            id: "amex"
// acá estamos excluyendo el uso de la tarjeta American Express
          }
        ],
        excluded_payment_types: [{ id: "atm" }],
 // aca podemos excluir TIPOS de pagos, es un array de objetos
// Por ejemplo, aca estamos excluyendo pago por cajero
        installments: 6, 
// mayor cantidad de cuotas permitidas
        default_installments: 6 
// la cantidad de cuotas que van a aparecer por defecto
      }, 
      back_urls: {
// declaramos las urls de redireccionamiento
        success: "https://localhost:3000/success", 
// url a la que va a redireccionar si sale todo bien
        pending: "https://localhost:3000.com/pending",
// url a la que va a redireccionar si decide pagar en efectivo por ejemplo
        failure: "https://localhost:3000.com/error"
 // url a la que va a redireccionar si falla el pago
      }, 
      notification_url: "https://localhost:3000/webhook", 
// declaramos nuestra url donde recibiremos las notificaciones
// es la misma ruta que declaramos en app.js
      auto_return: "approved" 
// si la compra es exitosa automaticamente redirige a "success" de back_urls
    };

//NOTA: TODAS las URLS que usemos tienen que ser reales,
// si prueban con localhost, va a fallar

Por último, nos queda realizar el POST con axios:


      const request = await axios.post(url, preferences, { 
// hacemos el POST a la url que declaramos arriba, con las preferencias
        headers: { 
// y el header, que contiene content-Type
          "Content-Type": "application/json"
        }
      });

El PaymentService.js les debería haber quedado:

const axios = require("axios"); 

class PaymentService {
  constructor() {
    this.tokensMercadoPago = {
      prod: {},
      test: {
        access_token:
          "APP_USR-6317427424180639-042414-47e969706991d3a442922b0702a0da44-469485398" 
// el access_token de MP
      }
    }; 
// declaramos de la siguiente manera el token, para que sea más fácil cambiarlo dependiendo del ambiente
    this.mercadoPagoUrl = "https://api.mercadopago.com/checkout"; 
 // declaramos la url en el constructor para poder accederla a lo largo de toda la clase
  }

  async createPaymentMercadoPago(name, price, unit, img) {  
// recibimos las props que le mandamos desde el PaymentController
    const url = `${this.mercadoPagoUrl}/preferences?access_token=${this.tokensMercadoPago.test.access_token}`; 
// url a la que vamos a hacer los requests

    const items = [
      {
        id: "1234", 
// id interno (del negocio) del item
        title: name, 
// nombre que viene de la prop que recibe del controller
        description: "Dispositivo movil de Tienda e-commerce",
 // descripción del producto
        picture_url: "https://courseit.com.ar/static/logo.png", 
// url de la imágen del producto
        category_id: "1234",  
// categoría interna del producto (del negocio)
        quantity: parseInt(unit), 
// cantidad, que tiene que ser un intiger
        currency_id: "ARS", 
// id de la moneda, que tiene que ser en ISO 4217
        unit_price: parseFloat(price)
 // el precio, que por su complejidad tiene que ser tipo FLOAT
      }
    ];  

    const preferences = { 
// declaramos las preferencias de pago
      items, 
// el array de objetos, items que declaramos más arriba
      external_reference: "referencia del negocio", 
// referencia para identificar la preferencia, puede ser practicamente cualquier valor
      payer: { 
// información del comprador, si estan en producción tienen que //traerlos del request
//(al igual que hicimos con el precio del item) 
        name: "Lalo",
        surname: "Landa",
        email: "test_user_63274575@testuser.com",
 // si estan en sandbox, aca tienen que poner el email de SU usuario de prueba
        phone: {
          area_code: "11",
          number: "22223333"
        },
        address: {
          zip_code: "1111",
          street_name: "False",
          street_number: "123"
        }
      }, 
      payment_methods: { 
// declaramos el método de pago y sus restricciones
        excluded_payment_methods: [ 
// aca podemos excluir metodos de pagos, tengan en cuenta que es un array de objetos
          {
            id: "amex"
          }
        ],
        excluded_payment_types: [{ id: "atm" }], 
// aca podemos excluir TIPOS de pagos, es un array de objetos
        installments: 6, 
// limite superior de cantidad de cuotas permitidas
        default_installments: 6 
// la cantidad de cuotas que van a aparecer por defecto
      }, 
      back_urls: {
// declaramos las urls de redireccionamiento
        success: "https://localhost:3000/success", 
// url que va a redireccionar si sale todo bien
        pending: "https://localhost:3000.com/pending", 
// url a la que va a redireccionar si decide pagar en efectivo por ejemplo
        failure: "https://localhost:3000.com/error" 
// url a la que va a redireccionar si falla el pago
      }, 
      notification_url: "https://mercadopago-checkout.herokuapp.com/webhook", 
// declaramos nuestra url donde recibiremos las notificaciones
      auto_return: "approved" 
// si la compra es exitosa automaticamente redirige a "success" de back_urls
    };

    try {
      const request = await axios.post(url, preferences, {
 // hacemos el POST a la url que declaramos arriba, con las preferencias
        headers: { 
// y el header, que contiene content-Type
          "Content-Type": "application/json"
        }
      });

      return request.data; 
// devolvemos la data que devuelve el POST
    } catch (e) {
      console.log(e); 
// mostramos error en caso de que falle el POST
    }
  }
}

//NOTA: TODAS las URLS que usemos tienen que ser reales, 
//si prueban con localhost, va a fallar

module.exports = PaymentService;

Y eso es todo del lado del back. Para terminar con el ciclo, desde el front, deberían realizar un POST request a /payment/new y eso les va a devolver un link, que es el del pago.

Recuerden que el POST ejecutado desde el front tiene que tener un body que contenga (por lo menos), name, unit,img, y price.

Espero que este tutorial les haya servido como guía para iniciarse en este tipo de integraciones o para resolver dudas!

Toda la documentación de Mercado Pago, y lo que use para crear este código, está acá

Para crear sus usuarios de prueba consulten acá

Me pueden mandar sus consultas o mejoras del código (porque hay mil cosas para mejorar) a mi twitter @ncastrogarcia

No respondo más los comentarios! si tienen dudas pueden consultarme por twitter!

Tambien les dejo este video, que explico lo mismo que este blog pero en formato video

Si te sirvió me podes comprar un cafecito

Muchas gracias por tu tiempo!

DEV Community: Nicolás Castro Garcia