184 Components

Transaction Receipt

Cards

Perforated fintech digital receipt card inspired by Monzo and Stripe with an authentic zigzag bottom tear edge, itemized breakdown, barcode, and animated spring rubber stamps (PAID, SETTLED, REFUNDED).

BoseUI Cloud Infrastructure

Oct 12, 2026 • 13:42 UTC

Ref: TXN-84920481

High-Performance Compute Pod (8 vCPU)

$48.00

Vector Memory Store (100 GB SSD)

$12.00

Continuous Integration Pipeline Runners× 2

$16.00

Subtotal$76.00

Estimated Tax$7.60

Discount-$10.00

Total Paid$73.60

Mastercard ending in 4242

Approved

PAID

* 9 4 8 2 0 4 8 1 0 2 *

Installation

Install directly into your project using the shadcn CLI or copy the source code manually.

Requires:framer-motionlucide-reactclsxtailwind-merge

$npx shadcn@latest add "https://boseui.site/r/transaction-receipt.json"

Props

TypeScript props supported by <TransactionReceipt />.

5 props

Prop	Type	Default	Description
merchantName	`string`	`"BoseUI Cloud Infrastructure"`	Header company or merchant business name.
transactionId	`string`	`"TXN-84920481"`	Transaction unique reference identifier.
date	`string`	`"Oct 12, 2026 • 13:42 UTC"`	Formatted timestamp of payment.
items	`ReceiptItem[]`	—	List of purchased line items with name, quantity, and price.
stampText	`"PAID" \| "SETTLED" \| "REFUNDED" \| null`	`"PAID"`	Rubber stamp watermark label.

Key Features

Authentic SVG zigzag perforated bottom tear edge.
Interactive spring rubber stamp overlay (PAID, SETTLED, REFUNDED).
Itemized subtotal, estimated tax, discount, and total payment calculation.
Integrated transaction barcode and one-click reference ID copying.
Zero external graphic assets with complete dark/light mode responsiveness.

Keyboard & Accessibility

Accessible semantic table/flex layout for screen readers.
High contrast monochromatic typography with WCAG AA compliance.

Topographic Ripple Surface

Typewriter Cursor Effect