Portal de commerce B2B: punchout, precios escalonados y pedido rápido en el frontend

Una tienda online B2B no es una tienda B2C con un inicio de sesión de empresa añadido encima. Si diriges una operación de fabricación, mayorista o de distribución, conoces los requisitos reales: una compra dentro de una organización cliente tiene límites presupuestarios, flujos de aprobación y asignaciones de centro de coste. El catálogo es distinto para cada cliente. Los precios se negocian, se escalonan o vienen directamente del ERP. Y una parte significativa de los pedidos no llega de forma manual, llega vía punchout desde el sistema de compras del cliente.

Estos requisitos no se pueden cubrir de forma limpia con un frontend de storefront estándar. Pero tampoco exigen un proyecto de desarrollo a medida de varios años. Este artículo explica cómo implementar los tres componentes más críticos del proceso de compra B2B, punchout, precios escalonados y pedido rápido, como una capa de frontend sobre tu backend existente.

Todos los componentes descritos aquí están incluidos en el Laioutr B2B Growth Kit, un set de UI completo que puedes colocar sobre tu stack existente.

Qué diferencia al commerce B2B de los requisitos de frontend B2C

En una tienda B2C, una persona decide, añade al carrito y paga. En B2B, varios procesos corren en paralelo:

• Varios compradores comparten una organización cliente con roles distintos
• Los precios vienen de tablas de condiciones del ERP, no de un sistema unificado de listas de precios
• Los pedidos por encima de cierto importe necesitan aprobación antes de poder cursarse
• Los compradores trabajan con sistemas de compras (SAP Ariba, Coupa, Jaggaer) que se conectan a la tienda vía punchout
• Las grandes cuentas repiten pedidos de los mismos artículos en grandes cantidades de forma periódica

Un frontend que ignora esta realidad obliga a soluciones improvisadas: presupuestos en PDF por email, llamadas de teléfono para consultar precios, exportaciones manuales del ERP. Cada apaño cuesta tiempo de gestión de tu lado y fricción del lado de tu cliente.

El enfoque de Laioutr como Frontend Management Platform (FMP) es distinto: la capa de frontend está desacoplada del backend y cubre la lógica B2B mediante componentes configurables, mientras que el backend, ya sea SAP, Shopware, commercetools u OXID, permanece sin cambios.

Punchout (OCI/cXML): el canal B2B invisible

Qué es el punchout y por qué falta tantas veces

Punchout significa: el comprador de la empresa cliente sale de su sistema de compras (por ejemplo, SAP Ariba), hace "punch out" hacia tu tienda, llena allí su carrito, y el carrito se transfiere de vuelta al sistema de compras como documento electrónico. El pedido pasa entonces por el proceso de aprobación de la empresa cliente antes de llegar a tu lado como pedido confirmado.

OCI (Open Catalog Interface) es el estándar de SAP para esto. cXML es el estándar más abierto que usan Coupa y muchos otros sistemas.

Por qué se subestima el punchout como asunto de frontend

El punchout se trata con frecuencia como un tema de backend: integración con el ERP, formato de documento, protocolo. La parte de frontend se subestima. Pero desde la perspectiva del cliente, el flujo de punchout es enteramente una experiencia de frontend:

• El traspaso de sesión (identificación del cliente, datos de condiciones) debe evaluarse en el frontend
• El catálogo muestra solo los productos y precios acordados contractualmente para esa organización
• El botón "transferir carrito" es un elemento de UI que genera XML conforme a OCI o cXML y lo transfiere de vuelta al sistema de compras
• Los errores del flujo (sesión caducada, datos de condiciones incorrectos) aparecen como mensajes de error en el frontend

El B2B Growth Kit incluye componentes de punchout compatibles tanto con OCI como con cXML. La inicialización de sesión, el filtrado del catálogo por segmento de cliente y el proceso de transferencia están implementados como bloques configurables listos para usar, no necesitas implementar el protocolo por tu cuenta.

Qué necesitas del lado del backend para el punchout

El punchout requiere que tu backend:

• Devuelva condiciones específicas por cliente (precios, disponibilidad, segmentos de catálogo) vía API
• Autentique las sesiones de punchout mediante token o SAML
• Reciba y procese pedidos en formato cXML u OCI

Esto es normalmente responsabilidad del backend. Si tu tienda o tu ERP todavía no lo soportan, el punchout es un problema de backend, no de frontend. La capa de frontend solo puede representar lo que el backend proporciona.

Precios escalonados: cada cliente ve sus propias condiciones

La realidad detrás de los precios escalonados

"Precios escalonados" suena simple: de 1 a 9 unidades cuestan X por pieza, de 10 a 49 unidades cuestan Y por pieza. En la práctica es más complejo:

