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

​
Recipe

checkout.addEventListener('primer:card-network-change', (event) => {
  const { detectedCardNetwork, isLoading } = event.detail;

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

​
How it works

  1. Listen for the primer:card-network-change event
  2. Check isLoading to avoid showing intermediate states
  3. Use detectedCardNetwork.network to get the card brand identifier
  4. Update your UI with the appropriate logo or icon

​
The detectedCardNetwork object

The detectedCardNetwork object contains two properties: 
{
  displayName: string;  // Human-readable name (e.g., "Visa", "American Express")
  network: string;      // Backend identifier (e.g., "VISA", "AMEX")
}
detectedCardNetwork is null when no card network is detected (e.g., empty input or insufficient digits).

​
Example values

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

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

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

​
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

​
Display card network name

For user-facing text, use displayName instead of network: 
checkout.addEventListener('primer:card-network-change', (event) => {
  const { detectedCardNetwork } = event.detail;

  // Use displayName for user-facing text
  const networkName = detectedCardNetwork?.displayName || 'Card';
  document.getElementById('card-type-label').textContent = networkName;
});

​
Show/hide based on detection

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

checkout.addEventListener('primer:card-network-change', (event) => {
  const { detectedCardNetwork, isLoading } = event.detail;

  if (isLoading) {
    cardLogo.style.opacity = '0.5';
    return;
  }

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

​
Use icon font or CSS classes

checkout.addEventListener('primer:card-network-change', (event) => {
  const { detectedCardNetwork } = event.detail;
  const iconEl = document.getElementById('card-icon');

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

  if (detectedCardNetwork) {
    // Add network-specific class
    iconEl.classList.add(`card-${detectedCardNetwork.network.toLowerCase()}`);
  }
});

​
See also