Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

WooCommerce Checkout Page -- Payment option by checkbox value WordPress

  • SOLVED

Hi there!

<strong>UPDATE / INFO</strong>
This cannot be done with a POST-argument because hiding / showing the payment option must be done before the form gets send. It has to be a functionality similar to the code example in part 2 (see below, via WooCommerce-filter) which originally works with the country-field which allows for a dynamic result.

<strong>Introduction</strong>

I am working on a functionality regarding my WooCommerce checkout page which would allow for a certain payment method to only show if a corresponding checkbox has been activated (== 1).

For this I have made use of two code examples and I am nearly there but I cannot manage to get this to work dynamically. It is possible (and should be more or less easily made available) since WooCommerce already checks for certain values (country) and adjusts the shipping details accordingly but I cannot do it by my own (or at least not efficiently enough).

How do I know it works? On page-load the function gets executed correctly. But if the value changes, the options do not update.

<strong>Code</strong>

This is part 1 of the code within my functions.php which has been taken from http://chromeorange.co.uk/adding-an-additional-checkbox-to-the-woocommerce-checkout (no major modifications made):

// ADMIN
add_action( 'woocommerce_settings_page_options', 'service_agreement' );
add_action( 'woocommerce_update_options_pages', 'save_service_agreement' );

function service_agreement() {

woocommerce_admin_fields( array(
array(
'name' => __( 'Service Agreement Page ID', 'woocommerce' ),
'desc' => __( 'If you define a \'Service Agreement\' page the customer will be asked if they agree to it when checking out.', 'woocommerce' ),
'tip' => '',
'id' => 'woocommerce_service_agreement_page_id',
'std' => '',
'class' => 'chosen_select_nostd',
'css' => 'min-width:300px;',
'type' => 'single_select_page',
'desc_tip' => true,
),

));

}

function save_service_agreement() {

if ( isset($_POST['woocommerce_service_agreement_page_id']) ) :
update_option( 'woocommerce_service_agreement_page_id', woocommerce_clean( $_POST['woocommerce_service_agreement_page_id']) );
else :
delete_option('woocommerce_service_agreement_page_id');
endif;

}

//FRONTEND


add_action( 'woocommerce_checkout_before_customer_details' , 'add_service_agreement_checkbox' );
add_action( 'woocommerce_checkout_process' , 'check_service_agreement' );

function add_service_agreement_checkbox() {

global $woocommerce;
if (woocommerce_get_page_id('service_agreement')>0) : ?>
<p class="form-row service_agreement" style="margin-bottom: 20px;">
<input type="checkbox" class="input-checkbox" name="service_agreement" <?php if (isset($_POST['service_agreement'])) echo 'checked="checked"'; ?> id="service_agreement" />
<label for="service_agreement" class="checkbox">Wir sind ein Kindergarten / eine öffentliche Einrichtung und möchten den <a href="<?php echo esc_url( get_permalink(woocommerce_get_page_id('service_agreement')) ); ?>" target="_blank">Rechnungskauf nutzen</a></label>
</p>

<?php endif;

}


function check_service_agreement() {

global $woocommerce;
if (!isset($_POST['woocommerce_checkout_update_totals']) && empty($_POST['service_agreement']) && woocommerce_get_page_id('service_agreement')>0 ) :

$woocommerce->add_error( __('You must review and agree to our service agreement.', 'woocommerce') );

endif;

}



This is part 2 of the code within my functions.php which has been taken from http://codefuel.in/woocommerce-hide-payment-gatway-based-on-visitors-country (modification made regarding the substitution of the checkbox $_POST-value):

// Note for %payment-code%
// CashonDeliver = 'cod'
// PayPal = 'paypal'
// Basic Payment = 'bacs'
// Cheque payment = 'cheque'
// Mijireh Gatway = 'mijireh_checkout'

// Note for %countrycode%
// India = 'IN'
// Norway = 'NO' etc...

function payment_gateway_disable_country( $available_gateways ) {
global $woocommerce;
if ( isset( $available_gateways['cheque'] ) && $_POST['service_agreement'] == 0 ) {
unset( $available_gateways['cheque'] );
}
return $available_gateways;
}
add_filter( 'woocommerce_available_payment_gateways', 'payment_gateway_disable_country' );


Looking forward to you helping out here. I attached a screenshot showing the checkbox on the checkout page.

