A light billing settings page with the current plan, saved payment methods that can be made default or removed after an inline confirm, billing email and tax ID fields with format checks, usage meters and the next invoice.
Manage the plan, payment methods and invoices for Halcyon Labs.
$96.00per month
The default method is charged on each renewal.
Shown on every invoice we send.
Nov 1 to Nov 30
Bandwidth is at 91%. Extra usage is billed at the end of the cycle.
Charged to the default method
npx shadcn@latest add https://hyperblur.dev/r/checkout-billing-settings.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-billing-settings.tsx.
import { CheckoutBillingSettings } from "@/components/hyperblur/checkout-billing-settings"
<CheckoutBillingSettings onRemoveMethod={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Billing" | Page heading. |
| subtitle | string | Line under the heading. | |
| plan | { name: string; price: number; period: string; renews: string; seats: string } | Team, $96 | Current plan card. |
| methods | { id: string; kind: "visa" | "mastercard" | "amex" | "bank"; label: string; detail: string }[] | Visa, Mastercard, bank | Saved payment methods. |
| defaultMethodId | string | Id of the default method. Defaults to the first one. | |
| usage | { label: string; used: number; limit: number; unit?: string }[] | 4 meters | Usage meters. Bars turn amber from 85%. |
| billingEmail | string | "finance@halcyon.io" | Initial billing email. |
| taxId | { type: string; value: string } | { type: "eu_vat", value: "DE287634519" } | Initial tax ID. type is eu_vat, gb_vat, us_ein or au_abn. |
| currency | string | "USD" | ISO currency code. |
| onChangePlan | () => void | Called by Change plan. | |
| onCancelPlan | () => void | Called by Cancel subscription. | |
| onAddMethod | () => void | Called by the Add button. | |
| onDefaultChange | (id: string) => void | Called when another method becomes default. | |
| onRemoveMethod | (id: string) => void | Called after a removal is confirmed. | |
| onEmailSave | (email: string) => void | Called with a valid billing email. | |
| onTaxIdSave | (taxId: { type: string; value: string }) => void | Called with a tax ID that matches its format. | |
| accent | string | "#7c3aed" | Plan highlight, meters and primary button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |