Pattern · Buy Crypto · canvas-first

Buy Crypto

El flujo principal de MiCapi: el usuario paga COP y recibe cripto. Compraventa con MiCapi como contraparte directa — comisión 1% + IVA 19% sobre comisión, precio fijado al confirmar, entrega hasta 24 horas hábiles, devolución íntegra si no se ejecuta. Sin cajas anidadas: toda la jerarquía sobre lienzo blanco continuo.

Flujo principal 5 pantallas Bre-B · Nequi · PSE SAGRILAFT
Flow map
01 · Compra
Comprar
BTC
ETH
USDT
Pagas
$500.000
Monto · activo · método
Lienzo continuo
02 · Aviso titular
Comprar
Paga desde tu cuenta
Titular = remitente
SAGRILAFT
03 · Confirmar
Comprar
Confirmar compra
0,00109 BTC
Pagas$505.950
Comisión$5.950
MétodoBre-B
Precio fijado aquí
Sheet persistente
04 · Procesando
Pagar a MiCapi
Total
$505.950
Referencia
MCP-7841
BancoBancolombia
Cuenta****01
TitularMICAPI S.A.S.
Instrucciones de pago
Bre-B/Nequi · PSE inline
OK
FAIL
05a · Éxito
Compra completada
0,00109 BTC
05b · Error
No completamos
tu compra
Resumen + ref. · o motivo + acción
Screen 01 · Compra · lienzo blanco
9:41
Comprar
Activo
₿
BTC
ETH
USDT
Pagas
$500.000
Recibes ≈ 0,00109 BTC · disponible este mes: $6.500.000 de $10.000.000
Tasa$458.320.000 / BTC
Comisión (1%)$5.000
IVA (19% s/comisión)$950
Total a pagar$505.950
Recibes0,00109 BTC
Entrega estimadaHasta 24h hábiles
Método de pago
Bre-B Recomendado
Instantáneo · sin costo
N
Nequi
Instantáneo · sin costo
PSE
Hasta 2h · $1.500
El precio se fijará al confirmar

Decisiones canvas-first

  1. Sin cards anidados Toda la pantalla vive sobre un lienzo blanco continuo. Las secciones se separan con hairlines #F0F4F3 y espacio vertical generoso — no con bordes de card.
  2. Activo · 3 chips inline El selector ocupa una fila sobre el lienzo. Cada activo es una mini-card con borde sutil; el activo activo gana el fondo primary-100. Sin contenedor externo agrupándolos.
  3. Money input dominante Monto mono 38px, sin caja. El caret aparece junto al valor. Underline teal de 40px debajo solo en focus — affordance ligera. Pill de moneda como trailing minimal.
  4. Quick chips ghost Borde 1px hairline, sin fondo. El chip activo gana primary-100; MAX usa borde primary-300. Sirven sobre el lienzo, no en un panel.
  5. Desglose como filas Tasa · Comisión · IVA · Total · Recibes · Entrega. Cada par label / valor mono es una fila con hairline superior. Total y Recibes destacan por peso tipográfico, no por chrome.
  6. Pay methods como filas Bre-B "Recomendado" arriba. Cada método es una fila con icono brand + nombre + sub + radio. El seleccionado no tiene borde — solo el radio relleno indica la selección. Limpio.
  7. Bottom action bar sticky Sticky blanco con drop-shadow superior. Helper-line "El precio se fijará al confirmar" en mono, CTA primaria abajo. Sin borde superior — solo la sombra ligera marca la separación.
  8. Semántica "Pagas" / Depositas · "Recibes" / Te acreditamos · "Tasa" / Precio de conversión · "Comisión" / Fee.
Screen 02 · Aviso titular = remitente
9:41
Comprar
Activo
₿
BTC
ETH
USDT
Pagas
$500.000

Paga desde tu propia cuenta

Por seguridad, la cuenta bancaria desde donde envíes el pago debe estar a tu nombre. Si el pago viene de otra persona, no podremos procesarlo y será devuelto.

Entiendo que debo pagar desde mi cuenta bancaria.

