Display detected card network

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

Recipe

Web
Android
iOS

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

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

val controller = rememberCardFormController(checkout)
val state by controller.state.collectAsStateWithLifecycle()

val detected = state.networkSelection.selectedNetwork

if (detected != null) {
    Text(text = detected.displayName)
}

PrimerCardForm displays the card brand icon automatically in the card number field. Custom rendering is optional — use state.networkSelection only if you need to display the network outside the card form.

struct CardFormWithNetwork: View {
  let scope: any PrimerCardFormScope
  @State private var selectedNetwork: PrimerCardNetwork?

  var body: some View {
    HStack {
      scope.PrimerCardNumberField(label: "Card number", styling: nil)
      if let network = selectedNetwork {
        Text(network.rawValue)
          .font(.caption)
          .padding(4)
          .background(Color(.secondarySystemBackground))
          .cornerRadius(4)
      }
    }
    .task {
      for await state in scope.state {
        selectedNetwork = state.selectedNetwork
      }
    }
  }
}

The card form fields handle network detection automatically. Use state.selectedNetwork only if you need to display the network outside the card form.

How it works

Web
Android
iOS

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

Create a PrimerCardFormController using rememberCardFormController()
Observe its state with collectAsStateWithLifecycle()
Read state.networkSelection.selectedNetwork for the currently detected network
The state updates reactively as the user types — no event listener needed

Property	Type	Description
`selectedNetwork`	`PrimerCardNetwork?`	Currently detected network, or `null`
`availableNetworks`	`List<PrimerCardNetwork>`	All selectable networks (for co-badged cards)
`isNetworkSelectable`	`Boolean`	`true` when the card has multiple networks

Observe scope.state using for await in a .task modifier
Read state.selectedNetwork for the currently detected network
Read state.availableNetworks for all selectable networks (co-badged cards)
The state updates reactively as the user types

Property	Type	Description
`selectedNetwork`	`PrimerCardNetwork?`	Currently detected network, or `nil`
`availableNetworks`	`[PrimerCardNetwork]`	All selectable networks (for co-badged cards)

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

Web
Android
iOS

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.

data class PrimerCardNetwork(
    val network: CardNetwork.Type,
    val displayName: String,
    val allowed: Boolean,
)

selectedNetwork is null when no card network is detected. Android uses the CardNetwork.Type enum with a displayName property.

enum PrimerCardNetwork: String {
    case visa, masterCard, amex, discover, jcb, maestro, ...
}

selectedNetwork is nil when no card network is detected. iOS uses the PrimerCardNetwork enum with a rawValue string property.

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
`CARTES_BANCAIRES`	Cartes Bancaires
`DANKORT`	Dankort
`EFTPOS`	Eftpos
`OTHER`	Other

On Android, these are values of the CardNetwork.Type enum. Each value has a displayName property matching the table above.

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

Web
Android
iOS

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;
});

val controller = rememberCardFormController(checkout)
val state by controller.state.collectAsStateWithLifecycle()

val networkName = state.networkSelection.selectedNetwork?.displayName ?: "Card"
Text(text = "Paying with $networkName")

if let network = selectedNetwork {
  Text("Paying with \(network.rawValue)")
} else {
  Text("Paying with Card")
}

Show/hide based on detection

Web
Android
iOS

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';
  }
});

val controller = rememberCardFormController(checkout)
val state by controller.state.collectAsStateWithLifecycle()

val detected = state.networkSelection.selectedNetwork

AnimatedVisibility(visible = detected != null) {
    if (detected != null) {
        Text(text = detected.displayName)
    }
}

@State private var selectedNetwork: PrimerCardNetwork?

var body: some View {
  VStack {
    if let network = selectedNetwork {
      Text(network.rawValue)
        .transition(.opacity)
    }
    scope.PrimerCardNumberField(label: "Card number", styling: nil)
  }
  .animation(.default, value: selectedNetwork)
  .task {
    for await state in scope.state {
      selectedNetwork = state.selectedNetwork
    }
  }
}

Co-badge network selector

Web
Android
iOS

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;
});

val controller = rememberCardFormController(checkout)
val state by controller.state.collectAsStateWithLifecycle()
val networkSelection = state.networkSelection

if (networkSelection.isNetworkSelectable && networkSelection.availableNetworks.size > 1) {
    NetworkSelector(
        networks = networkSelection.availableNetworks,
        selected = networkSelection.selectedNetwork,
        onSelect = { network -> controller.selectCardNetwork(network) },
    )
}

PrimerCardForm renders a dropdown selector for co-badged cards automatically. Use selectCardNetwork() only if building a fully custom card form.

When a card supports multiple networks, availableNetworks contains all options. Use the cobadgedCardsView property to provide a custom network selector:

cardScope.cobadgedCardsView = { networks, onSelect in
  AnyView(
    HStack {
      ForEach(networks, id: \.self) { network in
        Button(network) {
          onSelect(network)
        }
        .buttonStyle(.bordered)
      }
    }
  )
}

The SDK renders a default co-badge selector automatically. Use cobadgedCardsView only if you need a fully custom selector.

Use icon font or CSS classes

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

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

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

Checkout

Display detected card network

Recipe

How it works

The preferred object

Supported card networks

Variations

Show a loading indicator

Display card network name

Show/hide based on detection

Co-badge network selector

Use icon font or CSS classes

See also

Build a custom card form

Events guide

Use BIN data for Click to Pay

Checkout

​Recipe

​How it works

​The preferred object

​Supported card networks

​Variations

​Show a loading indicator

​Display card network name

​Show/hide based on detection

​Co-badge network selector

​Use icon font or CSS classes

​See also

Build a custom card form

Events guide

Use BIN data for Click to Pay

Recipe

How it works

The preferred object

Supported card networks

Variations

Show a loading indicator

Display card network name

Show/hide based on detection

Co-badge network selector

Use icon font or CSS classes

See also