Woocommerce to only run javascript if a specific payment method is selected Woocommerce to only run javascript if a specific payment method is selected wordpress wordpress

Woocommerce to only run javascript if a specific payment method is selected


Try this to assign callback on payment method select

jQuery(function(){    jQuery( 'body' )    .on( 'updated_checkout', function() {          usingGateway();        jQuery('input[name="payment_method"]').change(function(){            console.log("payment method changed");              usingGateway();        });    });});function usingGateway(){    console.log(jQuery("input[name='payment_method']:checked").val());    if(jQuery('form[name="checkout"] input[name="payment_method"]:checked').val() == 'my_gateway'){        console.log("Using my gateway");        //Etc etc    }else{         console.log("Not using my gateway. Proceed as usual");    }}   


It turned out that the area I referred to as "Etc etc" had the key to the final part of the problem. Here is what eventually worked, but I am thankfully accepting Swarnendu's answer for his efforts. It turns out that when the gateway is in use, I was binding the form submit process.

This means that when the gateway is selected by default, the form is already binded to that payment gateway. Then, when the user changes the payment method, the form still tries to use that gateway even though another method has been selected.

The solution was to
(a) Force-check a radio option as the default one (deals with the "undefined" issue. No idea why this is necessary since woocommerce checkout.js already does it).
(b) If after changing payment method, no radio option is selected then select the current one (a weird issue that happens sometimes due to interference from woocommerce checkout.js. Officially, this can be overcome by including your own checkout.js into the theme folder, but for a plugin that will be used on different sites, there is no such way to override checkout.js) so then repeat "a" using an "on" change delegation.
(c) If the gateway is not in use, unbind the submit method that was used by default to patch through to the gateway.

jQuery(document).ready(function() {  jQuery('form[name="checkout"] input[name="payment_method"]').eq(0).prop('checked', true).attr( 'checked', 'checked' );  usingGateway();});jQuery(document).on("change", "form[name='checkout'] input[name='payment_method']", function(){  if ( 0 === jQuery('form[name="checkout"] input[name="payment_method"]' ).filter( ':checked' ).size() ) {    jQuery(this).prop('checked', true).attr( 'checked', 'checked' );  };  usingGateway();});function usingGateway(){  if(jQuery("form[name='checkout'] input[name='payment_method']:checked").val() == 'my_gateway'){      console.log("Using my gateway");      jQuery('form[name="checkout"]').on('submit', function(e){         // Process using custom gateway         // Etc etc         e.preventDefault();      });  }else{   // Not using gateway   console.log("Not using my gateway. Proceed as usual");   jQuery('form[name="checkout"]').unbind('submit');   }};