> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tesouro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Invoicing

> Embed the invoicing component to let users create, manage, and send invoices directly within your application.

The invoicing component gives users a full-featured invoicing experience embedded within your platform — including invoice creation, management, sending, and tracking — without leaving your application.

## React

```tsx lines theme={null}
import { EmbeddedProvider, InvoicingWidget } from '@tesouro/embedded-components-react';

export default function InvoicingPage() {
  return (
    <EmbeddedProvider
      userId={currentUser.id}
      userEmail={currentUser.email}
      widgetTokenRefreshUrl="/api/widget-token"
    >
      <InvoicingWidget />
    </EmbeddedProvider>
  );
}
```

## Web components

```html lines theme={null}
<embedded-invoicing-widget
  data-user-id="YOUR_USER_ID"
  data-widget-token-refresh-url="/api/widget-token"
></embedded-invoicing-widget>
```

## Next steps

* Set up the [`EmbeddedProvider`](/finops/guides/getting-started/client-side/index#react-sdk) with authentication and theming
* Explore the [FinOps API](/finops/reference/openapi) for programmatic invoice management