Invoice Detail

Displays detailed information about a specific invoice, including line items, amounts, and due date.

---

Usage

const invoiceDetail = client.components.invoiceDetail({
  containerId: 'invoice-detail',
  invoiceId: 'inv_xxx',
  onPayNow: (invoice) => {
    console.log('Pay now clicked for:', invoice.id);
  },
  onBack: () => {
    console.log('Back clicked');
  },
});

---

Configuration

InvoiceDetailConfig

Property	Type	Required	Description
containerId	string	Yes	ID of the container element
invoiceId	string	Yes	Invoice ID to display
theme	ThemeConfig	No	Custom theme configuration
onPayNow	(invoice: Invoice) => void	No	Called when "Pay Now" is clicked
onBack	() => void	No	Called when "Back" is clicked
onError	(error: Error) => void	No	Called on fetch errors

---

Features

The Invoice Detail component displays:

• Invoice number with download button

• Customer information

• Due date and status

• Line items with descriptions and amounts

• Subtotal, taxes, and total amount

• Payment scheduling option (if applicable)

---

Example

<div id="invoice-detail"></div>

<script type="module">
  import { AlternativeClient } from '@getalternative/partner-sdk';

  const client = new AlternativeClient({
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret',
  });

  // Get invoice ID from URL
  const invoiceId = new URLSearchParams(window.location.search).get('id');

  const detail = client.components.invoiceDetail({
    containerId: 'invoice-detail',
    invoiceId: invoiceId,
    onPayNow: (invoice) => {
      // Navigate to payment selection
      window.location.href = `/pay?invoice=${invoice.id}`;
    },
    onBack: () => {
      window.history.back();
    },
  });
</script>

---

Invoice Download

The component includes a download button next to the invoice number that allows users to download the invoice as a PDF.