--- title: Payment Calculator Pro — Loan, Mortgage and Savings Calculator for HubSpot description: Payment calculator module for HubSpot. Loan, mortgage, savings growth and subscription saving presets, amortisation tables, currency and number-format control, style controls across colour, type and layout. --- # Payment Calculator Pro for HubSpot A money calculator that drops into any page. Pick loan, mortgage, savings growth or subscription saving, and the module swaps its inputs, its results and its year-by-year table to match. Currency, separators and decimals are yours to set. No dependencies, no jQuery. The first demo below is the module untouched. The three after it change only style fields — typeface, colour, radius, border weight, shadow, track and handle — to show how far the same module moves without a line of CSS. Demo 1 ## Loan — out of the box Every style field left at its shipped default: neutral-800 on white, a 14px card, 10px panel, 8px fields, a 4px track with a 24px handle, and one sans face. The only override is `style.container.max_width`, set to line the card up with the text on this page. Everything below changes those same fields and nothing else — this is the baseline they are measured against. ## Work out your monthly payment Move the sliders or type a figure. The payment, the interest and the year-by-year balance update as you go. Amount borrowed $ Interest rate % Term years Monthly payment Move a slider to see the payment. — per month Breakdown Amount borrowed — Total interest — Total repaid — Principal Interest Reset Year by year Show year-by-year table | Year | Principal paid | Interest paid | Balance left | | --- | --- | --- | --- | These figures are an estimate. Lender terms, arrangement fees and rounding will change the final amount. --- Demo 2 ## Mortgage — technical A terminal-adjacent reading. `typography.base_font` and `heading_font` both go to IBM Plex Mono, so the figures line up in columns. `container_radius` and `panel_radius` drop to 2 and `bar_radius` to 0 for square corners; `track_height` thins to 2px; the palette moves to a cool slate (`#0d1117` card, `#161b22` panel, `#30363d` rules) and `focus_color` becomes a blue `#58a6ff` that only shows on keyboard focus. Hover lifts the button surface to `#30363d`. Tax and insurance are on, so the chart splits three ways and the amortisation table opens on load. ## What this property costs each month Set the price, the deposit and the term. Tax and insurance are folded into the monthly figure. Property price £ Deposit £ Interest rate % Term years Annual property tax £ Annual buildings insurance £ Monthly cost Lower the deposit below the property price to see a payment. — per month, everything in What makes up the payment Principal and interest — Property tax — Buildings insurance — Amount borrowed — Deposit — Interest over the term — Repaid over the term — Principal and interest Property tax Buildings insurance Start again Balance over the term Hide the full term | Year | Principal paid | Interest paid | Balance left | | --- | --- | --- | --- | An estimate for guidance. Your lender sets the rate you are offered, and tax and insurance vary by address. --- Demo 3 ## Savings — editorial Warm paper and a display face. `heading_font` goes to Fraunces with `base_font` on Work Sans, `heading_size` up to 30. `container_radius` opens to 20 and `panel_radius` to 16, `control_radius` to 12 — rounded, and stopping well short of a pill so the number stays in a field and not a lozenge. `container_shadow` is medium with a brown `shadow_color`; the track thickens to 6px and takes a `#7a5c3e` fill. Panels are stacked, and the currency is a euro after the number with dot thousands and comma decimals — the number boxes follow the same setting, so the rate reads `3,6`. ## See what regular saving adds up to Start with what you have, add a monthly amount, and watch the balance compound month by month. Starting balance € Saved each month € Annual return % Years saving years Balance at the end Choose a term of at least one year to see a balance. — after the full term Where the balance comes from Starting balance — Paid in — Earned in interest — Paid in Earned Reset the figures Balance at the end of each year Show every year | Year | Paid in | Earned | Balance | | --- | --- | --- | --- | A projection based on a steady rate of return. Rates move, and this calculator does not account for tax on interest. --- Demo 4 ## Subscription — consumer finance Soft and friendly. `base_font` and `heading_font` both go to Manrope, `result_primary_size` up to 48. `border_width` doubles to 2px against a lilac `#e4e4f7`, `container_radius` opens to 24 and `panel_radius` to 18, and `container_shadow` goes large with an indigo `shadow_color`. The track thickens to 8px with a `#4f46e5` fill and a 3px handle border; `focus_ring_width` goes to 3. Hover tints the button `#eeedff`. The chart becomes two compare bars, the count-up is off so figures snap, and prices carry two decimals. ## Work out what switching saves Put in what you pay now, what you would pay on the new plan, and how long you plan to stay. Paying now, per month $ New plan, per month $ How long you stay months Total saved Set a term of at least one month to see the saving. — across the whole term Cost comparison Saved each month — Current plan, whole term — New plan, whole term — Cost reduction — Current plan New plan Clear Saving as it builds Show the running total | Year | Saved that year | Saved so far | | --- | --- | --- | Based on list prices at today's rates. Taxes, seat changes and mid-term upgrades are not included. --- Documentation ## Module Guide ## Features - **Calculator presets** — One dropdown, `content.calc_mode`, switches the module between `loan`, `mortgage`, `savings` and `subscription`. The inputs, the result rows, the chart and the table all change with it. In the page editor, each preset shows only its own field groups. - **Loan and auto payment** — Amount, interest rate and term produce the monthly payment, the total interest and the total repaid, using the standard amortising payment formula. A zero rate falls back to dividing the amount by the number of months. - **Mortgage** — Property price and deposit set the amount borrowed. Principal and interest are calculated over the term, and annual property tax and insurance are divided across the months and added to the headline figure. The deposit is also shown as a percentage of the price. - **Savings growth** — A starting balance and a monthly contribution compound at a monthly rate for the number of years set. The result splits into what was paid in and what was earned. - **Subscription and cost saving** — A current monthly cost and a proposed monthly cost across a term in months give the total saved, the saving per month, both plan totals and the reduction as a percentage. - **Amortisation and year-by-year tables** — Loan and mortgage produce a real amortisation schedule: principal paid, interest paid and balance remaining for each year, ending at zero. Savings lists the balance at the end of each year. Subscription lists the saving each year and the running total. The table sits behind a toggle and scrolls inside its own box. - **Currency and number format** — Symbol, symbol position, an optional space, the thousands separator, the decimal separator, the number of decimal places and the percent symbol are all fields, so the same module reads correctly in any locale. - **Slider and number entry together** — Every input has a slider and a number box wired to each other. Drag or type, and typed values are clamped to the minimum and maximum on blur. - **Chart** — Loan and savings draw a two-part stacked bar, mortgage draws a three-part bar when tax and insurance are on, and subscription draws two compare bars. Legend text comes from fields. - **Empty state** — When the values cannot produce a result, such as a deposit at or above the property price, the results panel shows editable empty-state text in place of a figure. - **Count-up** — Results ease from the old figure to the new one, with the length set in milliseconds. Setting the length to zero, or switching the option off, makes figures snap. - **No dependencies** — No jQuery, no chart library, no font icons. The CSS and JS are inline and scoped to the module instance, so several calculators can sit on one page without colliding. ## Content Fields ### Content - **Calculator** — `calc_mode`. Loan / auto payment, Mortgage, Savings growth, Subscription / cost saving. - **Show heading**, **Heading**, **Heading tag** (H2, H3, H4) and **Subheading**. - **Breakdown heading** — The small label above the breakdown rows. - **Year-by-year heading**, **Show table button**, **Hide table button** — The table section title and the two states of its toggle. - **Reset button** — Text for the button that returns every slider to its starting value. - **Empty state** — Shown in place of the figures when the current values give no result. - **Show disclaimer** and **Disclaimer** — Small print under the calculator. ### Currency and number format - **Currency symbol** and **Symbol position** — Before or after the number. - **Space between symbol and number** — For locales that separate them. - **Thousands separator** and **Decimal separator** — Free text, so a dot for thousands and a comma for decimals works. - **Decimal places** — Zero through four, applied to every money figure including the table. - **Percent symbol** — Used by the deposit percentage and the cost reduction row. ### Preset inputs Each preset has its own group of sliders, and each slider carries the same fields: **Label**, **Minimum**, **Maximum**, **Step**, **Starting value**, and on the non-money sliders a **Unit** shown after the value. - **Loan** — Loan amount, interest rate, term. - **Mortgage** — Property price, deposit, interest rate, term, plus an **Include tax and insurance** toggle that reveals the annual property tax and annual home insurance sliders and adds them to the monthly figure. - **Savings** — Starting amount, monthly contribution, annual return, years. - **Subscription** — Current monthly cost, new monthly cost, term in months. ### Preset result labels Every preset has a matching labels group so no text is fixed in the markup: the headline label and its caption, one label per breakdown row, the chart legend, and the column headers for the year-by-year table. ## Settings - **Layout** — Side by side or stacked. - **Panel ratio** — 50/50, 58/42, 60/40 or 40/60. Shown only when the layout is side by side. - **Show breakdown rows** — Toggle the rows under the headline figure. - **Show chart** — Toggle the bar and its legend. - **Show year-by-year table** — Toggle the whole table section. - **Open the table by default** — Whether the table starts expanded. - **Maximum table rows** — Caps how many years are listed, for long terms. - **Show reset button** — Toggle the reset control in the results panel. - **Count results up** and **Count-up length** — Whether figures animate to their new value, and over how many milliseconds. ## Style Controls ### Container Maximum width, padding, background, border colour, border width, corner radius, shadow (none, small, medium, large), shadow colour, and the gap between the input and result panels. ### Colours - **Accent and text** — Accent, heading, subheading, input label, input value, captions and units, dividers. - **Sliders and fields** — Track, fill, handle, handle border, focus ring, number field background and border. - **Results panel** — Panel background and border, headline figure, breakdown row label and value. - **Chart** — Track plus three segment colours for the stacked and compare bars. - **Table** — Header text, body text and rule colour. - **Buttons** — Background, text, border and hover background, used by both the reset and the table toggle. ### Typography A base font and a heading font, each a font picker. The base font inherits from the host theme's body font when the module is dropped into a theme that sets one. Independent sizes for the heading, subheading, input label, input value, headline result, breakdown row, caption, table and disclaimer. ### Input controls Gap between inputs, slider track height, handle size, handle radius, handle border width, field corner radius, number field height and number field width. ### Results and chart Results panel padding and radius, gap between rows, chart height, chart radius, gap between chart segments, table row height and the table's maximum height before it scrolls. ### Layout A spacing unit that every internal gap is derived from, plus the tablet and mobile breakpoints. ## Accessibility - **Both controls reachable** — Each input is a labelled number box and a range slider, so a keyboard user can tab to the box and type, or use the arrow keys on the slider. - **Real labels** — The visible label is a `