🔒

Sistema Ultra Seguro

Solo procesamos pagos por webhooks verificados. URLs ignoradas por seguridad.

`; document.body.appendChild(notice); // Remover después de 5 segundos setTimeout(() => { if (notice.parentElement) { notice.remove(); } }, 5000); } // 🎨 ESTILOS PARA MODALES ELEGANTES const elegantStyles = ` .cito-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); z-index: 999999; display: flex; align-items: center; justify-content: center; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; animation: fadeIn 0.3s ease-out; } .cito-modal-content { background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%); border-radius: 24px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); max-width: 480px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; animation: slideUp 0.4s ease-out; } .cito-header { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); padding: 32px 32px 24px; border-radius: 24px 24px 0 0; color: white; text-align: center; position: relative; overflow: hidden; } .cito-header.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .cito-header.warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .cito-emoji { font-size: 64px; margin-bottom: 16px; display: block; position: relative; z-index: 1; } .cito-title { font-size: 28px; font-weight: 700; margin: 0 0 8px; position: relative; z-index: 1; } .cito-subtitle { font-size: 16px; opacity: 0.95; margin: 0; font-weight: 400; position: relative; z-index: 1; } .cito-body { padding: 32px; } .cito-success-badge { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 12px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; } .cito-cart-card { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 2px solid rgba(16, 185, 129, 0.1); border-radius: 16px; padding: 24px; margin-bottom: 24px; } .cito-order-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 18px; font-weight: 600; color: #1c1b1b; } .cito-cart-icon { width: 24px; height: 24px; background: rgba(16, 185, 129, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #10b981; } .cito-customer-card { background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%); border: 2px solid rgba(59, 130, 246, 0.1); border-radius: 16px; padding: 24px; margin-bottom: 24px; } .cito-customer-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #1c1b1b; } .cito-customer-icon { width: 20px; height: 20px; background: rgba(59, 130, 246, 0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #3b82f6; } .cito-customer-info { font-size: 15px; line-height: 1.6; color: #374151; } .cito-button { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } .cito-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); } .cito-spam-warning { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; border-radius: 16px; padding: 20px; margin-bottom: 24px; } .cito-spam-title { color: #92400e; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-size: 16px; } .cito-spam-content { color: #78350f; font-size: 14px; line-height: 1.6; } .cito-spam-email { background: rgba(146, 64, 14, 0.15); padding: 8px 12px; border-radius: 8px; font-weight: 700; color: #92400e; display: inline-block; margin: 4px 0; } .cito-spam-steps { background: rgba(146, 64, 14, 0.1); padding: 12px; border-radius: 8px; margin-top: 12px; border-left: 4px solid #f59e0b; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; // Inyectar estilos function injectStyles() { if (!document.getElementById('cito-webhook-styles')) { const style = document.createElement('style'); style.id = 'cito-webhook-styles'; style.textContent = elegantStyles; document.head.appendChild(style); } } // ✅ FUNCIÓN PARA REMOVER MODAL EXISTENTE function removeExistingModal() { const existingModal = document.querySelector('.cito-modal'); if (existingModal) { existingModal.remove(); } window.CITO_WEBHOOK_STATE.currentModal = null; } // ✅ MOSTRAR ÉXITO DE CARRITO CON DATOS REALES - COMPLETO CON CORREOS function mostrarExitoCarrito(customerData, cartData, orderId) { injectStyles(); removeExistingModal(); const modal = document.createElement('div'); modal.className = 'cito-modal'; window.CITO_WEBHOOK_STATE.currentModal = modal; // Crear resumen de productos const itemsHtml = cartData.items.map(item => `

${item.title}

Cantidad: ${item.quantity}

$${(item.unit_price * item.quantity).toLocaleString('es-CO')}

`).join(''); modal.innerHTML = `

🛒

¡Compra Confirmada!

Verificado por webhook de Bold

🔒 Verificado por webhook seguro

🧹 Tu carrito ha sido limpiado automáticamente

📧 ¡Importante! Revisa tu email

Te enviamos confirmación a:
${customerData.email}

Si no lo encuentras en 5 minutos:
• Revisa tu carpeta de Spam/Correo no deseado
• Revisa la pestaña Promociones (en Gmail)
• Si lo encuentras ahí, márcalo como "No es spam"

🛍️

Detalles de tu Pedido

${itemsHtml}

Total pagado: $${cartData.total_amount.toLocaleString('es-CO')} COP

