Display detected card network

Show the card brand logo as users type their card number.

Display the detected card network (Visa, Mastercard, etc.) as users enter their card number.

Recipe

checkout.addEventListener('primer:bin-data-available', (event) => {
  const { preferred, status } = event.detail;

  if (preferred) {
    document.getElementById('card-logo').src = `/images/${preferred.network.toLowerCase()}.svg`;
  }
});

How it works

1. Listen for the primer:bin-data-available event
2. Use preferred.network to get the card brand identifier
3. Update your UI with the appropriate logo or icon

The preferred field contains the recommended card network based on orderedAllowedCardNetworks. It is undefined when no network is detected (e.g., empty input or insufficient digits).

The preferred object

The preferred object contains the detected card network and, when status is 'complete', additional issuer details:

{
  displayName: string;  // Human-readable name (e.g., "Visa", "American Express")
  network: string;      // Backend identifier (e.g., "VISA", "AMEX")
  allowed: boolean;     // Whether the network is allowed per orderedAllowedCardNetworks
  // Available when status is 'complete':
  issuerCountryCode?: string;
  issuerName?: string;
  accountFundingType?: string;
}

See the Events Reference for the full BinDataDetails type definition.

Example values

// Visa card detected
{ displayName: "Visa", network: "VISA", allowed: true }

// American Express detected
{ displayName: "American Express", network: "AMEX", allowed: true }

// Unknown/unrecognized card
{ displayName: "Other", network: "OTHER", allowed: true }

Supported card networks

network	displayName
VISA	Visa
MASTERCARD	Mastercard
AMEX	American Express
DISCOVER	Discover
DINERS_CLUB	Diners Club
JCB	JCB
MAESTRO	Maestro
UNIONPAY	UnionPay
ELO	Elo
HIPER	Hiper
HIPERCARD	Hipercard
MIR	Mir
INTERAC	Interac
CARTES_BANCAIRES	Cartes Bancaires
DANKORT	Dankort
EFTPOS	Eftpos
ENROUTE	Enroute
OTHER	Other

Variations

Show a loading indicator

Use primer:bin-data-loading-change to indicate when BIN data is being fetched:

checkout.addEventListener('primer:bin-data-loading-change', (event) => {
  const { loading } = event.detail;
  document.getElementById('card-logo').style.opacity = loading ? '0.5' : '1';
});

Display card network name

For user-facing text, use displayName instead of network:

checkout.addEventListener('primer:bin-data-available', (event) => {
  const { preferred } = event.detail;

  const networkName = preferred?.displayName || 'Card';
  document.getElementById('card-type-label').textContent = networkName;
});

Show/hide based on detection

const cardLogo = document.getElementById('card-logo');

checkout.addEventListener('primer:bin-data-available', (event) => {
  const { preferred } = event.detail;

  if (preferred) {
    cardLogo.src = `/images/${preferred.network.toLowerCase()}.svg`;
    cardLogo.style.display = 'block';
  } else {
    cardLogo.style.display = 'none';
  }
});

Handle co-badged cards

Some cards support multiple networks (e.g., Carte Bancaire / Visa). Use alternatives to offer a network picker:

checkout.addEventListener('primer:bin-data-available', (event) => {
  const { preferred, alternatives } = event.detail;
  const cobrandEl = document.getElementById('cobrand-selector');

  if (preferred) {
    document.getElementById('card-logo').src = `/images/${preferred.network.toLowerCase()}.svg`;
  }

  const selectableNetworks = [preferred, ...alternatives].filter(n => n?.allowed);
  cobrandEl.hidden = selectableNetworks.length <= 1;
});

Use icon font or CSS classes

checkout.addEventListener('primer:bin-data-available', (event) => {
  const { preferred } = event.detail;
  const iconEl = document.getElementById('card-icon');

  // Remove all network classes
  iconEl.className = 'card-icon';

  if (preferred) {
    iconEl.classList.add(`card-${preferred.network.toLowerCase()}`);
  }
});

See also

Build a custom card form

Step-by-step guide to building a fully custom card form

Events guide

Handle payment lifecycle events

Use BIN data for Click to Pay

Control Click to Pay based on BIN data