Web Components for American Express

The American Express guide section explains card products and financial topics in editorial pages. These pages were to include tools that can do more than text: compare, calculate, present products clearly. The pages themselves, their structure and their operation were not our responsibility.

This leads to the basic condition of this case. A component runs in a document that doesn’t belong to it, on devices whose width it doesn’t know. Each component therefore brings its own markup, styling and data. Whatever it still expects from the target page — a specific library, for example — is explicitly stated as a prerequisite instead of being silently assumed.

Batunet was responsible for the technical implementation and maintenance, working within a project chain; Batunet was not a contracting party of American Express. Content, terms and brand assets did not come from us.

A comparison with a fixed order answers the provider’s question. Here, the weighting is up to the reader: for several criteria, they set in three levels how important each one is to them. From this, a score is calculated per card from weight and attribute value. Two criteria carry a fixed balancing factor so that they don’t dominate the result through their magnitude alone.

The score itself means nothing to anyone. What is displayed, therefore, is a percentage against the top-ranked card. If nothing is weighted, a fixed default order applies instead of a random one. A filter separates matching from non-matching cards without hiding the latter — they appear set apart below the results.

On wide screens, the cards sit side by side and open a detail view. On narrow screens, the list becomes a carousel, and the application link follows the card currently in the center.

In 2025, a second tool was added: a head-to-head comparison of two freely chosen cards across eleven categories, from fees to travel and insurance benefits.

The official inflation rate describes an average household. Someone who drives little and heats a lot experiences a different rate — not because the number is wrong, but because it is weighted by someone else’s basket of goods.

The inflation calculator therefore takes the official index series — the overall index and nineteen spending categories — and weights them by the expenses a person enters themselves. For each month, a personal index value is calculated as a weighted average; the annual rate results from comparison with the value twelve months earlier. A chart shows the personal and official trends side by side, optionally with a single category as well.

The real effort lies around the formula. Amounts are entered the way people think about money: in euros, without decimals. For each category, the calculator shows a reference value from a standard weighting, based on the stated total expenses. Unassigned expenses go into a separate remainder category, and the result is recalculated with every input. If the categories exceed total expenses, the calculator shows a notice instead of a number that can’t exist.

The remaining components don’t calculate. A comparison table sets several cards against each other row by row and gets its own layout on narrow screens instead of a scaled-down version. A mobile product navigation expands from the edge of the screen. A bar fixed to the bottom opens an overview with a detail view that closes again on click, via the backdrop or with Escape, and runs as a carousel on narrow screens.

The first-generation promotional modules were static HTML and CSS in three variants — as a list, as a compact menu and as a card grid. Technically, these components are simple. Their cost arose elsewhere: the same product information appeared in several modules, each in its own repository with its own history.

The answer wasn’t another component, but a layer beneath: an application based on Symfony 7.1 in which product information and component content are stored as data rather than source code.

The model is kept small. A product record carries the information needed everywhere — name, image, links. Each component has named field values. Which fields a component type knows is defined in a declarative configuration, most recently for around twenty types. A new type thus remains a configuration question and doesn’t become a model change.

Field values can reference product information; at render time, these references are resolved from the product record. A changed piece of information therefore takes effect in every component that uses it, instead of having to be updated file by file.

Delivery is server-rendered: a component’s template is combined with its data into JavaScript that the target page includes. Before that comes a preview that shows the same component at different screen widths. Content is maintained in an editorial interface with login and role restrictions.

The transition happened in stages. At first, content was imported via CSV file; later it was maintained in a data model with an editorial interface. Existing components, including the credit card comparison, were moved into the application — their calculation logic stayed the same, and their data has come from the server ever since.

The work didn’t run as a project with a start and a sign-off, but as continuous development. The version history runs from December 7, 2022 to March 17, 2026 and shows two generations: first standalone embeddable components, then a central application into which existing components were moved.

In hindsight, the interesting part isn’t any single component but the transition. For a handful of modules, a dedicated management application would have been overkill: it costs operations, maintenance and onboarding before it saves anything. With several components that carry the same product information and change constantly, the equation tips.

The migration was gradual, component by component, over several months. That was possible because the components already existed separately. The comparison’s calculation logic, for example, remained unchanged during the move; what was replaced was the source of the data.