Success Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the invoice: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. Pay invoice in the header opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ReceiptFields component. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

It is one inline image with a ring and a tick, each a path with a pathLength of 100. A CSS transition from a dash of 0 to 100 (starting: styles, no library) draws the ring first and the tick half a second later, once, when the dialog appears. Under reduced motion the transition is off and both strokes are whole at once. The image is hidden from assistive technology, since the title already says what happened.

It copies the reference to the clipboard and says so politely, through the status line inside the dialog, since a modal hides the page's own. If the clipboard refuses, the button shows a cross and says it couldn't copy. The reference, the amount and the payee are typed constants; in your app take them from the payment the server confirmed.

Closing the dialog, by that button, Close or Escape, settles the drawn invoice: its pill turns from Due to Paid and a polite status message says the invoice was marked paid in this demo and nothing was charged. In your app show this dialog only after the payment provider has confirmed, and change the invoice from the provider's result, not from closing the dialog. Never call it from a click that only started a payment.

The real dialog opens with focus on Back to invoices, its one action, past the copy button. Escape, Close and that button close it and return focus to the header's button, now named View receipt. The action is the focus target through initialFocus.

The copy shown on load docks to the foot of the page as a bottom sheet with its button pinned and the check and the list scrolling above it when the screen is short. The real dialog keeps the Dialog's own phone layout, sticking to the bottom edge.