About this block

Billing Contacts Card manages who receives invoices for the Acme workspace. Two contacts are listed: the finance@acme.com distribution list, described as receiving every invoice and receipt and nothing else, and Priya Nair at priya@acme.com. Each row has an avatar or mail icon and an X button to remove. Below the contact list an Add contact field accepts an email and a plain Add contact button. A second section holds the PO number field, its placeholder showing the PO-2026-0148 format, printed on every invoice and added to the email subject so accounts payable can match it without asking. The footer notes that changes apply from the next invoice.

Contacts are one array with a label, subtitle, and optional avatar. The panel description carries the separation pitch: invoices to finance, product email to the team, nobody forwards PDFs forever.

When to use

Reach for this block on the billing settings page, wired to your billing contacts API and your invoice provider PO field. The PO section matters most for enterprise workspaces where accounts payable controls the payment flow.

A natural flow around it on an Application Pro page:

Before

• Payment method panel

After

• Invoice history table

What you can display

One strong use is the finance team separation pattern for a B2B SaaS workspace. Other configurations:

• Single contact. One row, no remove button on the last entry.
• CC on specific invoices. A per contact toggle for which invoice types they receive.
• Cost center code. A second enterprise field beside the PO number for internal chargeback.

Tip: the PO field removes a support request from every enterprise renewal cycle; ship it by default.