What problem does it solve? Checkout confirmation pages often show a bare success message with no durable record of the purchase. This Skill provides a receipt component that animates out of the confirmation card once a payment is confirmed, while enforcing the rules that keep a receipt honest: processor-driven status, semantic text, masked card digits, and a permanent receipt URL. ## Core Features & Use Cases - Animated receipt reveal: A paper-style receipt with line items, subtotal, tax, total paid, order id, masked card, date, barcode, and torn bottom edge emerges from the confirmation card using pure CSS transitions. - Two implementations: A self-contained reference/demo.html runnable with no build step, and a ReceiptPrinter.tsx React component with plain CSS that drops into any project. - Safety and accessibility rules: Status must come from the payment processor (never a timer), the receipt is selectable semantic text, only the last four card digits are shown, reduced-motion and print styles are built in, and a permanent receiptHref link is required. - Use Case: On an e-commerce or subscription checkout, after Stripe confirms the charge, render the receipt with the order's line items and a link to the permanent receipt page in order history. ## Quick Start Open reference/demo.html with a local static server such as python3 -m http.server to see the receipt animation, then adapt ReceiptPrinter.tsx into your checkout confirmation flow.
