Video summary

Guía Completa: Cómo Integrar Mercado Pago con HTML y JavaScript

Main summary

Key takeaways

Product Review

Product/Service reviewed

Mercado Pago integration for web checkout using:

  • Front-end: HTML/CSS/JavaScript
  • Back-end: Node/Express
  • Optionally mediated by Vexor (checkout wrapper)
  • Relying on Mercado Pago “Checkout Pro” / preferences plus webhooks

Key points (unique)

1) Checkout flow (what the user experiences)

  1. The user goes through a shopping cart.
  2. They click “Process to Checkout”.
  3. They are redirected to Mercado Pago to enter card details.
  4. The presenter notes the user does not need to format card data in your app—Mercado Pago handles the input flow.
  5. After payment, proper handling should be done via webhooks to avoid users getting stuck on the same screen.

2) Backend-first payment creation

  • A backend is required to run Mercado Pago logic.
  • The front-end triggers a request using a button ID (e.g., process checkout) and passes product details.
  • The backend then performs “create payment / create preference” and returns a checkout/payment URL for redirection.

3) Mandatory product fields for Mercado Pago

Mercado Pago requires product properties such as:

  • title
  • unit price
  • quantity

Additional fields may exist, but these are emphasized as absolutely required.

4) Asynchronous calls

  • The example uses an async function pattern to create payment preferences and retrieve the URL/response.

5) HTTP communication pattern

  • Front-end → backend: POST request to create the payment object.
  • It mentions potential options like GET/localStorage for obtaining product/checkout IDs depending on setup.
  • The backend endpoint typically corresponds to “create payment.”

6) Local development & environment considerations

  • Example uses LocalHost port 3000 for the backend (must change for production).
  • The checkout depends on a running backend server—if the backend is down, checkout fails.

7) Dependencies required (backend)

Backend packages mentioned include:

  • Express
  • CORS
  • Vexor
  • dotenv (DM / env vars) (as referenced)
  • The integration expects JSON parsing middleware (e.g., Express JSON middleware)

8) Vexor as an integration helper

  • The video claims direct Mercado Pago implementation can be complicated.
  • Vexor is recommended to simplify checkout creation.
  • Vexor supports multiple providers (examples mentioned: Stripe, PayPal, Mercado Pago), where the code changes mainly by selecting the provider.

9) Vexor configuration details

A Vexor instance is created using keys/identifiers such as:

  • publish key
  • project ID
  • access/secret/API key (referred to as “secret” / “apt key” in subtitles)

The presenter points viewers to Vexor documentation and the specific provider checkout setup.

10) Credentials & test vs production

  • The flow includes:
    • Test credentials (sandbox) first
    • then switching to production credentials
  • It notes that some “old” docs/test credential sections may not apply; viewers should use the current flow.

11) Good practices emphasized

  • Show a processing/loading banner so users aren’t confused.
  • Use webhooks to redirect/handle accepted/rejected payment states rather than leaving users stuck.
  • Keep HTML structure and script placement aligned with best practices (as suggested by the video).

12) User testing tip

  • If using the same Mercado Pago account, actions may be blocked (example mentioned: “you can’t pay yourself”).
  • Recommendation: test via incognito or a second account.

13) Difficulty level

  • Overall described as medium-high difficulty.

Pros (as presented)

  • Straightforward user experience: redirect to Mercado Pago, user enters card details there.
  • Backend validations handle critical checks.
  • Vexor simplifies integration, reducing complexity vs implementing Mercado Pago “raw.”
  • Webhooks improve reliability for post-payment handling.
  • Reusable, scalable structure: map product data to required Mercado Pago fields.

Cons / Challenges (as presented)

  • Medium-high implementation complexity.
  • Requires a working backend server and correct environment setup (ports/endpoints).
  • Must ensure correct credentials (sandbox vs production) and correct provider selection in Vexor.
  • Without proper state handling (loading + webhooks), users can get stuck after accept/reject.

Comparisons made

  • Alternatives mentioned:
    • Stripe and PayPal can be integrated similarly via Vexor.
    • The video claims PayPal is very good and similarly easy to use (in the wrapper/integration sense).
  • Vexor is presented as supporting:
    • checkout
    • subscriptions
    • customer portal
    • webhooks
    • marketplace/payment capture

Overall recommendation / verdict

Recommended if you need Mercado Pago web checkout and want a workable integration approach—expect medium-high difficulty due to backend requirements, credentials, and webhook/state handling. Using Vexor is portrayed as the best way to reduce complexity and speed up implementing Mercado Pago Checkout Pro.

Speakers / perspective notes

  • A single presenter walks through the integration steps:
    • front-end button → backend create payment → redirect to Mercado Pago
  • Includes practical testing tips and “good practices.”

Original video