Payment Receipt Success Block for React

The page describes a payment that already happened for a fictional account, so nothing is charged, sent or saved. What the browser really does is real: Copy Button writes the receipt number to the clipboard, and Download receipt saves a small text file of the same lines and sums, named as a sample in its caption. The amounts are typed data, and the Open the dashboard link is a placeholder href. To wire it for real, render this page after your payment provider confirms the charge (its webhook or its redirect) and fill LINES, RECEIPT_ID, the dates and the card line from the provider's receipt object.

Edit LINES: each has a name, a detail line and an amount in whole cents, so the totals never carry a floating-point error. The subtotal is summed from the lines, the tax is TAX_BP (basis points, 1,000 is 10%) applied to the subtotal and rounded to a cent, and the total is their sum; the table, the heading and the downloaded file all read the same three numbers. If your provider already computed the tax, replace taxOf with its figure instead of recomputing it.

Amounts go through Intl.NumberFormat with a fixed en-US locale, so the server and the browser agree, and each one sits in a single left-to-right span so the sign and digits keep their order on a right-to-left page. Dates are fixed ISO strings written with Intl.DateTimeFormat in UTC and kept in time elements, never computed from the visitor's clock, so the receipt reads the same everywhere and years later.

It's a native table with a caption, column headers, and each line's name as a row header, so a screen reader announces the item before its amount. The total is the last row of the table's foot. The receipt number's Copy Button names what it copies and says "Receipt number copied" when it works, and a polite status message under the page reports the download.

The two halves stack with a rule between them: the heading, the list and the dashboard button come first, and the receipt follows in its frame, with the Item and Amount columns kept so nothing scrolls sideways at 320 pixels. The page still fills the screen and never changes height.