Recarga: Mi Telcel
if (!amount );
<button class="btn-recargar" id="recargarBtn"> ⚡ Realizar Recarga </button> <div id="statusMessage" class="message"> 💡 Selecciona un monto e ingresa tu número </div> </div> <footer> 🔒 Simulación segura · Conectado a Telcel API (demo) </footer> </div>
// Cuando el usuario escribe un monto custom, anula la selección de botones customAmountInput.addEventListener('input', (e) => clearSelectedButtons(); const val = e.target.value.trim(); if (val !== '') const num = parseFloat(val); if (!isNaN(num) && num > 0) selectedAmount = num; statusDiv.innerHTML = `✏️ Monto personalizado: $$num MXN`; else selectedAmount = null; statusDiv.innerHTML = `⚠️ Ingresa un monto válido (mínimo $10)`; else selectedAmount = null; statusDiv.innerHTML = `💡 Selecciona un monto predefinido o escribe uno`; statusDiv.classList.remove('error-msg', 'success-msg'); ); mi telcel recarga
recargarBtn.addEventListener('click', async () => phoneDigits.length !== 10) statusDiv.innerHTML = '❌ Ingresa un número Telcel válido de 10 dígitos (ej. 5512345678)'; statusDiv.classList.add('error-msg'); statusDiv.classList.remove('success-msg'); return;
<div class="input-group"> <label>💰 Monto a recargar (MXN)</label> <div class="amount-buttons" id="amountButtons"> <button type="button" class="amount-btn" data-amount="20">$20</button> <button type="button" class="amount-btn" data-amount="50">$50</button> <button type="button" class="amount-btn" data-amount="100">$100</button> <button type="button" class="amount-btn" data-amount="200">$200</button> <button type="button" class="amount-btn" data-amount="500">$500</button> </div> <div class="custom-amount"> <input type="number" id="customAmount" placeholder="Otra cantidad (MXN)" min="10" step="10"> </div> </div> if (!amount )
// Simular proceso de recarga async function realizarRecarga(phone, amount) // Simulación de llamada a API return new Promise((resolve, reject) => setTimeout(() => // Condiciones simuladas: número no puede ser 0000000000, monto mínimo 10 if (phone === '0000000000') reject(new Error('Número no válido (simulación)')); else if (amount < 10) reject(new Error('El monto mínimo de recarga es $10 MXN')); else if (amount > 3000) reject(new Error('Monto máximo permitido: $3,000 MXN')); else resolve( success: true, message: `Recarga exitosa: $$amount MXN a $phone. Saldo disponible en minutos.`, folio: 'TEL-' + Math.floor(Math.random() * 1000000) ); , 800); );
// Seleccionar monto predefinido amountBtns.forEach(btn => btn.addEventListener('click', () => clearSelectedButtons(); btn.classList.add('selected'); selectedAmount = parseInt(btn.getAttribute('data-amount'), 10); customAmountInput.value = ''; // limpiar custom statusDiv.innerHTML = `✅ Monto seleccionado: $$selectedAmount MXN`; statusDiv.classList.remove('error-msg', 'success-msg'); ); ); button class="btn-recargar" id="recargarBtn">
// Función para limpiar selección visual function clearSelectedButtons() amountBtns.forEach(btn => btn.classList.remove('selected'));