> ## 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 crear un link de pago
> Cobra un monto fijo con un link que compartes por WhatsApp, correo o redes.
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}}
;
};
Un link de pago es una dirección que le mandas a tu cliente para que te pague con tarjeta, sin estar frente a frente: un anticipo, un pedido por WhatsApp o un servicio a domicilio.
## Dónde está en la app
* En el menú de la izquierda, entra a **Links de pago**.
* Arriba a la derecha, haz clic en **Crear link de pago**. Se abre el editor, con la vista previa de lo que verá tu cliente a la derecha.
## Antes de empezar
* Pueden hacerlo todos los roles de un comercio: **Dueño**, **Administrador** y **Miembro**.
* Ten a la mano un título que tu cliente reconozca, por ejemplo «Kit de herramientas», y el monto que vas a cobrar.
* Si quieres que tu cliente pueda pagar a meses sin intereses, revisa que tengas planes activos en [Comisiones y MSI](/manual/organizacion/comisiones-y-meses-sin-intereses).
## Paso a paso
En la pantalla de **Inicio**, haz clic en **Links de pago**, en el menú de la izquierda.
¿Tu menú solo muestra íconos? **Links de pago** es el del eslabón.
Aquí están todos tus links. Haz clic en **Crear link de pago**, arriba a la derecha.
En la pestaña **Archivados** están los links que ya no usas.
Deja el tipo de cobro en **Monto fijo**. Escribe un título que tu cliente reconozca y el monto a cobrar.
¿Cobras productos de tu catálogo o una suscripción? Cámbialo en **Seleccionar tipo de cobro**. Te lo explicamos en [Link con productos](/manual/links-de-pago/crear-un-link-con-productos) y [Link de suscripción](/manual/links-de-pago/crear-un-link-de-suscripcion).
A la derecha ves cómo lo verá tu cliente. Cuando esté listo, haz clic en **Publicar link**.
En **Cómo te pagan** eliges si tu cliente puede pagar a meses sin intereses.
Tu link ya está activo. Copia la dirección de **Link compartible** y envíasela a tu cliente por WhatsApp, correo o redes.
Junto a la dirección tienes un botón para copiarla y otro para abrir el link como lo verá tu cliente.
## Qué pasa después
* El link queda **Activo** y acepta pagos desde ese momento.
* Cada pago aparece en [Pagos](/manual/pagos/ver-tus-pagos) y el dinero llega a tu cuenta en tu siguiente [liquidación](/manual/liquidaciones/ver-tus-liquidaciones).
* Puedes mandar el mismo link a varios clientes. Si prefieres un máximo de pagos, ponlo en [Límites y datos extra](/manual/links-de-pago/limitar-pagos-y-pedir-datos).
## Preguntas frecuentes
Sí. Abre el link y haz clic en **Editar**. Si el link está activo, te pedimos confirmar los cambios para que nadie pague un monto distinto al que aceptó. Lo que no se puede cambiar es el tipo de cobro. Te lo explicamos en [Editar un link](/manual/links-de-pago/editar-un-link-de-pago).
Las que quieras. Si prefieres un máximo, actívalo en **Límites y datos extra** › **Límite de pagos**: al llegar al máximo, el link deja de aceptar pagos.
Sí, con tarjeta de crédito, si tienes planes de pago activos en tu cuenta. En **Cómo te pagan** eliges qué planes ofrece el link. Si no cambias nada, tu cliente elige entre todos tus planes activos.
No. Tu avance se guarda solo como borrador. Lo encuentras en **Links de pago** con el estado **Borrador**: haz clic en él para continuar. Te lo explicamos en [Borradores](/manual/links-de-pago/retomar-un-borrador).
Deshabilítalo desde su detalle. Tu cliente verá que desactivaste el link, y puedes volver a habilitarlo cuando quieras. Te lo explicamos en [Deshabilitar un link](/manual/links-de-pago/deshabilitar-un-link).
## Errores comunes
### No veo «Links de pago» en el menú
Links de pago es parte de las cuentas de comercio. Si tu cuenta es de fabricante, no tienes esta sección. Si eres comercio y no la ves, escríbenos.
### Al publicar aparece «Revisa el link»
Falta un dato o hay uno por corregir. Revisa los campos marcados, como el título o el monto, y vuelve a hacer clic en **Publicar link**.
### Mi cliente dice que el link no funciona
Busca el link en **Links de pago** y revisa que esté **Activo**. Si está deshabilitado, habilítalo desde su detalle. Si llegó a su límite de pagos, sube el límite o crea un link 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
Copia tu link o ábrelo para ver lo que verá tu cliente.
Decide en qué plazos puede pagar tu cliente.
Cambia el monto, los planes o los datos de un link.
Encuentra los pagos que recibiste con tu link.
## ¿Necesitas ayuda?