Card & bank marks

The card, wallet and bank marks the dashboard shows in every payment row, in the starter under src/components/brand. Every mark has the same footprint, so icon columns stay aligned, and a bank the library does not know falls back to the generic bank badge rather than a broken image.

Banks

chasebank-of-americawells-fargocitius-bankpnccapital-onetd-bank-ustruistgoldman-sachsmarcususaanavy-federalallysofischwabmorgan-stanleycitizensfifth-thirdmt-bankhuntingtonkeybankregionssantander-us

88 institutions matched by name; the CDN serves each logo on the card canvas.

import { CardBrandIcon, paymentMethodLabel } from '@/components/brand/CardBrandIcon'

<CardBrandIcon brand="visa" size={30} />
<CardBrandIcon brand={tx.cardType} bin={tx.cardBin} walletType={tx.walletType} bankName={tx.bankName} size={30} />
paymentMethodLabel(tx)   // "Visa", "Apple Pay", "Chase"…

brandstring | null

visa, mastercard, amex, discover, dinersclub, jcb, unionpay, maestro, or bank. Case and punctuation are ignored.

binstring

The first digits of a card; the brand is detected from them when brand is unknown.

walletTypeapple_pay | google_pay

Shows the wallet mark instead of the card’s.

bankName / bankCountrystring

Matched against the bank library; bankCountry breaks ties for institutions in both the US and Canada.

sizenumber

Width in px; height is 0.65×. 30 in rows, 40 in forms.

fallbackReactNode

What to show when nothing resolves — a card-entry field passes the accepted-brand stack.