shadcn.io is not affiliated with official shadcn/ui
Payment Receipt Success Block for Solid
A full-height payment confirmation split in two: what happened and what comes next on one side, an itemised receipt table with the tax worked out in cents, a copyable receipt number and a text download on the other.
Installation
Overview
Close a checkout with proof of what was bought, with this payment confirmation page for Solid with Ark UI. It fills the screen: the page's two side rails run its full height, and one band crosses it between two rules with a plus mark where each meets a rail. The band is split in two by a divider. The first half has a check in a muted tile, the heading with the amount, one sentence, a short list of what happens next (the plan, the day it starts, the renewal date, the receipt) and the Shine Button that opens the dashboard, the only colored control. The second half is the receipt in a corner-marked frame: a native table of three lines, the tax worked out at 10% in whole cents, and the total, with a Copy Button for the receipt number and a Download Trigger that saves the receipt as a text file. It's built from Shine Button, Button, Copy Button, Download Trigger and Guides, with a CSS entrance only. On a phone the receipt moves under the list and the dashboard button stays on the first screen. For checkout, billing and subscription flows.
FAQ
What is real here, and what stays in the page?
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.
How do I change the lines, and how is the tax worked out?
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.
How are amounts and dates written?
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.
Is the receipt table accessible?
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.
How are the dashboard link and the download wired?
asChild around an a element.Download receipt is a Download Trigger styled with buttonVariants; give it a function in data that fetches your PDF as a Blob to download the real invoice instead of this sample text.How does it look on a phone?
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.