Content

Co-Badged Cards

This guide is intended to help you understand how to handle presenting co-badged cards correctly to your customers using Recurly.js Elements.

The integrator must have a functioning implementation of Recurly.js for cards in place in order to effectively use this guide. See Recurly.js documentation to get started.

For more information on co-badged card compliance, see our Recurly Docs.

Step 1: Listen for coBadge event

Set up a listener for the coBadge event. For more information on handling events, see our Recurly.js documentation.

const elements = recurly.Elements();
const cardElement = elements.CardElement();

cardElement.on('coBadge', handleCoBadgeEvent);

function handleCoBadgeEvent () {
  // handle event
}

Step 2: Handle the payload returned with the coBadge event

The coBadge event payload will include the following fields:

Field name	Type	Description
coBadgeSupport	`Boolean`	Indicates whether or not a given card has co-badged options available.
supportedBrands	`Array`	List of brands available for customer selection. Will be empty if `coBadgeSupport` is false. Possible values: `visa`, `mastercard`, `cartes_bancaires`.

Step 3: Display selection to customer

Utilize the choices within the supportedBrands array to present a selection UI element, allowing customers to pick a single option; this may involve employing radio buttons, a dropdown menu, or a two-option toggle.

Use the data-recurly attribute to identify the selection UI element to Recurly.js with a value of card_network_preference

<div id="co-badge-div">
  <input type="radio" value="brand1" id="co-badge-id-0" name="co-badge" data-recurly="card_network_preference">
  <label id="co-badge-label-0" for="co-badge-id-0">brand1</label>
  <input type="radio" value="brand2" id="co-badge-id-1" name="co-badge" data-recurly="card_network_preference">
  <label id="co-badge-label-1" for="co-badge-id-1">brand2</label>
</div>

Special care should be taken to validate that your customer has made a selection before proceeding.

Step 4: Tokenize the payment information

Follow the Getting a Token documentation to tokenize your customer’s payment information.