<Invoice />

A component for viewing and paying invoices.

The invoice component showing an paid invoice.

An unpaid invoice. The user can add/remove payment methods here to conveniently pay an invoice.

The above component is created using the props below

<Invoice
    id={invoiceId}
    invoiceQuoteViewComponent={<div>Display custom invoice here</div>}
    onBackButtonClick={() => console.log("Clicked back button!")}
    backButtonName="Custom back button name"
    onInvoiceDownloadError={() => console.log("Handle invoice download error here")}
    onPaymentSuccess={(savePaymentMethod: boolean) => console.log("payment method saved: ", savePaymentMethod)}
    shadow="shadow-md"
    className={undefined}
    hideDownloadButton={false}
    onInvoiceLoaded={(invoice: FormattedInvoice) => console.log(invoice)}
    onQuoteLoaded={(quote: FormattedQuote) => console.log(quote)}
/>

className

You can apply any tailwind css styling to the billing details component.

invoiceQuoteViewComponent

Instead of the default quote display, you can pass in custom React code to display the invoice the way you'd like.