Payment Receipt Printer

11.0 KB gzip for the class module

Variants

Recorded states

• focus-visible recorded state; no setter
• reduced motion recorded state; no setter
• active recorded state; no setter
• completed recorded state; no setter
• idle recorded state; no setter
• printing recorded state; no setter
• success recorded state; no setter

Usage

Import

import '/components/payment-receipt-printer/define.js';

// or register it yourself
import { DetentPaymentReceiptPrinter } from '/components/payment-receipt-printer/payment-receipt-printer.js';

Attributes

• auto-print
• currency
• date
• discount
• merchant
• merchant-subtext
• message
• order-number
• paper-theme
• payment-method
• print-duration
• printer-class-name
• receipt-class-name
• show-actions
• show-barcode
• show-cut-effect
• show-status-card
• status
• status-subtitle
• status-title
• subtotal
• tax
• total

Properties

• item
• items
• onPrintComplete
• onPrintStart
• onReplay

Slots

• merchant-logo

Events

• detent-print-start — {}
• detent-print-complete — {}
• detent-replay — {}

Example

Runnable example: site/examples/payment-receipt-printer.ts. The snippet below is generated from the catalogued attributes.

<detent-payment-receipt-printer
  auto-print
  currency="{{MAIN}}quot;
  date
  discount
  merchant="Detent Store"
  merchant-subtext="Official Component Registry"
  message="Thank you for your order!"
  order-number="#4821"
  paper-theme="light"
  payment-method="Apple Pay •••• 4242"
  print-duration="2.4"
  printer-class-name
  receipt-class-name
  show-actions
  show-barcode
  show-cut-effect
  show-status-card
  status="idle"
  status-subtitle="Receipt has been issued"
  status-title="Payment Complete"
  subtotal
  tax
  total="$200.00"
></detent-payment-receipt-printer>

Property-only values

const element = document.querySelector('detent-payment-receipt-printer');
if (element !== null) {
  // items: ReceiptItem[]
  element.items = [];
  // item: ReceiptItem
  element.item = undefined;
  // onPrintStart: () => void
  element.onPrintStart = () => {};
  // onPrintComplete: () => void
  element.onPrintComplete = () => {};
  // onReplay: () => void
  element.onReplay = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/PaymentReceiptPrinter.tsx sha256 c355a8ea5f8b…

Native files

The native module and its artifacts:

• src/components/payment-receipt-printer/payment-receipt-printer.ts
• src/components/payment-receipt-printer/styles.css
• src/components/payment-receipt-printer/define.ts
• docs/components/payment-receipt-printer.md
• site/examples/payment-receipt-printer.ts
• tests/browser/payment-receipt-printer.spec.ts
• evidence/components/payment-receipt-printer.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

Slots

CSS customisation

• React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
• `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
• React callback props become typed composed CustomEvents; programmatic state assignment emits none.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• `lucide-react` icon components replaced with local SVG assets (ISC notice retained).
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• The mount timeline starts idle and enters printing with detent-print-start after the pinned 400 ms delay; upstream mounts in printing and fires its callback 400 ms later, so the paper moves before the event.
• A Print action is rendered because the row feature list records it (the pinned JSX has only Replay and Copy); it restarts the extrusion and emits the same two events, with no new event name.
• The date default is the pinned source literal "Aug 20, 2026 · 10:42 AM"; the upstream meta says "Current date", and the source wins (PC-3.6).
• className is replaced by documented parts and custom properties; printer-class-name and receipt-class-name remain and add class tokens only, never markup.
• Small copy was lifted for contrast (#A1A1A1 state text and LED text, boundaries #6B6B6B for 3:1) as a recorded WCAG correction (PC-12.6).
• The barcode is generated from the order number as local SVG geometry instead of a hard-coded pattern: it stays aria-hidden, keeps a readable code line beneath, and requests no asset or network resource.
• Framer Motion springs become CSS transitions; the vibration, LED and dot are CSS keyframes, all removed under reduced motion, which still reaches the completed state.
• ReceiptItem.tag is accepted and not rendered, exactly as upstream.
• Default demo copy and labels use Detent branding instead of EasyUI (pre-release rebrand).