The receipt feature

For the whole team: what the receipt is, an overview for everyone, then architecture and technical detail for developers.
The brief and requirements every method got

Document the receipt feature so that any team member, whether developer, designer or product owner, can open it, quickly understand what it is, and find what is relevant to them. Give everyone a general overview first; then architecture and technical information for developers, and anything else the readers need.

  • Show, don’t tell: live pages, diagrams, tables, links, code
  • First screen: the thing itself and one line
  • Only the words needed
  • One fact per paragraph
  • Link every page mentioned
  • Diagrams wherever there is structure or a sequence
Receipt docs today
Side by side One at a time
No skilldiataxisdiataxis-docstechnical-writingdoc-coauthoring

Claude with the brief and requirements only. The yardstick.

Receipt

An order receipt for image licences: one A4 page in NTB's brand, seen on screen, printed from the browser or downloaded as a PDF.

A sample receipt A company buys one image with an editorial licence.Open

The page above is the real receipt, not a picture. Its Print and Download PDF buttons work.

What it is

A feature, not a prototype: it runs on its own with six sample orders and no checkout.

The prototypes Baseline and Product admin show it after checkout, each from its own copy of the code.

It is shown for discussion: is this how im-web should make receipts?

One page, three outputs

One receipt, three ways outA paid order becomes a receipt page, which the customer sees on screen, prints from the browser, or downloads as a PDF made by headless Chrome.

All three are the same markup and print styles, so what you check on screen is what the customer gets.

Find what you need

You areStart with
Product ownerWhat's on a receipt, then Before im-web
DesignerWhat's on a receipt and the variations
DeveloperHow it works, then Using it in a prototype

Pages on this site

PageWhat it shows
ReceiptThe feature's current overview, with the PDF alternatives
VariationsAll six sample receipts, each with what to check
DecisionsWhat the receipt shows and how it is made, with reasons
Sample receiptOne receipt full size; /features/receipt/app opens the first sample
PDFThe same receipt as the real PDF

Decisions in brief

Decision
R1An A4 PDF in NTB's brand colours, with everything bought, the VAT and the licence terms
R2NTB's addresses come from the brand guide's letterhead
R3The receipt keeps a copy of the order, so later price changes don't alter it
R4What you see on screen is exactly what prints and what goes in the PDF
R5The PDF is made from the copy of the site on the same machine, so it works through a tunnel
R6The feature has its own sample orders and works without any prototype
R7Every buyer, company or private, sees amounts including VAT and the same breakdown

Reasons and sources: Decisions.

No skilldiataxisdiataxis-docstechnical-writingdoc-coauthoring

Diátaxis with a rule sheet per kind, a plan, claims checked against the code, C4 diagram rules. Source

Receipt

An order receipt as an A4 page and a PDF, both drawn by one React component, used by the baseline and product-admin prototypes.

Sample receipt: one image, company The live receipt page. Print and Download PDF give the same sheet.Open
One component, three outputsAn order snapshot is rendered by the Receipt component into a screen page, a browser print and a server-side PDF.

Where to start

You areStart with
New to the receiptCheck a sample receipt from screen to PDF
Designer or product ownerWhat the receipt shows, then About what the receipt shows
DeveloperCode reference, then About how the receipt is made

Learn

One lesson walks through a sample receipt: on screen, printed, as a PDF, and over several pages.

Get something done

Three guides for work on the receipt or with it.

Look things up

Dry facts: what is on the sheet, and the code that draws it.

Understand

Why it is built this way, and what im-web would need to decide.

On the site