Charge Additional Fees Based on Payment Gateway Selected

In this tutorial I will show you how to make the following functionality without plugins.

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.

Also I recommend you my 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() {

	// 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 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.
  • “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 a payment method, 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.

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;
}
Share:

Leave a Reply