diff --git a/app/views/foodcourt/qrpay/init.html.erb b/app/views/foodcourt/qrpay/init.html.erb
index 80fccb79..4b89ef04 100644
--- a/app/views/foodcourt/qrpay/init.html.erb
+++ b/app/views/foodcourt/qrpay/init.html.erb
@@ -441,36 +441,58 @@ $(document).ready(function() {
   }
 
   $('#cancel-btn').on('click', function(e) {
-    document.getElementById('fullpage-loading').style.display = 'flex';
+    e.preventDefault(); // Prevent any default button action
 
-      setTimeout(function() {
-        document.getElementById('fullpage-loading').style.display = 'none';
-    }, 5000);
-    const postData = {
-      sale_id: "<%= @sale_data.sale_id %>"
-    };
+    swal({
+      title: "Are you sure?",
+      text: "Do you really want to cancel this transaction?",
+      type: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#DD6B55",
+      confirmButtonText: "Yes, cancel it!",
+      cancelButtonText: "No, keep it.",
+      closeOnConfirm: false,
+      showLoaderOnConfirm: true,
+    },
+    function(isConfirm){
+      if (isConfirm) {
+        // User clicked "Yes", so we proceed with the cancellation.
+        const postData = {
+          sale_id: "<%= @sale_data.sale_id %>"
+        };
 
-    $.ajax({
-      url: '/foodcourt/qrpay/cancel',
-      method: 'POST',
-      contentType: 'application/json',
-      headers: {
-        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
-      },
-      data: JSON.stringify(postData),
-      success: function(data) {
-        if (data.status) {
-          customer_display_view(null, "reload");
-        }
-      },
-      error: function(xhr, status, error) {
-        console.log("Error:", error);
+        $.ajax({
+          url: '/foodcourt/qrpay/cancel',
+          method: 'POST',
+          contentType: 'application/json',
+          headers: {
+            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+          },
+          data: JSON.stringify(postData),
+          success: function(data) {
+            if (data.status) {
+              swal({
+                  title: "Cancelled!",
+                  text: "The transaction has been successfully cancelled. You will be redirected shortly.",
+                  type: "success",
+                  timer: 2000, // The alert will close automatically after 2 seconds
+                  showConfirmButton: false
+              });
+              setTimeout(function() {
+                window.location.href = "/";
+              }, 1500); // 1.5-second delay before redirecting
+
+            } else {
+              swal("Error", "Could not cancel the transaction. Please try again.", "error");
+            }
+          },
+          error: function(xhr, status, error) {
+            console.log("Error:", error);
+            swal("AJAX Error", "An unexpected error occurred. Please check the console.", "error");
+          }
+        });
       }
     });
-
-    setTimeout(() => {
-      window.location.href = "/";
-    }, 1500);
   });
 });