Skip to navigation
Vitable Drops

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

Add the Widget

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

PropTypeDefaultPurpose
widthstring | number"100%"Iframe width
heightstring | number"600px"Iframe height
classNamestring—CSS class applied to the iframe
styleCSSProperties—Inline styles applied to the iframe

Events

PropSignatureWhen it fires
onReady() => voidThe iframe is loaded and ready
onEmployerBillingReady() => voidThe billing interface is visible and interactive
onTokenExpired() => voidA token expires; the SDK still attempts refresh
onAuthError(code: string, message: string) => voidAuthentication fails
onError(code: string, message: string) => voidAny widget error occurs

Combine Employer Widgets

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

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.