react-braintree-fields - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

demo.jsx

@@ -15,2 +15,3 @@ import { render } from 'react-dom';
             'onCardTypeChange',
+            'onAuthorizationSuccess',
         ].forEach(prop => (this[prop] = this[prop].bind(this)));
@@ -36,5 +37,5 @@ }
           const [card] = cards;
-          
+
           this.setState({ card: card.type });
-          
+
           if (card.code && card.code.name) {
@@ -69,3 +70,3 @@ this.cvvField.setPlaceholder(card.code.name);
     }
-  
+
     onAuthorizationSuccess() {
@@ -106,3 +107,4 @@ this.numberField.focus();
                             className={this.state.numberFocused ? 'focused' : ''}
-                            ref={numberField => { this.numberField = numberField; }} />
+                            prefill="4111 1111 1111 1111"
+                            ref={numberField => { this.numberField = numberField; }}
                         />
@@ -109,0 +111,0 @@ <p>Card type: {this.state.card}</p>

dist/build.full.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('braintree-web/client'), require('braintree-web/hosted-fields'), require('braintree-web/data-collector')) :
-	typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'braintree-web/client', 'braintree-web/hosted-fields', 'braintree-web/data-collector'], factory) :
-	(factory((global['react-braintree-fields'] = {}),global.React,global.PropTypes,global.Braintree,global.HostedFields,global.BraintreeDataCollector));
-}(this, (function (exports,React,PropTypes,Braintree,HostedFields,BraintreeDataCollector) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('braintree-web/client'), require('braintree-web/hosted-fields'), require('braintree-web/data-collector'), require('react'), require('prop-types')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'braintree-web/client', 'braintree-web/hosted-fields', 'braintree-web/data-collector', 'react', 'prop-types'], factory) :
+  (factory((global['react-braintree-fields'] = {}),global.Braintree,global.BraintreeHostedFields,global.BraintreeDataCollector,global.React,global.PropTypes));
+}(this, (function (exports,Braintree,HostedFields,BraintreeDataCollector,React,PropTypes) { 'use strict';
 
-React = React && React.hasOwnProperty('default') ? React['default'] : React;
-PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
-Braintree = Braintree && Braintree.hasOwnProperty('default') ? Braintree['default'] : Braintree;
-HostedFields = HostedFields && HostedFields.hasOwnProperty('default') ? HostedFields['default'] : HostedFields;
-BraintreeDataCollector = BraintreeDataCollector && BraintreeDataCollector.hasOwnProperty('default') ? BraintreeDataCollector['default'] : BraintreeDataCollector;
+  Braintree = Braintree && Braintree.hasOwnProperty('default') ? Braintree['default'] : Braintree;
+  HostedFields = HostedFields && HostedFields.hasOwnProperty('default') ? HostedFields['default'] : HostedFields;
+  BraintreeDataCollector = BraintreeDataCollector && BraintreeDataCollector.hasOwnProperty('default') ? BraintreeDataCollector['default'] : BraintreeDataCollector;
+  React = React && React.hasOwnProperty('default') ? React['default'] : React;
+  PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
+  var classCallCheck = function (instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
     }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
   };
-}();
 
+  var createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
 
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
 
+  var inherits = function (subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
 
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  };
 
+  var objectWithoutProperties = function (obj, keys) {
+    var target = {};
 
+    for (var i in obj) {
+      if (keys.indexOf(i) >= 0) continue;
+      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+      target[i] = obj[i];
+    }
 
+    return target;
+  };
 
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
+  var possibleConstructorReturn = function (self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
 
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  };
 
-
-
-
-
-
-
-
-var objectWithoutProperties = function (obj, keys) {
-  var target = {};
-
-  for (var i in obj) {
-    if (keys.indexOf(i) >= 0) continue;
-    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
-    target[i] = obj[i];
+  function cap(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
   }
 
-  return target;
-};
+  var BraintreeClientApi = function () {
+      function BraintreeClientApi(_ref) {
+          var authorization = _ref.authorization,
+              styles = _ref.styles,
+              onAuthorizationSuccess = _ref.onAuthorizationSuccess,
+              callbacks = objectWithoutProperties(_ref, ['authorization', 'styles', 'onAuthorizationSuccess']);
+          classCallCheck(this, BraintreeClientApi);
+          this.fields = {};
+          this._nextFieldId = 1;
+          this.fieldHandlers = {};
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+          this.styles = styles || {};
+          this.wrapperHandlers = callbacks || {};
+          this.setAuthorization(authorization, onAuthorizationSuccess);
+      }
 
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
+      createClass(BraintreeClientApi, [{
+          key: 'setAuthorization',
+          value: function setAuthorization(authorization, onAuthorizationSuccess) {
+              var _this = this;
 
-function cap(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
+              if (!authorization && this.authorization) {
+                  this.teardown();
+              } else if (authorization && authorization !== this.authorization) {
+                  if (this.authorization) {
+                      this.teardown();
+                  }
+                  this.authorization = authorization;
+                  Braintree.create({ authorization: authorization }, function (err, clientInstance) {
+                      if (err) {
+                          _this.onError(err);
+                      } else {
+                          _this.create(clientInstance, onAuthorizationSuccess);
 
-var BraintreeClientApi = function () {
-    function BraintreeClientApi(_ref) {
-        var authorization = _ref.authorization,
-            styles = _ref.styles,
-            onAuthorizationSuccess = _ref.onAuthorizationSuccess,
-            callbacks = objectWithoutProperties(_ref, ['authorization', 'styles', 'onAuthorizationSuccess']);
-        classCallCheck(this, BraintreeClientApi);
-        this.fields = {};
-        this._nextFieldId = 1;
-        this.fieldHandlers = {};
+                          if (_this.wrapperHandlers.onDataCollectorInstanceReady) {
+                              BraintreeDataCollector.create({
+                                  client: clientInstance,
+                                  kount: true
+                              }, _this.wrapperHandlers.onDataCollectorInstanceReady);
+                          }
+                      }
+                  });
+              }
+          }
+      }, {
+          key: 'nextFieldId',
+          value: function nextFieldId() {
+              this._nextFieldId += 1;
+              return this._nextFieldId;
+          }
+      }, {
+          key: 'onError',
+          value: function onError(err) {
+              if (!err) {
+                  return;
+              }
+              if (this.wrapperHandlers.onError) {
+                  this.wrapperHandlers.onError(err);
+              }
+          }
+      }, {
+          key: 'create',
+          value: function create(client, onAuthorizationSuccess) {
+              var _this2 = this;
 
-        this.styles = styles || {};
-        this.wrapperHandlers = callbacks || {};
-        this.setAuthorization(authorization, onAuthorizationSuccess);
-    }
+              HostedFields.create({
+                  client: client,
+                  styles: this.styles,
+                  fields: this.fields
+              }, function (err, hostedFields) {
+                  if (err) {
+                      _this2.onError(err);
+                      return;
+                  }
+                  _this2.hostedFields = hostedFields;
+                  ['blur', 'focus', 'empty', 'notEmpty', 'cardTypeChange', 'validityChange'].forEach(function (eventName) {
+                      hostedFields.on(eventName, function (ev) {
+                          return _this2.onFieldEvent('on' + cap(eventName), ev);
+                      });
+                  });
+                  _this2.onError(err);
 
-    createClass(BraintreeClientApi, [{
-        key: 'setAuthorization',
-        value: function setAuthorization(authorization, onAuthorizationSuccess) {
-            var _this = this;
+                  if (onAuthorizationSuccess) {
+                      onAuthorizationSuccess();
+                  }
+              });
+          }
+      }, {
+          key: 'teardown',
+          value: function teardown() {
+              if (this.hostedFields) {
+                  this.hostedFields.teardown();
+              }
+          }
+      }, {
+          key: 'checkInField',
+          value: function checkInField(_ref2) {
+              var formatInput = _ref2.formatInput,
+                  maxlength = _ref2.maxlength,
+                  minlength = _ref2.minlength,
+                  placeholder = _ref2.placeholder,
+                  select = _ref2.select,
+                  type = _ref2.type,
+                  prefill = _ref2.prefill,
+                  handlers = objectWithoutProperties(_ref2, ['formatInput', 'maxlength', 'minlength', 'placeholder', 'select', 'type', 'prefill']);
 
-            if (!authorization && this.authorization) {
-                this.teardown();
-            } else if (authorization && authorization !== this.authorization) {
-                if (this.authorization) {
-                    this.teardown();
-                }
-                this.authorization = authorization;
-                Braintree.create({ authorization: authorization }, function (err, clientInstance) {
-                    if (err) {
-                        _this.onError(err);
-                    } else {
-                        _this.create(clientInstance, onAuthorizationSuccess);
+              var id = 'field-wrapper-' + this.nextFieldId();
+              this.fieldHandlers[type] = handlers;
+              this.fields[type] = {
+                  formatInput: formatInput,
+                  maxlength: maxlength,
+                  minlength: minlength,
+                  placeholder: placeholder,
+                  select: select,
+                  prefill: prefill,
+                  selector: '#' + id
+              };
+              return id;
+          }
+      }, {
+          key: 'focusField',
+          value: function focusField(fieldType, cb) {
+              this.hostedFields.focus(fieldType, cb);
+          }
+      }, {
+          key: 'clearField',
+          value: function clearField(fieldType, cb) {
+              this.hostedFields.clear(fieldType, cb);
+          }
+      }, {
+          key: 'setAttribute',
+          value: function setAttribute(fieldType, name, value) {
+              this.hostedFields.setAttribute({
+                  field: fieldType,
+                  attribute: name,
+                  value: value
+              });
+          }
+      }, {
+          key: 'onFieldEvent',
+          value: function onFieldEvent(eventName, event) {
+              var fieldHandlers = this.fieldHandlers[event.emittedBy];
+              if (fieldHandlers && fieldHandlers[eventName]) {
+                  fieldHandlers[eventName](event.fields[event.emittedBy], event);
+              }
+              if (this.wrapperHandlers[eventName]) {
+                  this.wrapperHandlers[eventName](event);
+              }
+          }
+      }, {
+          key: 'tokenize',
+          value: function tokenize() {
+              var _this3 = this;
 
-                        if (_this.wrapperHandlers.onDataCollectorInstanceReady) {
-                            BraintreeDataCollector.create({
-                                client: clientInstance,
-                                kount: true
-                            }, _this.wrapperHandlers.onDataCollectorInstanceReady);
-                        }
-                    }
-                });
-            }
-        }
-    }, {
-        key: 'nextFieldId',
-        value: function nextFieldId() {
-            this._nextFieldId += 1;
-            return this._nextFieldId;
-        }
-    }, {
-        key: 'onError',
-        value: function onError(err) {
-            if (!err) {
-                return;
-            }
-            if (this.wrapperHandlers.onError) {
-                this.wrapperHandlers.onError(err);
-            }
-        }
-    }, {
-        key: 'create',
-        value: function create(client, onAuthorizationSuccess) {
-            var _this2 = this;
+              var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-            HostedFields.create({
-                client: client,
-                styles: this.styles,
-                fields: this.fields
-            }, function (err, hostedFields) {
-                if (err) {
-                    _this2.onError(err);
-                    return;
-                }
-                _this2.hostedFields = hostedFields;
-                ['blur', 'focus', 'empty', 'notEmpty', 'cardTypeChange', 'validityChange'].forEach(function (eventName) {
-                    hostedFields.on(eventName, function (ev) {
-                        return _this2.onFieldEvent('on' + cap(eventName), ev);
-                    });
-                });
-                _this2.onError(err);
+              return new Promise(function (resolve, reject) {
+                  _this3.hostedFields.tokenize(options, function (err, payload) {
+                      if (err) {
+                          _this3.onError(err);
+                          reject(err);
+                      } else {
+                          resolve(payload);
+                      }
+                  });
+              });
+          }
+      }]);
+      return BraintreeClientApi;
+  }();
 
-                if (onAuthorizationSuccess) {
-                    onAuthorizationSuccess();
-                }
-            });
-        }
-    }, {
-        key: 'teardown',
-        value: function teardown() {
-            if (this.hostedFields) {
-                this.hostedFields.teardown();
-            }
-        }
-    }, {
-        key: 'checkInField',
-        value: function checkInField(_ref2) {
-            var formatInput = _ref2.formatInput,
-                maxlength = _ref2.maxlength,
-                minlength = _ref2.minlength,
-                placeholder = _ref2.placeholder,
-                select = _ref2.select,
-                type = _ref2.type,
-                handlers = objectWithoutProperties(_ref2, ['formatInput', 'maxlength', 'minlength', 'placeholder', 'select', 'type']);
+  var _class, _temp;
 
-            var id = 'field-wrapper-' + this.nextFieldId();
-            this.fieldHandlers[type] = handlers;
-            this.fields[type] = {
-                formatInput: formatInput,
-                maxlength: maxlength,
-                minlength: minlength,
-                placeholder: placeholder,
-                select: select,
-                selector: '#' + id
-            };
-            return id;
-        }
-    }, {
-        key: 'focusField',
-        value: function focusField(fieldType, cb) {
-            this.hostedFields.focus(fieldType, cb);
-        }
-    }, {
-        key: 'clearField',
-        value: function clearField(fieldType, cb) {
-            this.hostedFields.clear(fieldType, cb);
-        }
-    }, {
-        key: 'setAttribute',
-        value: function setAttribute(fieldType, name, value) {
-            this.hostedFields.setAttribute({
-                field: fieldType,
-                attribute: name,
-                value: value
-            });
-        }
-    }, {
-        key: 'onFieldEvent',
-        value: function onFieldEvent(eventName, event) {
-            var fieldHandlers = this.fieldHandlers[event.emittedBy];
-            if (fieldHandlers && fieldHandlers[eventName]) {
-                fieldHandlers[eventName](event.fields[event.emittedBy], event);
-            }
-            if (this.wrapperHandlers[eventName]) {
-                this.wrapperHandlers[eventName](event);
-            }
-        }
-    }, {
-        key: 'tokenize',
-        value: function tokenize() {
-            var _this3 = this;
+  var Braintree$1 = (_temp = _class = function (_React$Component) {
+      inherits(Braintree$$1, _React$Component);
 
-            var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      function Braintree$$1(props) {
+          classCallCheck(this, Braintree$$1);
 
-            return new Promise(function (resolve, reject) {
-                _this3.hostedFields.tokenize(options, function (err, payload) {
-                    if (err) {
-                        _this3.onError(err);
-                        reject(err);
-                    } else {
-                        resolve(payload);
-                    }
-                });
-            });
-        }
-    }]);
-    return BraintreeClientApi;
-}();
+          var _this = possibleConstructorReturn(this, (Braintree$$1.__proto__ || Object.getPrototypeOf(Braintree$$1)).call(this, props));
 
-var _class;
-var _temp;
+          _this.api = new BraintreeClientApi(props);
+          return _this;
+      }
 
-var Braintree$1 = (_temp = _class = function (_React$Component) {
-    inherits(Braintree$$1, _React$Component);
+      createClass(Braintree$$1, [{
+          key: 'componentDidMount',
+          value: function componentDidMount() {
+              this.api.setAuthorization(this.props.authorization, this.props.onAuthorizationSuccess);
+              if (this.props.getTokenRef) {
+                  this.props.getTokenRef(this.api.tokenize.bind(this.api));
+              }
+          }
+      }, {
+          key: 'componentWillUnmount',
+          value: function componentWillUnmount() {
+              this.api.teardown();
+          }
+      }, {
+          key: 'componentWillReceiveProps',
+          value: function componentWillReceiveProps(nextProps) {
+              this.api.setAuthorization(nextProps.authorization, this.props.onAuthorizationSuccess);
+          }
+      }, {
+          key: 'tokenize',
+          value: function tokenize(options) {
+              return this.api.tokenize(options);
+          }
+      }, {
+          key: 'getChildContext',
+          value: function getChildContext() {
+              return { braintreeApi: this.api };
+          }
+      }, {
+          key: 'render',
+          value: function render() {
+              var _props = this.props,
+                  providedClass = _props.className,
+                  Tag = _props.tagName;
 
-    function Braintree$$1(props) {
-        classCallCheck(this, Braintree$$1);
+              var className = 'braintree-hosted-fields-wrapper';
+              if (providedClass) {
+                  className += ' ' + providedClass;
+              }
+              return React.createElement(
+                  Tag,
+                  { className: className },
+                  this.props.children
+              );
+          }
+      }]);
+      return Braintree$$1;
+  }(React.Component), _class.propTypes = {
+      children: PropTypes.node.isRequired,
+      onAuthorizationSuccess: PropTypes.func,
+      authorization: PropTypes.string,
+      getTokenRef: PropTypes.func,
+      onValidityChange: PropTypes.func,
+      onCardTypeChange: PropTypes.func,
+      onError: PropTypes.func,
+      styles: PropTypes.object,
+      className: PropTypes.string,
+      tagName: PropTypes.string
+  }, _class.defaultProps = {
+      tagName: 'div'
+  }, _class.childContextTypes = {
+      braintreeApi: PropTypes.instanceOf(BraintreeClientApi)
+  }, _temp);
 
-        var _this = possibleConstructorReturn(this, (Braintree$$1.__proto__ || Object.getPrototypeOf(Braintree$$1)).call(this, props));
+  var _class$1, _temp$1;
 
-        _this.api = new BraintreeClientApi(props);
-        return _this;
-    }
+  var BraintreeHostedField = (_temp$1 = _class$1 = function (_React$Component) {
+      inherits(BraintreeHostedField, _React$Component);
 
-    createClass(Braintree$$1, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-            this.api.setAuthorization(this.props.authorization, this.props.onAuthorizationSuccess);
-            if (this.props.getTokenRef) {
-                this.props.getTokenRef(this.api.tokenize.bind(this.api));
-            }
-        }
-    }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-            this.api.teardown();
-        }
-    }, {
-        key: 'componentWillReceiveProps',
-        value: function componentWillReceiveProps(nextProps) {
-            this.api.setAuthorization(nextProps.authorization, this.props.onAuthorizationSuccess);
-        }
-    }, {
-        key: 'tokenize',
-        value: function tokenize(options) {
-            return this.api.tokenize(options);
-        }
-    }, {
-        key: 'getChildContext',
-        value: function getChildContext() {
-            return { braintreeApi: this.api };
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                providedClass = _props.className,
-                Tag = _props.tagName;
+      function BraintreeHostedField() {
+          classCallCheck(this, BraintreeHostedField);
+          return possibleConstructorReturn(this, (BraintreeHostedField.__proto__ || Object.getPrototypeOf(BraintreeHostedField)).apply(this, arguments));
+      }
 
-            var className = 'braintree-hosted-fields-wrapper';
-            if (providedClass) {
-                className += ' ' + providedClass;
-            }
-            return React.createElement(
-                Tag,
-                { className: className },
-                this.props.children
-            );
-        }
-    }]);
-    return Braintree$$1;
-}(React.Component), _class.propTypes = {
-    children: PropTypes.node.isRequired,
-    onAuthorizationSuccess: PropTypes.func,
-    authorization: PropTypes.string,
-    getTokenRef: PropTypes.func,
-    onValidityChange: PropTypes.func,
-    onCardTypeChange: PropTypes.func,
-    onError: PropTypes.func,
-    styles: PropTypes.object,
-    className: PropTypes.string,
-    tagName: PropTypes.string
-}, _class.defaultProps = {
-    tagName: 'div'
-}, _class.childContextTypes = {
-    braintreeApi: PropTypes.instanceOf(BraintreeClientApi)
-}, _temp);
+      createClass(BraintreeHostedField, [{
+          key: 'focus',
+          value: function focus() {
+              this.context.braintreeApi.focusField(this.props.type);
+          }
+      }, {
+          key: 'clear',
+          value: function clear() {
+              this.context.braintreeApi.clearField(this.props.type);
+          }
+      }, {
+          key: 'setPlaceholder',
+          value: function setPlaceholder(text) {
+              this.context.braintreeApi.setAttribute(this.props.type, 'placeholder', text);
+          }
+      }, {
+          key: 'componentWillMount',
+          value: function componentWillMount() {
+              this.fieldId = this.context.braintreeApi.checkInField(this.props);
+          }
+      }, {
+          key: 'render',
+          value: function render() {
+              return React.createElement('div', { id: this.fieldId, className: this.className });
+          }
+      }, {
+          key: 'className',
+          get: function get$$1() {
+              var list = ['braintree-hosted-field'];
+              if (this.props.className) {
+                  list.push(this.props.className);
+              }
+              return list.join(' ');
+          }
+      }]);
+      return BraintreeHostedField;
+  }(React.Component), _class$1.propTypes = {
+      type: PropTypes.oneOf(['number', 'expirationDate', 'expirationMonth', 'expirationYear', 'cvv', 'postalCode']).isRequired,
+      placeholder: PropTypes.string,
+      className: PropTypes.string,
+      onCardTypeChange: PropTypes.func,
+      onValidityChange: PropTypes.func,
+      onNotEmpty: PropTypes.func,
+      onFocus: PropTypes.func,
+      onEmpty: PropTypes.func,
+      onBlur: PropTypes.func,
+      prefill: PropTypes.string
+  }, _class$1.contextTypes = {
+      braintreeApi: PropTypes.instanceOf(BraintreeClientApi)
+  }, _temp$1);
 
