Loan calculator for your website
Free to put on any site. Monthly payment, total interest, and how much of everything paid is interest rather than the loan. Set the term in years or months, add a down payment row for vehicle pages, copy the snippet.
Accent colour
Optional rows
Amount, term and rate are always shown. A down payment row suits vehicle pages, where the deposit changes the sum.
The real widget, running here with your settings.
What it does
Enter an amount, a term and a rate, and it returns the monthly payment, the total of every payment, and the interest inside that total. The last figure is the one readers rarely see elsewhere: what share of everything they hand over is the cost of borrowing rather than the thing they bought.
The term box switches between years and months, because a personal loan is quoted in years and a car loan in months, and making people convert is how mistakes happen. A down payment row can be turned on for vehicle and equipment pages, where the deposit changes the sum.
It uses the standard amortizing payment formula, the same one a lender uses, and handles a zero rate without dividing by zero. A bar under the results shows the principal and the interest as a proportion of what gets paid, which makes the effect of a longer term obvious in a way a table of numbers does not.
The full version, with an amortization schedule and extra payment modelling, is the loan calculator on this site.
How to install it
Copy the code above and paste it into your page where you want the calculator to show. It is ordinary HTML, so it goes wherever HTML goes.
WordPress
In the block editor, add a Custom HTML block and paste the code into it. In the classic editor, switch from Visual to Text first. For a sidebar, use a Custom HTML widget under Appearance, then Widgets. Some managed hosts strip script tags from posts written by non-administrator accounts, in which case paste it while signed in as an administrator.
Wix, Squarespace and Shopify
Wix: add an Embed HTML element and paste the code into the code panel. Squarespace: add a Code block and turn off Display Source. Shopify: paste it into a section or page written in the code editor rather than the rich text field, which removes scripts.
Plain HTML
Paste both lines into the body of the page. The script tag can sit next to the div or at the end of the document, and it only needs to appear once even if the page holds several calculators.
Settings you can change
Every option is a data attribute on the div, so the script itself never needs editing.
| Attribute | What it does | Example |
|---|---|---|
data-theme | Light or dark surface | dark |
data-accent | Colour of the payment and link | #1d4ed8 |
data-currency | Symbol in front of every amount | £ |
data-title | Heading text, or empty for none | Repayments |
data-term | Whether the term box means years or months | months |
data-fields | Which optional rows appear | amount,term,rate,down |
The widget renders inside a shadow root with its own stylesheet, so your site's CSS cannot reach in and break it, and your own rules are equally safe from ours. It caps itself at 420px wide and shrinks to fit anything narrower. To control where it sits, wrap the div in a container of your own.
Terms of use
By using this code you agree:
- The materials are provided as is, without warranty of any kind.
- Not to alter the calculation logic in the script.
- Not to remove the "powered by Calculator Castle" credit link.
- That copyright in the code belongs to calculatorcastle.com.
- Not to remove these terms from the standalone version.
Results are estimates for planning and carry no warranty. Neither you nor your visitors should treat the output as professional advice.
Common questions
Questions about the widget
Is the widget free?
Yes, on any site, including commercial ones. No fee, no account and no usage limit. The one condition is that the "powered by Calculator Castle" link stays visible.
What formula does it use?
The standard amortizing payment: M = P x r / (1 - (1 + r)^-n), where r is the monthly rate and n is the number of months. On 25,000 over five years at 7.5% it returns 500.95 a month, 30,056.92 paid in total and 5,056.92 of interest.
Can the term be in months?
Yes, and the visitor can switch it themselves. The data-term attribute decides which one it starts in, so a car dealership can open on months and a personal finance page on years.
Does it handle a down payment?
Turn the row on and it subtracts the deposit before working out the payment, then shows the amount actually financed. It is off by default, because most loan pages do not need it.
What about a zero percent offer?
It works. A zero rate divides the amount evenly across the months rather than failing, which is the case that breaks a surprising number of loan calculators.
How big is it?
11 KB, around 4.1 KB compressed over the wire, loaded with the async attribute so it never blocks your page. No libraries, no fonts, no images and no network requests once loaded.
Will it clash with my site styles?
No. It renders inside a shadow root with its own stylesheet, so your CSS cannot reach into it and its CSS cannot leak out. We test that against a page that sets width, colour and font on every input and button with !important.
Does it track my visitors?
No. It sets no cookies, stores nothing and sends nothing back to us. Everything is worked out in the browser of the person using it, so it needs no cookie banner of its own.
Results are estimates, not an offer of credit. Real lending depends on underwriting. See all embeddable calculators.