mm.js - Mortgage Repayment Calculator Documentation

Embed a Mortgage Repayment Calculator

mm.js - Mortgage Repayment Calculator Documentation

The mm.js Mortgage Repayment Calculator plots mortgage interest and repayments over time, from a Principal, Regular Overpayments for a given Interest Rate and Term.

The Calculator can be used to show the power of even small mortgage overpayments.

The Calculator is fully featured, enabling real time updates, sharing of the URL, and query parameters. You can embed on a single page or within articles.

How to Embed

If you are using WordPress use the HTML editor.

1. Include the required dependencies

Add the following scripts to your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script src="https://www.moneymage.net/mm.min.js"></script>

These are required dependencies for mm.js. They are all minified, compressed, and served via a reliable Content Distribution Network to improve your site speed.

2. Add HTML and containing divs to your page or article

You will need to insert some HTML and containing divs where the chart and table will appear.

2.a) Add the input form HTML

Insert HTML for the form.

An example layout is:

1. Your mortgage principal: (£) <input type="text" id="loan-amount" value="130000"/>

2. Mortgage Interest Rate (%): <input type="text" id="rate" value="1.94"/>

3. (Optional) Monthly Overpayment (£): <input type="text" id="overpayment" value="0"/>

4. Years: <input type="text" id="years" value="25"/>

<input class="button" value="Recalculate" id="calculate" type="submit"/>
<input type="hidden" id="copy-value"/>
<input class="button" value="Copy Link" id="copy-link" type="submit"/>

You can lay the form out and label it as you please. The following must exist:

You can place this form whereever you like on your page. You can style this form however you like.

2.b) Add an error containing div and HTML

Insert HTML to handle errors with the form.

An example layout is:

<div id="error-report" style="display: none;">
<p>There was an error with your input. Please try values like:</p>
<ul>
    <li>Mortgage Principal = 130000</li>
    <li>Interest Rate = 1.94</li>
    <li>(Optional) Monthly Overpayment = 0</li>
    <li>Years = 25</li>
</ul>
</div>

The id must be error-report. This div will be displayed if there is any error handling the form input or calculator. You can place your own content within the div.

The div should be display: none; initially.

You can place this div whereever you like on your page. You can style this div however you like.

2.c) Insert a containing div for the chart

Insert a containing div to your page or article where you would like the chart to appear.

You must use id mortgage-calculator-chart

<div id="mortgage-calculator-chart"></div>

The chart will be inserted at this location. You can place this div whereever you like on your page. You can alter the the colours and the currency and locale

2.d) Insert a containing table for the summary data

Insert a table for displaying the summary data from the calculator. This should be a table with a set structure, insert the following:

<table id="mortgage-summary">
    <thead>
        <tr>
            <th><b>Monthly Payment</b></th>
            <th><b>Monthly Overpayment</b></th>
            <th><b>Paid Off In</b></th>
            <th><b>Saving In Interest</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

This table must have id mortgage-summary

You can place this div whereever you like on your page. You can style this table however you like.

2.e) Insert a containing table for the tablulated data

Insert a table for displaying the monthly data from the calculator. This should be a table with set structure, insert the following:

<table id="tabulated-data">
    <thead>
        <tr>
            <th><b>Date</b></th>
            <th><b>Principal</b></th>
            <th><b>Payment</b></th>
            <th><b>Overpayment</b></th>         
            <th><b>Interest</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

This table must have id tabulated-data

You can place this div whereever you like on your page. You can style this table however you like.

3. Call mm.js to insert the calculator

You are now ready to add the calculator!

Insert a <script> ... </script> block to the bottom of your page.

Add the following script to your page or article.

The arguments you provide will change the behaviour of the chart.

<script>
moneymage.ready(() => {
    moneymage.displayMortgageCalculator();
});
</script>

API

moneymage.displayMortgageCalculator();

This configures the Money Mage Mortgage Repayment Calculator.

Parameters

There are no parameters.

Query Parameters

The following query parameters are used on the page:

Parameter Type Description
N int The number of years to process
P float The starting principal of the mortgage
op float Fixed monthly overpayments to make
R float The interest rate, as a decimal between 0.0 .. 100.0 as a annual percentage.


Required HTML structure

The following HTML structure is required:

Styling

You can style any of the elements as you like. You can alter the the colours and the currency and locale

Example

moneymage.ready(() => {
    moneymage.displayMortgageCalculator();
});

Example Calculator

  1. Your mortgage principal: (£)

  2. Mortgage Interest Rate (%):

  3. (Optional) Monthly Overpayment (£):

  4. Years:

Monthly Payment Monthly Overpayment Paid Off In Saving In Interest


Date Principal Payment Overpayment Interest


*
1. Your mortgage principal: (£) <input type="text" id="loan-amount" value="130000"/>

2. Mortgage Interest Rate (%): <input type="text" id="rate" value="1.94"/>

3. (Optional) Monthly Overpayment (£): <input type="text" id="overpayment" value="0"/>

4. Years: <input type="text" id="years" value="25"/>

<input class="button" value="Recalculate" id="calculate" type="submit"/>

<div id="error-report" style="display: none;">
<p>There was an error with your input. Please try values like:</p>
<ul>
    <li>Mortgage Principal = 130000</li>
    <li>Interest Rate = 1.94</li>
    <li>(Optional) Monthly Overpayment = 0</li>
    <li>Years = 25</li>
</ul>
</div>

<div id="mortgage-calculator-chart"></div>

<table id="mortgage-summary">
    <thead>
        <tr>
            <th><b>Monthly Payment</b></th>
            <th><b>Monthly Overpayment</b></th>
            <th><b>Paid Off In</b></th>
            <th><b>Saving In Interest</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<br/>

<table id="tabulated-data">
    <thead>
        <tr>
            <th><b>Date</b></th>
            <th><b>Principal</b></th>
            <th><b>Payment</b></th>
            <th><b>Overpayment</b></th>         
            <th><b>Interest</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<input type="hidden" id="copy-value"/>
<input class="button" value="Copy Link" id="copy-link" type="submit"/>