Skip to content

Expiry & countdown

Live order expiry state for the checkout screen.

When to use

Show time remaining while an order is active, and switch to expired UI when the timer hits zero. Prefer these hooks over manually parsing order.expiresAt.

Hooks

HookReturnsUpdates
useCashAppOrderExpiry(){ expiresAt, hasActiveOrder, timeLeftMs, isExpired }When the active order changes
useCashAppOrderCountdown()Same + { hours, minutes, seconds }Ticks every 1 second while active

Both wrap the active order from useCashAppOrder, so they require CashAppProvider. Countdown is what you usually want for a visible timer.

Example

tsx
import {
  useCashAppOrder,
  useCashAppOrderCountdown,
} from '@swapped/connect-sdk/react'

function PendingPayment() {
  const { order, isCompleted, isFailed } = useCashAppOrder()
  const { hours, minutes, seconds, isExpired, hasActiveOrder } =
    useCashAppOrderCountdown()

  if (!hasActiveOrder) return null
  if (isCompleted) return <p>Payment received</p>
  if (isFailed) return <p>Payment failed</p>
  if (isExpired) return <p>Order expired — create a new one</p>

  return (
    <div>
      <p>
        Time left: {hours}:{minutes}:{seconds}
      </p>
      <a href={order?.cashAppUrl} target="_blank" rel="noreferrer">
        Open Cash App
      </a>
    </div>
  )
}

For side effects when the order expires (navigate away, toast), use useOnCashAppOrderExpired — see Event hooks.

Notes

  • Expiry is per order, not a Coinbase submission cooldown.
  • When the order expires, useCashAppOrder().order is cleared and the last order is kept on expiredOrder if you still need the payload.
  • After expiry, create a new order — do not reuse old checkout links.
  • isExpired from the countdown hook and useCashAppOrder().isExpired should stay in sync; either is fine for UI.

Errors

These hooks do not throw. Order create errors come from useCashAppOrder — see Errors.