sweetalert2.js

const TOTAL_VENTA = 30;
const resultado = await Swal
    .fire({
        title: "Escriba el pago del cliente para calcular el cambio",
        input: "number",
        inputValidator: pago => {
            if (!pago || pago < TOTAL_VENTA) {
                return "El pago debe ser mayor o igual al total de la venta";
            } else {
                return undefined;
            }
        },
        html: `
    <h2>Total: <small >$${TOTAL_VENTA.toFixed(2)}</small></h2>
    <h1>Cambio: <small id="cambio"></small></h1>
    `,
        didOpen: () => {
            const input = Swal.getInput()
            const $cambio = Swal.getHtmlContainer().querySelector(
            "#cambio");
            input.oninput = () => {
                $cambio.textContent = "";
                const cambio = parseFloat(input.value) - TOTAL_VENTA;
                if (cambio > 0) {
                    $cambio.textContent = `$${cambio.toFixed(2)}`;
                }
            }
        },
        showCancelButton: true,
        confirmButtonText: "Ok",
        cancelButtonText: "Cancelar",
    });
if (resultado.value) {
    const input = Object.assign(document.createElement("input"), {
        value: "terminar",
        name: "accion",
        type: "hidden",
    });
    $formularioTerminarVenta.append(input);
    $formularioTerminarVenta.submit();
}