• Las condiciones a menudo vienen directamente del ERP (SAP Condition Records, Shopware Customer Groups, commercetools Price Selectors)
• El mismo artículo puede tener estructuras de escalado distintas según la organización cliente
• Algunas condiciones tienen límite temporal (descuentos de temporada, precios promocionales)
• El cambio entre neto y bruto debe funcionar correctamente, porque los compradores calculan en neto mientras que la tienda a veces muestra precios brutos

Un frontend de precios escalonados bien implementado:

1. Recupera las condiciones del cliente que ha iniciado sesión al cargar la página de detalle de producto
2. Muestra los escalones con claridad (umbrales de cantidad, precio unitario, precio total con la cantidad actual)
3. Actualiza la visualización del precio en tiempo real cuando cambia la cantidad introducida
4. Permite alternar entre neto y bruto

Integración técnica sin código de frontend a medida

Con la Laioutr Frontend Management Platform y el B2B Growth Kit, el componente de precios escalonados se conecta directamente a la API de precios de tu backend. Configuras qué campos de la API se corresponden con qué elementos de UI, el código del componente en sí no cambia. Esa es la diferencia frente a un desarrollo a medida, donde cada comportamiento específico del backend acaba convirtiéndose en nuevo código de frontend.

Y va más allá: el componente de precios escalonados vive en tu librería de UI. Una vez configurado, puedes reutilizarlo en todos los frontends de tus marcas y mercados sin volver a construirlo.

Qué suele salir mal

Dos problemas típicos de los frontends de precios escalonados:

• Los precios se cachean aunque sean específicos por cliente: otro comprador de la misma organización ve entonces condiciones incorrectas. Solución: no cachear nunca los precios a nivel de CDN, cargarlos siempre vía contexto de cliente.
• La cantidad introducida en el flujo de pedido rápido y la visualización de precios escalonados en la página de detalle de producto no están sincronizadas. Resultado: los compradores no ven información de escalado en el pedido rápido y piden una cantidad subóptima. Solución: poner el componente de precios escalonados también a disposición del contexto de pedido rápido.

Pedido rápido: grandes volúmenes en segundos

Quién necesita el pedido rápido

El pedido rápido es la funcionalidad diferenciadora más importante de una tienda B2B frente a una tienda de consumo. Quien repite pedidos de los mismos artículos con regularidad no quiere navegar por árboles de categorías cada vez. Pedido rápido significa: introducir un número de artículo o un EAN, introducir la cantidad, añadir al carrito. Listo.

Usuarios típicos: compradores en plantas de producción, responsables de almacén con listas de reposición fijas, gerentes de tienda que reponen artículos estándar.

Tres variantes en un mismo kit

El B2B Growth Kit incluye tres variantes de pedido rápido que llaman todas al mismo endpoint del backend:

1. Entrada por líneas: campos para número de artículo y cantidad, tantas filas como haga falta, "añadir todo al carrito" como una única acción. Ideal para compradores que se saben de memoria los IDs de artículo.

2. Subida de CSV: sube una exportación de hoja de cálculo desde Excel o desde tu propio ERP, la tienda reconoce automáticamente números de artículo y cantidades. Ideal para listas de pedido grandes desde la planta de producción.

3. Listas de pedido y plantillas de carrito: listas guardadas de pedidos anteriores como plantillas. Carga "Pedido mensual planta Hamburgo" con un clic y ajústalo. Ideal para pedidos estándar recurrentes.

Validación en el frontend

El pedido rápido no puede fallar en silencio. Si no se encuentra un número de artículo, si no se alcanza una cantidad mínima de pedido o si un artículo no está autorizado para esa organización cliente, esto tiene que ser visible y explicativo antes de que el comprador haga clic en "añadir al carrito".

Suena obvio, pero en los desarrollos a medida suele ser un arreglo posterior al lanzamiento. El B2B Growth Kit incluye desde el primer momento feedback de validación y estados de error para las tres variantes de pedido rápido.

Flujos de aprobación y solicitudes de presupuesto

Los procesos de compra B2B no terminan al hacer clic en "comprar". Dos flujos adicionales forman parte de un frontend completo:

Flujo de aprobación

Cuando un comprador crea un pedido por encima de un umbral presupuestario definido, este no sale de inmediato, sino que entra en un proceso de aprobación. En el frontend esto significa:

• El comprador crea el pedido y ve "Pendiente de aprobación"
• El aprobador recibe una notificación y ve las aprobaciones pendientes en su área de cuenta
• El aprobador aprueba o rechaza, con comentario opcional
• El comprador recibe una actualización de estado

El límite presupuestario y la estructura de aprobadores vienen de tu backend. La capa de frontend renderiza el flujo visible sin ser dueña de la lógica.

