feat: add support for native cobadged cards select

lib/recurly/element/element.js

@@ -25,6 +25,7 @@ export default class Element extends Emitter {
   static FRAME_NAME_PREFIX = 'recurly-element--';
   static INSTANCE_REF_NAME = '__recurlyElement';
   static OPTIONS = [
+    'coBadgeSelector',
     'displayIcon',
     'inputType',
     'style',

lib/recurly/hosted-fields.js

@@ -171,13 +171,14 @@ export class HostedFields extends Emitter {
     const field = fields[type];
     const busGroupId = this.recurly.bus.groupId;
     const { deviceId, sessionId } = this.config;
-    const { displayIcon, inputType, selector } = field;
+    const { coBadgeSelector, displayIcon, inputType, selector } = field;
     if (!fields[type]) return;
     return {
       type,
       deviceId,
       sessionId,
       busGroupId,
+      coBadgeSelector,
       displayIcon,
       inputType,
       selector,

test/types/configure.ts

@@ -24,6 +24,7 @@ export default function configure () {
     format: true,
     inputType: 'text',
     tabIndex: '1',
+    coBadgeSelector: true,
     style: {
       invalid: {
         fontSize: '16px'
@@ -48,6 +49,7 @@ export default function configure () {
         selector: 'my-card-element-selector',
         inputType: 'mobileSelect',
         displayIcon: true,
+        coBadgeSelector: true,
         style: {
           fontSize: '1em',
           placeholder: {

test/types/elements.ts

@@ -3,6 +3,7 @@ export default function elements () {
   const cardElement = elements.CardElement({
     inputType: 'mobileSelect',
     displayIcon: true,
+    coBadgeSelector: true,
     style: {
       fontSize: '1em',
       placeholder: {
@@ -23,6 +24,7 @@ export default function elements () {
     format: true,
     inputType: 'text',
     tabIndex: '1',
+    coBadgeSelector: true,
     style: {
       invalid: {},
       padding: '10px',

test/unit/element.test.js

@@ -17,6 +17,7 @@ describe('Element', function () {
     const recurly = this.recurly = initRecurly();
     const elements = this.elements = new ElementsStub({ recurly });
     const validConfig = this.validConfig = {
+      coBadgeSelector: true,
       displayIcon: true,
       inputType: 'select',
       style: {
@@ -52,6 +53,7 @@ describe('Element', function () {
 
   it('configures the instance', function () {
     const { element, validOptions } = this;
+    assert.strictEqual(element.config.coBadgeSelector, validOptions.coBadgeSelector);
     assert.strictEqual(element.config.displayIcon, validOptions.displayIcon);
     assert.strictEqual(element.config.inputType, validOptions.inputType);
     assert.strictEqual(element.config.tabIndex, validOptions.tabIndex);
@@ -296,6 +298,7 @@ describe('Element', function () {
       element.configure(Object.assign({}, validOptions, {
         invalidOption: 'test'
       }));
+      assert.strictEqual(element.config.coBadgeSelector, validOptions.coBadgeSelector);
       assert.strictEqual(element.config.displayIcon, validOptions.displayIcon);
       assert.strictEqual(element.config.inputType, validOptions.inputType);
       assert.strictEqual(element.config.tabIndex, validOptions.tabIndex);

test/unit/hosted-fields.test.js

@@ -103,6 +103,26 @@ describe('Recurly.HostedFields', function () {
       });
     });
 
+    describe('coBadgeSelector', function () {
+      it('passes through the individual field config value', function () {
+        const { recurly, hostedFields } = this;
+        recurly.configure({
+          fields: {
+            number: { coBadgeSelector: true }
+          }
+        });
+
+        const fieldConfig = hostedFields.fieldConfig('number');
+        assert.strictEqual(fieldConfig.coBadgeSelector, true);
+      });
+
+      it('is undefined when unset', function () {
+        const { hostedFields } = this;
+        const fieldConfig = hostedFields.fieldConfig('number');
+        assert.strictEqual(fieldConfig.coBadgeSelector, undefined);
+      });
+    });
+
     describe('tabIndex', function () {
       it('prefers the general field config value', function () {
         const { recurly, hostedFields } = this;

types/lib/elements.d.ts

@@ -88,6 +88,12 @@ export type CommonElementStyle = {
 };
 
 export type CardElementOptions = {
+  /**
+   * If true, displays cobadged network options next to the primary network,
+   * allowing the customer to select which network to process over.
+   */
+  coBadgeSelector?: boolean;
+
   /**
    * If false, the card brand icon will be hidden
    */
@@ -155,6 +161,12 @@ export type CardElementOptions = {
 };
 
 export type IndividualElementOptions = {
+  /**
+   * If true, displays cobadged network options next to the primary network,
+   * allowing the customer to select which network to process over.
+   */
+  coBadgeSelector?: boolean;
+
   /**
    * Enables contextual input formatting, injecting spaces to match the card brand, and forcing numeric input on expiry
    * and cvv.