Invoice

Счёт для печати: позиции, налоги, скидки и итоги в валюте. Pro · Магазин и платежи › Корзина и заказ

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add invoice

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Invoice } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`number` *	`string`		Invoice number, e.g. "INV-2026-0042".
`status`	`'draft' \| 'open' \| 'paid' \| 'overdue' \| 'void'`		Badge next to the title. `paid` labels the headline amount "Paid"; `paid` and `void` hide the due date under it.
`issueDate` *	`DateInput`		Date the invoice was issued, listed with the number.
`dueDate`	`DateInput`		Payment due date, listed with the number and under the headline amount.
`from` *	`InvoiceParty`		Sender: their name doubles as the brand next to `logo`, and their details fill the From block.
`to` *	`InvoiceParty`		Customer, shown in the Bill to block.
`items` *	`InvoiceLineItem[]`		Line items; subtotal, discounts, tax per rate and the total are computed from them.
`currency`	`string`	`'USD'`	ISO 4217 code; amounts are minor units of it. Default USD.
`shipping`	`number`		Minor units added after tax.
`amountPaid`	`number`		Minor units already paid; adds "Amount paid" and "Amount due".
`logo`	`ReactNode`		Brand mark shown before the sender's name.
`meta`	`{ label: ReactNode; value: ReactNode }[]`	`[]`	Extra rows next to the dates, e.g. `{ label: 'PO number', value: 'PO-8812' }`.
`notes`	`ReactNode`		Free text under the totals, e.g. a thank-you or payment instructions.
`terms`	`ReactNode`		Payment terms under the totals, next to `notes`.
`actions`	`ReactNode`		Buttons above the document (Download, Print, Pay); hidden when printing. Put the primary one last: on a phone it moves first and takes the full width.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<InvoiceLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Invoice

Установка

Пропсы

Похожие компоненты