> ## Documentation Index
> Fetch the complete documentation index at: https://docs.compago.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Cómo usar el modo kiosko
> Deja tu terminal esperando los cobros de un tótem de autopago y sal del modo con tu PIN de salida.
export const SupportBox = () => ;
export const GuideImage = ({src, preview, alt, width, height, caption, variant = 'screen'}) => {
const [open, setOpen] = useState(false);
const [view, setView] = useState(null);
const opener = useRef(null);
const dialog = useRef(null);
const viewport = useRef(null);
const closeButton = useRef(null);
const fitScale = useRef(1);
const drag = useRef(null);
const long = height / width > 1.6;
const icon = (d, size = 18) => ;
const ZOOM_IN = 'M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35M11 8v6M8 11h6';
const ZOOM_OUT = 'M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35M8 11h6';
const FIT = 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2';
const DOWNLOAD = 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3';
const CLOSE = 'M18 6 6 18M6 6l12 12';
const clampView = next => {
const el = viewport.current;
if (!el) return next;
const w = width * next.scale;
const h = height * next.scale;
const keep = 96;
const x = w <= el.clientWidth ? (el.clientWidth - w) / 2 : Math.min(keep, Math.max(el.clientWidth - w - keep, next.x));
const y = h <= el.clientHeight ? (el.clientHeight - h) / 2 : Math.min(keep, Math.max(el.clientHeight - h - keep, next.y));
return {
scale: next.scale,
x,
y
};
};
const fit = () => {
const el = viewport.current;
if (!el) return;
const scale = long ? Math.min(1, el.clientWidth * 0.94 / width) : Math.min(1, el.clientWidth * 0.94 / width, el.clientHeight * 0.88 / height);
fitScale.current = scale;
setView(clampView({
scale,
x: (el.clientWidth - width * scale) / 2,
y: long ? 72 : (el.clientHeight - height * scale) / 2
}));
};
const zoomAt = (factor, cx, cy) => {
setView(current => {
const el = viewport.current;
if (!current || !el) return current;
const px = cx ?? el.clientWidth / 2;
const py = cy ?? el.clientHeight / 2;
const scale = Math.min(Math.max(fitScale.current * 0.5, current.scale * factor), Math.max(1.5, fitScale.current * 6));
const ratio = scale / current.scale;
return clampView({
scale,
x: px - (px - current.x) * ratio,
y: py - (py - current.y) * ratio
});
});
};
const panBy = (dx, dy) => setView(current => current && clampView({
...current,
x: current.x + dx,
y: current.y + dy
}));
const close = () => {
setOpen(false);
setView(null);
opener.current?.focus();
};
const show = event => {
opener.current = event.currentTarget;
setOpen(true);
};
const actions = useRef({});
actions.current = {
fit,
zoomAt,
panBy,
close
};
useEffect(() => {
const modal = dialog.current;
if (!open || !modal) return undefined;
if (!modal.open) modal.showModal();
const el = viewport.current;
actions.current.fit();
closeButton.current?.focus();
const onResize = () => actions.current.fit();
const onKey = event => {
const {zoomAt: zoom, panBy: pan} = actions.current;
if (event.key === '+' || event.key === '=') zoom(1.25); else if (event.key === '-' || event.key === '_') zoom(0.8); else if (event.key === '0') actions.current.fit(); else if (event.key === 'ArrowUp') pan(0, 120); else if (event.key === 'ArrowDown') pan(0, -120); else if (event.key === 'ArrowLeft') pan(120, 0); else if (event.key === 'ArrowRight') pan(-120, 0); else return;
event.preventDefault();
};
const onWheel = event => {
event.preventDefault();
const rect = el.getBoundingClientRect();
if (event.ctrlKey || event.metaKey) actions.current.zoomAt(Math.exp(-event.deltaY * 0.0022), event.clientX - rect.left, event.clientY - rect.top); else actions.current.panBy(-event.deltaX, -event.deltaY);
};
const root = document.documentElement;
const overflow = root.style.overflow;
root.style.overflow = 'hidden';
window.addEventListener('resize', onResize);
document.addEventListener('keydown', onKey);
el?.addEventListener('wheel', onWheel, {
passive: false
});
return () => {
root.style.overflow = overflow;
window.removeEventListener('resize', onResize);
document.removeEventListener('keydown', onKey);
el?.removeEventListener('wheel', onWheel);
if (modal.open) modal.close();
};
}, [open]);
const onPointerDown = event => {
if (event.button !== 0) return;
drag.current = {
x: event.clientX,
y: event.clientY,
travel: 0
};
event.currentTarget.setPointerCapture(event.pointerId);
};
const onPointerMove = event => {
const start = drag.current;
if (!start) return;
const dx = event.clientX - start.x;
const dy = event.clientY - start.y;
start.travel += Math.abs(dx) + Math.abs(dy);
start.x = event.clientX;
start.y = event.clientY;
panBy(dx, dy);
};
const onPointerUp = event => {
const start = drag.current;
drag.current = null;
if (!start || start.travel > 6 || !view) return;
const rect = viewport.current.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const inside = x >= view.x && x <= view.x + width * view.scale && y >= view.y && y <= view.y + height * view.scale;
if (!inside) close();
};
const onDoubleClick = event => {
const rect = viewport.current.getBoundingClientRect();
if (view && view.scale > fitScale.current * 1.4) fit(); else zoomAt(2.2, event.clientX - rect.left, event.clientY - rect.top);
};
const percent = view ? Math.round(view.scale / fitScale.current * 100) : 100;
const viewer = open && ;
if (variant === 'guide') {
return
{caption && {caption}}
{viewer}
;
}
return
{caption && {caption}}
{viewer}
;
};
export const GuideVideo = ({src, poster, title, duration, caption}) => {
const dialog = useRef(null);
const player = useRef(null);
const opener = useRef(null);
const resumeAt = useRef(0);
const pageOverflow = useRef('');
const icon = (d, size = 18, fill = false) => ;
const PLAY = 'M9 6.5 18.5 12 9 17.5z';
const MAXIMIZE = 'M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3';
const CLOSE = 'M18 6 6 18M6 6l12 12';
const open = event => {
const modal = dialog.current;
const video = player.current;
if (!modal || !video || modal.open) return;
opener.current = event.currentTarget;
pageOverflow.current = document.documentElement.style.overflow;
document.documentElement.style.overflow = 'hidden';
modal.showModal();
video.currentTime = resumeAt.current;
video.play().catch(() => {});
video.focus();
};
const onClose = () => {
const video = player.current;
if (video) {
resumeAt.current = video.ended ? 0 : video.currentTime;
video.pause();
}
document.documentElement.style.overflow = pageOverflow.current;
opener.current?.focus();
};
const close = () => {
if (dialog.current?.open) dialog.current.close();
};
const fullscreen = () => {
const video = player.current;
if (!video) return;
video.play().catch(() => {});
if (video.requestFullscreen) video.requestFullscreen().catch(() => {}); else if (video.webkitEnterFullscreen) video.webkitEnterFullscreen();
};
return
{caption && {caption}}
;
};
El modo kiosko es para una terminal conectada a un tótem de autopago: tu cliente arma su orden en el tótem y la terminal solo cobra. Mientras está encendido, la terminal muestra una sola pantalla de espera y no deja entrar al menú sin el PIN de salida.
## Dónde está en la app
* En la pantalla **Nuevo cobro**, toca la **X** de arriba a la izquierda para ir al inicio.
* En el inicio, toca el engrane, arriba a la derecha, para abrir **Configuración**.
* En **Configuración**, bajo **Modos**, toca **Modo kiosko**.
## Antes de empezar
* Necesitas tener la sesión iniciada en la terminal. Cualquier vendedor puede encender el modo.
* Los cobros los envía el tótem, de la misma forma en que los envía otra aplicación. Si quieres ver ese cobro pantalla por pantalla, está en [Cómo cobrar una orden de otra app](/manual/terminal/cobrar-una-orden-de-otra-app).
* Con el modo encendido no se escriben cobros en la terminal ni se abren **Transacciones** o **Configuración**. Si necesitas algo de eso, primero sal del modo.
* El PIN de salida tiene 6 dígitos y lo eliges tú. Decide antes quién de tu equipo lo va a conocer y dónde lo van a anotar: la terminal no lo muestra ni tiene forma de recuperarlo.
* El modo y su PIN son de esta terminal. Si tienes varias terminales con tótem, enciéndelo en cada una.
## Paso a paso
El modo se enciende desde **Configuración**: en **Nuevo cobro** toca la **X** y, ya en el inicio, el engrane. En el grupo **Modos**, toca **Modo kiosko**.
Esta pantalla resume el modo: con él encendido, la terminal solo espera los cobros del tótem y esconde el menú. Toca el interruptor **Modo kiosko**.
Si la terminal ya tiene **PIN de salida**, el modo se enciende en cuanto tocas el interruptor.
Una terminal sin PIN de salida te pide crearlo antes de encender el modo. En **Elige un PIN de 6 dígitos**, escríbelo y toca **Continuar**.
Este PIN es solo del modo kiosko. No es el de **Bloqueo con PIN**.
En **Repite el PIN**, escribe otra vez los mismos 6 dígitos y toca **Guardar PIN**. Al guardarlo, el modo se enciende.
Anota el PIN en un lugar seguro: la terminal no lo muestra ni tiene forma de recuperarlo.
El modo ya está encendido: la terminal muestra **Elige tu orden en la pantalla principal** y espera los cobros del tótem. Para salir, toca 5 veces seguidas el logo de abajo.
Da los cinco toques seguidos, en unos tres segundos. Si tardas más, la cuenta empieza de nuevo.
Se abre **PIN de salida**. Escribe el PIN que elegiste al encender el modo y toca **Salir del modo kiosko**.
Si abriste esta pantalla sin querer, toca **Cancelar**: se activa a los tres segundos.
La terminal regresa al inicio, con el menú de siempre: el modo kiosko quedó apagado y ya puedes cobrar, ver tus transacciones o entrar a **Configuración**.
El PIN de salida queda guardado: la próxima vez, el modo se enciende sin pedirte uno nuevo.
## Qué pasa después
* Con el modo encendido, la terminal se queda en la pantalla de espera. Cuando el tótem envía un cobro, abre sola las pantallas para pagarlo.
* Durante ese cobro, la pantalla del plan de pago y la de la tarjeta no muestran la **X** ni **Cancelar**: quien paga no puede salirse del cobro desde la terminal. Si hay que cancelarlo, se cancela desde el tótem.
* Al aprobarse el pago, la terminal vuelve a la pantalla de espera para la siguiente orden. Si en [Integraciones](/manual/terminal/integraciones) apagaste **Volver sola al terminar**, **Pago aprobado** puede quedarse en pantalla hasta que alguien toque el botón para volver.
* Si la terminal se reinicia con el modo encendido, al abrir la app regresa a la pantalla de espera, no al menú.
* Salir del modo lo apaga. Para encenderlo de nuevo, entra a **Modo kiosko** y toca el interruptor: el PIN de salida sigue siendo el mismo.
## Preguntas frecuentes
No. Con el modo kiosko la terminal solo cobra lo que envía el tótem, y el resto de las pantallas queda bloqueado. Para escribir un cobro, sal del modo con los cinco toques y tu PIN.
No, son dos PIN distintos. El de salida solo sirve para dejar el modo kiosko; el de [Bloqueo con PIN](/manual/terminal/bloqueo-con-pin) protege los cobros manuales y las devoluciones. Cambiar uno no cambia el otro.
Con el modo apagado, entra a **Modo kiosko** y toca la fila **PIN de salida**. Elige el PIN nuevo, repítelo y toca **Guardar PIN**.
La terminal no muestra el PIN guardado y no tiene una opción para recuperarlo. Si el modo está encendido y nadie de tu equipo recuerda el PIN, escríbenos: los datos de contacto están al final de esta página.
Para salir hacen falta cinco toques seguidos sobre el logo y, después, el PIN. Si alguien abre **PIN de salida** sin querer, basta con tocar **Cancelar** para volver a la pantalla de espera.
## Errores comunes
### «El PIN debe tener 6 dígitos»
Tocaste el botón con menos de 6 dígitos escritos. Completa los seis puntos y tócalo otra vez.
### «Los PINs no coinciden»
Al repetir el PIN escribiste uno diferente. La terminal borra el segundo para que lo intentes de nuevo. Si dudas del primero, toca la flecha de arriba a la izquierda y elige otro.
### «PIN incorrecto»
El PIN no es el de salida de esta terminal. Revisa que no estés usando el de **Bloqueo con PIN** o el de otra terminal, y escríbelo de nuevo.
### «Demasiados intentos fallidos. Espera 60 segundos.»
Tras cinco intentos equivocados, la terminal deja de aceptar el PIN durante un minuto y el aviso cuenta los segundos que faltan. Espera a que termine y escribe el PIN correcto.
### Los cinco toques no abren «PIN de salida»
Los toques deben caer sobre el logo, al pie de la pantalla, y seguidos, en unos tres segundos. Si pasa más tiempo entre el primero y el último, la cuenta empieza de nuevo: inténtalo otra vez, más rápido.
## Guía en una imagen
Todos los pasos en una sola imagen, para tenerla a mano o compartirla con tu equipo.
## Guías relacionadas
Así se paga en la terminal un cobro que llega de fuera.
La app a la que vuelve la terminal al terminar un cobro.
Pide un PIN antes de cobrar o de devolver un cobro.
Deja la terminal lista para recibir donativos con montos fijos.
## ¿Necesitas ayuda?
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.