Billing Blocks

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.

A subscription summary card with plan name, price, renewal date, and per-metric usage bars, plus manage and upgrade actions.

A cancel subscription dialog with an impact warning, a single-select reason survey, and a confirmation step to reduce accidental churn.

A plan picker with a monthly/yearly toggle, per-seat pricing, and selectable plan cards in a keyboard-accessible radio group.

Seat usage meter showing active and pending seats against a plan's total, with a two-segment progress bar and an Add seats action.

Monthly usage history card with an inline SVG bar chart, an optional plan-limit reference line, and highlighted over-limit periods.

Preview of the next invoice with itemized line items, subtotal, estimated tax, and a total due on a given date.

An urgency banner for abandoned checkouts, pairing a live countdown with a discount reminder and a one-click resume action.

A multi-select add-on picker that applies bundle discounts automatically as more items are selected, with a live subtotal and total.

A browsable list of optional SaaS add-ons with category icons, status badges, and per-item Add or Manage actions.

A per-add-on usage report with progress bars, a Metered badge for uncapped features, and a running total cost.

A borderless billing address form with country selection, tax ID field, inline validation, and a save state.

A partner dashboard card showing pending, approved, and lifetime commission, the next payout date, and recent referrals.

A promo card that compares monthly and annual pricing, computes the savings automatically, and links out to a switch-to-annual CTA.

A credit balance card with a usage bar relative to typical monthly spend, a low-balance warning, and three quick top-up buttons.

A mobile subscription receipt card for App Store or Google Play purchases, with status badge, transaction ID, and a deep link to manage the plan in the store.

A billing-specific audit log list with actor icons, success/failed status badges, IP addresses, and a CSV export link.

An auto-recharge settings panel with a working enable toggle, a threshold slider, and a Recharge now button with a loading and confirmation state.

A usage card combining a status-colored progress bar with a projected-overage marker and a daily bar chart of consumption for the current billing cycle.

Bank transfer payment instructions with copyable account details, a reference code, and a transfer status badge, built with shadcn/ui and Tailwind CSS.

A line-item breakdown that shows exactly what a subscription's base fee covers, with an included-seats and support summary, built with Tailwind CSS.

A billing cycle summary with a progress bar, renewal date, days remaining, and an advance/arrears badge, built with Lucide icons and Tailwind CSS.

A status-aware alert block for communicating billing system incidents and maintenance windows, with a severity badge and affected-services list.

A volume pricing table with per-seat rates, savings percentages, and a highlighted row for the account's current tier, built with Tailwind CSS.

A visual payment network picker with a keyboard-accessible radio group, per-brand icons, and disabled-option support, built with Tailwind CSS.

A compact mini-cart preview with a scrollable line-item list, subtotal, and checkout actions, built with shadcn/ui and Tailwind CSS.

A multi-step checkout progress indicator with numbered circles, connecting lines, and Back/Continue controls, built with shadcn/ui and Tailwind CSS.

A checkout summary panel with an itemized breakdown, a collapsible promo code field, and a purchase button with a loading and complete state.

A discount retention offer for cancellation flows, with a struck-through original price, a feature list, and a claim-or-decline pair of actions.

An admin control for setting a partner-specific commission rate override, with a standard-versus-custom toggle and a live effective-rate preview.

A guided request form for tax residency and compliance certificates, with jurisdiction and purpose selection and a submitted confirmation state.

A billing support panel with a priority badge, per-channel response times, and links to common billing questions.

A finance-facing list attributing resources to internal cost centers, with an unassigned count badge and GL codes.

Alert cards for expiring credit pools, with a days-remaining countdown, urgency-based styling, and a redeem link.

An itemized credit transaction list with type icons, dates, and color-coded amounts, plus an optional current balance.

A refund request form with transaction selection, a refund method toggle, a reason picker, and a submitted confirmation state.

A pill-toggle currency switcher that recalculates a displayed price from a base USD amount and per-currency exchange rates.

A manual payment entry block with a currency-prefixed input, quick-select presets, live validation, and a computed credit total.

A billing cycle switcher with any number of cycle options, per-cycle savings badges, and a recalculated effective monthly price.

A data retention plan picker with a storage capacity indicator for the selected plan and an automated cleanup switch.

A cost allocation editor for splitting a shared invoice across departments by percentage, with a live 100% validation check.

A developer-facing API quota card showing monthly request usage, a reset countdown label, a projected month-end total, and current rate limit.

A compact discount badge showing a computed percent-off, the discounted and original prices, and an optional expiry note.

A plan-downgrade panel showing exactly which features are lost or reduced, plus a pause-instead alternative.

An early-access pricing card with a locked-in price badge, a claimed-seats bar, and a waitlist fallback once seats run out.

A renewal incentive card with a shrinking days-left bar and a bonus callout for renewing before the current term ends.

An education discount application form with a role picker, .edu email validation feedback, a file upload trigger, and a live savings preview.

A billing notification settings panel with per-item toggle switches, locked mandatory notices, an accounting email field, and a save confirmation.

A consolidated billing dashboard showing a total across cost centers, with a per-center spend bar and an auto-derived status badge.

