> ## 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 donativos
> Activa un preset para que tu terminal reciba donativos o propinas con montos fijos, y sal del modo con su contraseña.
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}}
;
};
Con el modo donativos, tu terminal muestra un preset y nada más: quien paga ve el nombre, el mensaje y los montos, elige cuánto dar y paga con su tarjeta. La terminal da las gracias y queda lista para la siguiente persona, sin que nadie de tu equipo tenga que tocarla.
## 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 donativos** y después **Activar** en el preset que vas a usar.
## Antes de empezar
* Necesitas al menos un preset. Si aún no tienes uno, sigue [Cómo crear un preset de donativos](/manual/terminal/crear-un-preset-de-donativos).
* Necesitas tener la sesión iniciada en la terminal. Cualquier vendedor puede activar el modo.
* Cada preset tiene su propia contraseña de salida, de al menos 4 caracteres. La primera vez que lo activas, la terminal te pide crearla. Decide antes quién la va a conocer: la terminal no la muestra ni tiene forma de recuperarla.
* Con el modo encendido, la terminal solo muestra la pantalla de donativos: no se escriben cobros ni se abren **Transacciones** o **Configuración** hasta que sales del modo.
## Paso a paso
En **Configuración**, entra a **Modo donativos**: ahí están tus presets. Toca **Activar** en el que quieres usar.
¿Aún no tienes un preset? Créalo con **Nuevo preset**.
La primera vez que activas un preset, la terminal pide su **Contraseña de salida**. Escríbela dos veces, con al menos 4 caracteres, y toca **Guardar contraseña**.
Anótala en un lugar seguro: la terminal no la muestra ni tiene forma de recuperarla.
La terminal ya muestra tu preset: el nombre, **Elige tu donación**, el mensaje y los montos. Quien paga toca un monto y lo confirma con el botón de abajo, por ejemplo **Donar \$100.00**.
Si tu preset tiene encendido **Cobrar al elegir el monto**, no hay botón: tocar el monto lleva directo a la tarjeta.
La terminal muestra el total y para qué es, **Donación · Becas El Tornillo**, y espera la tarjeta: se acerca al símbolo de arriba de la terminal o se inserta por el chip.
También se puede pagar acercando el celular.
Al aprobarse el pago, la terminal imprime el comprobante y muestra **Gracias por tu donación**. No hay que tocar nada: en 4 segundos vuelve sola a los montos.
Con **Imprimir comprobante** sale otra copia mientras la pantalla sigue ahí.
Para salir del modo, toca 5 veces seguidas el nombre de tu preset, arriba de la pantalla.
La nota de **Modo donativos** dice «logo de arriba»: lo que se toca es este nombre. Da los cinco toques en unos tres segundos.
Se abre **Contraseña de salida**. Escribe la contraseña de este preset y toca **Salir del modo donativos**.
Cada preset tiene su propia contraseña: aquí va la del que está activo.
La terminal regresa al inicio y el modo donativos queda apagado. Tu preset sigue guardado, con su contraseña, para activarlo cuando quieras.
Los donativos del día están en **Transacciones**, como cualquier otro cobro de la terminal.
## Qué pasa después
* Cada donativo es un solo pago por el monto elegido, sin meses. Al aprobarse, la terminal imprime el comprobante, da las gracias y vuelve sola a los montos a los 4 segundos.
* Con un preset de tipo **Propina**, la pantalla dice **Elige tu propina**, el botón **Dejar \$100.00 de propina** y el agradecimiento **Gracias por tu propina**. Todo lo demás funciona igual.
* Si el banco rechaza el pago, la terminal muestra **Pago rechazado** y **No se hizo ningún cargo**, y vuelve sola a los montos a los 5 segundos.
* La pantalla de la tarjeta no tiene botón para regresar. Si en 20 segundos nadie acerca una tarjeta, aparece **Tarjeta no detectada**: con **Cancelar pago** se vuelve a los montos.
* Si la terminal se reinicia con el modo encendido, al abrir la app regresa a la pantalla de donativos.
* Al salir, el modo se apaga, pero el preset y su contraseña se quedan. La próxima vez que toques **Activar** en ese preset, el modo se enciende sin pedir una contraseña nueva.
## Preguntas frecuentes
No. Mientras el modo está encendido, la terminal solo recibe donativos con el preset activo. Para cobrar una venta, sal del modo con los cinco toques y la contraseña.
No. Cada preset tiene la suya, y para salir se escribe la del preset que está activo. Si quieres usar la misma en todos, ponla en cada uno.
Con el modo apagado, entra a **Modo donativos**, toca los tres puntos del preset y después **Contraseña de salida**, que dice **Cambiar**. Escribe la nueva dos veces y toca **Guardar contraseña**.
La terminal no muestra la contraseña y no tiene una opción para recuperarla. Si el modo está encendido y nadie de tu equipo la recuerda, escríbenos: los datos de contacto están al final de esta página.
En **Transacciones**, como cualquier otro cobro de la terminal. Para verlos, primero sal del modo.
## Errores comunes
### «Pago rechazado»
El banco no aprobó el pago y **No se hizo ningún cargo**. La terminal vuelve sola a los montos a los 5 segundos: quien paga puede intentar de nuevo o con otra tarjeta. Los motivos más comunes están en [Qué hacer con un pago rechazado](/manual/terminal/pago-rechazado).
### «La contraseña debe tener al menos 4 caracteres»
La contraseña que elegiste es muy corta. Escribe una de 4 caracteres o más en los dos campos.
### «Las contraseñas no coinciden»
Lo que escribiste en **Repite la contraseña** no es igual a la primera. Revisa los dos campos y escríbela otra vez.
### «Contraseña incorrecta»
No es la contraseña del preset activo. Recuerda que cada preset tiene la suya, y escríbela de nuevo.
### «Demasiados intentos fallidos. Espera 60 segundos.»
Después de cinco contraseñas equivocadas, la terminal deja de aceptarla durante un minuto y el aviso cuenta los segundos que faltan. Cuando termine, escribe la correcta.
### Los cinco toques no abren «Contraseña de salida»
Toca el nombre del preset, arriba de la pantalla, y hazlo seguido: los cinco toques deben caber en unos tres segundos. Si tardas más, la cuenta empieza de nuevo.
## Guía en una imagen
Todos los pasos en una sola imagen, para tenerla a mano o compartirla con tu equipo.
## Guías relacionadas
Prepara el nombre, el mensaje y los montos que verá quien paga.
Deja la terminal esperando los cobros de un tótem.
Qué significa cada rechazo y qué hacer.
Los cobros de tu terminal, del más reciente al más antiguo.
## ¿Necesitas ayuda?
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.