Patterns / Payments and invoices
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.
The components
- Subscription statusProThe plan, seats, card on file as the provider reports it, renewal, and a button to the provider's portal.
- Invoice historyProInvoices with period, amount, status and a download your app serves; a footer link to the provider's portal.
- Billing detailsProBilling email, the name and tax ID on invoices, and the address. No card field.
- Plan pickerProChoosing a plan, before checkout at the provider.
- Downgrade impactProWhat a smaller plan takes away, before the person confirms it.
See it working
Install
Each component brings in what it depends on. The free ones install as they are; Pro and Premium ones need a licence key.
Good to know
- 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.