Subscription ManagementInvoice History
Invoice History
Read-only table for displaying past invoices and receipts with status and download actions.
Invoice History
Your past invoices and payment receipts.
| Date | Description | Amount | Status | Action |
|---|---|---|---|---|
2025-06-01 | Pro plan — May 2025 | $49.00 | Paid | |
2025-05-01 | Pro plan — April 2025 | $49.00 | Paid | |
2025-04-01 | Pro plan — March 2025 | $49.00 | Refunded | |
2025-03-01 | Pro plan — February 2025 | $49.00 | Open |
'use client'
import { InvoiceHistory, type InvoiceItem } from '@/components/billingsdk/invoice-history';
export default function InvoiceHistoryDemo() {
const invoices: InvoiceItem[] = [
{ id: 'inv_001', date: '2025-06-01', amount: '$49.00', status: 'paid', description: 'Pro plan — May 2025', invoiceUrl: 'https://example.com/invoices/inv_001.pdf' },
{ id: 'inv_002', date: '2025-05-01', amount: '$49.00', status: 'paid', description: 'Pro plan — April 2025', invoiceUrl: 'https://example.com/invoices/inv_002.pdf' },
{ id: 'inv_003', date: '2025-04-01', amount: '$49.00', status: 'refunded', description: 'Pro plan — March 2025' },
{ id: 'inv_004', date: '2025-03-01', amount: '$49.00', status: 'open', description: 'Pro plan — February 2025' },
];
return (
<div className="w-full">
<InvoiceHistory invoices={invoices} />
</div>
);
}
Installation
npx shadcn@latest add @billingsdk/invoice-historypnpm dlx shadcn@latest add @billingsdk/invoice-historynpx shadcn@latest add @billingsdk/invoice-historynpx @billingsdk/cli add invoice-historypnpm dlx @billingsdk/cli add invoice-historynpx @billingsdk/cli add invoice-historyUsage
import { InvoiceHistory, type InvoiceItem } from "@/components/billingsdk/invoice-history";const invoices: InvoiceItem[] = [
{ id: 'inv_001', date: '2025-06-01', amount: '$49.00', status: 'paid' },
{ id: 'inv_002', date: '2025-05-01', amount: '$49.00', status: 'paid' },
];<InvoiceHistory invoices={invoices} />Props
| Prop | Type | Required | Description |
|---|---|---|---|
invoices | InvoiceItem[] | ✅ | List of invoices to display |
className | string | ❌ | Additional CSS classes for styling |
title | string | ❌ | Optional heading text |
description | string | ❌ | Optional description text |
onDownload | (invoiceId: string) => void | ❌ | Callback if no invoiceUrl is provided |
InvoiceItem
interface InvoiceItem {
id: string;
date: string;
amount: string;
status: 'paid' | 'refunded' | 'open' | 'void';
invoiceUrl?: string;
description?: string;
}Credits
- Created by @ritiksahni22
Manage Subscription
The Manage Subscription component provides a comprehensive interface for users to view and manage their current subscription details, including plan information, billing details, and actions to update or cancel their subscription.
Usage Table
Per-model LLM usage with token counts, cache reads, and API cost.