El comercio electrónico en Colombia no para de crecer. Cada vez más colombianos se animan a pagar por internet, ya sea pidiendo un domicilio, comprando artesanías o contratando servicios. Sin embargo, muchos emprendedores y pequeños negocios todavía dependen del "transferiré por Nequi o Daviplata" o del pago contra entrega, métodos que ralentizan las ventas y, muchas veces, te hacen perder clientes por la falta de confianza o comodidad.
Para echar tu negocio hacia adelante, necesitas automatizar el cobro. Y la buena noticia es que no tienes que construir un banco desde cero. Existen pasarelas de pago colombianas, como Wompi, que te permiten aceptar tarjetas de crédito, débito, PSE y pagos con Nequi o Ahorro a la Mano directamente en tu web. En este tutorial técnico, te enseñaremos cómo integrar Wompi en tu sitio de forma práctica.
¿Por qué elegir Wompi para tu pyme?
Wompi es una pasarela de pago muy popular en Colombia porque se adapta a los hábitos de pago de los locales. Permite a tus clientes pagar con los métodos que ya usan a diario. Además, su integración es relativamente sencilla y no requiere que tengas un código de comercio complejo si estás empezando; puedes usar su modo de prueba (sandbox) para desarrollar tu sistema sin arriesgar un solo peso.
Paso 1: Registrándote y obteniendo tus credenciales
Lo primero es crear una cuenta en Wompi. Una vez registrado, entra al panel de control y busca la sección de "Configuración" o "Llaves". Allí encontrarás dos llaves非常重要的:
- Llave pública (Public Key): Empieza por
pub_test_...en modo prueba. Se usa en el frontend (tu página web). - Llave privada (Private Key): Empieza por
prv_test_.... Se usa en el backend (tu servidor) para crear las transacciones de forma segura.
Importante: Nunca expongas tu llave privada en el código de tu página web (frontend). Si alguien la obtiene, podría generar cobros a tu nombre.
Paso 2: Crear la sesión de pago desde tu servidor (Node.js)
Para que Wompi sepa a quién cobrarle y cuánto, necesitas generar una "sesión de pago" (checkout session) desde tu backend. Vamos a usar Node.js con Express para este ejemplo rápido.
Primero, instala axios para hacer peticiones HTTP:
npm install express axios corsLuego, crea un archivo server.js con el siguiente código:
const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
app.post('/crear-pago', async (req, res) => {
const { monto, referencia, nombreCliente, emailCliente } = req.body;
// Tu llave privada de pruebas
const privateKey = 'prv_test_tu_llave_privada_aqui';
try {
const response = await axios.post('https://sandbox.wompi.co/v1/transactions', {
amount_in_cents: monto * 100, // Wompi trabaja en centavos
currency: 'COP',
reference: referencia,
customer_email: emailCliente,
payment_method: {
type: 'NEQUI'
},
redirect_url: 'https://tu-sitio-web.com/gracias'
}, {
headers: {
'Authorization': `Bearer ${privateKey}`,
'Content-Type': 'application/json'
}
});
// Devolvemos el enlace de pago al frontend
res.json({
url_pago: response.data.data.checkout_url
});
} catch (error) {
console.error(error.response ? error.response.data : error.message);
res.status(500).json({ error: 'Error al crear el pago' });
}
});
app.listen(3000, () => console.log('Servidor corriendo en puerto 3000'));Aquí hay un detalle clave: Wompi maneja los montos en centavos. Si quieres cobrar $50,000 COP, debes enviar 5000000. Recuerda siempre multiplicar por 100 el valor que ingrese el usuario.
Paso 3: Integrar el botón en tu página web (Frontend)
Ahora que tenemos nuestro backend listo, vamos a crear una página HTML sencilla con un botón de compra. Cuando el cliente haga clic, haremos una petición a nuestro servidor para obtener el enlace de pago y lo redirigiremos a Wompi.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Tienda Local</title>
</head>
<body>
<h2>Producto: Artesanía de Madera</h2>
<p>Precio: $50,000 COP</p>
<button id="btnPagar">Pagar con Wompi</button>
<script>
document.getElementById('btnPagar').addEventListener('click', async () => {
const datosPago = {
monto: 50000, // 50,000 COP
referencia: 'ARTESANIA-' + Date.now(),
nombreCliente: 'Cliente Prueba',
emailCliente: 'cliente@correo.com'
};
try {
// Llamamos a nuestro backend
const response = await fetch('http://localhost:3000/crear-pago', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(datosPago)
});
const data = await response.json();
// Redirigimos al checkout de Wompi
if (data.url_pago) {
window.location.href = data.url_pago;
} else {
alert('Hubo un error al generar el pago.');
}
} catch (error) {
console.error('Error:', error);
}
});
</script>
</body>
</html>Al hacer clic en el botón, el cliente será llevado a la página segura de Wompi para completar la transacción. Una vez pagado, Wompi lo redirigirá a la URL que pusiste en redirect_url (por ejemplo, tu página de "Gracias por tu compra").
Paso 4: Verificando el pago (Webhooks)
No confíes solo en el botón de "volver a la tienda". A veces el cliente cierra la ventana antes de volver. Para confirmar que el pago fue exitoso, debes configurar un Webhook en el panel de Wompi. Un webhook es una URL en tu servidor a la que Wompi enviará un mensaje automático cuando el pago se apruebe.
En tu server.js, añade una ruta para recibir estas notificaciones:
app.post('/webhook-wompi', (req, res) => {
const evento = req.body;
if (evento.event === 'transaction.updated') {
const transaction = evento.data.transaction;
if (transaction.status === 'APPROVED') {
console.log(`Pago aprobado para la referencia: ${transaction.reference}`);
// Aquí actualizas tu base de datos y envías el pedido
}
}
// Siempre responde con 200 OK para que Wompi sepa que recibiste el aviso
res.status(200).send('OK');
});Configura esta URL (https://tu-servidor.com/webhook-wompi) en la sección de "Webhooks" de tu panel de Wompi. Es la forma profesional y segura de actualizar tu inventario o activar un servicio automáticamente.
Consejos prácticos para evitar problemas
- Prueba en Sandbox: Antes de lanzar tu web, usa tarjetas de crédito de prueba que Wompi te proporciona. Nunca publiques tu sitio con llaves de prueba (
pub_test). - Manejo de referencias únicas: Cada transacción debe tener una referencia única (como usamos
Date.now()). Wompi rechazará referencias duplicadas. - Claridad en los redirecciones: Asegúrate de que tu página de "gracias" le dé instrucciones claras al cliente sobre qué esperar (ej. "te llegará un correo con la guía de envío").
Conclusión
Integrar una pasarela de pagos como Wompi puede parecer intimidante al principio, pero viendo el código te das cuenta de que es solo conectar las piezas correctas. Automatizar tus cobros no solo te ahorra dolores de cabeza administrativos, sino que transmite profesionalismo y confianza a tus clientes colombianos.
Si tu negocio está creciendo y necesitas una plataforma de e-commerce más robusta, una app móvil o un software a medida que gestione inventario, ventas y facturación electrónica de forma integrada, no tienes que hacerlo solo. En Camilincanins Company nos apasiona ayudar a los emprendedores colombianos a dar el salto tecnológico. Hablemos sobre tu proyecto y construyamos juntos la solución perfecta para tu pyme.