Como utilizar la API de Mercado Pago con Javascript en 2024
Tags: javascript, webdev, spanish, api
Published: 2024-03-13 15:55:11

Primero que nada, me gustaría aclarar que este artículo no va a ser un tutorial paso a paso sobre cómo utilizar la API de Mercado Pago. Eso ya lo hice en video y aca te los dejo. Están al día de hoy actualizados, tanto con JavaScript como con React.js

{% embed https://www.youtube.com/watch?v=vEXwN9-tKcs&t=1742s %}

{% embed https://www.youtube.com/watch?v=-VD-l5BQsuE&t=9s %}

Te los recomiendo. De hecho, después de estos, hay más videos en mi canal sobre cómo integrar el checkout de Mercado Pago como un modal o con distintos tipos de redirecciones, así como también cómo capturar información un pago exitoso.

Por otro lado, me gustaría elaborar una guía sobre cómo utilizar la versión anterior de esta API. Esto está destinado principalmente a ayudar a aquellas personas que hayan visto mis videos sobre esta API en mi canal de YouTube, pero aquellos que se encuentren desactualizados y estén buscando aprovechar esos proyectos sin necesidad de modificar el código de mercado pago a la última versión como se muestra en los vídeos que compartí más arriba. 

Dejo acá el link directo a los videos que han quedado desactualizados para que tengas a mano el tutorial que estés siguiendo.

Integración Mercado Pago con Javascript: [ver video](https://www.youtube.com/watch?v=vXqo-hgvvZU&t=72s)

Integración Mercado Pago con ReactJs: [ver video](https://www.youtube.com/watch?v=uXe_TxNVOkI&t=2853s)

Proyecto Donaciones Mercado Pago Javascript: [ver video](https://www.youtube.com/watch?v=dj2oDclOJiE&t=577s)

Proyecto Donaciones Mercado Pago ReactJs: [ver video](https://www.youtube.com/watch?v=WJdF5N8BiMY&t=994s)

Ecommerse principiantes Mercado Pago Javascript: [ver video](https://www.youtube.com/watch?v=pZaJNCXO89Y&t=4187s)

## Solucionando conflictos de versión de Mercado Pago 

Lo que se debe hacer es asegurarse de tener alguna versión compatible de mercado pago en lugar de tener la ultima versión que se te instale por defecto. Nada mas que eso, el resto del código queda tal cual.


![Archivo package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/des9rvh520r2t3i6q2nu.png) 

Como verán por defecto se nos instala la ultima versión de mercado pago, puede que sea la misma que ves en la imagen o incluso alguna superior.

Esto hace que al correr el servidor nos de seguramente este error:


![Error en terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63pkcrlhi24jgffdqjb3.png)

Esto es por que las ultimas versiones de mercado pago no resisten configure como manera optima para vincular las credenciales de nuestra cuenta. 

Entonces **hay que modificar la línea del archivo package.json y colocar una versión de Mercado Pago adecuada**.


![Archivo package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kgz4pr8rxkit8fvkcbl.png)

Cololoca en tu archivo package.json la version "^1.5.17" de Mercado Pago.

Ahora hay que **eliminar la capeta node modules y el archivo package-lock.json** de tu código. Una ves hecho esto hay que volver a instalar las dependencias del proyecto, en nuestro caso mercadopago cors y express.

Corre el siguiente comando en la consola:

`npm install mercadopago cors express`

Perfecto esto es todo!

Ya podes seguir el tutorial y el codigo te va a funcionar perfecto

Saludos!