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-historyyarn dlx shadcn@latest add @billingsdk/invoice-historybunx shadcn@latest add @billingsdk/invoice-historynpx @billingsdk/cli add invoice-historypnpm dlx @billingsdk/cli add invoice-historyyarn dlx @billingsdk/cli add invoice-historybunx @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