Implementación completa del flujo de compra en 3 pasos: Carrito → Datos → Pago, inspirado en la experiencia de KFStreaming, adaptado al stack PHP + SQLite de AMR TECH y al sistema de productos de la tienda.
La competencia (kfstreaming.com) implementa un carrito completo con 3 pasos, múltiples métodos de pago (Binance Pay, ZINLI, Nequi, PayPal, PagoMóvil), conversión automática USDT→COP y upload de comprobante. Se analizaron 6 capturas del flujo completo para extraer los patrones clave.
| Característica KFStreaming | Implementada en AMR Store | Notas |
|---|---|---|
| Stepper 3 pasos (Carrito → Datos → Pago) | ✓ Sí | Mismo patrón en las 3 páginas con estado visual activo/hecho |
| Carrito con cantidad editable y eliminar | ✓ Sí | localStorage amrCart_v1, +/− y "Eliminar" por producto |
| Resumen del pedido en sidebar | ✓ Sí | Sticky en desktop, en orden vertical en móvil |
| Vaciar carrito | ✓ Sí | Con confirm() de confirmación |
| Tarjetas de método pago con badge MANUAL/AUTOMÁTICO | ✓ Sí | Dinámico desde config.json; selección visual con checkmark |
| Conversión USDT → COP en tiempo real | Parcial | Se muestra el total en COP (el store ya maneja COP); no aplica USDT actualmente |
| Datos del beneficiario (número/cuenta/wallet) | ✓ Sí | Configurable por método en config.json; botón "Copiar" |
| Upload de comprobante (jpg/png/webp) | ✓ Sí | Guardado en data/comprobantes/, max 5 MB |
| Número de referencia | ✓ Sí | Campo libre en el formulario de comprobante |
| Estado del pago + Estado de entrega | ✓ Sí | pending/reviewing/approved + pending/processing/delivered |
| Página de pedido con URL permanente | ✓ Sí | /pedido.php?id={uuid32} — UUID opaco de 32 hex |
| Sección de credenciales entregadas | ✓ Sí | Por ítem con badge "0 ENTREGADA(S) · N PENDIENTE(S)" |
| Binance Pay automático | No incluido | Se puede agregar a config.json cuando se tenga el merchant ID |
| Botón "Agregar al carrito" en catálogo | ✓ Sí | Feedback visual "Agregado ✓" y badge animado en navbar |
localStorage amrCart_v1. Muestra productos con qty editable, resumen y botón "Continuar al pago".api-checkout.php?action=create.?action=create crea la orden en SQLite, ?action=comprobante sube el archivo y cambia status a reviewing, ?action=order devuelve datos del pedido. Auto-crea las tablas orders y order_payments..add-cart-btn · botón "Agregar" en cada producto con precio (los sin precio siguen con WhatsApp) · funciones JS amrGetCart() amrSaveCart() amrAddToCart() amrUpdateCartBadge().
payment_methods con 4 métodos: Nequi, Daviplata, Bancolombia, USDT BEP-20. Cada método define id, nombre, tipo (manual/auto), badge, logo, número/cuenta/wallet, titular, descripción.amrCart_v1. Sobrevive recargas y navegación entre páginas del mismo origen.random_bytes(16) → 32 hex. URL de pedido no adivinable.mime_content_type() valida tipo real. Guardado en data/comprobantes/.CREATE TABLE orders ( id INTEGER PRIMARY KEY AUTOINCREMENT, uuid TEXT UNIQUE NOT NULL, -- 32 hex, URL token number INTEGER, -- sequential #1001, #1002… customer_name TEXT DEFAULT '', customer_email TEXT NOT NULL, payment_method TEXT NOT NULL, -- nequi | daviplata | bancolombia | usdt payment_status TEXT DEFAULT 'pending', -- pending | reviewing | approved | rejected delivery_status TEXT DEFAULT 'pending', -- pending | processing | delivered total_cop INTEGER NOT NULL DEFAULT 0, items_json TEXT NOT NULL DEFAULT '[]', created_at TEXT DEFAULT (datetime('now','localtime')), updated_at TEXT DEFAULT (datetime('now','localtime')) ); CREATE TABLE order_payments ( id INTEGER PRIMARY KEY AUTOINCREMENT, order_uuid TEXT NOT NULL, reference TEXT DEFAULT '', -- nro. ref del comprobante proof_filename TEXT DEFAULT '', -- uuid_timestamp.jpg submitted_at TEXT DEFAULT (datetime('now','localtime')), notes TEXT DEFAULT '' );
1. El usuario agrega productos desde el catálogo (amrstore.php) → se guardan en localStorage
2. En carrito.php revisa items, edita qty, vacía o continúa
3. En checkout.php ingresa email y selecciona método de pago → POST JSON a api-checkout.php?action=create
4. La API crea la fila en orders, responde con uuid y number, el JS limpia el cart y redirige a /pedido.php?id={uuid}
5. En pedido.php el cliente ve las instrucciones de pago, sube el comprobante → POST multipart a api-checkout.php?action=comprobante
6. La API guarda el archivo, cambia payment_status → reviewing, página recarga y muestra "Comprobante recibido ✓"