Notes on Credit Card Calculation

This is an explanation of the html / JavaScript program plus comments on how credit cards work. Let's began with the latter. Credit cards allow consumers to make purchases without using cash. They represent loans from the credit card company to the consumer. The billing cycle generally is a month (more on this later). That is, each month, the consumer gets a bill.

For the most part, if the consumer pays off the loans, also termed the balance, immediately, that is, as soon as he or she gets the monthly bill, it is a free loan, that is, no interest or other charges. If the consumer does NOT pay off the balance, there generally is a minimum amount that needs to be paid. If this minimum is not met, the next bill will show a fee plus interest chargesadded in to the balance. If the consumer pays the minimum, but not the whole balance, interest charges are added to the balance. The new balance would be the old balance, minus the payment, plus the interest, plus any fee and plus the cost of any new purchases. Thus, over time, the consumer is paying interest on the interest. This phenomenon of interest on interest is called compound interest and it is a very nice thing if it is working on your behalf, that is, on investments. It is a very mean thing when working against you, as it is in credit card debt. Paying only the minimum, while making new purchases, generally means that you get deeper and deeper in debt.

The calculation of the interest charges may be more complex that the JavaScript program shows. The credit card company has made you a loan from the time of your purchase (or, possibly slightly later depending on its arrangements with the retailer accepting the credit card for the purchase) to when you pay the bill. If you pay up, the credit card company does not charge interest for this period of time. If you do not pay up, many credit card companies charge interest from the date of purchase! Moreover, the balance is computed on a daily basis; the compounding takes place each day. This means your debt increases more rapidly. Often, the company offers different rates of interest for opening an account, transfer of a balance from another card, cash advances, etc. If it is daily compounding, the number is divided by 365 (I don't know the practice in leap years). You can use a spreadsheet program or the Wolfram browser add-on to compare the effects of daily compounding versus monthly versus yearly.

The JavaScript program computes the interest on a monthly basis. The interest rate shown is the annual interest. You can change this from the initial value of 15. The calculation uses this amount divided by 100 to get from a percentage to a fraction and then divided by 12 (12 months in a year).

The minimum payment in the JavaScript program has the initial value of 50. It can be changed. Some credit card companies have a fixed minimum payment. Some have an amount dependent on the balance and some use a combination, for example, the maximum of a set amount and a percentage of the balance.

Credit card companies make money when people do NOT pay off the balance in full but do pay something. Some credit card companies also earn fees from the retailers. However, the biggest part of their income is from the people who pay something each time period, but always accrue interest charges.If you do NOT make any new purchases, and pay the minimum each month, you will pay off your debt eventually but at a slower rate than you may expect. This program shows this. However, keep in mind that the actual situation can be complex and not in your favor, due to the probable daily compounding and different rates and fees.

Here is the initial screen:

This is implemented using an html form containing <input> elements for

BalanceThis is the accumulated amount owed

New PurchasesThis is the total of the new purchases this month.

Annual Interest RateThis appears as 15, meaning 15%. It can be changed.

Minimum PaymentThis appears as 50. It can be changed.

Fee for not paying min.This appears as 100. It can be changed.

Your paymentThis is what the user chooses to pay

The form has a submit button and the onSubmit is set to "return calc()". This means the JavaScript program will pick up the values from the form. The code uses theNumber function because the information in the form input fields is all text and must be converted to numbers. The code then calculates the new balance and does the rest of the calculations. Finally, the code resets fields in the form to be the new balance, with the new purchases and payment input values reset to 0.00. The calculation includes a nested if statement checking if the new balance is being paid off and, if not, if the minimum is being met.

The code includes a call to a function moneyf that formats the output into standard dollars and cents, that is, exactly 2 numbers to the right of the decimal point. It would be bad to display money as 240.8 or 240.852.

Suppose you made $240 in purchases and then paid the minimum: $50. You enter in this information:

and then click on CALCULATE. The screen will now show this:

The $2.37 represents the interest on the unpaid balance of $240 - $50. Suppose for this next billing cycle, you do NOT make any new purchases, and pay $50 again:

The next screen is:

The balance is decreasing but slowly!Pay off those balances.

Here is another scenario: relatively low balance and new purchases, but with only a low payment:

Here is the next screen with the new balance:

I mad

I made a late modification of the program concerning the focus. When presenting forms, it may be a good idea to set the cursor to a specific field. This is done in my example in two places. The <body> element is

<body onLoad="document.f.newp.focus();">

In the calc function, this expression is repeated as a statement:

document.f.newp.focus();

Comments (on the program and on the notes) welcome.

The code in full is:

<html>

<head>

<title>Credit Card Calculation</title>

function calc() {

var bal = Number(f.balance.value);

var nstuff = Number(f.newp.value);

var rate=Number(f.interest.value)/100;

var minp=Number(f.minum.value);

var fee = Number(f.fee.value);

var pay=Number(f.pay.value);

var charges=0.0;

bal = bal + nstuff;

if (bal>0) {

if (pay>=bal) {

f.balance.value = "0.00";

}

else {

minp = Math.min(minp,bal);

if (pay<minp) {

charges+=fee;

}

bal = bal - pay;

charges+=bal*rate/12;

bal = bal + charges;

f.balance.value = moneyf(bal);

}

f.pay.value = "0.00";

f.newp.value = "0.00";

document.f.newp.focus();

}

return false;

}

function moneyf(amt) {

var amts = String(amt);

var dp = amts.indexOf(".");

if (dp<0) {

return amts+".00";

}

else {

amts = amts+"00";

return amts.substr(0,dp+3);

}

</script>

</head>

Calculate Next Month's Balance

</center>

Balance: $

<br/>

New Purchases: $

<br/>

Annual Interest rate:

<input name="interest" value="15"/> %

<br/>

Required minimum payment: $

or what is owed, whatever is the least.

<br/>

Fee for not paying minimum: $

<br/>

Your payment: $

<br/>

You can continue for the next month's calculation.

</form>

</body>

</html>