DEV Community: Muhammad Shahid

A "3% fee" that's really 27% APR — I built a vanilla JS calculator to prove it

Muhammad Shahid — Thu, 01 Oct 2026 11:53:14 +0000

A friend who runs a small delivery business got a factoring quote last month: "just a 3% fee on your invoices." He was ready to sign — his credit card charges more than that monthly.

I asked him one question: 3% compared to what?

His bank had offered a business credit line at 9% APR. The factoring company quoted 3%. Those numbers aren't in the same unit — one is charged once per invoice, the other is charged per year. So I did what developers do: I built a calculator to convert one into the other.

The result: his "3%" was actually a 27% APR. This post is the math behind it and the vanilla JS that implements it.

The unit trap

Quick context: invoice factoring means selling your unpaid invoices to a company (a "factor") for immediate cash. They advance you most of the invoice today — typically 90% — keep a fee, and collect the full amount from your customer later.

The trap is that a factoring fee is a flat percentage of one invoice, charged once. To compare it with any loan or credit line, you have to annualize it:

Effective APR = (total fees ÷ cash advanced) × (365 ÷ days until paid)

Two details in that formula do all the damage:

Divide by cash advanced, not invoice face value. The factor only gives you ~90% of the invoice, but charges the fee on 100% of it. You're paying for money you never touched.
Divide by the days your customer actually pays — not the stated terms. Net-30 customers pay on day 45.

Worked example — $50,000 invoice, 3% fee, 90% advance, paid in 45 days:

Fee: $1,500
Cash advanced: $45,000
$1,500 ÷ $45,000 = 0.0333
× (365 ÷ 45) = 27.0% APR

And here's the perverse part: the faster your customers pay, the higher the APR climbs. The same 3% fee settled in 30 days is ~41% APR. The fee buys a fixed amount of time — less time makes the annual rate balloon.

The core function

/**
 * Convert a factoring quote into an effective APR.
 * All percentages are plain numbers (3 means 3%).
 */
function effectiveAPR({ invoice, feePct, advancePct, daysToPay, otherFees = 0 }) {
  if (invoice <= 0 || daysToPay <= 0 || advancePct <= 0) {
    throw new Error("Invoice, advance %, and days must all be positive");
  }

  const fee = invoice * (feePct / 100) + otherFees;
  const cashAdvanced = invoice * (advancePct / 100);

  const costRatio = fee / cashAdvanced;
  const apr = costRatio * (365 / daysToPay);

  return {
    fee,
    cashAdvanced,
    costRatio,        // e.g. 0.0333
    apr,              // e.g. 0.2704
  };
}

const quote = effectiveAPR({
  invoice: 50000,
  feePct: 3,
  advancePct: 90,
  daysToPay: 45,
});

console.log((quote.apr * 100).toFixed(1) + "% APR"); // "27.0% APR"

Note the guard clause — a daysToPay of 0 doesn't throw a division error in JS, it silently returns Infinity, and that's worse. Fail loudly.

Money formatting without floating-point surprises

0.1 + 0.2 !== 0.3 is a meme until it's on an invoice. For display, don't hand-roll rounding — use Intl.NumberFormat:

const usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0, // quotes are approximate anyway
});

usd.format(quote.fee);          // "$1,500"
usd.format(quote.cashAdvanced); // "$45,000"

