WooCommerce add a custom fee using ajax to cart totals on checkout page

Question

I am trying make it when user changes the Shipping address select dropdown it dynamically add a fee to cart totals using ajax.I could able to to get the value but when select a another state it wont update the totals.

My ajax request:

jQuery(document).ready(function () {
    jQuery('#shipping_state').change(function () {
        var data = {
            action: 'woocommerce_custom_fee',
            security: wc_checkout_params.update_order_review_nonce,
            add_order_fee: 'state',
            post_data: jQuery('form.checkout').serialize()
        };
        jQuery.ajax({
            type: 'POST',
            url: wc_checkout_params.ajax_url,
            data: data,
            success: function (code) {
                var result = '';
                result = jQuery.parseJSON(code);
                if (result.result === 'success') {

                    jQuery('body').trigger('update_checkout');
                }
            },
            dataType: 'html'
        });
        return false;
    });
})

And in functions.php

add_action('woocommerce_cart_calculate_fees', 'woo_add_cart_fee');

function woo_add_cart_fee() {
global $woocommerce;
$destsuburb = $woocommerce->customer->get_shipping_state();

/*Then I use $destsuburb as a variable to API and get a shipping cost returning $shipping_cost*/

$woocommerce->cart->add_fee('Shipping and Handling:', $shipping_cost);
}

I am getting different Shipping cost according to the State,but its not changing the front end value through add_fee()

Answer 1

Finally I found a solution using a session variable to store the Ajax value and add_fee()

My ajax request:

jQuery(document).ready(function () {

    jQuery('#State').click(function () {
        if (jQuery('#ship-to-different-address-checkbox').is(':checked')) {
            var state = jQuery('#shipping_state').val();
            var post_code = jQuery('#shipping_postcode').val();
        } else {
            var state = jQuery('#billing_state').val();
            var post_code = jQuery('#billing_postcode').val();

        }
        console.log(state + post_code);
        var data = {
            action: 'woocommerce_apply_state',
            security: wc_checkout_params.apply_state_nonce,
            state: state,
            post_code: post_code
        };

        jQuery.ajax({
            type: 'POST',
            url: wc_checkout_params.ajax_url,
            data: data,
            success: function (code) {
                console.log(code);
//                jQuery('.woocommerce-error, .woocommerce-message').remove();

                if (code === '0') {
//                    $form.before(code);
                    jQuery('body').trigger('update_checkout');
                }
            },
            dataType: 'html'
        });

        return false;
    });

});

And in functions.php

wp_enqueue_script('neemo_state', get_template_directory_uri() . '/js/state_test.js', array('jquery'));
wp_localize_script('neemo_state', 'wc_checkout_params', array('ajaxurl' => admin_url('admin-ajax.php')));

add_action('wp_ajax_woocommerce_apply_state', 'calculate', 10);
add_action('wp_ajax_nopriv_woocommerce_apply_state', 'calculate', 10);

function calculate() {
    if (isset($_POST['state'])) {
        global $woocommerce;
        $weight = WC()->cart->cart_contents_weight;
        $state = $_POST['state'];
        if ($state === "VIC") {
            $val = 1;
        } else {
            $val = 2;
        }
        session_start();
        $_SESSION['val'] = $val;
    }
}

add_action('woocommerce_cart_calculate_fees', 'woo_add_cart_fee');

function woo_add_cart_fee() {
    session_start();
    $extracost = $_SESSION['val'];
    WC()->cart->add_fee('Shipping & Handling:', $extracost);
}

Answer 2

I had to code for accepting donation just before checkout and adding that donation amount to the cart as a fee - and to provide flexibility for user to change the donation amount any number of times before proceeding to pay. I used the following code and it worked so well. I had Donation amount and a donateNow button - <input type="button" id="donateNowBtn" value="Donate Now!"

code in function.php

add_action( 'wp_footer', 'woocommerce_click_donate_button', 80 );
function woocommerce_click_donate_button() {
    if (is_checkout()) {
    ?>
    <script type="text/javascript">
    jQuery( document ).ready(function( $ ) {
        $('#donateNowBtn').click(function(){
            jQuery('body').trigger('update_checkout');
        });
    });
    </script>
    <?php
    }
}


add_action( 'woocommerce_cart_calculate_fees', 'woo_add_cart_fee' );
function woo_add_cart_fee( $cart ){
        if ( ! $_POST || ( is_admin() && ! is_ajax() ) ) {
        return;
    }

    if ( isset( $_POST['post_data'] ) ) {
        parse_str( $_POST['post_data'], $post_data );
    } else {
        $post_data = $_POST; // fallback for final checkout (non-ajax)
    }

    if (isset($post_data['donation_amount'])) {
        $donation_amount = $post_data['donation_amount'] ;
        WC()->cart->add_fee( 'Donation Amount', $donation_amount );
    }

}