Build a credit card comparison site
A comparison site lists cards, filters them and shows two or three side by side. CardAPI gives you the card list and every field the table needs, for the US and Canada; you own the design, the ranking and the editorial.
The plan you need
Starter plan and aboveStarter ($29/mo) returns every field and endpoint below. It starts with a 7-day free trial.
Prototype on the Free plan: it returns each card's basic fields and top 3 reward rates. See what each plan returns.
Fields
- name
- issuers
- network
- annual_fee
- signup_bonus
- signup_min_spend
- reward_rates
- benefits
- statement_credits
- interest_rate_purchase
- foreign_transaction_fee
- credit_score_min
- apply_url
Types and descriptions: the card object.
Endpoints
- GET /v1/cards — List cards
- GET /v1/cards/compare — Compare cards
- GET /v1/cards/:slug — Get a card
Going further
- Card art on each cardimage_urlEnterprise plan
- Best-ever welcome offer next to today'shistorical_best_offerPro plan and above
- Rebuild a page the moment a card changes, instead of on a schedulePOST /v1/webhooksEnterprise plan
Displaying and caching the data
- Cache what you fetch for as long as your plan is active (ISR, a database, a KV store); re-fetch on a schedule so changes reach your users. The data is re-checked against issuer sites every Friday, so a daily or weekly refresh is plenty.
- Show the data to your own users. Don't re-serve it raw: no public API or feed of your own, no CSV or spreadsheet download, no bulk export. A backend that only your own site or app calls is fine.
- Data fetched during the Starter trial is for evaluation only until the trial becomes a paid plan: build and test on it, publish once the plan is paid.
- If the plan ends, delete what you stored from it within 30 days (Free-plan fields may be fetched again under Free).
The full rules are in the Terms of Service.
Code
Runs on your own key (CARDAPI_API_KEY) and fetches at runtime: nothing here ships card data. Uses @cardapi/client 0.4.0 or later.
npm install @cardapi/client
import { CardAPI, type Card } from "@cardapi/client";
const api = new CardAPI({ apiKey: process.env.CARDAPI_API_KEY! });
// Every published US card, 100 a page.
export async function allCards(country: "US" | "CA" = "US"): Promise<Card[]> {
const cards: Card[] = [];
for (let offset = 0; ; offset += 100) {
const page = await api.getCards({ country, limit: 100, offset });
cards.push(...page.data);
if (cards.length >= page.total || page.data.length === 0) return cards;
}
}
// Two to five cards side by side, in the order asked for.
export async function compare(slugs: string[]): Promise<Card[]> {
return api.compareCards(slugs);
}