(If you're doing serious currency math, move to integer cents before computing. For a quote estimator, formatting at the display layer is enough.)

Wiring up a minimal form

<form id="quote-form">
  <label>Invoice amount <input type="number" id="invoice" value="50000" /></label>
  <label>Factoring fee % <input type="number" id="fee" value="3" step="0.1" /></label>
  <label>Advance rate % <input type="number" id="advance" value="90" /></label>
  <label>Days until customer pays <input type="number" id="days" value="45" /></label>
  <button type="submit">Calculate true APR</button>
</form>
<p id="result"></p>

const $ = (id) => document.getElementById(id);

$("quote-form").addEventListener("submit", (e) => {
  e.preventDefault();

  try {
    const { apr, fee, cashAdvanced } = effectiveAPR({
      invoice: parseFloat($("invoice").value),
      feePct: parseFloat($("fee").value),
      advancePct: parseFloat($("advance").value),
      daysToPay: parseFloat($("days").value),
    });

    $("result").textContent =
      `${usd.format(fee)} fee on ${usd.format(cashAdvanced)} advanced ` +
      `= ${(apr * 100).toFixed(1)}% effective APR`;
  } catch (err) {
    $("result").textContent = err.message;
  }
});

That's the whole engine — no framework, no dependencies, works in a <script> tag.

The sneaky part: per-period fees

Just when you understand flat fees: many contracts don't charge one fee. They charge a rate per 15- or 30-day period, with part periods rounded up in full. Your customer paying one day into a new period costs you the entire period.

Implementing that rounding is a one-liner with Math.ceil:

function perPeriodAPR({ invoice, ratePerPeriodPct, periodDays, daysToPay, advancePct }) {
  const periods = Math.ceil(daysToPay / periodDays); // day 31 of a 30-day period = 2 periods
  const fee = invoice * (ratePerPeriodPct / 100) * periods;
  const cashAdvanced = invoice * (advancePct / 100);

  return (fee / cashAdvanced) * (365 / daysToPay);
}

// 1.5% per 15 days, customer pays in 30 days:
console.log((perPeriodAPR({ invoice: 50000, ratePerPeriodPct: 1.5, periodDays: 15, daysToPay: 30, advancePct: 90 }) * 100).toFixed(1));
// 40.6% APR

// Same deal, customer pays one day later (day 31):
console.log((perPeriodAPR({ invoice: 50000, ratePerPeriodPct: 1.5, periodDays: 15, daysToPay: 31, advancePct: 90 }) * 100).toFixed(1));
// 58.9% APR

One day late: +18 points of APR, because Math.ceil rounded up to a whole extra period and the shorter denominator pushed the annualized rate up. Contract writers know exactly what they're doing.

The comparison that changed my friend's mind

The whole point of an APR is comparing against your alternative. A 9% credit line covering the same $45,000 gap for 45 days costs:

const creditLineCost = 45000 * 0.09 * (45 / 365);
usd.format(creditLineCost); // "$499"

$499 vs $1,500 for the same money over the same period. Factoring still wins in plenty of situations — it's often the only facility a young business can qualify for, because the factor underwrites your customers' credit instead of yours. But you should choose it knowing the price, not reading a rate card designed to obscure it.

Try it live

I packaged all of this — flat and per-period fee structures, an advance/fees/reserve breakdown, and a factoring-vs-credit-line-vs-waiting comparison — into a free tool, no signup:

👉 Invoice Factoring Calculator — true APR, fees & reserve

It also covers how factoring rates vary by industry (trucking runs 2–4%, retail up to 8% — and annualized, that's 27%–70%+ APR).

If you're building your own version, the two functions above are the entire math core — the rest is form handling and nicer charts. The same annualization logic works for any "fee per transaction" product: merchant cash advances, payday-style short bridges, early-payment discounts. If a price isn't quoted in APR, make it a habit to convert it.

Happy to share the reserve breakdown logic or a React version if there's interest — drop a comment.

I Built a Discount Calculator That Saved Me $2,400 Last Year — Here's the JavaScript Behind It

Muhammad Shahid — Fri, 18 Sep 2026 15:51:10 +0000

I Built a Discount Calculator That Saved Me $2,400 Last Year — Here's the JavaScript Behind It

Last Black Friday, I stood in line at a store with 47 items in my cart. Every sign said "UP TO 70% OFF." But when I got to the register, the total didn't match my mental math.

I was wrong by $340.

That's when I realized: I'm terrible at calculating discounts in my head. And apparently, so is everyone else.

So I built a Discount Calculator that I now use for every purchase. It's saved me over $2,400 in the last year alone — not by finding deals, but by helping me actually understand the deals I'm already seeing.

Here's the code behind it, and why simple math tools still matter.

The Problem With "Mental Math" Discounts

Let me show you why discount math is harder than it looks:

Original Price: $89.99
Discount: 40%
Extra 15% off at checkout

What's the final price?

Most people say around $45. The actual answer? $46.79

The mistake? People calculate 40% + 15% = 55% off, then do $89.99 × 0.45 = $40.50.

But that's wrong. The extra 15% comes after the first discount, not before.

Real calculation:

$89.99 × 0.60 = $53.99  (after 40% off)
$53.99 × 0.85 = $45.89  (after extra 15% off)

That's a $14 difference — money people literally leave on the table because they miscalculate.

The JavaScript: Surprisingly Simple

Here's the core logic. Nothing fancy — just clean math:

function calculateDiscount(originalPrice, discountPercent) {
  if (originalPrice <= 0 || discountPercent < 0 || discountPercent > 100) {
    return { error: "Invalid input" };
  }

  const discountAmount = originalPrice * (discountPercent / 100);
  const finalPrice = originalPrice - discountAmount;
  const savings = discountAmount;

  return {
    original: originalPrice,
    discount: discountPercent,
    savings: Math.round(savings * 100) / 100,
    final: Math.round(finalPrice * 100) / 100,
  };
}

Multiple Discounts (The Real Money Saver)

This is where most people mess up. Stacking discounts isn't addition — it's multiplication:

function calculateStackedDiscounts(originalPrice, discounts) {
  let currentPrice = originalPrice;

  for (const discount of discounts) {
    currentPrice = currentPrice * (1 - discount / 100);
  }

  const totalSavings = originalPrice - currentPrice;
  const effectiveDiscount = (totalSavings / originalPrice) * 100;

  return {
    original: originalPrice,
    final: Math.round(currentPrice * 100) / 100,
    totalSavings: Math.round(totalSavings * 100) / 100,
    effectiveDiscount: Math.round(effectiveDiscount * 100) / 100,
  };
}

// Example: 40% off + extra 15% off
calculateStackedDiscounts(89.99, [40, 15]);
// { original: 89.99, final: 45.89, totalSavings: 44.10, effectiveDiscount: 49.01 }

Notice: the effective discount is 49%, not 55%. That 6% gap is where people lose money.

Why This Actually Saved Me Money

I'm not joking about the $2,400. Here's my real usage pattern:

Before buying anything online, I run the numbers
In physical stores, I pull up the calculator on my phone
For subscription services, I calculate annual vs monthly pricing

Some real examples from my purchase history:

Item	Listed Price	"Discount"	Actual Savings	I Paid
Winter jacket	$299	"60% off"	$179.40	$119.60
Running shoes	$180	"30% + 20% extra"	$86.40	$100.80
AirPods	$249	"25% off"	$62.25	$186.75
Desk chair	$449	"Buy 1 get 1 50% off"	$224.50	$224.50

That desk chair example? The store advertised "50% off" but it was actually BOGO 50%, which is only 25% off each item. Without the calculator, I would've overpaid by $112.

Making It Mobile-Friendly

Since I use this in stores, it had to work on phones. Here's the key CSS:

.calculator-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.input-group {
  margin-bottom: 16px;
}

.input-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.input-group input {
  width: 100%;
  padding: 12px;
  font-size: 18px; /* Prevents iOS zoom on focus */
  border: 2px solid #e0e0e0;
  border-radius: 8px;
}

.result-box {
  background: #f0fdf4;
  border: 2px solid #22c55e;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}

.result-box .savings {
  font-size: 24px;
  font-weight: 700;
  color: #16a34a;
}

Pro tip: always set font-size: 18px on inputs for mobile. iOS Safari auto-zooms inputs smaller than 16px, which ruins the UX.

The Complete Tool

I turned this into a full calculator that handles:

Single discounts
Stacked discounts (multiple percentages)
Currency conversion
Tax calculations
Tip splitting

You can try it here: Discount Calculator — Free Online Tool

It's completely free, no ads, works offline.

Key Takeaways

Discount stacking is multiplication, not addition — 40% + 15% ≠ 55%
Always verify "up to" discounts — the actual percentage is usually lower
Simple tools beat complex apps — I use this calculator more than any shopping app
The math is easy, the UX matters — mobile-friendly design makes it actually useful

What I'd Build Differently

If I were rebuilding this today:

Browser extension that auto-detects discounts on product pages
Price history tracking to see if current deals are actually good
API endpoint so other developers can integrate discount math into their apps

But for now, the simple calculator does the job.

Have you ever miscalculated a discount and overpaid? I'd love to hear your stories in the comments.

And if you build tools like this, share them — the world needs more practical utilities that solve real problems.

Built with vanilla JavaScript. No frameworks, no dependencies, no tracking. Just math.

How to Build a Dynamic CPC & Max Bid Calculator in Next.js / React

Muhammad Shahid — Sat, 12 Sep 2026 11:19:46 +0000

When building marketing tools or internal ad-ops dashboards, calculating Pay-Per-Click (PPC) metrics in real time is a common requirement. A robust CPC (Cost Per Click) Calculator needs to do two things:

Solve for missing metrics dynamically (Ad Spend, Total Clicks, or CPC).
Help developers and ad ops team members determine their Max CPC Bid based on Target CPA and conversion rates.

In this tutorial, we will build a production-ready CPC & Max Bid calculator using React, TypeScript, and clean mathematical logic.

1. Understanding the CPC Core Formulas

Before diving into the React implementation, let's look at the underlying math:

Basic Cost Per Click (CPC):
CPC = Total Ad Spend \ Total Clicks
Max CPC Bid Formula:
Max CPC = Target CPA * Conversion Rate %

2. Setting Up the State Logic in React

We want our calculator to update dynamically when any two input parameters are present. Here is a TypeScript hook that encapsulates the calculation logic safely without state mutation bugs:

import { useState, useMemo } from 'react';

interface CPCInput {
  adSpend: number | '';
  clicks: number | '';
  cpc: number | '';
  targetCPA: number | '';
  conversionRate: number | ''; // input as percentage (e.g., 2.5)
}

export const useCPCCalculator = () => {
  const [inputs, setInputs] = useState<CPCInput>({
    adSpend: '',
    clicks: '',
    cpc: '',
    targetCPA: '',
    conversionRate: '',
  });

  const handleInputChange = (key: keyof CPCInput, value: string) => {
    const numericValue = value === '' ? '' : parseFloat(value);
    setInputs((prev) => ({ ...prev, [key]: numericValue }));
  };

  const calculatedResults = useMemo(() => {
    const spend = typeof inputs.adSpend === 'number' ? inputs.adSpend : 0;
    const clicks = typeof inputs.clicks === 'number' ? inputs.clicks : 0;
    const cpc = typeof inputs.cpc === 'number' ? inputs.cpc : 0;

    let derivedCPC = cpc;
    let derivedSpend = spend;
    let derivedClicks = clicks;

    // Dynamically calculate missing parameter
    if (spend > 0 && clicks > 0) {
      derivedCPC = parseFloat((spend / clicks).toFixed(2));
    } else if (spend > 0 && cpc > 0) {
      derivedClicks = Math.round(spend / cpc);
    } else if (clicks > 0 && cpc > 0) {
      derivedSpend = parseFloat((clicks * cpc).toFixed(2));
    }

    // Max CPC calculation based on Target CPA
    let maxBid = 0;
    if (typeof inputs.targetCPA === 'number' && typeof inputs.conversionRate === 'number') {
      maxBid = parseFloat((inputs.targetCPA * (inputs.conversionRate / 100)).toFixed(2));
    }

    return {
      cpc: derivedCPC,
      spend: derivedSpend,
      clicks: derivedClicks,
      maxBid,
    };
  }, [inputs]);

  return { inputs, handleInputChange, calculatedResults };
};

3. Building the Component Interface

Now, let's connect this custom hook into a React form component:

import React from 'react';
import { useCPCCalculator } from './useCPCCalculator';

export const CPCCalculatorWidget: React.FC = () => {
  const { inputs, handleInputChange, calculatedResults } = useCPCCalculator();

  return (
    <div className="p-6 max-w-lg mx-auto bg-white rounded-xl shadow-md space-y-4">
      <h2 className="text-xl font-bold">Ad Budget & CPC Solver</h2>

      <div className="space-y-3">
        <div>
          <label className="block text-sm font-medium">Total Ad Spend ($)</label>
          <input
            type="number"
            value={inputs.adSpend}
            onChange={(e) => handleInputChange('adSpend', e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="e.g. 1000"
          />
        </div>

        <div>
          <label className="block text-sm font-medium">Total Clicks</label>
          <input
            type="number"
            value={inputs.clicks}
            onChange={(e) => handleInputChange('clicks', e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="e.g. 2500"
          />
        </div>

        <div>
          <label className="block text-sm font-medium">Target CPA ($)</label>
          <input
            type="number"
            value={inputs.targetCPA}
            onChange={(e) => handleInputChange('targetCPA', e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="e.g. 50"
          />
        </div>

        <div>
          <label className="block text-sm font-medium">Conversion Rate (%)</label>
          <input
            type="number"
            value={inputs.conversionRate}
            onChange={(e) => handleInputChange('conversionRate', e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="e.g. 3.5"
          />
        </div>
      </div>

      <div className="mt-4 p-4 bg-gray-50 rounded-lg">
        <h3 className="font-semibold text-lg">Results</h3>
        <p>Calculated CPC: <strong>${calculatedResults.cpc}</strong></p>
        <p>Optimal Max CPC Bid: <strong>${calculatedResults.maxBid}</strong></p>
      </div>
    </div>
  );
};

Conclusion & Live Reference

Building client-side marketing utility calculators in Next.js is a quick way to deliver interactive user experiences without hitting backend APIs.

If you want to test a full-featured live tool including industry benchmark breakdowns, check out the live CPC Calculator on GM Calculator.