> ## 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 acercar o insertar la tarjeta
> Cobra sin contacto o con chip en la terminal, y qué hacer cuando la tarjeta pide el PIN o tiene dos cuentas.
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}}
;
};
Cuando la terminal dice **Acerca o inserta tu tarjeta**, el cobro ya solo depende de la tarjeta de tu cliente. Esta guía recorre lo que la terminal muestra desde ese momento hasta el pago aprobado, y qué hacer cuando pide el PIN.
## Dónde está en la app
* Es el último paso de un cobro. Aparece después de escribir el monto y tocar **Cobrar**, y de confirmar la propina, el plan de pago y la cuenta de depósito cuando tu negocio los usa.
* No se abre desde ningún menú: la terminal llega sola a esta pantalla.
## Antes de empezar
* Necesitas un cobro en curso, con su monto. Si todavía no haces uno, empieza por [Cobrar con tarjeta](/manual/terminal/cobrar-con-tarjeta).
* La terminal lee tarjetas sin contacto y tarjetas con chip, además de celulares con pago sin contacto.
* La terminal necesita conexión a internet para cobrar.
* Cualquier vendedor con la sesión iniciada en la terminal puede cobrar.
## Paso a paso
Después del monto y el plan de pago, la terminal dice **Acerca o inserta tu tarjeta**. Para pagar sin contacto, tu cliente acerca su tarjeta o su celular al símbolo de arriba de la terminal.
La terminal espera la tarjeta 20 segundos. Si no llega, avisa **Tarjeta no detectada** y te deja volver a intentar.
La otra forma es con chip, en la misma pantalla: tu cliente inserta la tarjeta en la ranura de abajo de la terminal y la deja ahí hasta que la terminal pida retirarla.
En cuanto detecta la tarjeta, la terminal dice **Leyendo tarjeta**. No hay nada que tocar: la tarjeta se queda donde está.
Si la tarjeta lo pide, la terminal dice **Ingresa tu PIN**. Acércale la terminal a tu cliente: su teclado seguro aparece en la mitad de abajo de la pantalla y ahí escribe su PIN.
Tu cliente tiene un minuto para escribir su PIN, de cuatro dígitos. Nadie más necesita verlo.
Con la tarjeta leída, la terminal dice **Procesando pago** y abajo muestra el total y la tarjeta. Sigue sin haber nada que tocar.
Cuando la terminal dice **Retira la tarjeta**, tu cliente la saca de la ranura. Si pagó sin contacto, este aviso sale antes de **Procesando pago**, en cuanto la terminal termina de leerla.
La terminal imprime el comprobante y muestra **Pago aprobado**, con la marca y los últimos cuatro dígitos de la tarjeta que se leyó.
## Qué pasa después
* Desde **Pago aprobado**, con **Imprimir** sacas otra copia del comprobante y con **Nuevo cobro** vuelves al teclado para la siguiente venta.
* El cobro queda en **Transacciones**, con la marca y los últimos cuatro dígitos de la tarjeta. Ahí puedes [ver su detalle](/manual/terminal/ver-el-detalle-de-un-cobro).
* Si el banco de tu cliente no aprueba el pago, la terminal muestra **Pago rechazado** y no hace ningún cargo. Te lo explicamos en [Qué hacer con un pago rechazado](/manual/terminal/pago-rechazado).
* Si la terminal no logra leer la tarjeta, muestra un aviso con **Volver a intentar** y **Cancelar pago**. Los avisos están en [Qué hacer si la tarjeta no se lee](/manual/terminal/la-tarjeta-no-se-lee).
## Preguntas frecuentes
Sí. La pantalla dice **Acerca tu tarjeta o celular**: se acerca al mismo símbolo de arriba de la terminal, igual que una tarjeta sin contacto.
Depende de la tarjeta de tu cliente. Cuando lo requiere, la terminal muestra **Ingresa tu PIN**; cuando no, pasa sola a **Procesando pago**.
El teclado del PIN es de la propia terminal, por seguridad, y por eso no sale en las imágenes de esta guía. Aparece en la mitad de abajo de la pantalla mientras dice **Ingresa tu PIN**, y arriba se marca un asterisco por cada dígito. Solo tu cliente debe escribirlo.
Algunas tarjetas traen más de una cuenta, por ejemplo crédito y débito. Mientras lee la tarjeta, la terminal muestra la lista y pide **Elige con cuál se paga.** Tu cliente toca la cuenta y después **Continuar**. Con **Cancelar pago** el cobro se cancela sin ningún cargo y vuelves a **Nuevo cobro**.
Mientras dice **Leyendo tarjeta** o **Procesando pago** no hay nada que tocar. Antes de acercar la tarjeta sí puedes salir: toca **Cancelar**, arriba a la derecha. Te lo explicamos en [Cancelar un cobro a medias](/manual/terminal/cancelar-un-cobro).
## Errores comunes
### «Tarjeta no detectada»
Pasaron 20 segundos sin que la terminal detectara una tarjeta. Toca **Volver a intentar** y acerca o inserta la tarjeta otra vez.
### «PIN incorrecto»
El PIN que escribió tu cliente no es el de la tarjeta. La terminal dice cuántos intentos quedan, por ejemplo «Tienes 2 intentos más. Vuelve a intentarlo o utiliza otra tarjeta.». Toca **Volver a intentar** para que lo escriba de nuevo.
### «PIN bloqueado»
Se acabaron los intentos del PIN. La terminal dice «Por favor, utiliza otra tarjeta o contacta a tu banco.»: tu cliente tiene que pagar con otra tarjeta y revisar la suya con su banco.
### «Tiempo de espera agotado»
Pasó un minuto sin que se escribiera el PIN. La terminal dice «El tiempo para ingresar el PIN ha expirado. Por favor, vuelve a intentarlo.». Toca **Volver a intentar**: la terminal lee la tarjeta y pide el PIN otra vez.
### «Inserta la tarjeta con chip»
La tarjeta se acercó, pero este pago necesita el chip. La terminal dice «Para completar el pago, inserta en la ranura del chip la misma tarjeta que acercaste. Déjala insertada hasta que termine el cobro.». Al insertarla, el cobro sigue solo. También puedes tocar **Pagar con otra tarjeta** o **Cancelar pago**.
Los demás avisos del lector están en [Qué hacer si la tarjeta no se lee](/manual/terminal/la-tarjeta-no-se-lee).
## Guía en una imagen
Todos los pasos en una sola imagen, para tenerla a mano o compartirla con tu equipo.
## Guías relacionadas
El cobro completo, del monto al pago aprobado.
Qué significa cada aviso del lector y cómo seguir.
Por qué se rechaza un pago y cómo intentarlo de nuevo.
Sal de un cobro antes de pasar la tarjeta, sin cobrar nada.
## ¿Necesitas ayuda?
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.