React 0.14 · Angular 0.2

Billing components for your framework

Pass a bill ID and a session endpoint. The components load authoritative data, renew browser sessions, and perform the actions valid for each bill state.

npm install @mindbill/react@0.14 npm install @mindbill/angular@0.2

Compact surface

ConnectedBillStatus

Use this in a case header, receivables list, or sidebar where users need status and the next action without the full editor.

Live previewSynthetic bill

Bill status

processed

Submitted 8/12/2026 · 13 days old · Updated 8/25/2026

Charged: $2,015.00
Paid: $0.00
Balance: $2,015.00

BillStatus.tsx

import { ConnectedBillStatus } from "@mindbill/react";
import "@mindbill/react/styles.css";

<ConnectedBillStatus
  billId={billId}
  sessionEndpoint="/api/mindbill/status-session"
/>

server/status-session.ts

// Any server framework: authenticate, authorize, mint, return.
import { MindBillClient } from "@mindbill/node";

const mindbill = new MindBillClient({
  apiKey: process.env.MINDBILL_API_KEY!,
  organizationId: process.env.MINDBILL_ORG_ID
});

app.post("/api/mindbill/status-session", async (request, response) => {
  const user = await requireUser(request);
  const { billId } = request.body;
  await assertUserCanAccessBill(user, billId);

  const session = await mindbill.createBrowserSession({
    component: "bill-timeline",
    billId,
    allowedOrigin: "https://your-product.example",
    expiresIn: 900
  });

  response.json({
    token: session.token,
    expiresAt: session.expiresAt
  });
});

The component owns

Loading, polling, focus refresh, session renewal, amounts, aging, and status-aware actions.

Your app owns

User authentication, bill authorization, placement, and the surrounding navigation.

Complete surface

ConnectedBillLifecycle

Use this as the billing page. It starts as a prefilled editor and becomes the lifecycle workspace after submission.

Live previewEditable

Billing review

Bill #1042

Review the prefilled claim and payer packet, then submit.

incomplete$2,015.00

Patient: Alex Morgan
Claim: DEMO-WC-2026-0042
Employer: Redwood Logistics
Date of injury: 2026-02-14

Claims administrator

Select the carrier or administrator that should receive this bill.

Required

Insurance company or claims administrator

No matching administrator selected yet.

Patient and claim

Prefilled from the case. Correct anything that should print differently on this bill.

Editable

Patient first name Middle name OptionalPatient last name Date of birth Claim number The claim number matches a known Travelers workers' compensation format.Employer Date of injury WCAB / ADJ number OptionalUse the EAMS case number shown as ADJ followed by digits.

EAMS lookup requires California DWC verification. Verify in EAMS.

Service

The service date and optional payer authorization printed on this bill.

Date of service Authorization number Optional

Billing practice

Payee identity and billing address for this claim.

Prefilled

Practice name Tax ID Billing NPI Phone OptionalBilling street City

State

ZIP

Clinician

Provider identity printed on the claim.

Prefilled

Clinician name Specialty NPI Taxonomy OptionalLicense number Optional

License state (optional)

Service location

The exact place of service for this bill.

Prefilled

Location name Street City

State

ZIP Place of service code

Procedure lines

Choose a billing profile, then review the codes and modifiers. Allowed amounts recalculate on save.

Sets evaluator modifiers across med-legal lines. You can still edit each line.

ProcedureComprehensive med-legal evaluation

Modifiers

Units

Allowed$2,015.00

Payer billing packet

Review exactly what will be sent with this bill.

3 files

Separate from attorney report service. Final reports, proof of service, and required billing forms may be preselected. Medical records are never silently attached.

PDF
final-medical-legal-report.pdfFinal medical-legal report
PDF
proof-of-service.pdfProof of service
PDF
practice-w9.pdfW-9

Add supporting PDFChoose any additional document intentionally. Up to 25 MB.

Delivery

Submit this bill

After submission, status, payments, denials, and resubmissions stay available here.

Send viaE-billFaxMailEmail

Before you can submit:Claims administrator

Billing.tsx

import { ConnectedBillLifecycle } from "@mindbill/react";
import "@mindbill/react/styles.css";

<ConnectedBillLifecycle
  billId={billId}
  sessionEndpoint="/api/mindbill/billing-session"
  appearance={{
    accentColor: "#17666b",
    fontFamily: "inherit"
  }}
/>

server/billing-session.ts

// Reuse the same server pattern with the bill-review scope.
app.post("/api/mindbill/billing-session", async (request, response) => {
  const user = await requireUser(request);
  const { billId } = request.body;
  await assertUserCanAccessBill(user, billId);

  const session = await mindbill.createBrowserSession({
    component: "bill-review",
    billId,
    allowedOrigin: "https://your-product.example",
    expiresIn: 900
  });

  response.json({
    token: session.token,
    expiresAt: session.expiresAt
  });
});

Angular — billing.component.ts

import { MindBillBillLifecycleComponent } from "@mindbill/angular";

@Component({
  standalone: true,
  imports: [MindBillBillLifecycleComponent],
  template: `
    <mindbill-bill-lifecycle
      [billId]="billId"
      sessionEndpoint="/api/mindbill/billing-session"
      [appearance]="{ preset: 'orange-bright' }"
    />
  `,
})
export class BillingComponent {
  billId = "bill_...";
}

The component owns

Editable claim data, payer matching, one automatic trailing procedure row, attachment selection, a route-detail submission dialog, EORs, payment posting, Second Bill Review, resubmission, and close.

Your app owns

The initial bill snapshot, access control, and the surrounding case workflow. Your API key stays server-side.

No React dependency

Hosted review

Use MindBillBillReview when MindBill should own form state. Mint the short-lived session on your server; the API key never reaches the browser.

Read the integration tutorial →

MindBillBillReview.tsx

// app/api/mindbill/session/route.ts
const session = await mindbill.createBrowserSession({
  component: "bill-review",
  billId,
  allowedOrigin: "https://your-product.example",
  expiresIn: 900
});

// components/BillingReview.tsx
<MindBillBillReview
  sessionToken={session.token}
  embedUrl={session.embedUrl}
  onMindBill={refreshStatus}
/>

Current public boundary

The React and Angular lifecycles support med-legal and professional billing, review, attachments, submission, status, EORs, payment posting, close, Second Bill Review, and correction/resubmission. Independent Bill Review and lien workflows remain in hosted/full MindBill today.