initial

lib/recurly/element/card-brand.js

@@ -0,0 +1,10 @@
+import Element from './element';
+
+export function factory (options) {
+  return new CardBrandElement({ ...options, inputType: 'select', elements: this });
+}
+
+export class CardBrandElement extends Element {
+  static type = 'brand';
+  static elementClassName = 'CardBrandElement';
+}

lib/recurly/element/element.js

@@ -6,6 +6,7 @@ import pick from 'lodash.pick';
 import slug from 'to-slug-case';
 import tabbable from 'tabbable';
 import uid from '../../util/uid';
+// import { CardBrandElement } from './card-brand';
 
 const bowser = require('bowser');
 const debug = require('debug')('recurly:element');
@@ -65,6 +66,7 @@ export default class Element extends Emitter {
     this.on(this.messageName('tab:previous'), () => this.onTab('previous'));
     this.on(this.messageName('tab:next'), () => this.onTab('next'));
     this.on(this.messageName('submit'), () => this.onSubmit());
+    this.on(this.messageName('coBrands:ready'), (...args) => this.initiateCoBrand(...args));
     this.on('destroy', (...args) => this.destroy(...args));
     debug('create', this.id);
   }
@@ -167,6 +169,7 @@ export default class Element extends Emitter {
    */
   get url () {
     const config = encodeURIComponent(JSON.stringify(this.config));
+
     return this.recurly.url(`/field.html#config=${config}`);
   }
 
@@ -405,6 +408,11 @@ export default class Element extends Emitter {
     debug('submit', this.id);
     this.emit('submit', this);
   }
+
+  initiateCoBrand (body) {
+    console.log(body);
+    // this.element.add(new CardBrandElement({ options: this, inputType: 'select', elements: this }));
+  }
 }
 
 /**

lib/recurly/elements.js

@@ -4,6 +4,7 @@ import Emitter from 'component-emitter';
 import errors from './errors';
 import { factory as cardElementFactory, CardElement } from './element/card';
 import { factory as cardNumberElementFactory, CardNumberElement } from './element/card-number';
+import { factory as cardBrandElementFactory, CardBrandElement } from './element/card-brand';
 import { factory as cardMonthElementFactory, CardMonthElement } from './element/card-month';
 import { factory as cardYearElementFactory, CardYearElement } from './element/card-year';
 import { factory as cardCvvElementFactory, CardCvvElement } from './element/card-cvv';
@@ -27,12 +28,13 @@ export default class Elements extends Emitter {
   CardElement = cardElementFactory;
   CardNumberElement = cardNumberElementFactory;
   CardMonthElement = cardMonthElementFactory;
+  CardBrandElement = cardBrandElementFactory;
   CardYearElement = cardYearElementFactory;
   CardCvvElement = cardCvvElementFactory;
 
   static VALID_SETS = [
-    [ CardElement ],
-    [ CardNumberElement, CardMonthElement, CardYearElement, CardCvvElement ]
+    [ CardElement, CardBrandElement ],
+    [ CardNumberElement, CardBrandElement, CardMonthElement, CardYearElement, CardCvvElement ]
   ];
 
   constructor ({ recurly }) {