> ## 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 elegir los meses sin intereses de un link
> Decide en qué plazos puede pagar tu cliente cuando abre tu link de pago.
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}}
;
};
Cada link puede ofrecer todos tus planes de pago o solo algunos. Úsalo cuando quieras que un producto caro se pueda pagar a meses, o cuando prefieras cobrar ciertos links solo de contado.
## Dónde está en la app
* En el menú de la izquierda, entra a **Links de pago** y haz clic en **Crear link de pago**.
* En el editor, abre la sección **Cómo te pagan**. Ahí está la lista de planes.
* Para un link que ya publicaste, ábrelo, haz clic en **Editar** y abre la misma sección.
## Antes de empezar
* Pueden hacerlo todos los roles de un comercio: **Dueño**, **Administrador** y **Miembro**.
* Solo puedes ofrecer los planes que están activos en tu cuenta. Se activan en [Comisiones y MSI](/manual/organizacion/comisiones-y-meses-sin-intereses), y solo el **Dueño** y el **Administrador** pueden cambiarlos.
* Los plazos se eligen en links de **Monto fijo** y de **Productos**. Un link de suscripción cobra cada periodo en un solo pago, así que no tiene plazos.
## Paso a paso
En **Links de pago**, haz clic en **Crear link de pago**, arriba a la derecha.
¿El link ya existe? Ábrelo y haz clic en **Editar**: los plazos se eligen igual.
Escribe el título y el monto. Luego haz clic en **Cómo te pagan**.
Los meses sin intereses se ofrecen en links de **Monto fijo** y de **Productos**. Una suscripción no tiene plazos.
Aquí eliges qué plazos ve tu cliente. Si no cambias nada, ve todos los planes activos en tu cuenta. Haz clic en **Todos los planes de pago**.
Los planes de tu cuenta se activan en **Comisiones**. Solo el Dueño y el Administrador pueden cambiarlos.
Marca los plazos que quieres ofrecer y quita los demás. Junto a cada uno ves cuánto pagaría tu cliente al mes.
Al menos un plan queda marcado: un link sin planes no se podría pagar.
En **Cómo te pagan** ves los plazos que elegiste. Cuando esté listo, haz clic en **Publicar link**.
A la derecha, en **Plan de pagos**, ves los plazos como los verá tu cliente.
Tu link ya está activo. En **Información General**, **Planes de pago** muestra los plazos que ofrece.
Si después quieres ofrecer otros plazos, abre el link y haz clic en **Editar**.
## Qué pasa después
* Al abrir el link, tu cliente ve en **Plan de pagos** solo los plazos que elegiste, con lo que pagaría cada mes.
* Los meses sin intereses requieren tarjeta de crédito. Si dejaste marcado **Pago de contado**, tu cliente también puede pagar en una sola exhibición.
* Si dejas un solo plan, tu cliente paga con ese plan y no puede elegir otro.
* El pago aparece en [Pagos](/manual/pagos/ver-tus-pagos) como **Pagado**, con el plan que eligió tu cliente.
## Preguntas frecuentes
Tu cliente elige entre todos los planes activos en tu cuenta, también los que actives después. En el editor lo ves como **Todos los planes de pago**.
La lista solo muestra los planes activos en tu cuenta. Pídele al Dueño o a un Administrador que lo active en [Comisiones y MSI](/manual/organizacion/comisiones-y-meses-sin-intereses) y vuelve a abrir el editor.
Ese plazo deja de mostrarse en el link. En el editor aparece como **No disponible**, y se vuelve a ofrecer cuando lo reactivas.
Sí. Abre el link y haz clic en **Editar**. Si el link está activo, te pedimos confirmar el cambio antes de guardarlo. Te lo explicamos en [Editar un link](/manual/links-de-pago/editar-un-link-de-pago).
En la lista de planes, deja marcado solo **Pago de contado**. Tu cliente paga en una sola exhibición.
## Errores comunes
### «Ninguno de estos planes está activo en tu cuenta, así que tus clientes no podrían pagar. Elige otro.»
Los plazos que marcaste ya no están activos en tu cuenta. Marca otro plan de la lista, o pide que activen los que necesitas en **Comisiones**.
### «No pudimos cargar tus planes de pago.»
Hubo un problema al leer tus planes. Haz clic en **Reintentar**. Si el aviso sigue ahí, recarga la página: tu avance se guarda solo como borrador.
### No puedo quitar el último plan
Es a propósito: un link necesita al menos un plan para poder pagarse. Marca primero el plan que quieres dejar y luego quita el otro.
## Guía en una imagen
Todos los pasos en una sola imagen, para tenerla a mano o compartirla con tu equipo.
## Guías relacionadas
Activa los planes de pago de tu cuenta.
Cobra un monto fijo con un link.
Cambia el monto, los planes o los datos de un link.
Copia tu link o ábrelo para ver lo que verá tu cliente.
## ¿Necesitas ayuda?