invoice-editor · FinBaze for Platforms

Components

Kind: view (fills its container) · Session key: invoiceEditor · React: <FinBazeInvoiceEditor />

Create the session#

mutation {
  createEmbedSession(input: {
    companyId: "…"
    user: { externalUserId: "…" }
    components: { invoiceEditor: { enabled: true } }
  }) { clientSecret }
}

Requirements#

The company must have these features effective: sales_invoices. A hidden feature makes createEmbedSession fail with FEATURE_DISABLED.

Component features#

Switch these off per session with components.invoiceEditor.features.

Feature	Default
`save`	on
`send`	on

Options#

Passed to instance.create("invoice-editor", options) or as props.

Option	Type
`invoiceId`	`string`	Edit this invoice instead of starting one.
`externalId`	`string`	Your own id for the invoice (a shipment id, an order number). The editor finds the draft again by it and the invoice carries it, so opening it twice for the same shipment shows the same draft.
`prefill`	`{ customer?: { id?: string; externalId?: string; legalName?: string; firstName?: string; lastName?: string; email?: string; vatNumber?: string; address?: { country?: string; thoroughfare?: string; premise?: string; postalCode?: string; locality?: string } }; reference?: string; currency?: string; date?: string; due?: string; memo?: string; lines?: Array<{ name: string; description?: string; quantity: number; price: number; taxCode?: string; productId?: string }> }`	Starts a new draft with this data. Prices are minor units (cents) per unit; dates are YYYY-MM-DD. A customer you name by `id` or `externalId` is looked up among the company's customers.

Every component also takes appearance and navigation ("internal" or "external").

Events#

Event	React prop
`ready`	`onReady`
`navigate`	`onNavigate`
`error`	`onError`
`invoice.created`	`onInvoiceCreated`
`invoice.sent`	`onInvoiceSent`

Use it#

import { FinBazeInvoiceEditor } from "@finbaze/embed-react";

<FinBazeInvoiceEditor />

const component = instance.create("invoice-editor");
component.mount("#finbaze");