Add a confirmation popup for Cash on Delivery

[kulterryan]

Hi Everyone!

I'm using the following code on the checkout page to confirm the Cash on Delivery and proceed with the order, but even if the order is getting confirmed even if the visitor has not clicked on 'Confirm' button.

// Popup Confirmation
function add_cod_confirmation_popup() {
  	if ( ! is_checkout() ) {
      	return;
  	}

  	$selected_payment_method_id = WC()->session->get('chosen_payment_method');
	// print_r( $selected_payment_method_id );
	if ("cod" === $selected_payment_method_id){
		  // Replace 'cod' with the appropriate payment method ID for Cash on Delivery
    	add_action( 'wp_footer', 'cod_confirmation_popup_script' );
    	add_action( 'wp_footer', 'cod_confirmation_popup_style' );
	}

}
add_action( 'wp', 'add_cod_confirmation_popup' );
function cod_confirmation_popup_script() {
  ?>
  <script>
    // Get the billing phone field
    var billingPhone = document.getElementById("billing_phone");
    // Validate
  	jQuery(document).ready(function($) {
	  $('form.checkout').on('submit', function(e) {
		  var $form = $(this);
		  var confirmInput = '<input type="hidden" name="confirm_cod" value="1">';

		  if ($('.confirmation-modal').length === 0) {
			  e.preventDefault();

			  var confirmationModal = '<div class="confirmation-modal">' +
				  '<div class="modal-content">' +
				  '<p>Are you sure you want to place the order with Cash on Delivery?</p>' +
				  '<button class="confirm-button">Confirm</button>' +
				  '<button class="cancel-button">Cancel</button>' +
				  '</div>' +
				  '</div>';

			  $('body').append(confirmationModal);

			  $('.confirm-button').on('click', function() {
				  $('.confirmation-modal').remove();
				  $form.append(confirmInput);
				  $form.submit();
			  });

			  $('.cancel-button').on('click', function() {
				  location.reload(true);
			  });
		  }
	  });
  });      
  </script>
  <?php
}

function cod_confirmation_popup_style() {
  ?>
  <style>
      .confirmation-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 9999;
      }

      .modal-content {
          background-color: #fff;
          padding: 20px;
          border-radius: 4px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
  </style>
  <?php
}