Cómo integrar pagos con PayPal y Mercado Pago en tu web (ejemplos reales)

Aceptar pagos en línea de forma segura y simple es clave para hacer crecer tu negocio. En esta guía verás dos caminos para integrar PayPal y Mercado Pago: con WooCommerce (rápido y sin código) y con implementación personalizada (ideal para apps o sitios a medida).

Opción A — Integración con WooCommerce (sin código)

1) PayPal en WooCommerce

1. Instala y activa el plugin WooCommerce PayPal Payments.
2. Ve a WooCommerce > Ajustes > Pagos > PayPal y conecta tu cuenta (modo Sandbox para pruebas).
3. Habilita PayPal, Tarjeta con PayPal y, si quieres, Pay Later.
4. Prueba una compra con productos de prueba y verifica el pedido en WooCommerce > Pedidos.

2) Mercado Pago en WooCommerce

1. Instala Mercado Pago payments for WooCommerce.
2. En WooCommerce > Ajustes > Pagos, habilita los métodos: Checkout Pro (redirección) y/o Checkout Personalizado (tarjetas en tu sitio).
3. Agrega tus Access Token y Public Key (usa Sandbox para pruebas).
4. Configura notificaciones IPN/Webhooks para actualizar el estado de los pedidos automáticamente.

Ventajas WooCommerce: activación rápida, conciliación automática de pedidos, reembolsos desde el tablero, compatibilidad con cupones y envíos.

Opción B — Integración personalizada (React/Next.js, PHP o Node)

1) PayPal Checkout (Smart Buttons)

Front‑end básico para cobrar con PayPal vía SDK JS:

<!-- Carga del SDK (client-id de pruebas) -->
<script src="https://www.paypal.com/sdk/js?client-id=TEST_CLIENT_ID&currency=USD"></script>

<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
  createOrder: function(data, actions) {
    return actions.order.create({
      purchase_units: [{ amount: { value: "49.90" }, description: "Plan Premium" }]
    });
  },
  onApprove: function(data, actions) {
    return actions.order.capture().then(function(order) {
      // TODO: enviar order al backend para registrar pago
      console.log("Pago capturado", order.id);
    });
  },
  onError: function(err) { console.error(err); }
}).render("#paypal-button-container");
</script>

Webhook de PayPal (Node/Express)

import express from "express";
const app = express();
app.use(express.json());

app.post("/webhooks/paypal", (req, res) => {
  // TODO: validar firma (PayPal transmission id/timestamp/cert)
  const event = req.body; // sale.complete, payment.capture.completed, etc.
  // Actualiza tu pedido en DB según event.resource.status
  res.sendStatus(200);
});

app.listen(3000);

2) Mercado Pago — Checkout Pro (redirección)

Creación de preferencia en el backend (Node/Express):

import express from "express";
import mercadopago from "mercadopago";
mercadopago.configure({ access_token: process.env.MP_ACCESS_TOKEN });

const app = express();
app.use(express.json());

app.post("/checkout", async (req, res) => {
  const preference = {
    items: [{ title: "Plan Premium", quantity: 1, currency_id: "PEN", unit_price: 49.90 }],
    back_urls: {
      success: "https://tu-dominio.com/gracias",
      failure: "https://tu-dominio.com/error",
      pending: "https://tu-dominio.com/pago-pendiente"
    },
    auto_return: "approved",
    notification_url: "https://tu-api.com/webhooks/mercadopago"
  };
  const result = await mercadopago.preferences.create(preference);
  res.json({ init_point: result.body.init_point });
});

app.post("/webhooks/mercadopago", (req, res) => {
  // Valida el evento y consulta el pago para estado definitivo
  // Actualiza tu pedido en DB (approved, pending, rejected)
  res.sendStatus(200);
});

app.listen(3000);

3) Mercado Pago — Checkout personalizado (tarjetas en tu sitio)

En el front‑end cargas el SDK JS y tokenizas la tarjeta (evitas tocar datos sensibles en tu servidor):

<script src="https://sdk.mercadopago.com/js/v2"></script>
<form id="pay-form">
  <input type="text" id="cardNumber" data-checkout="cardNumber" placeholder="Número de tarjeta" />
  <input type="text" id="cardholderName" data-checkout="cardholderName" placeholder="Titular" />
  <!-- más campos: vencimiento, CVV, docType, docNumber -->
  <button type="submit">Pagar</button>
</form>

<script>
const mp = new MercadoPago("PUBLIC_KEY");
const form = document.getElementById("pay-form");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  // tokeniza tarjeta
  const token = await mp.fields.createCardToken({ /* mapear campos */ });
  // envía el token a tu backend para crear el pago
  const res = await fetch("/api/mp/charge", {
    method: "POST", headers: {"Content-Type":"application/json"},
    body: JSON.stringify({ token, amount: 49.90, description: "Plan Premium" })
  });
});
</script>

Backend que crea el pago (Node)

app.post("/api/mp/charge", async (req, res) => {
  const { token, amount, description } = req.body;
  const payment = await mercadopago.payment.create({
    transaction_amount: Number(amount),
    token,
    description,
    installments: 1,
    payer: { email: "cliente@correo.com" }
  });
  res.json(payment.body);
});

Buenas prácticas para cobrar online

• Sandbox primero: prueba con usuarios y tarjetas de test.
• Webhooks obligatorios: el estado final del pago lo dicta el proveedor, no el front‑end.
• Moneda e impuestos: define PEN/USD, IGV y fees esperados.
• PCI y seguridad: nunca guardes tarjetas en tu servidor; usa tokenización.
• UX de pago clara: resúmenes, monto final, políticas de reembolso y comprobante.
• Logs y conciliación: registra orderId, paymentId, status y amount para auditoría.

Errores comunes y cómo evitarlos

• No validar webhooks: puede marcar pagos como aprobados sin confirmación. Solución: valida firma (PayPal) o consulta el pago (Mercado Pago) antes de actualizar el pedido.
• Redirecciones incorrectas: URLs de éxito/falla mal configuradas. Solución: usa dominios definitivos y prueba en staging.
• Duplicidad de pedidos: reintentos del cliente o del servidor. Solución: idempotencia (usa un order_key único).

Conclusión

Con WooCommerce puedes habilitar PayPal y Mercado Pago en minutos. Si tu proyecto es a medida, el enfoque de SDK + Webhooks te da control total sobre la experiencia y los flujos de post‑pago. Aplica las buenas prácticas de seguridad y pruebas para lograr cobros confiables y escalables.

👉 ¿Quieres que dejemos tu pasarela de pago funcionando (WooCommerce o integración a medida)?
Solicítalo aquí.