WooCommerce Add to cart issue

Question

I have been trying to add a custom functionality via code snippet to my WooCommerce product page, there are two error in the logs :

1. ajax-single-add-to-c….min.js?ver=2.2.9:1POST https://giftarticlewala.com/?wc-ajax=woostify_single_add_to_cart 500 (Internal Server Error)buttons.length.buttons.forEach.ele.onclick  @   ajax-single-add-to-c….min.js?ver=2.2.9:1ajax-single-add-to-c….min.js?ver=2.2.9:1Response {type: 'basic', url: 'https://giftarticlewala.com/?wc-ajax=woostify_single_add_to_cart', redirected: false, status: 500, ok: false, …}ajax-single-add-to-c….min.js?ver=2.2.9:1POST https://giftarticlewala.com/?wc-ajax=woostify_single_add_to_cart 500 (Internal Server Error)buttons.length.buttons.forEach.ele.onclick  @   ajax-single-add-to-c….min.js?ver=2.2.9:1a   @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1M   @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1S   @   front-end.js?ver=3.0.7:1Promise.then (async)        k   @   front-end.js?ver=3.0.7:1b.setState  @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1a   @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1setTimeout (async)      c   @   front-end.js?ver=3.0.7:1
   

2. customized-car-keychain/:411POST https://giftarticlewala.pythonanywhere.com/customize-image 500 (INTERNAL SERVER ERROR)(anonymous)   @   customized-car-keychain/:411customized-car-keychain/:411POST https://giftarticlewala.pythonanywhere.com/customize-image 500 (INTERNAL SERVER ERROR)(anonymous)  @   customized-car-keychain/:411a   @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1M   @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1S   @   front-end.js?ver=3.0.7:1Promise.then (async)        k   @   front-end.js?ver=3.0.7:1b.setState  @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1a   @   front-end.js?ver=3.0.7:1(anonymous) @   front-end.js?ver=3.0.7:1setTimeout (async)      c   @   front-end.js?ver=3.0.7:1
   

My code:

add_action('woocommerce_after_add_to_cart_button', 'custom_customize_now_button', 1);
    function custom_customize_now_button() { global $product;
    // Define product IDs eligible for customization
    $eligible_product_ids = [5001]; // Add more product IDs as needed
    
    // Check if the current product is eligible for customization
    if (in_array($product->get_id(), $eligible_product_ids)) {
        // Echo the "Customize Now" button
        echo '<button type="button" class="single_add_to_cart_button button alt" id="customizeNowButton" style="margin-top: 15px;">Customize Now</button>';
    
        echo '<script>
        document.addEventListener("DOMContentLoaded", function () {
            document.getElementById("customizeNowButton").addEventListener("click", function () {
                var frontText = document.querySelector(\'input[name="text_0524844621"]\').value;
                var backText = document.querySelector(\'input[name="text-5320109953"]\').value;
                var productID = "'.$product->get_id().'";
                var variationID = document.querySelector(\'input[name="variation_id"]\') ? document.querySelector(\'input[name="variation_id"]\').value : "";
    
                var data = {
                    product_id: productID,
                    front_text: frontText,
                    back_text: backText,
                    variation_id: variationID
                };
    
                fetch("https://giftarticlewala.pythonanywhere.com/customize-image", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(data),
                    mode: "cors",
                })
                .then(response => response.json())
                .then(data => {
                    if (data.image_url) {
                        var imgWindow = window.open("", "CustomizedProductImage");
                        imgWindow.document.write(\'<img src="\' + data.image_url + \'" alt="Customized Product Image" />\');
                    } else {
                        alert("Failed to customize product.");
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    alert("Error customizing product.");
                });
            });
        });
        </script>';
    }
}

When am running the same API on postman it totally works fine with the same post data, I think there is some issue with my theme and the code snippet. I have been facing this issue single 2 days but could not find any solution lately. Please if anyone could guide me or help me, it would be appreciated.