Thanks in advance!

Answers (2)

2013-08-20

Liam Bailey answers:

POSTING FINAL SOLUTION FOR COMMUNITY BENEFIT:

functions.php:


add_action('woocommerce_settings_page_options', 'service_agreement');
add_action('woocommerce_update_options_pages', 'save_service_agreement');

function service_agreement() {

woocommerce_admin_fields(array(
array(
'name' => __('Service Agreement Page ID', 'woocommerce'),
'desc' => __('If you define a \'Service Agreement\' page the customer will be asked if they agree to it when checking out.', 'woocommerce'),
'tip' => '',
'id' => 'woocommerce_service_agreement_page_id',
'std' => '',
'class' => 'chosen_select_nostd',
'css' => 'min-width:300px;',
'type' => 'single_select_page',
'desc_tip' => true,
),
));
}

function save_service_agreement() {

if (isset($_POST['woocommerce_service_agreement_page_id'])) :
update_option('woocommerce_service_agreement_page_id', woocommerce_clean($_POST['woocommerce_service_agreement_page_id']));
else :
delete_option('woocommerce_service_agreement_page_id');
endif;
}

add_action('woocommerce_checkout_before_customer_details', 'add_service_agreement_checkbox');

function add_service_agreement_checkbox() {

global $woocommerce;
if (woocommerce_get_page_id('service_agreement') > 0) :
$checked = (isset($_COOKIE['service_checked'])) ? "checked" : "";
?>
<p class="form-row service_agreement" style="margin-bottom: 20px;">
<input type="checkbox" <?php echo $checked; ?> class="input-checkbox" name="service_agreement" <?php if (isset($_POST['service_agreement'])) echo 'checked="checked"'; ?> id="service_agreement" />
<label for="service_agreement" class="checkbox">Wir sind ein Kindergarten / eine öffentliche Einrichtung und möchten den <a href="<?php echo esc_url(get_permalink(woocommerce_get_page_id('service_agreement'))); ?>" target="_blank">Rechnungskauf nutzen</a></label>
</p>
<?php
endif;
}

add_action('wp_enqueue_scripts', 'enqueue_custom');

function enqueue_custom() {

wp_enqueue_script('my_custom', get_stylesheet_directory_uri() . "/js/custom-checkout.js", array('jquery'));

$localize_array = array(
'ajaxurl' => admin_url('admin-ajax.php'),
);

wp_localize_script('my_custom', 'localizeobj', $localize_array);
}

function payment_gateway_disable_country($available_gateways) {

global $woocommerce;
if (isset($available_gateways['cheque']) && (isset($_COOKIE['service_checked']) || isset($_POST['service_agreement']))) {

unset($available_gateways['cheque']);
}
return $available_gateways;
}

add_filter('woocommerce_available_payment_gateways', 'payment_gateway_disable_country', 10, 1);


/js/custom-checkout.js


jQuery(function($) {
$("input[name='service_agreement']").click(function() {
if ($(this).is(":checked")) {
//Uses jquery cookie plugin already included with woocommerce
$.cookie('service_checked','true');
window.location.reload();
}
else {
$.removeCookie('service_checked');
window.location.reload();
}
});
});


UPDATED FILTER FUNCTION TO REVERSE LOGIC -cheque method unavailable by default, becomes available when checkbox is checked, with extra on the if statement to prevent people disabling js and then unchecking the box and still using the cheque method.

function payment_gateway_disable_country( $available_gateways ) {

global $woocommerce;
if ( isset( $available_gateways['cheque'] ) && (!isset($_COOKIE['service_checked']) || (isset($_POST['billing_first_name']) && !isset($_POST['service_agreement'])))) {

unset( $available_gateways['cheque'] );
}
return $available_gateways;
}
add_filter('woocommerce_available_payment_gateways','payment_gateway_disable_country',10,1);


leanderb comments:

Hi Liam,

thanks for taking the time and posting an answer. Unfortunately (see my reply to Gabriel below) doing this via POST is not possible. I am looking for a function similar to selecting the country-field where – upon selection – the shipping cost is updated dynamically without sending the form itself.


Liam Bailey comments:

Ah yeah.

Here is what I would do:

in a javascript file that you have enqueued or create one and then enqueu in the normal way with jquery as a dependency. Do a localize_script call to set variables you need like ajaxurl and then do this:

jQuery(function($)) {
//if you already have a doc.ready set open just add to that

$(input[name='service_agreement']).change(function() {
if ($(this).is(:checked)) {
$.post(localizedobj.ajaxurl,'{'agreement' : 'true','action' : 'set_agreed'});
}
})
}}


Now in your functions.php file you will have:

add_action('wp_ajax_nopriv_set_agreed','setGateways');

function setGateways() {
add_filter('woocommerce_available_payment_gateways','payment_gateway_disable_country',10,1);//your function hooked
}


Liam Bailey comments:

In case you dont know what I am on about with enqueing scripts etc.

Create a js file called custom_scripting.js and save it to the /js directory of your theme. if you have a directory for javascript use it obviously.

Then in functions.php add this:

add_action('wp_enqueue_scripts','enqueue_custom');

function enqueue_custom() {
wp_enqueue_script('my_custom',get_stylesheet_directory_uri() . "/js/custom_scripting.js",array('jquery'));
//obviously replace /js/ with another directory if you used another.

$localize_array = array(
'ajaxurl' => admin_url('admin-ajax.php'),

);
wp_localize_script('my_custom','localizeobj',$localize_array);
}

Then you add the js from my previous answer into this file, and the rest of the code into functions.php as I said and you should be good to go.


leanderb comments:

Hi Liam!

I did go ahead and tried your solution – but it doesn't work just yet. Most likely (since I am not skilled at JQuery at all) this is due to this error:

