Pricing logic feels boring until it's wrong.

Build it like infrastructure from day one.

Most pricing engines are built wrong. Here's what I'd do instead.

If you're building a CPQ product — or any SaaS tool where users configure and price deals — your pricing logic is probably living in the wrong place.

It's in a component. Or a utility function called from three different places. Or worse, duplicated between your frontend table renderer and your backend invoice service, silently drifting apart until a customer notices the numbers don't match.

I've thought a lot about how to architect this properly. Here's what I'd do.

First: treat pricing as infrastructure, not a feature

The moment you have billing frequency, line-item discounts, currency formatting, and tax rules composing together, you don't have a utility anymore. You have a domain. It deserves its own package, its own test suite, and its own ownership.

A shared @your-org/pricing-engine package — published internally, consumed by your frontend, your backend, and your export pipeline — means one place where

unitPrice × quantity × frequency = subtotal

is defined. Not three.

Why does this matter in practice? Consider this scenario:

A sales rep quotes a client €90/month per seat for a SaaS tool, after a 10% discount, converted from USD. That number needs to be:

• Identical in the live proposal table the rep is editing


• Identical in the PDF the client downloads and signs


• Identical in the invoice the billing system generates on day one


• Identical in the revenue report the finance team pulls at month end

If your frontend, your PDF export service, and your billing backend each have their own implementation of applyDiscount() and convertCurrency(), you will eventually have a discrepancy. Not maybe. Eventually.

Never use floating-point arithmetic for money. Ever.

0.1 + 0.2 === 0.30000000000000004

This isn't a JavaScript quirk. It's IEEE 754 — the way binary floating-point works at a hardware level. And it will silently corrupt your customer invoices.

A real example of how this surfaces: a pricing table with 7 line items, each with a percentage discount and a currency conversion applied. By the time you sum those rows, the float drift compounds. Your table shows $1,200.00. Your invoice says $1,199.99. Your customer notices. Your support team gets a ticket. Your engineers spend a day debugging something that was never going to work correctly.

Use decimal.js or equivalent to it. Treat it as a hard rule, not a code style preference. Decimal arithmetic is slower — negligibly so at any realistic pricing table scale. There is no valid argument for floating-point in customer-facing money calculations.

Keep your engine pure

A pricing engine should be a pure function:

inputs → outputs

No Redux. No React. No HTTP calls. No side effects. Just data in, calculated data out.

What the engine looks like from the outside

const result = computeTablePricing({

  rows: [

    {

      id: "row-1",

      unitPrice: new Decimal("100.00"),

      quantity: new Decimal("5"),

      billingFrequency: "monthly",

      discount: { type: "percentage", value: new Decimal("10") }

    }

  ],

  currency: { code: "EUR", symbol: "€", symbolPosition: "front", decimalPlaces: 2 },

  settings: { taxRate: new Decimal("0") }

});



// result.rows["row-1"].subtotal === Decimal("450.00")

// result.frequencyTotals.monthly === Decimal("450.00")

// result.grandTotal === Decimal("450.00")

This matters more than it sounds. A pure engine:

Runs identically on web, server, React Native, and in a unit test

Can be validated against your old implementation in shadow mode before touching production

Can be reasoned about without understanding your component tree

Can be tested with plain input/output assertions — no mocking, no rendering, no Redux store setup

The billing frequency problem — a concrete example of why this matters

Let's say you want to add billing frequency to your pricing table. Line items can be one-time, monthly, or annual. The footer should show a subtotal per frequency group.

In a component-centric architecture, you add grouping logic to your table renderer. Then you realize your PDF export also needs frequency subtotals, so you add it there too. Then billing needs it. Three implementations. Three places to get out of sync.

With an engine, billing frequency is just a first-class input field on each row:

billingFrequency: 'one-time' | 'weekly' | 'monthly' | 'quarterly' | 'annual'

The engine computes frequency subtotals as outputs. The table reads them. The PDF reads them. The billing service reads them. Same numbers everywhere, because it's the same function.

The discount composition problem — where things really break

Discounts are where scattered pricing logic becomes a genuine product risk.

Consider what a real CPQ discount model looks like:

A rep can apply up to 10% at line-item level without approval

Anything above 10% needs manager sign-off

