Skip to main content
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

networkdisplayName
VISAVisa
MASTERCARDMastercard
AMEXAmerican Express
DISCOVERDiscover
DINERS_CLUBDiners Club
JCBJCB
MAESTROMaestro
UNIONPAYUnionPay
ELOElo
HIPERHiper
HIPERCARDHipercard
MIRMir
INTERACInterac
CARTES_BANCAIRESCartes Bancaires
DANKORTDankort
EFTPOSEftpos
ENROUTEEnroute
OTHEROther

​
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