Already implemented in Step 2! When customer lands on order page, it automatically checks once.Optional: Add a button to check on demand (checks every 1 minute max):
<!DOCTYPE html><html> <head> <title>Order Status</title> </head> <body> <h1>Order Status</h1> <p>Status: <span id="status">PENDING</span></p> <button id="checkBtn" onclick="startChecking()"> Check Payment Status </button> <p id="message"></p> <script> let checking = false; let checkInterval = null; const orderId = window.location.pathname.split("/").pop(); async function checkPayment() { const response = await fetch(`/orders/${orderId}/check`, { method: "POST", }); const data = await response.json(); document.getElementById("status").textContent = data.status; if (data.status === "CONFIRMED") { document.getElementById("message").textContent = "✅ Payment confirmed!"; stopChecking(); setTimeout(() => location.reload(), 2000); } else if (data.status === "FAILED") { document.getElementById("message").textContent = "❌ Payment failed"; stopChecking(); } else { document.getElementById("message").textContent = "⏳ Still pending..."; } } function startChecking() { if (checking) return; checking = true; document.getElementById("checkBtn").disabled = true; // Check immediately checkPayment(); // Then check every 1 minute checkInterval = setInterval(checkPayment, 60000); // Stop after 10 minutes setTimeout(stopChecking, 10 * 60000); } function stopChecking() { checking = false; document.getElementById("checkBtn").disabled = false; if (checkInterval) { clearInterval(checkInterval); checkInterval = null; } } // Auto-check when page loads (if pending) if (document.getElementById("status").textContent === "PENDING") { checkPayment(); } </script> </body></html>