> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developer.vitablehealth.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developer.vitablehealth.com/_mcp/server.

# Employer Billing Widget

> Embed Vitable's billing dashboard into your application so employers can view invoices, payments, and billing history.

Employer Billing gives HR administrators Vitable billing information inside your application. It uses the same **employer-bound** token as Employer Benefits.

## Before You Begin

* Complete the shared [Vitable Drops setup](/drops/get-started).
* [Onboard the employer](/embedded_benefits/guides/employer-onboarding) and store its `empr_` ID.
* Configure the provider with `createTokenFetcher("employer", employerId)`.

## Add the Widget

```typescript
import { EmployerBillingWidget } from "@vitable-inc/drops/react"

function BillingDashboard() {
  return (
    <EmployerBillingWidget
      height="800px"
      onReady={() => console.log("Widget ready")}
      onError={(code, message) => {
        console.error("Widget error", code, message)
      }}
    />
  )
}
```

## Props

### Layout

| Prop        | Type               | Default   | Purpose                             |
| ----------- | ------------------ | --------- | ----------------------------------- |
| `width`     | `string \| number` | `"100%"`  | Iframe width                        |
| `height`    | `string \| number` | `"600px"` | Iframe height                       |
| `className` | `string`           | —         | CSS class applied to the iframe     |
| `style`     | `CSSProperties`    | —         | Inline styles applied to the iframe |

### Events

| Prop                     | Signature                                 | When it fires                                    |
| ------------------------ | ----------------------------------------- | ------------------------------------------------ |
| `onReady`                | `() => void`                              | The iframe is loaded and ready                   |
| `onEmployerBillingReady` | `() => void`                              | The billing interface is visible and interactive |
| `onTokenExpired`         | `() => void`                              | A token expires; the SDK still attempts refresh  |
| `onAuthError`            | `(code: string, message: string) => void` | Authentication fails                             |
| `onError`                | `(code: string, message: string) => void` | Any widget error occurs                          |

## Combine Employer Widgets

Render both employer widgets under one provider when they use the same employer context:

```typescript
import {
  EmployerBenefitsWidget,
  EmployerBillingWidget,
  VitableConnectProvider,
} from "@vitable-inc/drops/react"
import { useCallback } from "react"

function EmployerPortal({ employerId }: { employerId: string }) {
  const fetchToken = useCallback(
    createTokenFetcher("employer", employerId),
    [employerId],
  )

  return (
    <VitableConnectProvider
      baseUrl={VITABLE_WIDGET_URL}
      fetchToken={fetchToken}
      contextKey={employerId}
    >
      <EmployerBenefitsWidget height="600px" />
      <EmployerBillingWidget height="600px" />
    </VitableConnectProvider>
  )
}
```

Both widgets receive refreshed tokens from the shared provider. When the active employer changes, update `contextKey` to reset the whole session.