react-square-hosted-fields/dist/index.js

a react component for Square's hosted fields

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactLoadScript = require('react-load-script');

var _reactLoadScript2 = _interopRequireDefault(_reactLoadScript);

var _axios = require('axios');

var _axios2 = _interopRequireDefault(_axios);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var SquarePaymentForm = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(SquarePaymentForm, _Component);

  function SquarePaymentForm(props) {
    (0, _classCallCheck3.default)(this, SquarePaymentForm);

    var _this = (0, _possibleConstructorReturn3.default)(this, (SquarePaymentForm.__proto__ || (0, _getPrototypeOf2.default)(SquarePaymentForm)).call(this, props));

    _this.state = {
      // state props go in here
      appId: '',
      paymentForm: null,
      scriptCreated: false,
      scriptErrored: false,
      scriptLoaded: false
    };

    if (!_this.props.appId && !_this.props.get) {
      console.warn('No appId or appIdResource sent for props of SquarePaymentForm');
    }

    _this.scriptCreated = _this.scriptCreated.bind(_this);
    _this.scriptErrored = _this.scriptErrored.bind(_this);
    _this.scriptLoaded = _this.scriptLoaded.bind(_this);
    _this.renderChildren = _this.renderChildren.bind(_this);
    _this.generateNonce = _this.generateNonce.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(SquarePaymentForm, [{
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.state.paymentForm) this.state.paymentForm.destroy();
    }
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps, nextState) {
      return _react2.default.Children.count(this.props.children) > 0 || !this.state.scriptLoaded && nextState.scriptLoaded;
    }
  }, {
    key: 'componentWillUpdate',
    value: function componentWillUpdate(nextProps, nextState) {
      var _this2 = this;

      if (!(!this.state.scriptLoaded && nextState.scriptLoaded)) {
        return;
      }

      var prom = new _promise2.default(function (resolve, reject) {
        resolve(nextProps.appId);
      });

      if (!nextProps.appId) {
        prom = new _promise2.default(function (resolve, reject) {
          var req = _axios2.default.get(nextProps.get);
          req.then(function (result) {
            resolve(result.data.appId);
          });

          req.catch(function (error) {
            reject(error);
          });
        });
      }

      prom.then(function (appId) {
        // got the app id, load the form now
        var paymentForm = new SqPaymentForm({
          applicationId: appId,
          inputClass: _this2.props.inputClass,
          inputStyles: _this2.props.inputStyles,
          cardNumber: _this2.props.cardNumber,
          cvv: _this2.props.cvv,
          expirationDate: _this2.props.expirationDate,
          postalCode: _this2.props.postalCode,
          callbacks: {
            cardNonceResponseReceived: function cardNonceResponseReceived(errors, nonce, cardData) {
              if (errors && errors.length) {
                _this2.props.onNonceError(errors);
              } else {
                _this2.props.onNonceGenerated(nonce, cardData);
              }
            },
            paymentFormLoaded: function paymentFormLoaded() {
              // handle here
              _this2.props.onPaymentFormLoaded();
            },
            inputEventReceived: function inputEventReceived(inputEvent) {
              // handle here
              _this2.props.onInputEventReceived(inputEvent);
            },
            unsupportedBrowserDetected: function unsupportedBrowserDetected() {
              _this2.props.onUnsupportedBrowserDetected();
            }
          }
        });

        paymentForm.build();

        _this2.setState({
          appId: appId,
          paymentForm: paymentForm
        });
      });

      prom.catch(function (error) {
        _this2.props.onGetAppIdError(error);
      });
    }
  }, {
    key: 'scriptCreated',
    value: function scriptCreated() {
      this.setState({
        scriptCreated: true
      });

      this.props.onScriptCreated();
    }
  }, {
    key: 'scriptErrored',
    value: function scriptErrored() {
      this.setState({
        scriptError: true
      });

      this.props.onScriptError();
    }
  }, {
    key: 'scriptLoaded',
    value: function scriptLoaded() {
      this.setState({
        scriptLoaded: true
      });

      this.props.onScriptLoaded();
    }
  }, {
    key: 'generateNonce',
    value: function generateNonce(evt) {
      if (this.state.scriptLoaded && this.state.paymentForm) {
        this.props.onNonceRequested();
        this.state.paymentForm.requestCardNonce();
      } else {
        console.warn('Premature generateNonce call in SquarePaymentForm');
      }
    }
  }, {
    key: 'renderChildren',
    value: function renderChildren() {
      if (_react2.default.Children.count(this.props.children) > 0) {
        return this.props.children;
      } else {
        return _react2.default.createElement(
          'div',
          { className: this.props.fieldsWrapperClass },
          _react2.default.createElement(
            'div',
            { className: this.props.inputWrapperClass + ' ' + this.props.cardWrapperClass },
            _react2.default.createElement(
              'label',
              null,
              'Card Number'
            ),
            _react2.default.createElement('div', { id: this.props.cardNumber.elementId })
          ),
          _react2.default.createElement(
            'div',
            { className: this.props.inputWrapperClass + ' ' + this.props.cvvWrapperClass },
            _react2.default.createElement(
              'label',
              null,
              'CVV'
            ),
            _react2.default.createElement('div', { id: this.props.cvv.elementId })
          ),
          _react2.default.createElement(
            'div',
            { className: this.props.inputWrapperClass + ' ' + this.props.expirationWrapperClass },
            _react2.default.createElement(
              'label',
              null,
              'Expiration'
            ),
            _react2.default.createElement('div', { id: this.props.expirationDate.elementId })
          ),
          _react2.default.createElement(
            'div',
            { className: this.props.inputWrapperClass + ' ' + this.props.postalWrapperClass },
            _react2.default.createElement(
              'label',
              null,
              'Postal Code'
            ),
            _react2.default.createElement('div', { id: this.props.postalCode.elementId })
          )
        );
      }
    }
  }, {
    key: 'render',
    value: function render() {
      return (
        // markup/subcomponents go here
        _react2.default.createElement(
          'div',
          { className: this.props.componentWrapperClass },
          _react2.default.createElement(_reactLoadScript2.default, { url: 'https://js.squareup.com/v2/paymentform',
            onCreate: this.scriptCreated,
            onError: this.scriptErrored,
            onLoad: this.scriptLoaded
          }),
          _react2.default.createElement(
            'div',
            { className: this.props.formWrapperClass },
            this.renderChildren(),
            _react2.default.createElement(
              'div',
              { className: this.props.buttonWrapperClass },
              _react2.default.createElement(
                'button',
                { onClick: this.generateNonce },
                this.props.submitText
              )
            )
          )
        )
      );
    }
  }]);
  return SquarePaymentForm;
}(_react.Component), _class.defaultProps = {
  // stuff that's sent to square's api
  appId: '',
  get: '',
  inputClass: 'sq-input',
  inputStyles: [{
    // color: '#222',
    // fontFamily: 'serif',
    // fontSize: '15px'
  }],
  cardNumber: {
    elementId: 'sq-card-number',
    placeholder: 'E.g. XXXX-XXXX-XXXX-XXXX'
  },
  cvv: {
    elementId: 'sq-cvv',
    placeholder: 'E.g. XXX'
  },
  expirationDate: {
    elementId: 'sq-expiration-date',
    placeholder: 'MM/YY'
  },
  postalCode: {
    elementId: 'sq-postal-code',
    placeholder: 'E.g. XXXXX'
  },

  // props to plug in that aren't square-based
  submitText: 'Submit Payment',

  // styling-based stuff for the component
  componentWrapperClass: 'sq-component-wrapper',
  formWrapperClass: 'sq-form-wrapper',
  fieldsWrapperClass: 'sq-fields-wrapper',
  buttonWrapperClass: 'sq-button-wrapper',
  inputWrapperClass: 'sq-input-wrapper',
  cardWrapperClass: 'sq-card-wrapper',
  cvvWrapperClass: 'sq-cvv-wrapper',
  expirationWrapperClass: 'sq-expiration-wrapper',
  postalWrapperClass: 'sq-postal-wrapper',

  onGetAppIdError: function onGetAppIdError(axiosError) {
    console.warn('No onAppIdResourceError listener sent for props of SquarePaymentForm');
  },
  onScriptCreated: function onScriptCreated() {}, //{ console.warn('No onScriptCreated listener sent for props of SquarePaymentForm'); },
  onScriptError: function onScriptError() {
    console.warn('No onScriptError listener sent for props of SquarePaymentForm');
  },
  onScriptLoaded: function onScriptLoaded() {}, //{ console.warn('No onScriptLoaded listener sent for props of SquarePaymentForm'); },

  onPaymentFormLoaded: function onPaymentFormLoaded() {}, //{ console.warn('No onPaymentFormLoaded listener sent for props of SquarePaymentForm'); },
  onInputEventReceived: function onInputEventReceived(inputEvent) {}, //{ console.warn('No onInputEventReceived listener sent for props of SquarePaymentForm'); },
  onUnsupportedBrowserDetected: function onUnsupportedBrowserDetected() {
    console.warn('No onPaymentFormLoaded listener sent for props of SquarePaymentForm');
  },
  onNonceRequested: function onNonceRequested() {}, //{ console.warn('No onNonceRequest listener sent for props of SquarePaymentForm'); },
  onNonceGenerated: function onNonceGenerated(nonce, cardData) {
    console.warn('No onUnsupportedBrowserDetected listener sent for props of SquarePaymentForm');
  },
  onNonceError: function onNonceError(errors) {
    console.warn('No onNonceError listener sent for props of SquarePaymentForm');
  }
}, _temp);
exports.default = SquarePaymentForm;