# Vue y Vercel

Conecta el backend de tu sitio sin enviar secretos al navegador.

## Separación de responsabilidades

El navegador consume rutas del propio sitio. El backend valida las peticiones, aplica límites, conserva los intentos y usa la credencial dedicada. No asumir Next.js o Nuxt: adaptar los handlers al framework real del proyecto.



```text
Vue → backend del propio sitio en Vercel → API Istmo Commerce por HTTPS
```





## Configuración de servidor

Estas variables no llevan prefijo VITE_. No registrar sus valores ni cabeceras de autenticación. El cliente Node descargable requiere Node 20+, usa timeout de 10 segundos y no sigue redirecciones ni reintenta escrituras automáticamente.



```text
ISTMO_COMMERCE_BASE_URL=https://TU-SERVIDOR-POS/api/v1/commerce
ISTMO_COMMERCE_KEY=SECRETO-ENTREGADO-AL-CREAR-LA-INTEGRACION
```



- [Descargar cliente Node](https://admin.istmotech.com/docs/istmo-commerce.mjs)

## Llamadas internas del backend

savedAttempt representa un intento persistido previamente con externalId y cuerpo estables. El fragmento no es un handler público completo. Almacenar esa información de forma durable; no depender de la memoria de una función serverless.

Comprobar la propiedad de cada pedido por sesión/comprador antes de consultar su estado. Nunca permitir que el navegador seleccione URL remota, credencial, empresa o un endpoint administrativo.



```js
import { createCommerceClient } from './istmo-commerce.mjs';

const commerce = createCommerceClient({
  baseUrl: process.env.ISTMO_COMMERCE_BASE_URL,
  key: process.env.ISTMO_COMMERCE_KEY,
});

const catalog = await commerce.catalog({ limit: 50 });
const receipt = await commerce.createOrder(savedAttempt);
// Tras una respuesta perdida, conservar savedAttempt:
const recovered = await commerce.order(savedAttempt.externalId);
```





## Interfaz del comprador



- Mostrar “Solicitar pedido” y “Solicitud recibida, pendiente de confirmación”.
- checkoutEnabled=false deshabilita cobros automáticos. ACH manual requiere quote vigente, action=payment e instrucciones habilitadas por administración.
- Tras timeout, conservar el intento y mostrar que su estado está por comprobar.
- No guardar datos personales innecesarios en el navegador. No simular conexión local o una compra pagada.