There's a volume discount: 5+ seats get an additional 5% off

There's a seasonal promotion: 15% off annual plans in Q4

These can stack — but only in specific combinations

If discount logic lives in your table component, how does your catalog apply the same rules? How does your billing service validate that the agreed discount is still applied at invoice time? How do you write a unit test for the approval threshold without rendering a table?

The answer is: you can't, cleanly. You end up with discount logic scattered across five files, each with slightly different behavior.

In an engine architecture, discount application is a shared rule:

// shared/discount-application.ts

export function applyDiscount(

  baseAmount: Decimal,

  discount: { type: 'percentage' | 'fixed'; value: Decimal }

): { discountedAmount: Decimal; discountAmount: Decimal } {

  const discountAmount =

    discount.type === 'percentage'

      ? baseAmount.mul(discount.value).div(100)

      : discount.value;



  return {

    discountedAmount: baseAmount.minus(discountAmount),

    discountAmount

  };

}

One function. Tested once. Used by the table calculator, the catalog calculator, the billing service, and the approval workflow validator. Identical behavior everywhere by definition.

The feature composition problem — this is the real ceiling

Individual features are manageable. The problem is when they compose.

A line item that has:

Billing frequency: monthly

Discount: 10% off

Currency: EUR, converted from USD at current rate

Tax: 20% VAT applied after discount

...needs to produce exactly the same number in your live editor, your PDF, your invoice, and your analytics pipeline. Every combination of features multiplies the number of cases where scattered logic can diverge.

This is what actually blocks CPQ roadmaps. Not any individual feature — the combinatorial explosion of feature interactions when your calculation logic is spread across the codebase.

Let your state layer stay clean

In a Redux architecture, the pattern that actually works:

Redux stores confirmed inputs only (what the user committed — prices, quantities, discounts, frequencies)

Selectors derive all calculated values by passing those inputs through the engine

Components never calculate — they only display

// selector reads inputs from Redux, derives outputs via engine

const selectTablePricingResult = createSelector(

  [selectTablePricingInputs],

  (inputs) => computeTablePricing(inputs) // pure function, memoized automatically

);

This eliminates an entire class of bugs where your displayed subtotal disagrees with what gets saved, invoiced, or exported. The Redux store is always clean data. Derived values are never persisted. There is no ambiguity about whether a stored subtotal field is a user input or a computed value — a distinction that causes real bugs in collaborative editing and undo/redo flows.

The migration play — how to get there without breaking production

If you're refactoring an existing system rather than greenfielding, shadow mode is your best friend.

Run the new engine in parallel with your old implementation. For every calculation your old code produces, the engine produces the same calculation independently. Log any divergence. Ship zero user-facing changes until the outputs match exactly — across every row type, every discount combination, every currency, every edge case you can throw at it.

Silent arithmetic regressions on customer invoices are not a recoverable situation. Shadow mode gives you mathematical certainty before you flip the switch.

The sequencing I'd recommend:

Engine package first — pure functions, no UI changes, full test coverage

New features through the engine — billing frequency, discounts, anything net-new goes through the engine from day one, minimizing regression risk on existing behavior

Shadow mode on existing features — validate the engine matches current behavior exactly

Migrate existing consumers — replace old calculations one surface at a time, behind a feature flag

Remove the old code — only after full coverage and monitoring confirms correctness

What this unlocks long-term

Once you have a pure, shared pricing engine, a lot of things that were hard become straightforward:

Backend adoption: Your invoice service imports the same npm package your frontend uses. Calculation discrepancies between frontend and backend become structurally impossible

Mobile: React Native consumes the same engine. No separate mobile pricing logic

Analytics: Revenue reports use the same calculation rules as the proposals that generated the revenue

Formula engine: User-programmable pricing formulas

(=quantity * unitPrice * (1 - discount))

become an extension of the engine, not a rewrite of it.

The point

Pricing logic feels boring until it's wrong. Build it like infrastructure from day one — pure, shared, tested, and decoupled from your UI layer. The payoff isn't visible immediately. It's visible when your fifth pricing feature composes correctly with your first four without a single edge case meeting.

Have you tackled pricing complexity at scale? Curious what patterns have worked — especially around currency and tax.