Receipt
Receipt components are used to display a receipt for a transaction. They are commonly used to display the details of a transaction, such as the amount, the date, and the items purchased.
Loading Code Block...Full example
Section titled “Full example”A standard default receipt with header, customer details, line items, totals, and a summary section.
Rethink
Receipt No: 9876543210abcdefghij65432121
Customer Number024 000 0000
Customer NameJohn Doe
Date24th Dec 2024 , 11:09 AM
| Qty | Description | Amount (GHS) |
|---|---|---|
| 12 | Jollof Rice (+ 2 others) | 70.00 |
| 1 | Jollof Rice (+ 2 others) | 70.00 |
| 1 | Jollof Rice (+ 2 others) | 70.00 |
SubtotalGHS 70.00
Delivery FeeGHS 20.00
TotalGHS 90.00
Total GHS 70.00
Issued by
Loading Code Block...Merchant Receipt
Section titled “Merchant Receipt”The merchant type adds a top merchant section (logo, business name, contact) above the standard rows.
Payment Successful
Atom Furnitures (East Legon)[email protected]
Customer Number024 000 0000
Customer NameJohn Doe
Date24th Dec 2024 , 11:09 AM
| Qty | Description | Amount (GHS) |
|---|---|---|
| 12 | Jollof Rice (+ 2 others) | 70.00 |
| 1 | Jollof Rice (+ 2 others) | 70.00 |
| 1 | Jollof Rice (+ 2 others) | 70.00 |
SubtotalGHS 70.00
Delivery FeeGHS 20.00
TotalGHS 90.00
Total GHS 70.00
Issued by
Loading Code Block...Careforce Receipt
Section titled “Careforce Receipt”The careforce type displays a single grouped section with a prominent amount and supporting transaction details.
Transaction Successful
Your transaction has been completed successfully
AmountGHS 1,000.00
RetailerRethink Restaurant
Date & Time24th Dec 2024 , 11:09 AM
Transaction ID003324000000123
Account NameJohn Doe
Account Number024 000 0000
Payment ProviderMTN Mobile Money
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| type | 'default' | 'default' | 'merchant' | 'careforce' | The type of receipt to display. |
| header | — | ReceiptHeader | Header configuration for the receipt. Required. |
| body | — | ReceiptSection[] | Array of receipt sections to display in the body. Required. |
| footer | — | ReceiptFooter | Footer configuration for the receipt. Suppressed when `type='careforce'`. |
ReceiptSection (body items)
Section titled “ReceiptSection (body items)”Each entry in body is a discriminated union keyed by sectionType. Every section accepts an optional slot that, when provided, replaces the section’s default markup.
| Props | Default | Type | Description |
|---|---|---|---|
| sectionType | — | 'details' | 'quantity' | 'merchant' | 'summary' | 'careforce' | Discriminator selecting which row shape and renderer the section uses. |
| rows | — | ReceiptDetailsRow[] | ReceiptQuantityRow[] | ReceiptMerchantRow[] | ReceiptSummaryRow[] | Array of rows for the section. Shape depends on `sectionType`. `careforce` accepts `ReceiptDetailsRow[]`. |
| amount | — | string | number | Available on `sectionType='careforce'` only. Renders the prominent amount card above the rows. |
| slot | — | ReactNode (React) / VNode (Vue) | Custom content rendered in place of the section's default markup. In Vue, must be a VNode (e.g. `h(MyComponent)`); a bare component reference will not mount. |
ReceiptHeader Props
Section titled “ReceiptHeader Props”| Props | Default | Type | Description |
|---|---|---|---|
| headerTitle | — | string | The main title displayed in the receipt header. Required. |
| headerSubtext | — | string | Optional subtitle or additional text in the header. Not rendered in the `merchant` header layout. |
| headerIcon | — | ReactNode (React) / VNode (Vue) | Optional icon to display in the header. In Vue, pass via `h(Icon, { class: '…' })`; a bare component reference also works because the icon mounts through `<component :is>`. |
| headerBgColor | 'bg-teal-50' | string | Tailwind background class applied to the header container. Falls back to `bg-teal-50` when omitted. |
ReceiptDetailsRow Props
Section titled “ReceiptDetailsRow Props”| Props | Default | Type | Description |
|---|---|---|---|
| label | — | string | The label text for the detail row. Required. |
| value | — | string | number | The value to display for the detail row. Required. |
| valueType | 'text' | 'text' | 'date' | 'phone' | 'currency' | Selects the value formatter: `currency` (GHS via `Intl.NumberFormat`), `phone` (`XXX XXX XXXX` with `233`→`0` normalization), `date` (`Dth Mon YYYY , h:mm AM/PM`), or `text` (passthrough). |
ReceiptQuantityRow Props
Section titled “ReceiptQuantityRow Props”| Props | Default | Type | Description |
|---|---|---|---|
| qty | — | number | string | The quantity value for the item. Required. |
| description | — | string | Description of the item. Required. |
| amount | — | string | number | The amount for the quantity row. Rendered verbatim — pre-format the string if you need currency styling (the table header already labels the column `Amount (GHS)`). Required. |
ReceiptMerchantRow Props
Section titled “ReceiptMerchantRow Props”| Props | Default | Type | Description |
|---|---|---|---|
| text | — | string | The main text for the merchant row. Required. |
| description | — | string | Additional description text for the merchant row. Required. |
| icon | — | ReactNode (React) / VNode (Vue) | Icon displayed alongside the merchant information. Required. In Vue, pass a VNode via `h(Icon, { class: '…' })`. |
ReceiptSummaryRow Props
Section titled “ReceiptSummaryRow Props”| Props | Default | Type | Description |
|---|---|---|---|
| label | — | string | The label for the summary row. Required. |
| value | — | string | number | The value for the summary row. Always formatted with `Intl.NumberFormat` (GHS) regardless of any `valueType` — pre-formatted strings will be double-formatted. Required. |
ReceiptCareforceSection Props
Section titled “ReceiptCareforceSection Props”| Props | Default | Type | Description |
|---|---|---|---|
| amount | — | string | number | Renders the prominent amount card. Always formatted via `Intl.NumberFormat` (GHS). `amount: 0` renders as `GHS 0.00`; omit the field entirely to suppress the card. |
| rows | — | ReceiptDetailsRow[] | Detail rows rendered as bordered cards below the amount. Uses the same `valueType` formatting as `details` rows. |
| slot | — | ReactNode (React) / VNode (Vue) | Custom content rendered in place of the section's default markup. |
ReceiptFooter Props
Section titled “ReceiptFooter Props”| Props | Default | Type | Description |
|---|---|---|---|
| footerLogo | Hubtel logo | ReactNode (React) / VNode (Vue) | Logo element shown in the footer next to the “Issued by” label. React accepts any `ReactNode` (icons, SVGs, custom components). Vue expects a `VNode` — pass `h(Component)` so it mounts through `<component :is>`. The default differs per framework: React renders an inline SVG component; Vue renders `<img>` from a bundled SVG asset. |