Pantalla: Checkout
Identificador: SCR-PAY-004
Nombre: Checkout
Modulo: MTS-PAY-001 - Pagos y Suscripciones
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
| Atributo |
Valor |
| Tipo |
Pre-checkout / Resumen |
| Acceso |
SCR-PAY-002/003 > Suscribirse |
| Roles |
Todos |
| Tiers |
Free, Pro (upgrade) |
| Prioridad |
Alta |
2. Proposito
Pantalla de resumen antes de redirigir al App Store o Google Play para completar el pago. Confirma el plan seleccionado, periodo y precio final.
Importante: MedTime no procesa pagos. Esta pantalla prepara al usuario antes de abrir la interfaz nativa del Store.
3. Wireframe - Nueva Suscripcion
+--------------------------------------------------+
| [<] Confirmar suscripcion |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | [Pro badge] | |
| | | |
| | Plan Pro - Mensual | |
| | | |
| | $9.99/mes | |
| | | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| RESUMEN |
+--------------------------------------------------+
| |
| Plan seleccionado Plan Pro |
| Periodo Mensual |
| Primer cobro Hoy |
| Proxima renovacion 5 Ene 2026 |
| |
| ------------------------------------------- |
| |
| Total hoy $9.99 USD |
| (Impuestos aplicados por App Store) |
| |
+--------------------------------------------------+
| PRUEBA GRATUITA |
+--------------------------------------------------+
| |
| [check] Prueba de 7 dias incluida |
| |
| No se te cobrara hasta el 12 Dic 2025. |
| Puedes cancelar en cualquier momento |
| antes de esa fecha. |
| |
+--------------------------------------------------+
| |
| Al continuar, aceptas los [Terminos de |
| Servicio] y la [Politica de Privacidad]. |
| |
| [Continuar a App Store] |
| |
| El pago sera procesado por Apple. |
| Puedes cancelar en Ajustes > Suscripciones. |
| |
+--------------------------------------------------+
4. Wireframe - Upgrade (Pro a Perfect)
+--------------------------------------------------+
| [<] Actualizar suscripcion |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | [Perfect badge] | |
| | | |
| | Actualizar a Perfect - Mensual | |
| | | |
| | $19.99/mes | |
| | | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| CAMBIO DE PLAN |
+--------------------------------------------------+
| |
| Plan actual Pro ($9.99/mes) |
| Nuevo plan Perfect ($19.99/mes) |
| Diferencia +$10.00/mes |
| |
| ------------------------------------------- |
| |
| Ajuste prorata -$3.33 USD |
| (dias restantes de Pro) |
| |
| Cobro hoy $16.66 USD |
| |
+--------------------------------------------------+
| |
| Tu ciclo de facturacion se mantiene. |
| El cambio es inmediato. |
| |
| [Continuar a App Store] |
| |
+--------------------------------------------------+
5. Elementos de UI
5.1. Componentes
| ID |
Componente |
Tipo |
Requerido |
| header |
Top App Bar |
CMP-NAV-002 |
Si |
| plan_card |
Plan Summary Card |
Custom |
Si |
| summary_list |
Key-Value List |
Custom |
Si |
| trial_banner |
Trial Info Banner |
Custom |
Condicional |
| legal_text |
Legal Links |
- |
Si |
| cta_button |
Primary Button |
CMP-BTN-001 |
Si |
| store_notice |
Footer Text |
- |
Si |
5.2. Summary Row
Plan seleccionado Plan Pro
^^^^^^^^^^^^^^^^^ ^^^^^^^^
Label (neutral.600) Value (bold, negro)
+----------------------------------------------+
| Continuar a App Store |
| [Apple logo] |
+----------------------------------------------+
Variantes:
- iOS: "Continuar a App Store" + Apple logo
- Android: "Continuar a Google Play" + Play logo
6. Estados
6.1. Tipo de Transaccion
| Tipo |
Visual |
| Nueva suscripcion con trial |
Banner trial + "No se te cobrara hasta..." |
| Nueva suscripcion sin trial |
Sin banner trial, cobro inmediato |
| Upgrade |
Section "Cambio de Plan" con diferencial |
| Downgrade |
Section con advertencia de features perdidas |
6.2. Estados de Carga
| Estado |
Visual |
| Calculando precios |
Skeleton en precio |
| Listo |
Precios visibles, CTA enabled |
| Error de precios |
Toast + reintentar |
| Conectando a Store |
Spinner en CTA |
| En Store |
App en background |
7. Interacciones
7.1. Flujo al Store
flowchart TD
A[Tap CTA] --> B[Validar datos]
B --> C[Mostrar spinner]
C --> D[Iniciar compra StoreKit/Billing]
D --> E[Store UI aparece]
E --> F{Usuario en Store}
F -->|Completa| G[Callback success]
F -->|Cancela| H[Callback cancel]
F -->|Error| I[Callback error]
G --> J[SCR-PAY-005]
H --> K[Volver a checkout]
I --> L[Toast error]
7.2. Gestos
| Gesto |
Elemento |
Accion |
| Tap |
CTA |
Iniciar compra |
| Tap |
Terminos |
Abrir modal/webview |
| Tap |
Back |
Confirmar si hay cambios |
8. Calculo de Prorata (Upgrade)
Dias restantes en ciclo actual: 10 de 30
Valor diario Pro: $9.99 / 30 = $0.333
Credito: 10 * $0.333 = $3.33
Cobro inmediato Perfect: $19.99 - $3.33 = $16.66
Nota: El calculo real lo hace el Store. Esta es solo una aproximacion para informar al usuario.
9. Textos Legales
9.1. Trial
Prueba de 7 dias incluida
No se te cobrara hasta el [fecha].
Puedes cancelar en cualquier momento
antes de esa fecha sin cargo.
9.2. Renovacion
Tu suscripcion se renovara automaticamente
cada [periodo] a menos que la canceles al
menos 24 horas antes del fin del periodo
actual en Ajustes > Suscripciones.
9.3. Procesamiento
El pago sera procesado por [Apple/Google].
MedTime no almacena informacion de pago.
10. Accesibilidad
10.1. Screen Reader
| Elemento |
Label |
Hint |
| plan_card |
"Plan [nombre], [precio] [periodo]" |
- |
| summary_row |
"[Label]: [Valor]" |
- |
| trial_banner |
"Prueba gratuita de 7 dias incluida" |
"No se cobra hasta [fecha]" |
| cta |
"Continuar a [Store] para completar compra" |
- |
| legal_link |
"[Nombre del documento]" |
"Abre documento legal" |
10.2. Focus Order
- Plan card (informativo)
- Summary list (informativo)
- Trial banner (si aplica)
- Link terminos
- Link privacidad
- CTA button
11. Eventos de Analytics
| Evento |
Trigger |
Parametros |
| checkout_viewed |
Abrir pantalla |
plan, period, is_trial, is_upgrade |
| checkout_store_redirect |
Tap CTA |
plan |
| checkout_terms_viewed |
Tap terminos |
- |
| checkout_abandoned |
Back sin completar |
step |
12. Casos de Prueba
| ID |
Caso |
Resultado Esperado |
| TC-001 |
Nueva suscripcion con trial |
Banner trial visible |
| TC-002 |
Nueva sin trial |
Sin banner, cobro inmediato |
| TC-003 |
Upgrade Pro->Perfect |
Muestra diferencial |
| TC-004 |
Tap CTA |
Abre Store |
| TC-005 |
Volver del Store (cancel) |
Vuelve a checkout |
| TC-006 |
Error de red |
Toast + CTA retry |
13. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)