-var _class$1;
-var _temp$1;
+  exports.Braintree = Braintree$1;
+  exports.HostedField = BraintreeHostedField;
 
-var BraintreeHostedField = (_temp$1 = _class$1 = function (_React$Component) {
-    inherits(BraintreeHostedField, _React$Component);
+  Object.defineProperty(exports, '__esModule', { value: true });
 
-    function BraintreeHostedField() {
-        classCallCheck(this, BraintreeHostedField);
-        return possibleConstructorReturn(this, (BraintreeHostedField.__proto__ || Object.getPrototypeOf(BraintreeHostedField)).apply(this, arguments));
-    }
-
-    createClass(BraintreeHostedField, [{
-        key: 'focus',
-        value: function focus() {
-            this.context.braintreeApi.focusField(this.props.type);
-        }
-    }, {
-        key: 'clear',
-        value: function clear() {
-            this.context.braintreeApi.clearField(this.props.type);
-        }
-    }, {
-        key: 'setPlaceholder',
-        value: function setPlaceholder(text) {
-            this.context.braintreeApi.setAttribute(this.props.type, 'placeholder', text);
-        }
-    }, {
-        key: 'componentWillMount',
-        value: function componentWillMount() {
-            this.fieldId = this.context.braintreeApi.checkInField(this.props);
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            return React.createElement('div', { id: this.fieldId, className: this.className });
-        }
-    }, {
-        key: 'className',
-        get: function get$$1() {
-            var list = ['braintree-hosted-field'];
-            if (this.props.className) {
-                list.push(this.props.className);
-            }
-            return list.join(' ');
-        }
-    }]);
-    return BraintreeHostedField;
-}(React.Component), _class$1.propTypes = {
-    type: PropTypes.oneOf(['number', 'expirationDate', 'expirationMonth', 'expirationYear', 'cvv', 'postalCode']).isRequired,
-    placeholder: PropTypes.string,
-    className: PropTypes.string,
-    onCardTypeChange: PropTypes.func,
-    onValidityChange: PropTypes.func,
-    onNotEmpty: PropTypes.func,
-    onFocus: PropTypes.func,
-    onEmpty: PropTypes.func,
-    onBlur: PropTypes.func
-}, _class$1.contextTypes = {
-    braintreeApi: PropTypes.instanceOf(BraintreeClientApi)
-}, _temp$1);
-
-exports.Braintree = Braintree$1;
-exports.HostedField = BraintreeHostedField;
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 })));
-//# sourceMappingURL=build.full.js.map