Reglas del sheet

  1. Bottom sheet dismissible El contexto detrás se ve faded (opacity 0.4) — el usuario sabe que está en una capa intermedia, no en pantalla nueva.
  2. Icon primary, no warning shield-check en color primary, no rojo. Es cumplimiento, no alarma. La regla SAGRILAFT se comunica con tono institucional.
  3. "A tu nombre" en negrita El detalle literal de la regla va destacado. El resto del párrafo da contexto sin tono legalista.
  4. Check obligatorio El botón Continuar se mantiene deshabilitado hasta marcar la casilla. Es la prueba de consentimiento que el backend loguea.
  5. Persiste, pero loguea siempre Una vez aceptado, el sheet no se vuelve a mostrar. Cada compra registra el consentimiento previo en el backend para auditoría UIAF.
Screen 03 · Confirmation sheet · persistente
Estándar
9:41
Comprar
₿
BTC
ETH
USDT

Confirmar compra

0,00109 BTC
≈ $500.000 COP
Pagas$505.950 COP
Tasa$458.320.000 / BTC
Comisión$5.000 + $950 IVA
Método de pagoBre-B
Entrega estimadaHasta 24h hábiles
Al confirmar, el precio queda fijado. Si la compra no se ejecuta en 24 horas hábiles, tu dinero será devuelto sin descuentos a tu cuenta de origen.
Cancelar
Monto alto · gate
9:41
Comprar

Confirmar compra

0,00545 BTC
≈ $2.500.000 COP
Pagas$2.529.750 COP
Comisión$25.000 + $4.750 IVA
MétodoBre-B
Confirmo que quiero comprar 0,00545 BTC por $2.529.750 COP.
Cancelar

Sheet persistente

  1. PersistenteisDismissible: false, enableDrag: false. La compra es irreversible; el sheet no se cierra por accidente. Handle visualmente sutil (opacity 0.45) — está ahí por consistencia, no para arrastrar.
  2. Hero = cripto que recibe"0,00109 BTC" arriba grande. El COP queda subordinado como caption (≈). El usuario quiere saber cuánto cripto le llega.
  3. Detalle compactoPagas · Tasa · Comisión · Método · Entrega. Mismos números que en pantalla 1 con menos densidad visual.
  4. Legal note inline"El precio queda fijado" + "se devuelve sin descuentos en 24h" — separado por hairline, sin chip warning. Es contrato verbal antes del tap.
  5. Gate sobre $2MCheckbox extra con el monto literal. El usuario tiene que decir explícitamente "sí, quiero comprar X por Y" — frase plástica anti-error.
  6. Confirmar · mediumImpactTap dispara haptic mediumImpact (acción financiera irreversible, cf. foundations-motion §4).
Screen 04 · Procesando · pago manual vs PSE inline
Bre-B / Nequi · instrucciones
9:41
Pagar a MiCapi
Envía a MiCapi
$505.950
COP · vía Bre-B desde tu banco
Referencia de pago
Código único
MCP-7841-OP
Datos bancarios
Banco
Bancolombia
Tipo de cuenta
Corriente
Número
123 456789-01
Titular
MICAPI S.A.S.
Tienes 29:42 para completar el pago
Te notificaremos cuando confirmemos tu pago
PSE · inline
9:41
Procesando

Procesando tu compra…

Estamos confirmando tu pago con PSE. Esto puede tardar unos segundos.

Total
$507.450 COP
incl. comisión PSE $1.500

Por método

  1. Bre-B / Nequi · manualEl usuario sale de MiCapi, abre el banco, hace la transferencia. Referencia única obligatoria para conciliar — destacada en card con fondo primary-100 y borde dashed.
  2. PSE · inlineEl usuario va al WebView de PSE, paga, vuelve. MiCapi muestra spinner mientras espera la confirmación automática. Sin referencia visible — PSE conecta solo.
  3. Cada campo copiableBanco · cuenta · referencia. Botón individual de copia con haptic lightImpact. La referencia tiene su propio botón destacado (chip primary).
  4. Countdown 30 minSolo en Bre-B/Nequi. Color warning. Al expirar, MiCapi cancela la reserva (precio puede cambiar).
  5. "Ya pagué" no confirmaSolo informa "ya hice lo mío". La conciliación es automática vía backend — no por palabra del usuario.
