woocommerce_cart_calculate_fees: Update Fee on custom input change - php

Question

Image Issue Example
At the WooCommerce "checkout" page:
I would like to input any number in the "Custom Fee Input"
- then it will be calculated in the "Total price table".
- After placing order the "Custom Fee" will be auto synchronized into the database.
Recommendation: using Plain JavaScript instead of jQuery is highly appreciated.
This is my codes:
html
<label>
Custom Fee
<input id="custom_fee" name="custom_fee" type="number" required>
</label>
Plain JavaScript
var $custom_fee = document.getElementById("custom_fee");
$custom_fee.addEventListener("change", function(){
var data = {
action: 'custom_fee',
security: wc_checkout_params.apply_state_nonce,
custom_fee_cost: $custom_fee.value,
};
var request = new XMLHttpRequest();
request.open('POST', wc_checkout_params.ajax_url, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
var resp = this.response;
console.log(resp);
} else {
var resp = this.response;
console.log(resp);
}
};
request.send(data);
});
function.php
add_action('wp_ajax_custom_fee', 'custom_fee_ajax', 10);
add_action('wp_ajax_nopriv_custom_fee', 'custom_fee_ajax', 10);
function custom_fee_ajax() {
if( ! is_checkout() ) return;
global $wpdb;
if( isset($_POST['custom_fee']) ){
$custom_fee = $_POST['custom_fee'];
WC()->session->set( 'custom_fee', $custom_fee );
echo json_encode( WC()->session->get('custom_fee' ) );
}
die();
}
//________________________________________________________
add_action('woocommerce_cart_calculate_fees', 'custom_fee');
function custom_fee() {
if( ! is_checkout() ) return;
session_start();
global $woocommerce;
if ( !defined( 'DOING_AJAX' ) ) return;
$fee = $_SESSION['custom_fee'];
$woocommerce->cart->add_fee( 'Custom Fee' , $fee, true, '' );
}
NOTE: The above code does not work correctly (bad request 400; php functions); so I would like to have someone help I to solve this issue.