Este es un ejemplo de código abierto (open source) en HTML, CSS y JavaScript para un formulario de cobro de contribuciones. Calcula automáticamente una comisión de red del 3% y el total a pagar, mostrando el desglose al usuario.
Este código es funcional en el lado del cliente (frontend) y puede integrarse con cualquier pasarela de pagos.
html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Contribución - 3% Red</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 20px; }
.container { max-width: 400px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 02px 10px rgba(0,0,0,0.1); }
h2 { text-align: center; color: #333; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="number"], input[type="text"] { width: 100%; padding: 8px; box-sizing: border-box; }
.summary { background: #eee; padding: 10px; border-radius: 4px; margin-top: 20px; }
.summary p { margin: 5px 0; display: flex; justify-content: space-between; }
button { width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
button:hover { background-color: #218838; }
.fee-highlight { color: #d9534f; font-weight: bold; }
</style>
</head>
<body>
<div class="container">
<h2>Contribución</h2>
<form id="contribucionForm">
<div class="form-group">
<label for="nombre">Nombre del Contribuyente</label>
<input type="text" id="nombre" name="nombre" required placeholder="Juan Pérez">
</div>
<div class="form-group">
<label for="monto">Monto de Contribución ($)</label>
<input type="number" id="monto" name="monto" required min="1" step="0.01" placeholder="0.00" oninput="calcularTotal()">
</div>
<div class="summary">
<p><span>Contribución:</span> <span id="resMonto">$0.00</span></p>
<p><span>Impuesto Red (3%):</span> <span id="resComision" class="fee-highlight">+$0.00</span></p>
<p><strong>Total a pagar:</strong> <strong id="resTotal">$0.00</strong></p>
</div>
<button type="submit" style="margin-top:20px;">Confirmar Pago</button>
</form>
</div>
<script>
function calcularTotal() {
// 1. Obtener el monto ingresado
let montoInput = document.getElementById('monto').value;
let monto = parseFloat(montoInput) || 0;
// 2. Calcular la comisión (3%)
let comision = monto * 0.03;
let total = monto + comision;
// 3. Mostrar desglosado en la interfaz
document.getElementById('resMonto').innerText = '$' + monto.toFixed(2);
document.getElementById('resComision').innerText = '+$' + comision.toFixed(2);
document.getElementById('resTotal').innerText = '$' + total.toFixed(2);
}
// Manejar el envío del formulario
document.getElementById('contribucionForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Procesando pago de: ' + document.getElementById('resTotal').innerText);
// Aquí se integraría la lógica para enviar los datos a un backend (ej. Stripe/PayPal)
});
</script>
</body>
</html>
Características de este código:
Código Abierto: Puedes copiar, modificar y usar libremente.
Cálculo Dinámico: Usa JavaScript (oninput="calcularTotal()") para actualizar la comisión y el total en tiempo real mientras el usuario escribe.
Desglose de Comisión: Muestra claramente el 3% de impuesto de red.
Estructura HTML5: Formulario limpio y organizado.
Seguridad Básica: Campos obligatorios (required) y tipos de datos numéricos.
Nota: Para un entorno de producción, la comisión del 3% debe recalcularse en el servidor (backend) para evitar alteraciones en el navegador del cliente.
No hay comentarios:
Publicar un comentario