@unitpay/react

React components for UnitPay - pricing tables, invoices, usage charts, and billing UI.

Installation

npm install @unitpay/react @unitpay/sdk
# or
yarn add @unitpay/react @unitpay/sdk

Quick Start

import { UnitPayProvider, PricingTable, InvoiceList } from '@unitpay/react';

function App() {
  return (
    <UnitPayProvider
      apiKey="revx_pk_your_api_key"
      customerId="cust_123"
      theme={{ primary: '#047857' }}
    >
      <YourApp />
    </UnitPayProvider>
  );
}

function BillingPage() {
  return (
    <div>
      <InvoiceList onInvoiceClick={(inv) => console.log(inv)} />
    </div>
  );
}

Components

PricingTable

Display pricing plans on your marketing page.

import { PricingTable, type PricingPlan } from '@unitpay/react';

const plans: PricingPlan[] = [
  {
    id: 'starter',
    name: 'Starter',
    price: 29,
    billingCycle: 'monthly',
    features: ['10,000 events/mo', 'Basic analytics', 'Email support'],
  },
  {
    id: 'pro',
    name: 'Pro',
    price: 99,
    billingCycle: 'monthly',
    features: ['100,000 events/mo', 'Advanced analytics', 'Priority support'],
    isPopular: true,
  },
];

<PricingTable
  plans={plans}
  title="Simple, transparent pricing"
  onSelectPlan={(plan) => handleCheckout(plan)}
/>

InvoiceViewer

Display a single invoice with line items and payment.

import { InvoiceViewer } from '@unitpay/react';

<InvoiceViewer
  invoiceId="inv_123"
  showPayButton
  onPay={(invoice) => handlePayment(invoice)}
  onDownload={(invoice) => downloadPdf(invoice)}
/>

InvoiceList

Display a list of customer invoices.

import { InvoiceList } from '@unitpay/react';

<InvoiceList
  status="pending"
  limit={10}
  onInvoiceClick={(invoice) => router.push(`/invoices/${invoice.id}`)}
/>

UsageChart

Display usage metrics with charts.

import { UsageChart } from '@unitpay/react';

<UsageChart
  startDate="2024-01-01"
  endDate="2024-01-31"
  groupBy="daily"
  showSummary
/>

SubscriptionCard

Display subscription details.

import { SubscriptionCard } from '@unitpay/react';

<SubscriptionCard
  subscriptionId="sub_123"
  showUsage
  onManage={(sub) => openManageModal(sub)}
/>

Hooks

useUnitPay

Access the UnitPay client and context.

const { client, isConnected, theme } = useUnitPay();

useInvoices / useInvoice

Fetch invoices.

const { invoices, isLoading, refetch } = useInvoices({ status: 'pending' });
const { invoice, isLoading } = useInvoice({ invoiceId: 'inv_123' });

useUsage

Fetch usage analytics.

const { summary, timeSeries, isLoading } = useUsage({
  startDate: '2024-01-01',
  endDate: '2024-01-31',
  groupBy: 'daily',
});

useSubscriptions / useSubscription

Fetch subscriptions.

const { subscriptions, isLoading } = useSubscriptions({ status: 'active' });
const { subscription, isLoading } = useSubscription({ subscriptionId: 'sub_123' });

Theming

Customize the look of components via the provider:

<UnitPayProvider
  apiKey="revx_pk_..."
  theme={{
    primary: '#047857',    // Primary brand color
    secondary: '#6B7280',  // Secondary color
    accent: '#10B981',     // Accent color
    borderRadius: '8px',   // Border radius
    fontFamily: 'Inter, sans-serif',
  }}
>

TypeScript

Full TypeScript support included. Import types:

import type {
  PricingPlan,
  UnitPayTheme,
  UnitPayContextValue,
} from '@unitpay/react';

License

MIT