Enabling recaptcha on coupon code in WooCommerce

Question

I am trying to use a reCAPTCHA button on the coupon field for the shopping cart in WooCommerce.

I have added code in my theme functions.php file and in cart.php template file, to add the reCAPTCHA, disable the Apply Coupon button and then on a successful reCAPTCHA, verify with the server and then enable the Apply Coupon button.

However, I seem to have an issue where the AJAX call doesn't occur.

Code in functions.php file:

// ReCAPTCHA verification callback
function verify_recaptcha_callback() {
    $recaptcha_response = sanitize_text_field($_POST['recaptchaResponse']);
    $secret_key = 'MY_SECRET_KEY'; // Replace with your actual secret key

    $verification_response = wp_safe_remote_post('https://www.google.com/recaptcha/api/siteverify', array(
        'body' => array(
            'secret'   => $secret_key,
            'response' => $recaptcha_response,
        ),
    ));

    if (is_wp_error($verification_response)) {
        wp_send_json(array('success' => false, 'error' => 'Verification failed'));
    }

    $response_body = wp_remote_retrieve_body($verification_response);
    $response_data = json_decode($response_body);

    if ($response_data->success) {
        wp_send_json(array('success' => true));
    } else {
        wp_send_json(array('success' => false, 'error' => 'Verification failed'));
    }
}
add_action('wp_ajax_verify_recaptcha', 'verify_recaptcha_callback');
add_action('wp_ajax_nopriv_verify_recaptcha', 'verify_recaptcha_callback');

Code in my cart.php:

            <tr>
                <td colspan="6" class="actions">
                 <?php if ( wc_coupons_enabled() ) { ?>
                        <div class="coupon">
                         <!-- Coupon code input and Apply Coupon button here -->
<label for="coupon_code" class="screen-reader-text"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>
                            <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" />
                            <button type="submit" class="button<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?>" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_html_e( 'Apply coupon', 'woocommerce' ); ?></button>
                            <?php do_action( 'woocommerce_cart_coupon' ); ?>
                         <!-- Add reCAPTCHA widget here -->
                         <div id="coupon-recaptcha" class="g-recaptcha" data-sitekey="MY_SITE_KEY" data-callback="onRecaptchaSuccess"></div>
                                    <!-- Place the script here -->
                                    <script>
                                        function enableApplyCouponButton() {
                                            var applyCouponButton = document.querySelector('button[name="apply_coupon"]');
                                            if (applyCouponButton) {
                                                applyCouponButton.removeAttribute('disabled');
                                            }
                                        }

                                        function disableApplyCouponButton() {
                                            var applyCouponButton = document.querySelector('button[name="apply_coupon"]');
                                            if (applyCouponButton) {
                                                applyCouponButton.setAttribute('disabled', 'disabled');
                                            }
                                        }

                                        function onRecaptchaSuccess(response) {
                                            console.log('reCAPTCHA succeeded');
        
                                            // Send the reCAPTCHA response to the server for verification
                                            jQuery.post(ajaxurl, {
                                                action: 'verify_recaptcha',
                                                recaptchaResponse: response,
                                            }, function(data) {
                                                if (data.success) {
                                                   enableApplyCouponButton();
                                               } else {
                                                   console.error('reCAPTCHA verification failed');
                                                }
                                           });
                                        }

                                        // Disable the button initially
                                        disableApplyCouponButton();

                                    </script>


                         </div>
                    <?php } ?>

                 <!-- Update cart button and other actions here -->

                 <?php wp_nonce_field( 'woocommerce-cart', 'woocommerce-cart-nonce' ); ?>
             </td>
            </tr>

I was expecting to see the ajax call in the network but the fact that it isnt there makes me think it isnt working. I am not sure how to solve.