A lead capture form for enterprise plans with seat-volume selection, compliance requirement toggles, and a submitted confirmation state.

An interactive price calculator with a slider per resource, tiered per-unit pricing, and a monthly/yearly total that recalculates live.

A shared-seat management list for family or team plans, with a seats-remaining indicator, per-member role and status badges, and an invite action.

A plan comparison table with semantic checkmarks, a highlighted column for the recommended plan, and row hover highlighting.

A locked-feature preview card with a blurred content mock, a required-plan badge, and an upgrade call to action.

A feature-by-time-period heat map with opacity-scaled cells, a mobile fallback list ranking each feature by total activity, and accessible per-cell labels.

A free plan usage card with a progress bar per resource, warning colors near the limit, and an upgrade button.

A gift subscription form with selectable duration cards, a recipient email field, a personal message with a character counter, and a live price preview.

A high-urgency alert showing the time left in a payment grace period, with a progress bar and a suspended-access state once it runs out.

A spending history line chart with a monthly/quarterly period toggle, a trend indicator, and a screen-reader-only data table.

A compliance panel explaining the inactivity threshold, warning schedule, and deactivation timeline for dormant accounts.

An enterprise invoice consolidation panel with a switch to merge charges, a group-by toggle, and a live invoice-count preview.

A batch invoice download table with per-row and select-all checkboxes, a running selection count, and a ZIP-preparing download button.

Invoice delivery preferences with toggle switches, a lockable mandatory alert, a CC email field, and a save button with a saved confirmation state.

A one-time-payment lifetime deal layout with stacked license tiers, a remaining-codes count per tier, and a highlighted best-value card.

A high-visibility low-balance alert with an estimated days-remaining note, quick top-up amount links, and an auto-recharge status indicator.

A loyalty program summary with a points total, a membership tier badge, a progress bar toward the next tier, and a list of redemption options.

A concierge-tier pricing card with a monthly price, an optional one-time setup fee, a highlights list, and a dedicated expert's profile.

A per-member usage list with avatar, usage bar, and individual cost, built for team billing portals that need to show who's driving spend.

A projected end-of-cycle cost card with a trend badge, cycle-progress bar, and an optional over-budget warning.

An invoice preview with a currency toggle that recalculates every line item, the subtotal, tax, and total using Intl.NumberFormat.

A pricing card with a fixed regional price per currency, a detected-currency badge, and a currency toggle, for global pricing pages.

An amount-first preview of the next charge with a seat-based line item, multiple tax lines, and an optional credit.

A small pill badge reassuring visitors that starting a trial doesn't require a credit card, with an optional helper line.

A dropdown-style list of billing alerts with unread markers, mark-as-read and dismiss actions, and an empty state.

A billing-mode panel that toggles between a flat rate and pay-as-you-go, with per-resource usage bars and an auto-recharge switch.

A post-checkout confirmation screen with a status icon, order summary panel, line items, and receipt/dashboard buttons.

A per-resource overage breakdown with usage bars against plan limits, unit pricing, and a running total.

A high-urgency destructive alert with a days-overdue badge, a prominent amount-due figure, and settle/view-invoice buttons.

A list of applied partner discounts with kind badges, remaining balance, and expiry, plus an optional redeem-code form.

An alert for a failed payment with the specific decline reason, a retry action, and a fallback to add a different card.

A merchant-facing form for creating a shareable payment link with a custom amount, recurrence toggle, and one-click copy.

A proactive list of expiring or expired cards, color-coded by urgency, each with a direct update action.

A celebratory payment success card with a CSS-only confetti burst around the checkmark, no animation library required.

A payout setup form toggling between bank account and PayPal fields, with a masked tax ID input and inline validation.

A payout history table for sellers and affiliates with status badges, masked destinations, and a CSV export link.

A PayPal account card showing connection status, the linked email, and a connect, manage, or reconnect action, built with shadcn/ui.

A status card for a billing detail under manual review, with submitted-field summary, an estimated wait time, and an error variant.

An interactive seat calculator with a stepper input, tiered volume pricing, and a monthly/yearly toggle that recalculates the total live.

A condensed plan comparison grid limited to a handful of differentiating rows, with check/dash icons or text values per plan.

A confirmation dialog for a plan upgrade with a before/after price comparison, a benefits list, a prorated charge preview, and a simulated confirm flow.

A single entry-point card linking out to a hosted billing portal like Stripe's, with a short list of what the portal covers.

A prepaid balance card showing the current balance, a grid of quick top-up amounts, and a link to usage history.

A credit bundle picker with per-credit pricing, a best-value badge, and a Buy button that reflects the selected bundle's price.

A three-tier pricing grid with a highlighted recommended plan, feature lists, and per-plan call-to-action links.

A single add-on toggle for priority support that updates the shown monthly total the moment it's switched on or off.

A plan-change summary showing itemized proration credits and charges, a total due today, and the next full billing cycle.

A list of named billing, procurement, and accounts payable contacts with role labels and mailto/tel links per person.

A discount promotion banner with an eyebrow label, discount code, expiration text, and an apply CTA, built with shadcn/ui and Tailwind CSS.

