Understanding order and payment status transitions.
Updated
Orders progress through a series of statuses from creation to delivery.
pending → processing → shipped → delivered → completed
↘ cancelled
↘ refunded
| Status | Description |
|---|---|
pending | Order placed, awaiting payment confirmation or processing |
processing | Payment confirmed, order being prepared for shipment |
shipped | Order shipped, tracking number assigned |
delivered | Package delivered to the customer |
completed | Order fulfilled and closed |
cancelled | Order was cancelled before shipment |
refunded | Full or partial refund issued |
function OrderStatusBadge({ status }: { status: string }) {
const colors = {
pending: "bg-yellow-500/20 text-yellow-400",
processing: "bg-blue-500/20 text-blue-400",
shipped: "bg-purple-500/20 text-purple-400",
delivered: "bg-green-500/20 text-green-400",
completed: "bg-green-500/20 text-green-400",
cancelled: "bg-red-500/20 text-red-400",
refunded: "bg-gray-500/20 text-gray-400",
}
return (
<span className={`px-2 py-1 rounded text-sm ${colors[status] || ""}`}>
{status.charAt(0).toUpperCase() + status.slice(1)}
</span>
)
}
Get notified when order status changes via webhooks:
order.created — Status: pendingorder.updated — Any status changeorder.completed — Status: completedorder.cancelled — Status: cancelledorder.refunded — Status: refunded