WooCommerce Checkout Page -- Payment option by checkbox value WordPress

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