diff --git a/app/controllers/foodcourt/qrpay_controller.rb b/app/controllers/foodcourt/qrpay_controller.rb
index a39f8481..4097e161 100644
--- a/app/controllers/foodcourt/qrpay_controller.rb
+++ b/app/controllers/foodcourt/qrpay_controller.rb
@@ -216,4 +216,100 @@ class Foodcourt::QrpayController < BaseFoodcourtController
       ActionCable.server.broadcast('second_display_view_channel', { data: @qr_string, qr_svg: @qr_svg, grand_total: @sale_data.grand_total, invoice_no: @sale_data.receipt_no })
     end
   end
+
+  def cancel
+    # cancel orders and related
+    sale_id = params[:sale_id]
+    sale = Sale.find_by_sale_id(sale_id)
+    order = sale.orders.first
+    booking = order.booking
+
+    if !sale_id.present?
+      respond_to do |format|
+        format.json { render :json => { :status => false, :error_message => "Sale does not exist" } }
+      end
+    end
+
+    if !order.present?
+      respond_to do |format|
+        format.json { render :json => { :status => false, :error_message => "Order does not exist" } }
+      end
+    end
+
+    if !booking.present?
+      respond_to do |format|
+        format.json { render :json => { :status => false, :error_message => "Booking does not exist" } }
+      end
+    end
+
+    if order.order_items.present?
+      order.order_items.update_all(order_item_status: 'cancelled')
+    end
+
+    order.status = 'cancelled'
+    order.save
+
+    booking.booking_status = 'cancelled'
+    booking.save
+
+    # void order
+    remark  = ""
+    order_source = 'foodcourt'
+    access_code = 'null'
+
+    # update count for shift sale
+    if(sale.sale_status == "completed")
+      if sale.shift_sale_id != nil
+        shift = ShiftSale.find(sale.shift_sale_id)
+        shift.calculate(sale_id, "void")
+      end
+    else
+      # void before sale payment complete
+      if sale.shift_sale_id != nil
+        shift = ShiftSale.find(sale.shift_sale_id)
+        shift.total_void = shift.total_void + sale.grand_total
+        shift.save
+      end
+    end
+
+    if sale.discount_type == "member_discount"
+      sale.update_attributes(total_discount: 0)
+      sale.compute_by_sale_items(0, nil, order_source)
+    end
+
+    sale.rounding_adjustment = 0.0
+    sale.payment_status = 'void'
+    sale.sale_status = 'void'
+    sale.save
+
+    # TODO: call close order to qr pay
+
+    PrintReceiptJob.perform_later(current_shop.shop_code, sale.sale_id)
+
+    if table = sale.booking.dining_facility
+      unless table.current_bookings.exists?
+        table.update_attributes(status: 'available')
+      end
+    end
+
+    action_by = current_user.name
+    if access_code != "null" && current_user.role == "cashier"
+      action_by = Employee.find_by_emp_id(access_code).name
+    end
+
+    # remark = "Void Sale ID #{sale_id} | Receipt No #{sale.receipt_no} | Receipt No #{sale.receipt_no} | Table ->#{table.name}"
+    sale_audit = SaleAudit.record_audit_for_edit(sale.sale_id, current_user.name, action_by,remark, "SALEVOID")
+
+    # update complete order items in oqs
+    SaleOrder.where("sale_id = '#{sale.sale_id}'").find_each do |sodr|
+      AssignedOrderItem.where("order_id = '#{ sodr.order_id }'").find_each do |aoi|
+        aoi.delivery_status = 1
+        aoi.save
+      end
+    end
+
+    respond_to do |format|
+      format.json { render :json => { status: true, order_id: order.order_id } }
+    end
+  end
 end
diff --git a/app/views/foodcourt/qrpay/init.html.erb b/app/views/foodcourt/qrpay/init.html.erb
index 01099222..4f38e31d 100644
--- a/app/views/foodcourt/qrpay/init.html.erb
+++ b/app/views/foodcourt/qrpay/init.html.erb
@@ -199,6 +199,7 @@
 </div>
 
 <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 d-flex flex-column h-100" style="padding-right: 10px;">
+
     <div class="card-block">
         <div class="payment-waiting text-center" style="height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
             <h3 class="m-t-20" style="color: #555;">Waiting for Customer Payment</h3>
@@ -209,32 +210,14 @@
                 <div class="processing-dot"></div>
             </div>
         </div>
+        <div class="d-flex">
+            <button class="btn btn-block btn-default waves-effect" id="cancel-btn">Cancel</button>
+        </div>
         <input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode">
         <input type="hidden" name="display_type" id="display_type" value="<%= @display_type%>">
     </div>
   </div>
 </div>
-<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
-  <%= link_to '/foodcourt/app_orders', class: 'btn btn-block btn-default waves-effect', :id => 'foodcourt_back', style: "padding-top: 0;" do%>
-    <i class="material-icons">reply</i>
-    BACK
-  <% end %>
-  <button type="button" class="btn btn-block btn-default waves-effect" id='refresh'>
-     Refresh
-  </button>
-  <% if @sale_payment.nil? %>
-    <hr>
-    <% if current_login_employee.role == "cashier" %>
-      <a class="btn btn-block bg-red waves-effect access_modal" data-toggle="modal"  data-type="void"> Void</a>
-      <a class="btn btn-block bg-blue waves-effect access_modal" data-toggle="modal"   data-type="edit">Edit</a>
-    <% else %>
-      <button type="button" class="btn bg-red btn-block" data-toggle="modal" data-target="#voidModal" <%= (can? :overall_void, :void)? ' ': 'disabled=' %> > Void </button>
-      <button type="button" class="btn btn-block bg-blue waves-effect" id='edit' <%= (can? :edit, :sale_edit)? ' ': 'disabled=' %> active="true">Edit</button>
-    <% end %>
-    <button type="button" id="discount" class="btn btn-block bg-blue waves-effect" <%= (can? :index, :discount)? ' ': 'disabled=' %> active="true">Discount</button>
-    <button type="button" id="other-charges" class="btn btn-block bg-blue waves-effect">Charges</button>
-  <%end %>
-</div>
 <input type="hidden" id="server_mode" value="<%= ENV["SERVER_MODE"] %>">
 </div>
 <div class="modal fade" id="voidModal" tabindex="-1" role="dialog">
@@ -286,5 +269,26 @@
 
     // Start checking payment status
     checkPaymentStatus();
-  }
+
+    document.querySelector('#cancel-btn').addEventListener('click', function(e) {
+        const data = {
+          sale_id: "<%= @sale_data.sale_id %>",
+        };
+
+        fetch('/foodcourt/qrpay/cancel', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
+          },
+          body: JSON.stringify(data)
+        }).then(function(res) {
+          return  res.json();
+        }).then(function(data) {
+            if(data.status) {
+              window.location.href = "/"
+            }
+        });
+    });
+  });
 </script>
diff --git a/config/routes.rb b/config/routes.rb
index a05016a2..15bfa40f 100755
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -749,6 +749,7 @@ scope "(:locale)", locale: /en|mm/ do
     get '/food_court/:order_id/cancel_order' => 'orders#cancel_order', :as => 'cancel_order'
 
     get '/:sale_id/qrpay/init' => 'qrpay#init'
+    post 'qrpay/cancel' => 'qrpay#cancel'
   end
 end
 end