Screen 05 · Éxito · Error
Éxito
9:41

Compra completada

0,00109 BTC
≈ $500.000 COP
Referencia
MCP-2026-05-001
Fecha26 may · 9:41
Pagaste$505.950 COP
MétodoBre-B
EstadoCompletada
Error
9:41

No pudimos completar tu compra

No recibimos tu pago en el plazo. Si ya lo enviaste, puede tardar unos minutos en confirmarse. Si no, puedes intentar de nuevo.

Referencia
MCP-2026-05-001
EstadoPago no recibido
Monto$505.950 COP
Tu dinero no fue debitado

Cierre del flujo

  1. Éxito sin exagerarCheck verde + título claro. No "¡Felicidades!" ni emojis. Es operación cumplida, no premio.
  2. Hero = cripto recibidoMismo dato que en confirmation sheet. Continuidad — el usuario ve confirmado lo que esperaba.
  3. Referencia destacadaEntre dos hairlines, copiable, color primary. Para soporte, tracking, "te pagué pero no llegó".
  4. Error sobrioChip color error-bg sutil — no rojo full-screen alarma. Es un problema técnico, no una pérdida.
  5. "Tu dinero no fue debitado"La frase clave en chip success-bg. La preocupación real del usuario en un error es "¿perdí mi plata?". Respuesta literal.
  6. Nunca mensajes técnicosSin 500 Internal Server Error, sin stack traces. Solo lenguaje humano + acción concreta.
  7. Dual CTAPrimaria (Intentar / Ir al inicio) + secundaria (Soporte / Ver historial). Siempre dos caminos.
Dark mode · pantalla 01 + confirmation sheet
Dark · pantalla compra
9:41
Comprar
Activo
₿
BTC
ETH
USDT
Pagas
$500.000
Recibes ≈ 0,00109 BTC
Comisión + IVA$5.950
Total a pagar$505.950
Recibes0,00109 BTC
Método de pago
Bre-B Recomendado
Instantáneo · sin costo
El precio se fijará al confirmar
Dark · confirmation
9:41
Comprar

Confirmar compra

0,00109 BTC
≈ $500.000 COP
Pagas$505.950 COP
Tasa$458.320.000 / BTC
Comisión$5.000 + $950 IVA
MétodoBre-B
EntregaHasta 24h hábiles
Al confirmar, el precio queda fijado. Si la compra no se ejecuta en 24h hábiles, tu dinero será devuelto sin descuentos.
Cancelar

Dark mode

  1. Superficie · #0F1A19El lienzo blanco del modo claro se reemplaza por surface-dark. Hairlines bajan a rgba(228,236,235,0.06) — apenas visibles, mismo rol.
  2. Marcas bancarias intactasNaranja Bre-B, morado Nequi, azul PSE — colores de marca no se reinterpretan en oscuro.
  3. Recibes en primary-300En light usa primary-700, en dark primary-300 para contraste AA sobre fondo oscuro.
  4. CTA verde idénticoprimary-500 en ambos modos — único color de acción, regla del DS.
  5. Sheet sobre darkEl sheet usa una superficie ligeramente más clara que el body (#16221F) para diferenciarse del lienzo principal.
Edge cases

EXCEDE LÍMITE KYC

Money input en estado error · CTA "Continuar" deshabilitado · mensaje inline.

Pagas
$5.000.000
Supera tu límite de $4.000.000 por operación

MONTO MÍNIMO

Por debajo de $50.000 (mínimo del MVP). Mismo tratamiento — error en línea.

Pagas
$30.000
Monto mínimo: $50.000

TASA EXPIRADA

La tasa tiene más de 30s. El usuario puede seguir; MiCapi revalida al confirmar.

Pagas
$500.000
Tasa no actualizada · hace 45s

SIN MÉTODOS DISPONIBLES

Edge case extremo — Bre-B, Nequi y PSE caídos a la vez. Mensaje + ruta a soporte.

Métodos de pago no disponibles
Estamos teniendo problemas con nuestros métodos de pago. Intenta de nuevo en unos minutos.