dist/build.module.js

@@ -1,6 +0,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import Braintree from 'braintree-web/client';
 import HostedFields from 'braintree-web/hosted-fields';
 import BraintreeDataCollector from 'braintree-web/data-collector';
+import React from 'react';
+import PropTypes from 'prop-types';
 
@@ -31,10 +31,2 @@ var classCallCheck = function (instance, Constructor) {
 
-
-
-
-
-
-
-
-
 var inherits = function (subClass, superClass) {
@@ -56,10 +48,2 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-
-
-
-
-
-
-
-
 var objectWithoutProperties = function (obj, keys) {
@@ -192,3 +176,4 @@ var target = {};
                 type = _ref2.type,
-                handlers = objectWithoutProperties(_ref2, ['formatInput', 'maxlength', 'minlength', 'placeholder', 'select', 'type']);
+                prefill = _ref2.prefill,
+                handlers = objectWithoutProperties(_ref2, ['formatInput', 'maxlength', 'minlength', 'placeholder', 'select', 'type', 'prefill']);
 
@@ -203,2 +188,3 @@ var id = 'field-wrapper-' + this.nextFieldId();
                 select: select,
+                prefill: prefill,
                 selector: '#' + id
@@ -260,4 +246,3 @@ };
 
-var _class;
-var _temp;
+var _class, _temp;
 
@@ -340,4 +325,3 @@ var Braintree$1 = (_temp = _class = function (_React$Component) {
 
-var _class$1;
-var _temp$1;
+var _class$1, _temp$1;
 
@@ -397,3 +381,4 @@ var BraintreeHostedField = (_temp$1 = _class$1 = function (_React$Component) {
     onEmpty: PropTypes.func,
-    onBlur: PropTypes.func
+    onBlur: PropTypes.func,
+    prefill: PropTypes.string
 }, _class$1.contextTypes = {
@@ -404,2 +389,1 @@ braintreeApi: PropTypes.instanceOf(BraintreeClientApi)
 export { Braintree$1 as Braintree, BraintreeHostedField as HostedField };
-//# sourceMappingURL=build.module.js.map

package.json

 {
   "name": "react-braintree-fields",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React component for braintree hosted fields",
+  "browser": "dist/build.full.js",
   "main": "dist/build.full.js",
@@ -28,5 +29,5 @@ "module": "dist/build.module.js",
     "babel": "^6.23.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.1.1",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
+    "babel-loader": "^7.1.4",
     "babel-plugin-external-helpers": "^6.22.0",
@@ -43,21 +44,22 @@ "babel-plugin-transform-class-properties": "^6.24.1",
     "babelrc-rollup": "^3.0.0",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16": "^1.0.2",
-    "eslint": "^4.4.1",
-    "eslint-config-argosity": "^1.2.0",
-    "eslint-plugin-react": "^7.4.0",
-    "jest": "^20.0.4",
-    "jest-cli": "^20.0.4",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.19.1",
+    "eslint-config-argosity": "^1.6.0",
+    "eslint-plugin-react": "^7.7.0",
+    "jest": "^22.4.3",
+    "jest-cli": "^22.4.3",
     "prop-types": "^15.6",
     "raf": "^3.4.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
-    "rollup": "^0.47.6",
-    "rollup-plugin-babel": "^3.0.2",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.7.1"
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-test-renderer": "^16.3.2",
+    "rollup": "^0.58.2",
+    "rollup-plugin-babel": "^3.0.4",
+    "webpack": "^4.8.2",
+    "webpack-cli": "^2.1.3",
+    "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {
-    "braintree-web": "^3.26.0"
+    "braintree-web": "^3.33.0"
   },
@@ -64,0 +66,0 @@ "jest": {

README.md

@@ -21,2 +21,3 @@ # React components to integrate Braintree hosted fields
          console.log("nonce=" , payload.nonce)
+         console.log("device_data", this.device_data)
        })
@@ -41,2 +42,6 @@ }
     }
+    
+    onDataCollectorInstanceReady(err, dataCollectorInstance) {
+      if(!err) this.device_data = dataCollectorInstance.deviceData
+    }
 
@@ -49,2 +54,3 @@ render() {
                 onAuthorizationSuccess={this.onAuthorizationSuccess}
+                onDataCollectorInstanceReady={this.onDataCollectorInstanceReady}
                 onError={this.handleError}
@@ -87,3 +93,3 @@ onCardTypeChange={this.onCardTypeChange}
    * The tokenization function will return a Promise which will be either resolved or rejected.  If resolved, the promise payload will contain an object with the `nonce` and other data from Braintree.
- * onDataCollectorInstanceReady: A function that will be called with the results of `Braintree.dataCollector.create`
+ * onDataCollectorInstanceReady: A function that will be called with the results of `Braintree.dataCollector.create`. This can be used in conjunction with [Braintree's Advanced Fraud Tools](https://developers.braintreepayments.com/guides/advanced-fraud-tools/client-side/javascript/v3).
 
@@ -106,5 +112,6 @@ ## HostedField Component
   * select
+  * prefill
 
-See the [Braintree api docs](https://braintree.github.io/braintree-web/3.19.0/module-braintree-web_hosted-fields.html#%7Efield) for more details
+See the [Braintree api docs](https://braintree.github.io/braintree-web/3.33.0/module-braintree-web_hosted-fields.html#%7Efield) for more details
 
 Fields also have "focus" and "clear" methods.  These may be called by obtaining a reference to the field.

rollup.config.js

@@ -5,36 +5,51 @@ import babel from 'rollup-plugin-babel';
 
-export default {
-    entry: 'src/index.js',
-    plugins: [
-        babel({
-            babelrc: true,
-            exclude: 'node_modules/**',
-            presets: [['es2015', { modules: false }], 'react', 'es2015-rollup'],
-            plugins: [
-                'transform-decorators-legacy',
-                'transform-class-properties',
-                'transform-object-rest-spread',
-            ],
-        }),
-    ],
-    globals: {
-        react: 'React',
-        invariant: 'invariant',
-        'prop-types': 'PropTypes',
-        'braintree-web/client': 'Braintree',
-        'braintree-web/hosted-fields': 'HostedFields',
-    },
-    external: ['react', 'prop-types', 'braintree-web/client', 'braintree-web/hosted-fields'],
-    targets: [
-        {
-            dest: pkg.main,
+const external = ['react', 'prop-types', 'braintree-web/data-collector', 'braintree-web/client', 'braintree-web/hosted-fields'];
+
+const plugins = [
+    babel({
+        babelrc: true,
+        exclude: 'node_modules/**',
+        presets: [['es2015', { modules: false }], 'react', 'es2015-rollup'],
+        plugins: [
+            'transform-decorators-legacy',
+            'transform-class-properties',
+            'transform-object-rest-spread',
+        ],
+    }),
+];
+
+const globals = {
+    react: 'React',
+    invariant: 'invariant',
+    'prop-types': 'PropTypes',
+    'braintree-web/client': 'Braintree',
+    'braintree-web/hosted-fields': 'BraintreeHostedFields',
+    'braintree-web/data-collector': 'BraintreeDataCollector',
+};
+
+const input = 'src/index.js';
+
+export default [
+    {
+        input,
+        plugins,
+        external,
+        output: {
             format: 'umd',
-            moduleName: 'react-braintree-fields',
+            name: 'react-braintree-fields',
             sourceMap: true,
-        }, {
-            dest: pkg.module,
+            file: pkg.browser,
+            globals,
+        },
+    }, {
+        input,
+        plugins,
+        external,
+        output: {
             format: 'es',
             sourceMap: true,
+            file: pkg.module,
+            globals,
         },
-    ],
-};
+    },
+];

src/api.js

@@ -88,3 +88,3 @@ import Braintree from 'braintree-web/client';
     checkInField({
-        formatInput, maxlength, minlength, placeholder, select, type, ...handlers
+        formatInput, maxlength, minlength, placeholder, select, type, prefill, ...handlers
     }) {
@@ -99,2 +99,3 @@ const id = `field-wrapper-${this.nextFieldId()}`;
             select,
+            prefill,
             selector: `#${id}`,
@@ -101,0 +102,0 @@ };

src/field.jsx

@@ -19,2 +19,3 @@ import React from 'react';
         onBlur: PropTypes.func,
+        prefill: PropTypes.string,
     }
@@ -21,0 +22,0 @@

webpack.config.js

@@ -5,2 +5,3 @@ const webpack = require('webpack');
 const config = {
+    mode: 'development',
     entry: {
@@ -7,0 +8,0 @@ demo: __dirname + '/demo.jsx',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3700196

increased by2.39%

Lines of code

44634

increased by3.07%

Number of lines in readme file

113

increased by6.6%

Worsened metrics

Dev dependency count

32

increased by3.23%

Dependency changes

• Updatedbraintree-web@^3.33.0