Four ways to present the two new add-ons on carepatron.com/pricing, researched against how leading SaaS products handle add-on pricing, and styled to match the live page so each one can be judged for fit.
How 25+ SaaS products present add-on pricing, with real reference screenshots, the principles that apply to Carepatron, and a recommendation.
Read the synthesis →Two cards under the plans. The safest option and the most native fit for today's page.
Managed Billing's 3.9% + $99 as the hero, with the "clear rate vs the usual 6–8%" transparency hook.
Add-ons as modules that bolt onto whichever plan you pick, priced per provider, with a "+ Add" affordance.
Toggle add-ons on and off and watch a live monthly total combine your plan and extras.
For the marketing page now, the two-card grid (Prototype 1) is the cleanest fit, but give Managed Billing the Stripe-style "% + $" treatment and the transparency line from Prototype 2. Hold the modular and builder directions for in-product upgrade screens, where add-ons become togglable and a variable 3.9% has somewhere honest to live. Full reasoning in the research.
Styled to match the live carepatron.com/pricing page (purple #7242ee, 3px corners, soft shadows, navy text). This differs from the canonical brand guide (#5b1db1, 6px, no strokes); matching the live page was the chosen direction so the section looks native. Both are one token change away in the shared stylesheet.
Each prototype has a Copy HTML for Figma button (bottom-right) that copies a self-contained file with the CSS inlined, ready for Priya to import via a plugin like html.to.design.