Add Tip input by customer to WooCommerce checkout page - php

Question

I am developing a food ordering WooCommerce store. I am trying to add an input field or a grouped button to let the customer add delivery tips to checkout total.
Backend Part:
I wrote an action that add a tip to checkout based on the percentage given (let's say 10% of total order)
add_action( 'woocommerce_cart_calculate_fees', 'calculateTipsPercentage', 10, 1 );
function calculateTipsPercentage( $cart ) {
if ( is_admin() && ! defined( 'DOING_AJAX' ) )
return;
$total_tax = 0;
$carttotal= 0;
// Get the unformated taxes array
$taxes = $cart->get_taxes();
//get Tax amount from taxes array
foreach($taxes as $tax) $total_tax += $tax;
global $woocommerce;
$percentage = 0.10;//percentage of tips (must be entered by customer)
$carttotalamount = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ); //Cart total without tax
$totalorderwithTax = ( $carttotalamount + $total_tax); //cart total with tax
$extrafee= round( $totalorderwithTax * $percentage, 2 ); //extra fee amount
$percetagetoShow = ( $percentage * 100 );
$woocommerce->cart->add_fee( "Tip ({$percetagetoShow}%)", $extrafee, true, '' );
}
My problem is with the Front-end part.
how can I add any kind of input field with a button (add tips to checkout) that let the customer add the percentage and click this button which will fire the action found above. or if I can do it through ajax/jquery without the button (without refreshing the page) which would be better.
any help would be appreciated.

Answer 1

Woocommerce has various hooks that you can use to add your custom fields to the checkout page such as *
woocommerce_review_order_before_shipping
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
or you can visit here