SyntaxError: syntax error
jQuery(function($)) {


Could you provide the fully functional code (stand-alone) for the custom-checkout.js??

Just for reference -> This is what the whole code in functions.php for this functionality looks like:

//// Rechnungskauf für Kindergarten

// 0st -- Enqueue JS-Script

add_action('wp_enqueue_scripts','enqueue_custom');

function enqueue_custom() {
wp_enqueue_script('my_custom',get_stylesheet_directory_uri() . "/js/custom-checkout.js",array('jquery'));

$localize_array = array(
'ajaxurl' => admin_url('admin-ajax.php'),
);

wp_localize_script('my_custom','localizeobj',$localize_array);
}

// 1st -- Add checkbox

// ADMIN
add_action( 'woocommerce_settings_page_options', 'service_agreement' );
add_action( 'woocommerce_update_options_pages', 'save_service_agreement' );

function service_agreement() {

woocommerce_admin_fields( array(
array(
'name' => __( 'Service Agreement Page ID', 'woocommerce' ),
'desc' => __( 'If you define a \'Service Agreement\' page the customer will be asked if they agree to it when checking out.', 'woocommerce' ),
'tip' => '',
'id' => 'woocommerce_service_agreement_page_id',
'std' => '',
'class' => 'chosen_select_nostd',
'css' => 'min-width:300px;',
'type' => 'single_select_page',
'desc_tip' => true,
),

));

}

function save_service_agreement() {

if ( isset($_POST['woocommerce_service_agreement_page_id']) ) :
update_option( 'woocommerce_service_agreement_page_id', woocommerce_clean( $_POST['woocommerce_service_agreement_page_id']) );
else :
delete_option('woocommerce_service_agreement_page_id');
endif;

}

//FRONTEND


add_action( 'woocommerce_checkout_before_customer_details' , 'add_service_agreement_checkbox' );

function add_service_agreement_checkbox() {

global $woocommerce;
if (woocommerce_get_page_id('service_agreement')>0) : ?>
<p class="form-row service_agreement" style="margin-bottom: 20px;">
<input type="checkbox" class="input-checkbox" name="service_agreement" <?php if (isset($_POST['service_agreement'])) echo 'checked="checked"'; ?> id="service_agreement" />
<label for="service_agreement" class="checkbox">Wir sind ein Kindergarten / eine öffentliche Einrichtung und möchten den <a href="<?php echo esc_url( get_permalink(woocommerce_get_page_id('service_agreement')) ); ?>" target="_blank">Rechnungskauf nutzen</a></label>
</p>

<?php endif;

}

// 2nd -- Add hide/show logic for payment option based on checkbox value

add_action('wp_ajax_nopriv_set_agreed','setGateways');

function setGateways() {
add_filter('woocommerce_available_payment_gateways','payment_gateway_disable_country',10,1);
}



Liam Bailey comments:

Do you have a link where I can see this in action?


leanderb comments:

Oh yeah, wanted to post the link with my last answer but forgot to do so...

>> http://h2152654.stratoserver.net/dev/kasse (You get redirected if the cart is empty so just 'shop' http://h2152654.stratoserver.net/dev/shop/bauernhof/kuh f.ex.)


Liam Bailey comments:

Sorry the js to go in custom-checkout file should have been:

jQuery(function($) {

//if you already have a doc.ready set open just add to that



$(input[name='service_agreement']).change(function() {

if ($(this).is(:checked)) {

$.post(localizedobj.ajaxurl,'{'agreement' : 'true','action' : 'set_agreed'});

}

})

})


Liam Bailey comments:

Sorry, that has error:

jQuery(function($)) {
$(input[name='service_agreement']).change(function() {
if ($(this).is(:checked)) {
$.post(localizedobj.ajaxurl, "{'agreement' : 'true','action' : 'set_agreed'}");
}
});
});


File attached also


leanderb comments:

Hmm - still not working. Considering that I've called the .js-file correctly and that you've corrected the script there can only be an error remaining in the second part of the funtions.php...

This is the code – is it correct or did I do something wrong there?

// 2nd -- Add hide/show logic for payment option based on checkbox value


function payment_gateway_disable_country( $available_gateways ) {
global $woocommerce;
if ( isset( $available_gateways['cheque'] ) && $_POST['service_agreement'] == 1 ) {
unset( $available_gateways['cheque'] );
}
if ( isset( $available_gateways['cheque'] ) && !is_user_logged_in() ) {
unset( $available_gateways['cheque'] );
}
return $available_gateways;
}
add_filter( 'woocommerce_available_payment_gateways', 'payment_gateway_disable_country' );


add_action('wp_ajax_nopriv_set_agreed','setGateways');

function setGateways() {
add_filter('woocommerce_available_payment_gateways','payment_gateway_disable_country',10,1);
}


leanderb comments:

I added some more money to reflect the efforts taken.


Liam Bailey comments:

Dash yes, I forgot about that:

you have: if ( isset( $available_gateways['cheque'] ) && $_POST['service_agreement'] == 1 ) {
But we are not sending the post using ajax, we are doing it a different way, and you have 2 sets to the filter also, replace your latest code with this:


function payment_gateway_disable_country( $available_gateways ) {
global $woocommerce;
if ( isset( $available_gateways['cheque'] )) {
unset( $available_gateways['cheque'] );
}
return $available_gateways;
}

add_action('wp_ajax_nopriv_set_agreed','setGateways');

function setGateways() {
add_filter('woocommerce_available_payment_gateways','payment_gateway_disable_country',10,1);
}


Also please make the js as follows (what I had should work but this is stricter syntax correctness.


jQuery(function($)) {
$(input[name='service_agreement']).change(function() {
if ($(this).is(":checked")) {
$.post(localizedobj.ajaxurl, '{agreement : "true", action : "set_agreed"}');
}
});
});


leanderb comments:

Thanks for the clarification regarding the functions.php – that looks good to me now (at least from what I can understand).

It still isn't working though and the error with the .js-file seems to persist. Both in Firefox and in Safari I get a syntax-error. It says something about an "expected token '{'" in the first line. Feel free to check with your Firebug too.

Again: All I put into the file (http://h2152654.stratoserver.net/dev/wp-content/themes/cheope/js/custom-checkout.js) is your code – I do not know if I have to have a .ready()-handler or any other files / initiations there.

Please advise.


Liam Bailey comments:

Sorry, initial error slipped back in make it:


jQuery(function($) {

$(input[name='service_agreement']).change(function() {

if ($(this).is(":checked")) {

$.post(localizedobj.ajaxurl, '{agreement : "true", action : "set_agreed"}');

}

});

});


leanderb comments:

OK, getting a different error now:

<blockquote>ReferenceError: input is not defined
$(input[name='service_agreement']).change(function() {</blockquote>


Liam Bailey comments:

Whoops, missed out the quotes, not easy coding quick without ide, please make js:

jQuery(function($) {
$("input[name='service_agreement']").change(function() {
if ($(this).is(":checked")) {
$.post(localizedobj.ajaxurl, '{agreement : "true", action : "set_agreed"}');
}
});
});


leanderb comments:

Damn - real sorry but they keep coming:

<blockquote>ReferenceError: localizedobj is not defined
$.post(localizedobj.ajaxurl, '{agreement : "true", action : "set_agreed"}');</blockquote>


Liam Bailey comments:

Hi Leander

Easy, we have called it localizeobj in the php and are looking for localizedobj in the js, change the js to:

jQuery(function($)) {
$(input[name='service_agreement']).change(function() {
if ($(this).is(":checked")) {
$.post(localizeobj.ajaxurl, '{agreement : "true", action : "set_agreed"}');
}
});
});


And we should be there


Liam Bailey comments:

Sorry, here is correct:

jQuery(function($) {

$("input[name='service_agreement']").change(function() {

if ($(this).is(":checked")) {

$.post(localizeobj.ajaxurl, '{agreement : "true", action : "set_agreed"}');

}

});

});


Liam Bailey comments:

Hi Leanderb,

I decided to put all the code together as finalised and test:

here is functions.php:

<?php

add_action( 'woocommerce_settings_page_options', 'service_agreement' );

add_action( 'woocommerce_update_options_pages', 'save_service_agreement' );



function service_agreement() {



woocommerce_admin_fields( array(

array(

'name' => __( 'Service Agreement Page ID', 'woocommerce' ),

'desc' => __( 'If you define a \'Service Agreement\' page the customer will be asked if they agree to it when checking out.', 'woocommerce' ),

'tip' => '',

'id' => 'woocommerce_service_agreement_page_id',

'std' => '',

'class' => 'chosen_select_nostd',

'css' => 'min-width:300px;',

'type' => 'single_select_page',

'desc_tip' => true,

),



));



}



function save_service_agreement() {



if ( isset($_POST['woocommerce_service_agreement_page_id']) ) :

update_option( 'woocommerce_service_agreement_page_id', woocommerce_clean( $_POST['woocommerce_service_agreement_page_id']) );

else :

delete_option('woocommerce_service_agreement_page_id');

endif;



}

dd_action( 'woocommerce_checkout_before_customer_details' , 'add_service_agreement_checkbox' );



function add_service_agreement_checkbox() {



global $woocommerce;

if (woocommerce_get_page_id('service_agreement')>0) : ?>

<p class="form-row service_agreement" style="margin-bottom: 20px;">

<input type="checkbox" class="input-checkbox" name="service_agreement" <?php if (isset($_POST['service_agreement'])) echo 'checked="checked"'; ?> id="service_agreement" />

<label for="service_agreement" class="checkbox">Wir sind ein Kindergarten / eine öffentliche Einrichtung und möchten den <a href="<?php echo esc_url( get_permalink(woocommerce_get_page_id('service_agreement')) ); ?>" target="_blank">Rechnungskauf nutzen</a></label>

</p>



<?php endif;



}

add_action('wp_enqueue_scripts','enqueue_custom');

function enqueue_custom() {
wp_enqueue_script('my_custom',get_stylesheet_directory_uri() . "/js/custom-checkout.js",array('jquery'));
//obviously replace /js/ with another directory if you used another.

$localize_array = array(
'ajaxurl' => admin_url('admin-ajax.php'),

);
wp_localize_script('my_custom','localizeobj',$localize_array);
}

function payment_gateway_disable_country( $available_gateways ) {

global $woocommerce;

if ( isset( $available_gateways['cheque'] )) {

unset( $available_gateways['cheque'] );

}

return $available_gateways;

}



add_action('wp_ajax_set_agreed','setGateways');
add_action('wp_ajax_nopriv_set_agreed','setGateways');

function setGateways() {

add_filter('woocommerce_available_payment_gateways','payment_gateway_disable_country',10,1);

}
?>


And here is custom-checkout.js:
jQuery(function($) {
$("input[name='service_agreement']").change(function() {
if ($(this).is(":checked")) {
$.ajax({
url: localizeobj.ajaxurl,
data: 'agreement=true&action=set_agreed',
type: 'POST'
});
}
});
});


I have tested this on one of my installs and it works. Let me know how it goes.


leanderb comments:

Sorry for not responding, I was travelling - will test your code tomorrow!


leanderb comments:

I am sorry to say but it still doesn't work. Either we can find the error soon or I'll have to move on – I do appreciate & value your work but I have to look for a solution in the end.

I used the exact code you provided for functions.php & the .js-file. I notice that the payment-gateway "cheque" isn't unset upon load but I couldn't pinpoint the issue – maybe you can? Do you need anything else in order to debug? Could you show me your working install or is it a local environment? I am here to assist...

I added some more money but if we cannot get it to work properly I'll have to withdraw – please understand.

Thanks & regards!


Liam Bailey comments:

Hi Leanderb,

I am sorry it doesn't work - but I already know where the problems are most likely to be. If you would consider giving me ftp and wp logins I could have this fixed for you in minutes, you can email them to [email protected]. If not I can tell you how to debug but this will not be fast.


leanderb comments:

Email sent!


Liam Bailey comments:

Received and on the case


Liam Bailey comments:

Hi Leanderb,

The problem was that while our js was firing the php in functions.php it was too late for the filter to take from the gateways. Thus a page refresh was needed in order to remove the gateway. Once a page refresh is needed we didn't need Ajax. Woocommerce already uses the jquery cookie plugin, so I simply changed the js so that on checking the box a cookie is set and the page is refreshed, the filter function checks for the cookie and removes the cheque gateway, and another check for the cookie keeps the checkbox checked on reload. When the box is unchecked the cookie is deleted and the page reloaded reversing the above. I have tested and it now works well.

For any users without js and/or cookies enabled we should check to make sure that if the box is checked and cheque method is selected they are sent back to the checkout page, with an error message and the cheque gateway removed. I am writing code for this now, let me know if you want this solution and I will put it accross via ftp when done.


Liam Bailey comments:

Actually that was way too complicated, I simply made the filter function for the gateways check for the cookie or $_POST['service_agreement'] that way if a non-js/non-cookies user submits with the checkbox checked and cheque selected our filter removes the cheque gateway on the call to get_available_gateways in class-wc-checkout.php and it throws the error of invalid payment type, automatically redirecting them to the checkout page again. I think this is a good solution now. Let me know if you need any more help.


leanderb comments:

Hey Liam,

well done, thanks!! I do follow your logic and although the best soulution would be via AJAX / not requiring a page-refresh this is fully functional and serves our purposes well.

One minor requests:

** Change unset-state for cheque-option
The checkbox-logic should be the other way around, meaning the cheque-option should be unavailable and only made available if the checbox is checked. If you could just switch those around we could finish this task and I can send the money.

Thanks for working with me and I appreciate the efforts you made. I do have another feature-request and would like to work with you on future projects. Is that an option for you? If so: Might I contact you via mail regarding the next task?

Regards,
Henning


Liam Bailey comments:

Hi Leanderb,

Glad I sorted it. Yes, a quick change to the if statement in the avail_gateways filter changed the logic to the way we need it for js users and non-js users. I tested this by checking the box with js enabled which made the cheque gateway available, and then disabled js, refreshed the page and the checkbox stayed as the cookie was still in play, I then unchecked the box and with no-js the cheque option stayed, but on submitting the error of invalid payment type was thrown. So I think that is perfect now.

About sending payment, you need only vote for my answer above using the option below it, it has to be the original answer I gave though not subsequent exchanges, I will update it with the latest code anyway for the sake of community. Once you upvote my answer the experts will follow suit and the money will be awarded.

Yes of course I am happy to work with you on future requirements. The best way for me is to work through http://peopleperhour.com, if you would be happy to endorse my skills there it will allow us to make use of its streams etc and escrow without paying them a cut of what you pay me. If this doesn't work for you I am sure we can work something else out. If you want to do so the url to endorse me is as follows: https://www.peopleperhour.com/endorse/p/MWJjOTc0M2UwYzYwYzMwZDFiYmM5MjM3OWFjOGMwNTY0MzQ4MTExMS00NDc0?rfrd=329969.3

2013-08-20

Gabriel Reguly answers:

Hi leanderb,

How do you expect to get a $_POST value before it is submited?

That is impossible.

I am afraid you will need find an alternative solution.

Regards,
Gabriel





leanderb comments:

Hey Gabriel,

well - I don't expect the $_POST value to work :) What I am looking for is a way to do this dynamically and since the WooCommerce checkout does support it (it updates the shipping cost via AJAX (?) based on the country-field f.ex.) I want to have the same functionality for my checkbox.

I have got all the separate functions in place but cannot combine them properly...