Co-Badge Support

Co-badge support allows the Card Element to handle cards that support multiple payment networks, giving users the ability to choose which network to use for processing their payment. This feature is particularly important in regions where co-branded cards are common.

Overview

When a card supports multiple payment networks (co-badged), the Card Element can detect this and allow users to select their preferred network. Basis Theory supports co-badge functionality for the following domestic payment schemes:

• Cartes Bancaires - French domestic payment network, commonly co-badged with Visa or Mastercard
• Bancontact - Belgian domestic payment network, commonly co-badged with Mastercard
• Dankort - Danish domestic payment network, commonly co-badged with Visa

Enabling Co-Badge Support

To enable co-badge support on your Card Element, include the coBadgedSupport property in your element configuration:

Web Elements

// Create a Card Element with co-badge support
const cardElement = bt.createElement('card', {
  targetId: 'my-card',
  coBadgedSupport: ['cartes-bancaires'],
  onChange: (event) => {
    // Handle network selection events
    if (event.selectedNetwork) {
      console.log('Selected network:', event.selectedNetwork);
    }
  }
});

// Mount the element
cardElement.mount('#card-container');

React Elements

import { CardElement } from "@basis-theory/react-elements";

function PaymentForm() {
  const handleCardChange = (event) => {
    // Handle network selection events
    if (event.selectedNetwork) {
      console.log('Selected network:', event.selectedNetwork);
    }
  };

  return (
    <CardElement
      id="my-card"
      coBadgedSupport={['cartes-bancaires']}
      onChange={handleCardChange}
    />
  );
}

Supported Co-Badge Networks

Network	Identifier	Description
Cartes Bancaires	cartes-bancaires	French domestic payment scheme, often co-badged with Visa or Mastercard
Bancontact	bancontact	Belgian domestic payment scheme, often co-badged with Mastercard
Dankort	dankort	Danish domestic payment scheme, often co-badged with Visa

Adding unsupported networks will result in an error. Additional co-badge networks may be supported in future releases.

Pre-Selected Networks

You can use the preSelectedNetworks property to automatically select a preferred network when a co-badged card is detected. This is useful when you have a preferred domestic network for processing payments.

Web Elements

// Create a Card Element with pre-selected network preference
const cardElement = bt.createElement('card', {
  targetId: 'my-card',
  coBadgedSupport: ['cartes-bancaires', 'bancontact', 'dankort'],
  preSelectedNetworks: ['cartes-bancaires', 'bancontact'],
  onChange: (event) => {
    if (event.selectedNetwork) {
      console.log('Selected network:', event.selectedNetwork);
    }
  }
});

cardElement.mount('#card-container');

React Elements

import { CardElement } from "@basis-theory/react-elements";

function PaymentForm() {
  const handleCardChange = (event) => {
    if (event.selectedNetwork) {
      console.log('Selected network:', event.selectedNetwork);
    }
  };

  return (
    <CardElement
      id="my-card"
      coBadgedSupport={['cartes-bancaires', 'bancontact', 'dankort']}
      preSelectedNetworks={['cartes-bancaires', 'bancontact']}
      onChange={handleCardChange}
    />
  );
}

When preSelectedNetworks is provided:

• The first network from the list that matches an available co-badged option is automatically selected
• Users can still manually change the selection after auto-selection
• If no networks in preSelectedNetworks match the available options, no auto-selection occurs

Co-Badge Events

When co-badge support is enabled, the Card Element emits additional event data that allows your application to respond to network selection changes.

Change Event with Co-Badge Data

The change event includes a selectedNetwork property when co-badge support is enabled and a user selects a network:

{
  cardBin: "123456",
  cardBrand: "visa",
  cardLast4: "1234",
  complete: true,
  empty: false,
  errors: [],
  maskSatisfied: true,
  valid: true,
  binInfo: { /* BIN information */ },
  selectedNetwork: "cartes-bancaires"  // The user's selected network
}

API Reference

coBadgedSupport Property

Property	Type	Required	Default	Description
coBadgedSupport	array	No	[]	Array of supported co-badge networks

Supported Values:

• 'cartes-bancaires' - French Cartes Bancaires network
• 'bancontact' - Belgian Bancontact network
• 'dankort' - Danish Dankort network

preSelectedNetworks Property

Property	Type	Required	Default	Description
preSelectedNetworks	array	No	undefined	Ordered array of preferred networks for auto-selection

Supported Values: Any valid card brand identifier, including:

• 'cartes-bancaires' - French Cartes Bancaires network
• 'bancontact' - Belgian Bancontact network
• 'dankort' - Danish Dankort network
• 'visa' - Visa network
• 'mastercard' - Mastercard network

selectedNetwork Event Property

Property	Type	Description
selectedNetwork	string	The network selected by the user for co-badged cards

Possible Values:

• 'cartes-bancaires' - When user selects Cartes Bancaires network
• 'bancontact' - When user selects Bancontact network
• 'dankort' - When user selects Dankort network
• 'visa' - When user selects Visa network (for co-badged cards)
• 'mastercard' - When user selects Mastercard network (for co-badged cards)

The selectedNetwork property is only present in change events when co-badge support is enabled and a user has made a network selection.

Test Cards

Within a Test Tenant, the following test cards can be used to test different scenarios when using co-badged features.

These cards are not valid for real transactions and should only be used in a Test Tenant.

Cartes Bancaires

Test PAN	International Scheme	Domestic Network	Supported Countries
4000000022222220	Visa	Cartes Bancaires	France
5555550099999999	Mastercard	Cartes Bancaires	France

Bancontact

Test PAN	International Scheme	Domestic Network	Supported Countries
5550009900000005	Mastercard	Bancontact	Belgium

Dankort

Test PAN	International Scheme	Domestic Network	Supported Countries
4571009900000003	Visa	Dankort	Denmark