Custom class checkout submit button text for a specific payment method in WooCommerce

Question

I need to make custom class the order_button_text for a specific payment gateway (bacs).

This my function:

add_filter( 'woocommerce_available_payment_gateways', 'woocommerce_available_payment_gateways' );
function woocommerce_available_payment_gateways( $available_gateways ) {
    if (! is_checkout() ) return $available_gateways;  // stop doing anything if we're not on checkout page.
    if (array_key_exists('bacs',$available_gateways)) {
        // Gateway ID for Bacs is 'bacs'. 
         $available_gateways['bacs']->order_button_text = __( 'Order Pay', 'woocommerce' );
    }
    return $available_gateways;
}

I wont insert some custom class css (like font, color, etc..) in: ->order_button_text = __( 'Order Pay', 'woocommerce' );

---

I look a second function:

add_filter( 'woocommerce_order_button_html', 'misha_custom_button_html' );
 
function misha_custom_button_html( $button_html ) {
    $order_button_text = 'Submit';
        $button_html = '<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '">' . esc_html( $order_button_text ) . '</button>';
}

I am trying to integrate this second function only in the case of the payment method (bacs)

Answer 1

You can do this by javascript. you can check payment_method on the change of radio button.

Get selected payment method using :checked.

var payment_method = $('input[name=payment_method]:checked').val();

You can also check on page load which payment method is selected using the updated_checkout javascript trigger.

$( 'body' ).on( 'updated_checkout',function( data ){
    console.log( data );
} );

Use the change event to get the selected payment method.

$(document).on( 'change', 'input[name="payment_method"]', function(){
    console.log( $(this).val() );
});

Check the below code. code goes in your active theme functions.php file.

function add_checkout_js(){
    ?>
    <script type="text/javascript">
        (function($){
            
            var payment_method = $('input[name=payment_method]:checked').val();
            
            ChnageButtonTextBasedOnPaymentMethod( payment_method );

            $( 'body' ).on( 'updated_checkout',function( data ){
                ChnageButtonTextBasedOnPaymentMethod( payment_method );
            } );
            
            $(document).on( 'change', 'input[name="payment_method"]', function(){
                ChnageButtonTextBasedOnPaymentMethod( $(this).val() );
            });

            function ChnageButtonTextBasedOnPaymentMethod( payment_method ){
                if( payment_method == 'bacs' ){
                    $('#place_order').addClass('custom-class');
                    $('#place_order').val('Order Pay');
                    $('#place_order').attr('data-value','Order Pay');
                    $('#place_order').html('Order Pay <img style="display: unset;" src="">');
                }else{
                    $('#place_order').removeClass('custom-class');
                    $('#place_order').val('Place order');
                    $('#place_order').attr('data-value','Place order');
                    $('#place_order').text('Place order');
                }
            }
            
        })(jQuery);
    </script>
    <?php
}

add_action( 'wp_footer', 'add_checkout_js', 10, 1 );

Tested and works(Sorry for the low quality)