Charge Extra Fees Based on Payment Gateway Selected

Updated on December 8, 2021

In this tutorial I will show you how to add extra charges to a specific payment gateway without plugins with the help of woocommerce_cart_calculate_fees filter hook.

charge additional fees for specific WooCommerce payment gateways — We add an additional £2 fee when customer chooses to pay with PayPal. And also displayed it near a payment gateway title.

I can also recommend you a tutorial about creating a custom payment gateway.

1. Create Additional Fee for a Specific Payment Gateway

add_action( 'woocommerce_cart_calculate_fees', 'rudr_paypal_fee', 25 );
function rudr_paypal_fee( $cart ) {

	if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
		return;
	}
	// if "PayPal" is the selected payment method, we add the fee
	if( 'paypal' == WC()->session->get( 'chosen_payment_method' ) ) {
		WC()->cart->add_fee( 'PayPal fee', 2 );
		// you can also use: $cart->add_fee( 'PayPal fee', 2 );
	}

}

You can insert this code to you current (or child) theme functions.php file.
paypal (line 5) is the payment gateway ID, you can find out it by inspecting your checkout page in browser or you can add an additional column with payment method IDs in WooCommerce settings.
In order to get a selected payment method from user sessions in WooCommerce we can use WC()->session->get( 'chosen_payment_method' ) method.
“PayPal fee” is the custom fee title, could be almost anything.
“2” is the fee amount in your shop currency.

2. Refresh the Checkout on Payment Method Change

It is also a crucial step. When a customer changes payment methods, we must show the fee in checkout immediately.

You can do it with JavaScript.

jQuery( function( $ ) {
	$( 'form.checkout' ).on( 'change', 'input[name^="payment_method"]', function() {
		$( 'body' ).trigger( 'update_checkout' );
	});
});

You can insert this code to your custom .js file or use wp_footer hook as an option. Another option is to add the following code into your current theme functions.php:

add_action( 'woocommerce_checkout_init', 'rudr_checkout_refresh' );
function rudr_checkout_refresh() {
    wc_enqueue_js( "jQuery( function( $ ){
        $( 'form.checkout' ).on( 'change', 'input[name^=\"payment_method\"]', function(){
            $( 'body' ).trigger( 'update_checkout' );
        });
    });");
}

3. Display Fee Amount Next to Payment Method Title (Optional)

How to add extra fees to payment gateways in WooCommerce

Code for your current or child theme functions.php:

add_filter( 'woocommerce_gateway_icon', 'rudr_display_method_fee', 25, 2 );

function rudr_display_method_fee( $icon_html, $gateway_id ) {

	if( 'paypal' === $gateway_id ) {
		return '<span class="custom-gateway-fee">' . wc_price( 2 ) . '</span>';
	}

}

And CSS:

.custom-gateway-fee {
	padding: 2px 6px;
	border-radius: 2px;
	margin-left: 10px;
	background-color: #ddd;
	float: right;
	font-size: 0.8em;
}

# WooCommerce, Payment Gateways

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X

Comments — 3

Lukas Bachleda Aug 25, 2022

Working like a charm in 2022. Thank you. However, how can I use this snippet with TAX calculation?

Aleksander Sep 10, 2022
Big thx Misha! Another great snippet.

I recommend adding an exception to the Display Fee Amount so that it also shows other payment icons if they are added.
```
else { 
	return $icon_html;
}
```
Steve Feb 24, 2023

Awesome script!! How could it be set to a percentage of the cart total rather than a set dollar amount? I’ve experimented a bit but can’t get it working.