Lesson 5 of 7 · 5 min

Cancelling an Order

Cancel an order correctly, understand when cancellation fees apply, and know what happens after you confirm.

Cancelling an Order

Video coming soon

5/7

Lesson Notes

01

To cancel an order on the web, open the order detail, click the three-dot overflow menu in the top-right of the header, and choose 'Cancel order'. A confirmation dialog (CancelOrderDialog) appears immediately. Before you see any button to confirm, the dialog fetches GET /orders/:projectId/cancellation-policy to check whether the provider has configured a cancellation fee and whether this cancellation falls within a late-cancel window. This fetch happens every time you open the dialog — it re-checks rather than using a cached result because a job can flip from a standard fee to a late fee if you open the dialog close to the shoot time.

02

The dialog shows one of three policy outcomes: free cancellation ('Cancelling is free. The technician's calendar slot will reopen.'), standard fee (a dollar amount stated up front and a message that 'A fee will be charged to your saved card'), or late cancellation (the same fee language but flagging the number of hours you are inside the cancellation window). The confirm button label changes to match: 'Cancel order' when free, or 'Cancel for $X' when a fee applies. There is always a 'Keep order' button to back out without doing anything.

03

On iOS, the cancel flow is a dedicated bottom sheet (CancelOrderSheet) rather than an alert dialog. It follows the same three-panel flow: loading spinner while the policy is fetched, then a visually distinct policy card with an icon and colour-coded background (green for free, amber for standard fee, red for late), an optional Reason text field, and a full-width destructive button labelled 'Cancel order' or 'Cancel for $X'. The sheet is non-dismissible while the cancellation is processing so you cannot accidentally background it mid-request.

04

After you confirm, the backend calls the customer-cancel endpoint which — in addition to flipping the order status to Cancelled — attempts to charge the cancellation fee to your card on file if one exists. The outcome is surfaced via toast on the web (one of: 'Order cancelled', 'Cancelled. $X fee was charged to your saved card', 'Cancelled, but we couldn't charge the fee: [reason]', or 'Cancelled. We weren't able to charge the fee because no card is on file'). On iOS, the same outcomes are shown inside the sheet as a styled outcome card with a headline and detail sentence.

05

After a successful cancel, the order's status badge flips to Cancelled and the order is closed. You can archive a cancelled order from the same overflow menu — 'Archive order' — which hides it from your main list. Archiving is not permanent delete; the provider retains the record. If the charge failed on iOS, the sheet offers a 'Confirm payment' button that opens Apple Pay / PaymentSheet so you can complete the 3DS bank challenge inline and settle the fee without contacting support.

Key Takeaways

  • Open the overflow menu on the web or swipe left on the iOS list row to access the cancel action.
  • The cancellation policy is always fetched fresh when you open the cancel dialog — it can change between opens as you approach the shoot time.
  • The confirm button label is 'Cancel order' (free) or 'Cancel for $X' (fee applies) — you always know the cost before you commit.
  • After confirmation, a toast (web) or outcome card (iOS) tells you exactly what happened with the fee: charged, skipped (no card on file), or failed.
  • Cancelled orders can be archived to hide them from the main list; the provider still retains the record.
Related documentation at docs.vremly.com