Building a Crypto Payment Status Page: Real-Time Order Tracking for Customers

What to Show on the Status Page

Your payment status page should communicate four states clearly:

1. Waiting: session open, no payment received yet
2. Detected: payment seen in mempool or block, awaiting confirmations
3. Confirmed: sufficient confirmations, order processing
4. Fulfilled: order complete, access/product/service delivered

Polling for Status

function usePaymentStatus(sessionId) {
  const [status, setStatus] = useState('waiting');

  useEffect(() => {
    const interval = setInterval(async () => {
      const res = await fetch(`/api/payment-status/${sessionId}`);
      const { status } = await res.json();
      setStatus(status);
      if (status === 'fulfilled') clearInterval(interval);
    }, 5000);
    return () => clearInterval(interval);
  }, [sessionId]);

  return status;
}

WebSocket Alternative

For lower latency, use WebSockets. When your webhook endpoint receives a payment, push a message to the customer's open socket connection. This delivers confirmation in under a second of on-chain detection.

// In your webhook handler
wss.clients.forEach(client => {
  if (client.sessionId === payload.userId) {
    client.send(JSON.stringify({ type: 'payment_confirmed', txHash: payload.txHash }));
  }
});

Blockchain Explorer Link

Always include a link to the transaction on BscScan: https://bscscan.com/tx/{txHash}. This gives technically savvy customers direct proof of the payment without contacting support.