clic.js

// Si hacen clic en un botón para comprar...
for (const $boton of $botonesComprar) {
    $boton.onclick = async () => {
        // Extraemos precio y le decimos al servidor que se ponga en modo "descontar saldo" tan pronto el lector lo "contacte"
        const precio = parseFloat($boton.dataset.precio);
        $estado.textContent = "Estableciendo conexión con servidor...";
        const respuestaRaw = await fetch("./establecer_modo_compra.php?saldo=".concat(precio));
        const respuestaJson = await respuestaRaw.json();
        if (respuestaJson) {
            $estado.textContent = "OK. Coloque la tarjeta en el lector";
        } else {

            $estado.textContent = "Error estableciendo comunicación con servidor";
        }
        // Ahora el servidor ya está en espera de que el lector "le hable". Así que consultamos cada 2 segundos si hay novedades
        const esperarLector = async () => {
            // Deshabilitamos todos los botones, pues estamos esperando
            $botonesComprar.forEach($boton => {
                $boton.disabled = true;
                if (!$boton.classList.contains("is-loading")) {
                    $boton.classList.add("is-loading");
                }
            });
            // Verificamos...
            $estado.textContent = "Verificando...";
            const respuestaRaw = await fetch("./ver_mensaje_lector.php");
            const texto = await respuestaRaw.text();
            // Si se devuelve una cadena no vacía, entonces la mostramos (la cadena puede tener un mensaje de éxito o de error)
            if (texto) {
                $estado.textContent = texto;

                $botonesComprar.forEach($boton => {
                    $boton.disabled = false;
                    $boton.classList.remove("is-loading")
                });
            } else {
                // Si el servidor indica que el lector no se ha comunicado, lo indicamos y volvemos a intentar dentro de 2 segundos
                $estado.textContent = "No se ha leído nada. Recuerde colocar la tarjeta en el lector. Intentando de nuevo...";
                setTimeout(esperarLector, 2000);
            }
        };
        esperarLector();
    };
}