Components | Billing SDK

Comprehensive collection of billing and subscription management components with production-ready features.

Professional pricing table components designed for conversion optimization and clear feature presentation.

Component	Description
Pricing Table One	Essential pricing table with classic and minimal theme variants
Pricing Table Two	Advanced pricing table with enhanced layouts and feature comparison
Pricing Table Three	Enterprise-grade pricing table with custom styling and advanced features
Pricing Table Four	Modern gradient pricing table with contemporary design and smooth animations
Pricing Table Five	Modern pricing table with contact us plan
Pricing Table Six	Contemporary pricing table featuring gradient styling, smooth animations, and an enterprise-focused plan
Pricing Table Seven	Feature-comparison pricing table with aligned cards and user slider for comprehensive plan comparison

Comprehensive subscription management interfaces for billing dashboards and user account management.

Component	Description
Manage Subscription	Complete subscription dashboard with billing history and account details
Invoice History	Read-only table showing past invoices and receipts
Usage Table	Per-model LLM usage with token counts, cache reads, and API cost
Update Plan Card	Inline plan upgrade interface with feature comparison and pricing
Update Plan Dialog	Modal dialog for seamless plan changes with confirmation flow
Limited Offer Dialog	Time-sensitive promotional offers with customizable content and call-to-action buttons
Proration Preview	Interactive billing adjustment preview for subscription plan changes with cost breakdowns

Comprehensive payment method selection and processing interfaces for secure checkout experiences.

Component	Description
Payment Details	Complete payment details form with card details, billing information, country selection, and validation
Payment Details Two	Complete payment details form with card details, billing information, country selection, built with React Hook Form and custom validation
Payment Success Dialog	Success confirmation modal with confetti animation and next steps
Payment Method Selector	Interactive payment method selector supporting cards, digital wallets, UPI, and BNPL services
Payment Card	A comprehensive final payment interface for processing transactions with card details, billing information, and visual card preview

Thoughtfully designed cancellation flows with retention strategies and user feedback collection.

Component	Description
Cancel Subscription Dialog	Comprehensive cancellation flow with feedback collection and retention offers
Cancel Subscription Card	Compact cancellation interface for quick subscription termination

Visual usage meters and analytics components for displaying quotas, limits, and consumption data.

Component	Description
Usage Meter Linear	Horizontal progress bar for displaying usage percentages and limits
Usage Meter Circle	Circular progress indicator for API limits and storage consumption
Detailed Usage Table	Detailed usage table for showing API calls, tokens, and storage consumption
Billing Setting	Billing Setting component with Tabbed navigation for billing preferences, payment method, invoices and usage limits
Billing Settings 2	Inline billing preferences form with currency, tax ID, and email toggles
Upcoming Charges	Preview of upcoming billing cycle charges with itemized breakdown

Engagement components for announcements, promotions, and user onboarding experiences.

Component	Description
Top Banner	Promotional banner with multiple variants for announcements and CTAs

Technical Specifications

Full TypeScript Support - Complete type safety with IntelliSense
Theme Integration - Automatic light/dark mode with CSS variables
Responsive Design - Mobile-first approach with breakpoint optimization
Accessibility Compliance - WCAG 2.1 AA standards with screen reader support
Customizable Styling - CSS variables and prop-based theming system
Comprehensive Documentation - Usage examples, API reference, and best practices