Woocommerce ajax checkout submit

So, in woocommerce, when a product is purchased, the user is redirected to “review-order” page.

I am tying to make it so that the “review-order” page is instead shown by ajax on the product page without redirecting the user.

Here is what I mean.

Let say you click “submit” button on the checkout form, then the review-order form will be shown on the same page via ajax without redirecting.

Here is what I have tried so far.

form-checkout.php

  <form id="rh_checkout_form" name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( $get_checkout_url ); ?>" enctype="multipart/form-data">

   <?php if ( sizeof( $checkout->checkout_fields ) > 0 ) : ?>

       <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

       <div class="col2-set" id="customer_details">
         <div class="col-1">
            <?php do_action( 'woocommerce_checkout_billing' ); ?>
         </div>

         <div class="col-2">
            <?php do_action( 'woocommerce_checkout_shipping' ); ?>
         </div>
     </div>

     <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>


  <?php endif; ?>

  <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

  <div id="order_review" class="woocommerce-checkout-review-order">
     <?php do_action( 'woocommerce_checkout_order_review' ); ?>
  </div>

  <?php do_action( 'woocommerce_checkout_after_order_review' ); ?>

  <input type="submit" name="buy_product" id="rh_product_add_done_click">    </input>

 </form>

 <script>
 jQuery(document).ready(function() {
 jQuery('#rh_checkout_form').submit(function() {
 var formData = jQuery(this).serialize();
     var data = {
    'type': 'POST',
    'action': 'ajax_url',
    'formData':formData,
    'html_temp':html_teml
 };
 var ajaxurl = '<?php echo admin_url("admin-ajax.php"); ?>';
    jQuery.post(ajaxurl, data, function(response) {
       alert(response);       
    });
    return false;   
 });
 });
 </script>

functions.php

 //Ajax submit callback
 function ajax_url_callback() {
 return '<div class="thank_you">Thanks!</div>';    //Ajax Url Response 
 }
 add_action( 'wp_ajax_nopriv_ajax_url', 'ajax_url_callback' );
 add_action( 'wp_ajax_ajax_url', 'ajax_url_callback' );

To be honest, I am not 100% how the checkout is completed on the woocommerce product.

Any help will be much appreciated! =)