Proration Preview Card
Upgrade proration preview with credit and charge line items, due-today total, and next renewal amount.
Upgrade proration preview with credit and charge line items, due-today total, and next renewal amount.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Proration Preview Card is the upgrade confirmation surface, showing the full math before the user commits. The three line items are credit for unused Team days (Jun 13 to Jun 30, 17 of 30 days, -$34.13), the prorated Business charge for the same window (+$96.00), and the Jul 1 renewal at $240.00. Due today lands at $61.87 with the honest footer: no hidden true-up, $61.87 is the whole charge.
Line items live in one const array with a dimmed flag that mutes the credit row. The footer promise is the difference between a confirm click and a support ticket.
Reach for this block immediately before any mid-cycle plan change, wired to your billing API proration endpoint. The math must match the actual charge or the block erodes trust faster than it builds it.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the plan upgrade preview. Other proration surfaces:
Tip: always show the next renewal amount alongside the due-today figure so users know what follows.