# Payments and invoices in an agent product

A paid product needs a billing screen: what the plan is, what has been invoiced, and the details printed on invoices. It doesn't need its own card form. Card numbers belong with your billing provider (Polar, Stripe, Paddle), on their hosted checkout and customer portal, so they never touch your app or Candor.

SubscriptionStatus shows the plan, seats and when it renews or ends, with a button that opens the provider's portal. InvoiceHistory lists invoices with their period, amount in their own currency, status and a download your app serves, and its footer points at the portal for payment methods. BillingDetails is the form for the billing email, tax ID and address that go on invoices.

Your server does the talking: it asks the provider for the invoices and a portal link, and passes them in as plain data. Candor builds no PDFs, holds no keys and takes no payments.

Web page: https://candor.themethodic.com/patterns/payments-and-invoices

## Components

- **Subscription status** (`subscription-status`, Pro; https://candor.themethodic.com/docs/subscription-status.md): The plan, seats, card on file as the provider reports it, renewal, and a button to the provider's portal.
- **Invoice history** (`invoice-history`, Pro; https://candor.themethodic.com/docs/invoice-history.md): Invoices with period, amount, status and a download your app serves; a footer link to the provider's portal.
- **Billing details** (`billing-details`, Pro; https://candor.themethodic.com/docs/billing-details.md): Billing email, the name and tax ID on invoices, and the address. No card field.
- **Plan picker** (`plan-picker`, Pro; https://candor.themethodic.com/docs/plan-picker.md): Choosing a plan, before checkout at the provider.
- **Downgrade impact** (`downgrade-impact`, Pro; https://candor.themethodic.com/docs/downgrade-impact.md): What a smaller plan takes away, before the person confirms it.

## Install

```bash
npx candor-ui add subscription-status invoice-history billing-details
```

## Notes

- Never put a card number field in your app. Send people to the provider's hosted checkout to pay, and to its customer portal (Polar's customer portal, Stripe's billing portal) to change a card. Your server creates the portal session and passes the link in.
- Invoice downloads are links your app serves: your own route that streams the provider's PDF, or the provider's hosted invoice link. Candor doesn't fetch or build them.
- Amounts are in major units with an ISO currency code and are formatted for the reader's locale, so a euro invoice reads as euros.