integración de Mercado Pago con Javascript - Checkout Pro - ACTUALIZADO 2024

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 121

  • @onthecode
    @onthecode  7 місяців тому +6

    Les dejo este video por si quieren integrar la pasarela de pago como un MODAL en su pagina o hacer una redirección diferente :) ua-cam.com/video/1CUGrPL7Yuo/v-deo.html

    • @coracaopiratta
      @coracaopiratta 26 днів тому

      Bom dia meu amigo fiz um site e hospedei no github como faço pra integrar o mercado pago.?

  • @emiliano_zzz
    @emiliano_zzz 8 місяців тому +14

    amigo, no entendés cuánto te amo, mi novia tendría envidia de vos si lo supiera

    • @onthecode
      @onthecode  7 місяців тому +1

      jajaj! Espero no estar metiendo problemas en tu relación. Abrazo!

    • @emiliano_zzz
      @emiliano_zzz 7 місяців тому

      @@onthecode jajajjaj, vale un montón esto, muchas gracias

    • @maximilianomartinez2411
      @maximilianomartinez2411 5 місяців тому

      No podría estar más de acuerdo ! @onthecode un héroe sin capa!!!

  • @mitchelcardona1947
    @mitchelcardona1947 29 днів тому

    Muchas gracias por este tutorial @on the code, no sabes las vueltas que dí hasta en la propia página para encontrar una solución 😁😁😁

  • @lucaksstrive2457
    @lucaksstrive2457 Місяць тому

    Crack! un lujo este video muy buena onda y bien explicado!
    faltó agregar un detalle luego del if para que no se creen multiples botones dejo codigo:
    if (window.checkoutButton) window.checkoutButton.unmount();
    window.checkoutButton = await bricksBuilder.create("wallet",.......resto de codigo

  • @mateoelizalde4243
    @mateoelizalde4243 Місяць тому

    Muy bueno, sencillo, claro y concreto. Me ha servido bastante. Solo me costo encontrarle la vuelta para implementarlo en Angular pero salio andando al menos para pruebas. Gracias crack!

    • @nachotosini8247
      @nachotosini8247 15 днів тому

      hola bro, te molestaria pasarme como lo hiciste en angular?

    • @nachotosini8247
      @nachotosini8247 6 днів тому

      bro porfa no tenes repositorio en github?

  • @federicocallegari7972
    @federicocallegari7972 Місяць тому

    No dejes de hacer contenido como este , saludos!!

  • @yosoyalejandromartinez
    @yosoyalejandromartinez 4 місяці тому

    Excelente. Muy clara la explicación y me resultó perfecto. Ya tienes un nuevo seguidor. Saludos desde Chile

  • @sebastianperez1689
    @sebastianperez1689 3 місяці тому

    Genio ! como mp solo se usa en latam , casi no hay recurso de esto. Muchas gracias hermano , buen video y gran aporte !

  • @elisaseyfried7006
    @elisaseyfried7006 9 місяців тому

    Gracias! Me funcionó perfecto. Hasta el momento no había encontrado información entro lugar sobre como utilizar la última versión de esta api. Muy valioso! Saludos.

    • @onthecode
      @onthecode  9 місяців тому

      Que bueno que te sirvió! Gracias por tu comentario! :)

  • @lucianorossichulak1833
    @lucianorossichulak1833 3 місяці тому +1

    Me sale esto "the requested module 'mercadopago' does not provide an export named 'Preference'"

  • @joapede1792
    @joapede1792 Місяць тому +1

    Geniooooo, todavia anda esto!!

  • @joanenriquealvarezescalera4794
    @joanenriquealvarezescalera4794 Місяць тому

    Capo eres un verdadero crack! Te tiro el sub

  • @tincho4204
    @tincho4204 Місяць тому

    Sos un crack amigo! me sirvio una banda! gracias

  • @pablomartincasanoves1647
    @pablomartincasanoves1647 4 місяці тому

    Maestro !! Muchisimas gracias, excelente explicado el paso a paso !!!

  • @agusrze2230
    @agusrze2230 8 місяців тому

    Andaba necesitando la aplicacion en React, pero la explicacion esta muy buena y me quede. Me suscribo porque sos Pablo Agustin y yo Paulo Agustin (?)

    • @onthecode
      @onthecode  8 місяців тому

      jaja el motivo por el que te suscribis me parece excelente jaja! aca la explicación con react! ua-cam.com/video/-VD-l5BQsuE/v-deo.html

    • @agusrze2230
      @agusrze2230 8 місяців тому

      see, lo vi, gracias mi rey@@onthecode

    • @ptitaladelvarrio
      @ptitaladelvarrio 8 місяців тому

      @@onthecode me conviene mas hacerlo con react?

  • @plagtthw
    @plagtthw 8 місяців тому +2

    Buenas!, excelente explicación. De mi parte estoy buscando info porque tenía la integración anterior y no encuentro forma de utilizar el "autoOpen:true" con la nueva versión del checkout pro. Es decir, siempre si o sí me renderiza el botón o me obliga a hacerle el href con el init point a un botón pero no está la forma de generar el checkout y abrirlo en una sola acción. Si conocés algo o alguien que lea este comentario hacermelo saber. Muchas gracias! Saludos.

    • @hectormancilla892
      @hectormancilla892 7 місяців тому +1

      misma duda

    • @hectormancilla892
      @hectormancilla892 7 місяців тому +1

      estoy haciendo la integración con el sdk de C# y vi que el objeto de preferencia no solo tiene el Id, sino que varias cosas más y entre esas la url, la cual podrías redirigir directo, sin la necesidad de renderizar el botón. mañana seguiré integrando y te comento

    • @plagtthw
      @plagtthw 7 місяців тому

      @@hectormancilla892 Hector!, claro el objeto de preferencia tiene el "init point" que sería el checkout renderizado, el tema es que no permite abrirlo en popup self, en la misma pestaña a menos que hagas un , que no es nativo.

    • @hectormancilla892
      @hectormancilla892 7 місяців тому

      has podido? he intentado hasta en un pero me genera un error desconocido@@plagtthw

    • @onthecode
      @onthecode  6 місяців тому

      Buenas!! No se si entiendo bien a que se refieren.. Si lo que están buscando hacer es abrir el checkout en un popup o modal en la misma página de su sitio acá hice un vídeo para mostrar cómo hacerlo ua-cam.com/video/1CUGrPL7Yuo/v-deo.htmlsi=Zkxx4CTI7YlW6XDs

  • @williamshung7553
    @williamshung7553 20 днів тому

    Gran video, solo quiero hacerte una consulta si tengo varios productos como hago la parte de orderData. Si pudieras ayudarme con eso soy nuevo en todo esto y no se como hacer esa parte. Gracias

  • @blancaortuzar5147
    @blancaortuzar5147 3 місяці тому

    Amigo, eres lo mejor. Me salvaste.

  • @BrandonMartinezGonzalez-nj9id
    @BrandonMartinezGonzalez-nj9id 6 місяців тому +1

    Hola, todo me funcionó bien pero tengo una duda, me gustaría saber cómo podría hacerle para que el precio no sea fijo, que lo saque con alguna variable o input desde el Index.html y que salga ese nuevo precio al momento de realizar la compra

    • @onthecode
      @onthecode  6 місяців тому +1

      Hay que pasarle la variable con el total de tu compra en el lugar donde va el total de la preferencia! Pero eso ya no tiene nada que ver con mercado pago. Es con puro javascript!

  • @teclag5483
    @teclag5483 24 дні тому

    Pregunta de principiante jaja estoy tratando de juntar info sobre estas pasarelas de pago, sabras de que manera se puede implementar algo como tiene pedidos ya? donde no tenga que abrir una pagina nueva o cambiar el aspecto de mi pagina web para poder realizar el pago? Muchas gracias!!

  • @jonathanestigarribia2628
    @jonathanestigarribia2628 3 місяці тому

    de 10 bro me andubo perfecto te consulto para integrar comisiones por venta se puede para separar en (dueño de latienda)-(costode plataforma)-(vendedor)

  • @franuncal
    @franuncal 5 місяців тому

    Genio! muchisimas gracias por tu aporte! excelente calidad de video! Funciono perfectamente todo, pero queria consultarte, en caso de querer agregar el boton de mercado pago a varias card de una web, cual seria la modificacion? ya que el wallet conteiner solo abarca una opcion en tu ejemplo. Desde ya muchas gracias!! Saludos!

  • @carliii5908
    @carliii5908 7 місяців тому

    Muy util tu video muchas gracias por la ayuda

  • @ale-_g4m3r92
    @ale-_g4m3r92 4 місяці тому

    Hola! Lo estamos intentando en un proyecto de spring pero independientemente de eso, ya de por si las primeras 3 lineas de codigo donde se setea el token, al querer ejecutarse esas sentencias me devuelve un error 400 Bad Request, Error Params, pero no encuentro especificaciones de por que sucede esto, el codigo esta bien escrito porque ya probe cambiandolo una y otra vez pero no logro solucionar este inconveniente en el front, alguna ayuda?

  • @quit0s
    @quit0s 4 місяці тому

    que animal! muchas gracias 😘😘😘😘

  • @GriffithGuzman-kf7ff
    @GriffithGuzman-kf7ff 5 місяців тому

    muy bueno tu video bro gracias

  • @hectormancilla892
    @hectormancilla892 7 місяців тому

    Excelente video!!! Tengo una duda, ya que el DC de mercado pago es muuuy lento y no lo puedo usar desde el pc del trabajo. Hay alguna manera que no renderice el botón. sino que redirija inmediatamente a MP?

  • @Moringa.T.V
    @Moringa.T.V 5 місяців тому

    Hola, buen video! Queria saber como hago para poner el proyecto completo online para que cualquiera pueda hacer la compra?

  • @renzocostamagna2591
    @renzocostamagna2591 8 днів тому

    Se puede extraer el link que viene dentro del json? Lo necesito para enviarlo en un mensaje, ya que estoy programando un chatbot

  • @ekelleal3422
    @ekelleal3422 9 місяців тому

    Hala @onthecode quiero agracer tu turorial, me funciono perfectamente... tenes algun tutorial para produccion ... ???? bueno mil gracias.

    • @onthecode
      @onthecode  9 місяців тому

      Para producción hay que colocar las credenciales de producción y hacer el un deploy! Saludos!

  • @slthillm4tik400
    @slthillm4tik400 7 місяців тому

    Buenas buen video hrmno, tengo una consulta si es que me la podrías responder la key que está en el front esa no debería estar expuesta ahí?, se supone que todo es del backend en el JS el script del front.
    Digo esto para prevenir ataques , vale Washo gracias

  • @FabianLopez-fx9iz
    @FabianLopez-fx9iz 5 місяців тому

    Hola @onthecode , mucha gracias por todo el tutorial eres un crack, me salta el mensaje de error del catch de la pagina app.js cuando se ejecuta el evento de click del boton , nose si me podrias contactar y ver la posibilidad de ayuda o el codigo funcional, obvio haciendo el aporte $ que mencionabas

  • @joaquinallejo
    @joaquinallejo 9 місяців тому +1

    amigo tengo una duda para implementarlo en el carrito de compras se tendria que cambiar mas el codigo o es el mismo? vengo del video del la implementacion de mercado pago en el carrito y tiene la version 1.8.5

  • @maromdq
    @maromdq 4 місяці тому

    Hola!
    Hay alguna forma de abrir la aplicacion a travez de algun link?
    Yo tengo una webapp que me gustaria que atravez de un boton se abra mercadopago para que el usuario(comprador) pueda pagarle a un vendedor(que no soy yo)

  • @VelMont_Pab
    @VelMont_Pab 5 місяців тому

    no me salio che , sabes que no me creaba el boton de mercado pago el id esta bien no se que pero algo me perdi voy a hacerlo de "cero" ,el video esta buenisimo (por eso no me rindo me va a funcionar a como de lugar)

  • @alberthpantoja4106
    @alberthpantoja4106 Місяць тому

    Me salvaste la vida

  • @migueleduardofernandezsevi3538
    @migueleduardofernandezsevi3538 7 місяців тому

    hermano, eres un angel caido del cielo. Una consulta, que cambiaría para mandarlo a producción?

    • @onthecode
      @onthecode  7 місяців тому

      utiliza credenciales de producción y deployalo con un servicio que soporte backend. El accessToken tenes que tenerlo protegido.

  • @av-explorations
    @av-explorations 3 місяці тому

    Genial el tutorial, muchas gracias. se puede implementar este método desde una aplicacion de sveltekit hosteada en vercel?

    • @onthecode
      @onthecode  3 місяці тому

      Gracias! Seguramente que si, solo hay que intentarlo :)

  • @victorcordoba5892
    @victorcordoba5892 4 місяці тому

    Hola podrías intentar hacer una integración con suscripción por favor

  • @ignaciogomez4009
    @ignaciogomez4009 6 місяців тому

    muchas gracias loco!!

  • @matiasbcam
    @matiasbcam 8 місяців тому

    Buenas! excelente tutorial, me salio a perfección. Pero al momento de subirlo a firebase hosting tuve problemas con el server, es posible subirlo y que funcione sin tener que actualizar a la versión Blaze de firebase ?

  • @asistivideos
    @asistivideos 6 місяців тому

    Buenas, quería hacer una consulta. Hay forma de evadir la creación del botón y todo ese proceso enviando simplemente un link a la sección donde se concreta el pago?

  • @cristiancamilosanchezardil9730
    @cristiancamilosanchezardil9730 3 місяці тому +1

    Mira que hace dos semanas el sandbox presenta bug con las tarjetas de prueba, a ti te pasa?

    • @tedesco888
      @tedesco888 2 місяці тому +1

      A mi me pasa, no logro testear correctamente.

    • @cristiancamilosanchezardil9730
      @cristiancamilosanchezardil9730 2 місяці тому

      @@tedesco888 sabes que me funcionó cuando le puse ssl , utiliza el ssl de vscode para exponer el puerto local con ssl y verás que te funciona el checkout de MercadoPago y utilizas la tarjetas de prueba

  • @eliasprieto2516
    @eliasprieto2516 9 місяців тому

    Ya me funcionó, locuraa 👌👌

  • @huevoni2
    @huevoni2 4 місяці тому +1

    Gracias por tu aporte genioooo! Tengo un problema y es que cuando intento hacer el pago con cuentas de prueba, me dice que el pago lo estoy queriendo realizar con una cuenta de prueba.... no se termina cerrando la operación. Si lo hago con tarjetas de crédito o debito de prueba si funciona. Use credenciales de prueba de otra cuenta y también me da el mismo mensaje. Alguna idea? Para el back estoy usando el token de prueba tambien....

    • @onthecode
      @onthecode  4 місяці тому +2

      Hola! Hay que poner mucha atención al momento de utilizar credenciales. Al hacer pruebas con cuantas de mercado pago. Tenes que usar credenciales de la cuanta ficticia de vendedor y hacer el pago logeado con cuanta ficticia de comprador.

    • @maxigherra4501
      @maxigherra4501 7 днів тому

      @@onthecode Hola, me pasa lo mismo, use las credenciales de la cuenta de prueba de vendedor y quiero pagar con la cuenta de prueba de comprador y me da error al usar tarjetas de pruebas.
      Otra cosa que me pasa es que no me aparece entorno sandbox, alguan idea de que estoy haciendo mal?

  • @gaby_developer3126
    @gaby_developer3126 11 днів тому

    hola crack muy bueno pero decis q lo haces para la comunidad gratis y todos los links q veo son para depositarte $$, y el repositorio no lo dejaste? me perdi algo en el codigo no lo pude seguir, pero bueno ojala cambie esta bueno el contenido. saludos

    • @onthecode
      @onthecode  10 днів тому

      Hola, el contenido es público y cualquiera puede acceder. A mí me cuesta mucho trabajo, prueba, error, esfuerzo y tiempo crear este contenido. Aquellas personas que puedan y valoren esto pueden apoyarme con una donación, y yo a cambio les envío el código que se ve en el video. De esa forma nos apoyamos mutuamente y me ayudan a seguir creando este tipo de contenido. También te invito a que veas otros contenidos del canal y le des clic a los links que comparto. Ahí vas a encontrar artículos en mi blog con códigos y comentarios, códigos en mi GitHub, sin necesidad de hacer una donación si no está a tu alcance. Saludos.

  • @josemaldonado8945
    @josemaldonado8945 9 місяців тому

    Hola amigo muy buen video, muchas gracias por tu colaboración a la comunidad. tengo un error de referencia en el front-end en el archivo app.js ReferenceError: MercadoPago is not defined
    at app.js:1:12

    • @onthecode
      @onthecode  9 місяців тому

      Gracias! Estás seguro de haber linkeado bien el link del sdk de mercado Pago en el HTML? Además de haberlo instalado en el backend..

    • @dinfortdaeimportaciones.5708
      @dinfortdaeimportaciones.5708 7 місяців тому

      @@onthecode que tal ! a mi no me aparece el boton

  • @agustingurvich8066
    @agustingurvich8066 6 місяців тому

    Sos un tipzao chabon

  • @martinoli5389
    @martinoli5389 8 місяців тому

    buenas! Gracias por hacer estos videos. Te consulto: puedo actuar como intermediario entre un vendedor y un comprador y cobrar comision? Entiendo que es completar los campos "marketplace" y "marketplace_fee" en la Preferencia, pero no encuentro por ningún lado como obtener ese valor. Si alguien sabe se agradece!

  • @kevindelgado9933
    @kevindelgado9933 7 місяців тому

    No me funciona, segui al pie de la letra, pero el boton pagar me retorna un error, ReferenceError: Cannot access 'preference' before initialization at HTMLButtonElement.
    que puedo hacer?

    • @martinalonso5939
      @martinalonso5939 7 місяців тому

      tiene pinta de que estas intentando acceder al valor de preference antes de que se inicialize, fijate de no tenerlo inicializado mas abajo de donde lo llamas

    • @dinfortdaeimportaciones.5708
      @dinfortdaeimportaciones.5708 7 місяців тому

      @@martinalonso5939 a mi no me aparece el boton

  • @Rockoonesong
    @Rockoonesong 8 місяців тому

    Hola amigo, muchas gracias por tu aporte, sabrías como aplicarlo en java con el Framework Spring? es que realmente no eh encontrado a ninguno que lo pueda explicar de la manera tan simplificada y didáctica como lo explicas vos. Estoy intentando adaptar todo lo que estas haciendo a mi lenguaje pero hay cosas que se complican, desde ya muchas gracias!

    • @onthecode
      @onthecode  8 місяців тому +1

      Hola! No puedo ayudarte en esa.. no programo en Java! Saludos!

    • @Rockoonesong
      @Rockoonesong 8 місяців тому

      @@onthecode amigo, eh logrado aplicarlo en java después de mucho esfuerzo adaptando tu código con el mio, muchas gracias bro. Me has motivado a hacer un video como el tuyo para ayudar a los compas del team java jaja

  • @Agustrader
    @Agustrader 7 місяців тому

    Uf rey me salvaste jajaja🫂

  • @jonygabriiel
    @jonygabriiel 5 місяців тому +1

    Buenas, tuve un error al momento de terminar el pago.
    Me dice "Oh, no, algo anduvo mal."
    Probe salir de mi cuenta y todo, abrirlo desde otro navegador y tal
    pero nop, no funciona.
    Tendrias alguna ayudita?

    • @maxigherra4501
      @maxigherra4501 7 днів тому

      Me pasa lo mismo, pudiste solucionarlo?

  • @eluruguayotv8987
    @eluruguayotv8987 7 місяців тому

    hola, el codigo me funciono, pero el tema ahora es que cuando añado los otros productos que tengo, y le doy en comprar aparecen varios mercadopago, como puedo solucionar eso? gracias

    • @onthecode
      @onthecode  7 місяців тому

      Eso parece ser un tema mas relacionado a como estas encarando la construccion de tu tienda con javascript y no tanto a como estas integrando mercadopago.

  • @Josedld7
    @Josedld7 7 місяців тому

    Se puede usar sin crear backend?

  • @mircodalmasso5727
    @mircodalmasso5727 7 місяців тому

    bro como estas segui todos los pasos a la perfección y cuando presiono el botón de finalizar pago en mi pagina web me tira lo q puse en el catch en mi caso una alerta de SWEET ALERT

    • @martinalonso5939
      @martinalonso5939 7 місяців тому

      trata de poner console.log en diferentes secciones del codigo para ver bien donde es que falla el codigo y ver q pieza es la que esta trancando todo, tanto en el back como en el front

  • @sinthiagonzalez9407
    @sinthiagonzalez9407 8 місяців тому

    como obtenes los distintos estado del pago para guardarlos en la base de datos?

  • @Sanmed04
    @Sanmed04 7 місяців тому

    Hola amigo, consulta, cuando finalizo el pago me sale que Algo salio mal... Que no se pudo procesar el pago, alguna idea de que puede estar sucediendo

    • @onthecode
      @onthecode  7 місяців тому

      Si! hay que ser cuidadoso con las credenciales a la hora de testear. 1) Si probas pagos con tarjeta, deja tus credenciales de prueba y asegurate de no estar logeado a ninguna cuenta de Mercado Pago en el navegador. 2) Si probas con cuentas de mercado Mercado Pago, asegurate de tener credenciales de produccion del usuario de prueba vendedor y estar logeado en el navegador con un usuario de prueba de comprador.

  • @AgustinMoyaca
    @AgustinMoyaca 8 місяців тому

    Hola tenes idea como poder obtener luego el nombre y email que puso para realizar el pago? necesito activar la cuenta del usuario, y no se como obtener esos datos o el paymentID de ahi podre obtenerlo?

    • @onthecode
      @onthecode  8 місяців тому +1

      hola, tenes que utilizar una notification_url y webhooks

  • @alberparavel9350
    @alberparavel9350 9 місяців тому

    o botão do mercado pago não está aparecendo :/

    • @martinalonso5939
      @martinalonso5939 7 місяців тому

      Tente fazer console.log() em seções diferentes para ver onde surge o problema, faça tanto atrás quanto na frente, no meu caso aconteceu a mesma coisa comigo e descobri que eu tinha o script mercadopago vinculado errado

  • @eliasprieto2516
    @eliasprieto2516 9 місяців тому

    Me aparece cuando apreto el boton de mercado pago Algo salió mal...
    No podés pagarte a vos mismo.

    • @ayrtoncravero
      @ayrtoncravero 8 місяців тому

      Buenas tardes! Tenes que cerrar sesión de tu cuenta de MP y entrar con la del ususuario comprador de prueba, o ninguna cuenta abierta y pagar con tarjeta

    • @migueleduardofernandezsevi3538
      @migueleduardofernandezsevi3538 7 місяців тому

      Te funcionó?

    • @ayrtoncravero
      @ayrtoncravero 7 місяців тому

      @@migueleduardofernandezsevi3538 buenas tardes, si tenés el mismo problema, probá hacerlo desde incógnito, o asegúrate de cerrar tu cuenta de Mercado pago

  • @danielgeronimo5891
    @danielgeronimo5891 9 місяців тому

    hola amigo disculpa mi ignorancia, para que serviria esto?

    • @martinalonso5939
      @martinalonso5939 7 місяців тому

      para hacer un pago con dinero real en un ecommerce por ejemplo

  • @coracaopiratta
    @coracaopiratta 4 місяці тому

    Deu certo, a pergunta é subindo o site usa esses mesmo codigo?

    • @onthecode
      @onthecode  4 місяці тому

      Si, el mismo código con credenciales de producción.

    • @coracaopiratta
      @coracaopiratta 2 місяці тому

      Amigo mais como um outro usuario vai usar sem que precise iniciar o server?​@@onthecode

    • @coracaopiratta
      @coracaopiratta 2 місяці тому

      Um exemplo de codigo eu tenho um mini site no guithub​@@onthecode

  • @amb7399
    @amb7399 6 місяців тому

    Alguno pudo implementar esto en angular??

    • @jhoanc7782
      @jhoanc7782 6 місяців тому

      apenas voy a empezar. como le fue a usted?

    • @danielgiacinto
      @danielgiacinto 5 місяців тому

      Yo lo pude hacer

  • @alexisgraff2049
    @alexisgraff2049 7 місяців тому

    Crack

    • @onthecode
      @onthecode  7 місяців тому

      Alexis! Espero que andes bien y que estés programando a pleno, Abrazo!

  • @dlcanegro753
    @dlcanegro753 7 місяців тому

    💯💯💯💯💯💯💯

  • @ignaciomatiasdiaz9710
    @ignaciomatiasdiaz9710 7 місяців тому

    Aguante en el codigo