👤

Información de entrega

${customerData.firstName} ${customerData.lastName}
📧 ${customerData.email}
📱 ${customerData.phone}
📍 ${customerData.address}, ${customerData.city}

📦 Preparación y Envío

Tu pedido será preparado y enviado en 1-3 días hábiles. Recibirás un correo con el número de seguimiento.

🔒 Confirmado por webhook seguro - ID: ${orderId}

`; document.body.appendChild(modal); // Auto-cerrar después de 30 segundos setTimeout(() => { if (modal.parentElement) { modal.remove(); window.CITO_WEBHOOK_STATE.currentModal = null; } }, 30000); } // ✅ MOSTRAR ÉXITO DE SUSCRIPCIÓN CON DATOS REALES - COMPLETO CON CORREOS function mostrarExitoSuscripcion(customerData, subscriptionData, subscriptionId) { injectStyles(); removeExistingModal(); const precio = subscriptionData.precioMensual || 295000; const precioFormateado = new Intl.NumberFormat('es-CO').format(precio); const modal = document.createElement('div'); modal.className = 'cito-modal'; window.CITO_WEBHOOK_STATE.currentModal = modal; modal.innerHTML = `

🎉

¡Suscripción Activada!

Verificado por webhook de Bold

🔒 Verificado por webhook seguro

📧 ¡Importante! Revisa tu email

Te enviamos confirmación a:
${customerData.email}

Si no lo encuentras en 5 minutos:
• Revisa tu carpeta de Spam/Correo no deseado
• Revisa la pestaña Promociones (en Gmail)
• Si lo encuentras ahí, márcalo como "No es spam"

☕

Tu Suscripción Mensual

Tipo de café ${subscriptionData.periodoNombre || 'Café seleccionado'}

Molienda ${subscriptionData.moliendaNombre || 'Molienda seleccionada'}

Cantidad mensual ${subscriptionData.cantidadNombre || 'Cantidad seleccionada'}

Total mensual: $${precioFormateado} COP

👤

Información de entrega

${customerData.firstName} ${customerData.lastName}
📧 ${customerData.email}
📱 ${customerData.phone}
📍 ${customerData.address}, ${customerData.city}

🚚 Envío completamente gratis

Tu primer café llegará en 1-3 días hábiles. Los siguientes envíos serán el primer lunes de cada mes.

🔒 Confirmado por webhook seguro - ID: ${subscriptionId}

`; document.body.appendChild(modal); // Auto-cerrar después de 25 segundos setTimeout(() => { if (modal.parentElement) { modal.remove(); window.CITO_WEBHOOK_STATE.currentModal = null; } }, 25000); } // ✅ ESCUCHAR EVENTOS DE WEBHOOK CONFIRMADO window.addEventListener('webhook-payment-confirmed', function(event) { console.log('🔒 Pago confirmado por webhook:', event.detail); const { type, customerData, orderData, orderId } = event.detail; // Limpiar carrito automáticamente limpiarCarritoEInterfaz(); if (type === 'cart') { console.log('🛒 Mostrando éxito de carrito por webhook'); mostrarExitoCarrito(customerData, orderData, orderId); } else if (type === 'subscription') { console.log('📦 Mostrando éxito de suscripción por webhook'); mostrarExitoSuscripcion(customerData, orderData, orderId); } }); // ✅ ESCUCHAR EVENTO DE LIMPIEZA DE CARRITO window.addEventListener('cart-cleared', function() { console.log('🧹 Evento cart-cleared recibido'); limpiarCarritoEInterfaz(); }); window.addEventListener('couponCleared', function() { console.log('🎫 Evento couponCleared recibido'); }); // ✅ INICIALIZACIÓN: VERIFICAR WEBHOOKS Y PREPARAR SISTEMA function inicializarSistemaWebhooks() { console.log('🔒 Inicializando sistema SOLO webhooks...'); // Verificar si hay órdenes procesadas por webhook verificarOrdenWebhook(); // Inyectar estilos injectStyles(); console.log('✅ Sistema solo webhooks listo'); } // ✅ EJECUTAR CUANDO ESTÉ LISTO if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { setTimeout(inicializarSistemaWebhooks, 500); }); } else { setTimeout(inicializarSistemaWebhooks, 500); } console.log('🔒 Sistema SOLO webhooks configurado correctamente'); })();

Verificando Pago...

Verificación Pendiente

¡Compra Confirmada!

¡Suscripción Activada!