diff --git a/app/views/foodcourt/qrpay/test_payment.html.erb b/app/views/foodcourt/qrpay/test_payment.html.erb
index 920537d8..91abe2b6 100644
--- a/app/views/foodcourt/qrpay/test_payment.html.erb
+++ b/app/views/foodcourt/qrpay/test_payment.html.erb
@@ -2,42 +2,41 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', () => {
-  const ws = new WebSocket("wss://juicecorner-0mo.sx-fc.app/cable")
+  const status = $('#status');
+  const amountToReceive = 500;
 
-  ws.onopen = () => {
-    console.log("WS Connected");
-    ws.send(JSON.stringify({
-      command: "subscribe",
-      identifier: JSON.stringify({
-        channel: "TestChannel"
-      })
-    }))
-    document.getElementById('status').textContent = 'Waiting for payment...'
-  }
+  // Create Action Cable consumer
+  const cable = ActionCable.createConsumer("wss://juicecorner-0mo.sx-fc.app/cable");
 
-  ws.onmessage = (e) => {
-    const msg = JSON.parse(e.data)
-    console.log("Received:", msg)
+  // Subscribe to channel
+  const subscription = cable.subscriptions.create(
+    {
+      channel: "TestChannel",
+      receipt_no: "0101234123456789012"
+    },
+    {
+      connected() {
+        console.log("Nagato channel connected");
+      },
 
-    // Handle subscription confirmation
-    if(msg.type === "confirm_subscription") {
-      console.log("Successfully subscribed!")
-      return
+      received(data) {
+        console.log("Received:", data);
+
+        if (data.status === "PAY_SUCCESS") {
+          this.handlePaymentSuccess();
+        }
+      },
+
+      handlePaymentSuccess() {
+        status.html(`
+          <div class="payment-success text-center">
+            <i class="material-icons" style="font-size: 50px; color: #4CAF50;">check_circle</i>
+            <h3 class="m-t-20" style="color: #4CAF50;">Payment Successful!</h3>
+            <p>Amount Received: ${amountToReceive}</p>
+          </div>
+        `);
+      }
     }
-
-    // Handle payment success
-    if(msg?.message?.status === "PAY_SUCCESS") {
-      document.getElementById('status').innerHTML = `
-        <h3 style="color: green;">Payment Received!</h3>
-        <p>Amount: ${msg.message.amount} ${msg.message.currency}</p>
-      `
-      ws.close()
-    }
-  }
-
-  ws.onerror = (e) => {
-    console.error("WS Error:", e)
-    document.getElementById('status').textContent = 'Connection failed'
-  }
+  );
 })
 </script>