A multi-step purchase approval list with per-approver status, an optional comment, and working approve/reject actions on the active step.

A purchase order intake form with PO number, company, billing email, and tax ID fields, inline validation, and a submitted confirmation state.

A resource usage alert with a progress bar, remaining count, and an upgrade CTA that appears automatically near or at the limit.

A win-back card for a canceled-but-still-active subscription, showing the access expiration date, restored features, and a resume link.

An itemized receipt with line items, subtotal, tax, total, payment method summary, and an optional print link, built with shadcn/ui and Tailwind CSS.

Email-style receipt card with line items, a subtotal/discount/tax/total breakdown, and a payment method footer, built with shadcn/ui and Tailwind CSS.

Referral credit card with a big balance, an apply-to-next-invoice toggle, and a copyable referral link, built with shadcn/ui and Tailwind CSS.

Compact partner metrics card with clicks, signups, and conversion rate, an earned-this-month total, and a share link, built with shadcn/ui and Tailwind CSS.

Partner payout status card with a status badge, pending amount, estimated date, destination, and a failed-payout alert, built with shadcn/ui and Tailwind CSS.

Slim refund-policy footer with a shield icon, a policy summary, a full-policy link, and a contact-support link, built with Tailwind CSS.

Upcoming-renewal banner with a default and a warning variant, a renewal date/amount, and a manage-subscription button, built with shadcn/ui and Tailwind CSS.

A slider-driven resource scaling block that recalculates the monthly price live and applies the change with a saving/applied state.

A compact spending summary card with this month's total, a month-over-month trend indicator, and a top-3 category breakdown.

A revenue slider that recalculates a tiered partner payout live, highlighting the active tier and the resulting effective rate.

A permissions matrix showing which team roles can view and manage billing features, with a stacked list layout on mobile.

A list of saved billing addresses with a default badge, edit links, and a set-as-default action for each non-default entry.

A row of monochrome trust badges (PCI-DSS, SOC 2, SSL, and more) to place near a payment form or Pay button.

A live-status list for payment providers like Stripe and PayPal, with an automatic warning banner when a service is degraded or down.

A vertical navigation list for billing settings pages, with active-state highlighting, notification badges, and a scrollable layout on mobile.

A pricing summary that separates one-time setup fees from the recurring subscription total, plus tax and a total-due-today figure.

A credit balance card with selectable top-up amounts, a live cost preview, an auto-recharge toggle, and a purchase button with a loading state.

An enterprise upsell card for SSO, with a SAML/SCIM/audit-log feature list, a price, and an Enable SSO call to action.

An application form for a startup discount program, with eligibility criteria, company details, a funding-stage picker, and a live savings preview.

A statement descriptor editor with live character counting, character validation, and a bank-statement preview line.

A storage usage meter with an optional resource breakdown and selectable upgrade tiers that recalculate the new monthly total.

A connected-account health card showing status badge, payout schedule, next payout, and a verification checklist for Stripe Connect sellers.

A settings-page card showing whether a subscription is active or paused, with resume/pause dates and what's preserved during the pause.

A two-step pause confirmation dialog with a duration picker, a computed resume date, and impact bullets before the customer confirms.

A win-back card for churned customers with a discount badge, an expiry label, a missed-features list, and a reactivate call to action.

A short renewal-window survey with a 1-5 satisfaction rating, toggleable focus-area chips, and an optional feedback textarea.

A plan-change preview showing the current plan next to the new one, a prorated line-item breakdown, and the total due today.

A side-by-side plan comparison with a recommended-tier highlight, checkmarked benefit lists, and a CTA per card.

A row-based support-tier list with response-time SLAs, channel lists, and per-row pricing and add buttons.

A tax-exemption application form with an organization/tax ID pair, a reason picker, a supporting-document upload, and a pending-review confirmation.

A tax-year picker and drag-and-drop style upload control for W-8/W-9 forms, plus a history list of previously submitted forms with status badges.

A tax ID input with a verify button that shows instant format feedback, built with shadcn/ui.

A team seat manager with a member list, role badges, and a stepper that recalculates the monthly total as seats change.

A multi-resource usage tracker with progress bars, warning and critical thresholds, and an unlimited state, built with shadcn/ui.

A transaction detail card with a copy button for the payment ID, an inline copied confirmation, and an optional support link.

A trial status card with a days/hours-remaining display, urgency coloring, trial usage bars, and an upgrade button.

A card-update dialog with live brand detection, formatted card/expiry inputs, and a saving-to-success flow, built with shadcn/ui.

A spending-spike alert with a current-vs-average comparison, a breakdown of the resources driving it, and review/dismiss actions.

A spending-limit form with an alert threshold, a hard cap, and an automatic-throttle switch, backed by local state and a Save action.

A VAT number input with country selection, format validation, a simulated verification check, and a reverse-charge note for valid cross-border IDs.

A W-9 verification timeline showing each step from submission to IRS matching, an overall status badge, and a verified/renewal footer.

A wallet top-up form with preset amount buttons, a custom amount input, a projected new balance, and a payment method note.

A monthly/yearly billing toggle that recalculates the effective monthly rate and shows total savings when annual billing is active.