Billing & invoicing UI

El resumen de cobro debe mostrar cada componente por separado antes de que el usuario confirme el pago: subtotal antes de impuestos, línea de descuento con su código y porcentaje, impuestos desglosados por tipo y total final en negrita. Ocultar el impuesto hasta el último paso genera fricción, abandono y disputas de cargo. Alinea los montos a la derecha con tabular-nums para que la columna de cifras quede perfectamente alineada sin importar el ancho de cada digito.

Cuando el usuario cambia de plan a mitad de ciclo, muestra un resumen de prorrateo antes de confirmar: credito por los días no usados del plan anterior, cargo proporcional del nuevo plan por el resto del ciclo, el monto neto a cobrar hoy y la nueva renovación a partir del siguiente ciclo. Nunca cargues la diferencia sin explicarla en un modal o paso de confirmación. La transparencia previa al cambio reduce las solicitudes de reembolso por confusión de prorrateo (dato de Dodo Payments sin fuente primaria); como criterio, mostrar la matematica elimina la principal causa de disputas en upgrades.

Cuando un cargo falla, notifica de inmediato por email y muestra un banner persistente en la UI con un CTA directo a actualizar el método de pago, sin fricción. El email de dunning lleva el nombre de la empresa en el "From:", una dirección con respuesta real y solo tres oraciones más un botón. Durante el periodo de gracia limita, no cortes, la funcionalidad avanzada. El dunning automatizado puede más que duplicar la recuperación; rangos reportados por operadores: 20-40% sin sistema vs 57-83% con sistema completo.

La tarjeta guardada se identifica con el logo de la marca, los últimos cuatro digitos y la fecha de expiración: suficiente para que el usuario reconozca cual es sin exponer datos sensibles. Nunca muestres el PAN completo ni almacenes el número en tu sistema (lo maneja el procesador vía token). Marca visualmente la tarjeta que esta por expirar y ofrece editar o eliminar cada método. Un campo de texto plano con un número parcial sin marca obliga al usuario a adivinar cual tarjeta tiene cargada.

El historial de facturación debe permitir filtrar por rango de fechas, estado y monto, y ordenar por cualquier columna. Cada fila lleva su enlace de descarga PDF y el sistema ofrece descarga masiva en ZIP para entregar a contabilidad de un golpe. Muestra los filtros activos como chips removibles y un botón "Limpiar filtros" para resetear en un clic. Una lista plana sin filtros ni descarga obliga al usuario a buscar factura por factura.

Todo monto cobrable debe llevar el código de moneda visible (MXN, USD) y el impuesto desglosado por tipo y porcentaje, no fundido en el total. En facturación internacional la misma cifra "1,160" significa cosas distintas en pesos y dolares; el código ISO elimina la ambiguedad. Para facturas fiscales en Mexico el IVA debe aparecer como línea propia al 16% sobre el subtotal, además de las retenciones cuando apliquen. Un total sin moneda ni desglose de impuesto invita a disputas y a errores de conciliación contable.

El panel de suscripción debe mostrar siempre la fecha de la proxima renovación y el monto esperado del siguiente cargo en un lugar prominente, no solo en el email de confirmación. La cifra debe actualizarse en tiempo real cuando el usuario cambia de plan, aplica un descuento o agrega usuarios. El objetivo es eliminar el cargo "sorpresa", el mayor driver de disputas y chargebacks en suscripciones. Un widget que solo dice "Plan Pro $599/mes" sin fecha deja al usuario sin saber cuando ni cuanto se le cobrara.

Cancelar o bajar de plan debe ser tan simple como suscribirse: un botón visible, sin pasos artificiales ni retenciones forzadas. Antes de confirmar, explica con claridad las consecuencias: hasta que fecha conserva el acceso pagado, que funciones pierde al downgrade y si hay credito o reembolso prorrateado. La cancelación debe respetar el ciclo ya pagado (acceso hasta el fin del periodo), no cortar de inmediato. Esconder la cancelación tras menús o exigir llamar a soporte es un dark pattern que la FTC Click-to-Cancel prohibe.