Solicitud de presupuesto (RFQ)

No todos los pedidos B2B se cierran a precio de tarifa. Para compras grandes puntuales o para productos nuevos hace falta un proceso de RFQ. En el frontend:

• El comprador añade artículos a un borrador de presupuesto (no a un carrito, sino a un presupuesto)
• Campo de comentarios para cantidad, entrega y expectativas de precio
• El presupuesto llega a tu equipo comercial, que responde con una oferta vinculante
• El comprador puede aceptar la oferta y convertirla en pedido

El B2B Growth Kit incluye ambos flujos como componentes listos para usar. Configuras la conexión con tu backend de workflow (ERP, OMS o simplemente una notificación por email) en Laioutr Studio.

Self-service como reducción de la carga de soporte

Cada pregunta que un comprador hace por teléfono o por email te cuesta tiempo de gestión. Funcionalidades típicas de self-service B2B que reducen esa carga:

• Historial de pedidos con estado de entrega y enlace de seguimiento
• Descarga de albarán y factura
• Solicitud de devolución (RMA) sin necesidad de llamar
• Pedidos recurrentes ("repetir este pedido")
• Persona de contacto con enlace de contacto directo

No son funcionalidades de comodidad. Determinan si tu equipo de atención al cliente gestiona 50 o 500 consultas B2B por semana.

Rendimiento y compliance integrados, no añadidos después

Los portales B2B corren a menudo sobre stacks heredados en los que el cumplimiento de WCAG y los Core Web Vitals se añadieron a posteriori. Eso cuesta tiempo y genera deuda técnica.

En el B2B Growth Kit, la confianza, el compliance y el rendimiento están integrados en todos los componentes como un aspecto transversal:

• WCAG 2.1 AA y listo para la BFSG desde el primer momento (sin retrofit de accesibilidad a posteriori)
• LCP mediano por debajo de 1,2 segundos en frontends en producción
• SEO y marcado Schema.org en páginas de producto y de categoría
• Multi-idioma y conforme al RGPD, alojado en la UE

FAQ: frontend de commerce B2B

¿Qué cambios de backend necesito para usar el B2B Growth Kit? El kit se sitúa como capa de frontend sobre tu stack existente. No necesitas cambios en el backend siempre que tu backend exponga las APIs necesarias (productos, precios, lógica de pedidos, datos de cliente). Lo que falta con frecuencia son las APIs de precios específicos por cliente, y eso es un asunto de backend, no de frontend.

¿Funciona el punchout con cXML si nuestras key accounts usan Coupa? Sí. Los componentes de punchout del B2B Growth Kit soportan tanto OCI (el estándar de SAP) como cXML. Qué estándares soporta tu backend en el lado receptor determina qué sistemas de compras se pueden conectar.

¿Podemos usar precios escalonados y punchout al mismo tiempo? Sí. En una sesión de punchout, las condiciones se cargan desde tu backend para el cliente correspondiente, incluidos los precios escalonados. El punchout y la visualización de precios escalonados usan la misma lógica de condiciones, solo que en un contexto de sesión distinto.

¿Cuánto suele durar la implementación? Un portal B2B completo con punchout, precios escalonados, pedido rápido y flujos de aprobación suele estar en producción en un plazo de 4 a 8 semanas, según la complejidad de las APIs del backend y el número de marcas y mercados.

¿Podemos añadir páginas nuevas después del lanzamiento inicial? Sí. Ese es uno de los beneficios centrales de la Laioutr Frontend Management Platform: tu equipo de marketing puede montar nuevas landing pages y secciones directamente en el editor, sin ticket para desarrollo. El B2B Growth Kit aporta la base de componentes.

Resumen: capa de frontend, no desarrollo a medida

Los portales de commerce B2B fracasan con frecuencia no porque falten funcionalidades, sino por el tiempo que cuesta construir y mantener esas funcionalidades. Cada requisito específico de B2B, punchout, precios escalonados, aprobaciones, acaba como código a medida que hay que mantener con cada actualización del backend.

La alternativa: un frontend composable con componentes B2B preconstruidos sobre tu stack existente. Sin replatforming, sin proyecto greenfield, sin lock-in.

El B2B Growth Kit incluye todos los componentes descritos aquí como un set de UI listo para producción y que puedes probar. Encontrarás un resumen de los ocho kits sectoriales en el hub de UI Growth Kits.

Si quieres entender qué componentes encajan con tu stack y tu backend, hablemos.

Laioutr es la [Frontend Management Platform (FMP)](https://www.laioutr.com/en/composable-headless-frontend) para composable commerce. El [producto Content Management](https://www.laioutr.com/product/content-management) permite a tu equipo de marketing componer páginas en el editor sin depender de desarrollo.

Más sobre Laioutr: Personalization.