Shopify cart values only update when I use hardcoded values

I have written some code to allow my client to add free products to cart when its value goes above a fixed threshold.

I get these values in my file through the theme settings. The problem is that the free product code only works if I use hardcoded values. Otherwise, I get 404 erro in the cart update.js file.

This is the code that works:

$.ajax({
    type: 'get',
    url: '/cart.js',
    dataType: 'json',
    success: function(data) {
        var total_cart_price = 0;
        total_cart_price = data.total_price / 100;
        var free_product_id = settings.first_free_product;
        var first_free_price_threshold = settings.first_free_price_threshold;
        console.log(Free product ID: ${free_product_id} and price threshold: ${first_free_price_threshold});

        const cartItems = data.items.map(item => item.id);
        let updates = {};
        if (total_cart_price < 60) {
            updates = {
                48270424670533: 0
            };
        }
        if (total_cart_price >= 60) {
            updates = {
                48270424670533: 1
            };
        }
        fetch(window.Shopify.routes.root + 'cart/update.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                updates
            })
        }).then(response => {
            myCartRefresher();
            return response.json();
        }).catch((error) => {
            console.error('Error:', error);
        });
    }
});

This is the code that doesn't:

$.ajax({
    type: 'get',
    url: '/cart.js',
    dataType: 'json',
    success: function(data) {
        var total_cart_price = 0;
        total_cart_price = data.total_price / 100;
        var free_product_id = {{ settings.first_free_product }};
        var first_free_price_threshold = {{ settings.first_free_price_threshold }};
        console.log(Free product ID: ${free_product_id} and price threshold: ${first_free_price_threshold});

        const cartItems = data.items.map(item => item.id);
        let updates = {};
        if (total_cart_price < first_free_price_threshold) {
            updates = {
                free_product_id: 0
            };
        }

        if (total_cart_price >= first_free_price_threshold) {
            updates = {
                free_product_id: 1
            };
        }
        fetch(window.Shopify.routes.root + 'cart/update.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                updates
            })
        }).then(response => {
            myCartRefresher();
            return response.json();
        }).catch((error) => {
            console.error('Error:', error);
        });
    }
});

What am I doing wrong?

Thanks.

The syntax of key/object looks a bit broken.

Try this:

        if (total_cart_price < first_free_price_threshold) {
            updates = {
                [free_product_id]: 0
            };
        }

        if (total_cart_price >= first_free_price_threshold) {
            updates = {
                [free_product_id]: 1
            };
        }