react-cardpointe-gateway/dist/index.js

CardConnect Hosted iFrame Tokenizer & PCI Compliant CardSecure tokenization package to securely authorize & capture transactions with NativeStack & CardPointe on React.js.

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var Form = _interopDefault(require('react-bootstrap/Form'));
var Container = _interopDefault(require('react-bootstrap/Container'));

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

var styles = {"test":"_3ybTi","App":"_1RLww","native_stack_payments":"_1gMHj","billing_group":"_1EPGh"};

var CardPointeTokenizer = /*#__PURE__*/function (_Component) {
  _inheritsLoose(CardPointeTokenizer, _Component);

  function CardPointeTokenizer(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    _this.handleTokenEvent = function (event) {
      window.addEventListener('message', function (event) {
        var token = JSON.parse(event.data);
        var mytoken = document.getElementById('mytoken');
        mytoken.value = token.message;
        var expField = token.expiry;
        var tkn = mytoken.value;
        var dte = expField;

        _this.setState({
          emvToken: tkn,
          expiryDate: dte
        });

        var emvData = {
          token: tkn,
          expiryDate: dte
        };

        _this.props.tokenProps.userEmvData(emvData);

        event.preventDefault();
      }, false);
    };

    _this.state = {
      emvToken: '',
      expiryDate: ''
    };
    return _this;
  }

  var _proto = CardPointeTokenizer.prototype;

  _proto.renderTokenizerUi = function renderTokenizerUi() {
    var url = "https://" + this.props.site + ".cardconnect.com:" + this.props.port + "/itoke/ajax-tokenizer.html";
    var cssStyle = 'css=.error{color:red;border-color:red;}label{font-family:sans-serif;font-size:12px;}input{height:18px;font-size:16px;}body{margin:0px;height:100%}select{height:18px;}';
    var params = new URLSearchParams({
      maskfirsttwo: this.props.tokenProps.maskfirsttwo,
      useexpiry: this.props.tokenProps.useexpiry,
      usemonthnames: this.props.tokenProps.usemonthnames,
      usecvv: this.props.tokenProps.usecvv,
      cardnumbernumericonly: this.props.tokenProps.cardnumbernumericonly,
      orientation: this.props.tokenProps.orientation,
      invalidinputevent: this.props.tokenProps.invalidinputevent,
      enhancedresponse: this.props.tokenProps.enhancedresponse,
      formatinput: this.props.tokenProps.formatinput,
      tokenizewheninactive: this.props.tokenProps.tokenizewheninactive,
      inactivityto: this.props.tokenProps.inactivityto
    });
    var iFrameUrl = url + '?' + params + '&' + encodeURI(cssStyle);
    return /*#__PURE__*/React__default.createElement(Container, {
      className: styles.native_stack_payments
    }, /*#__PURE__*/React__default.createElement(Form, {
      className: "form-renewals",
      name: "order",
      method: "post",
      id: "tokenform"
    }, /*#__PURE__*/React__default.createElement(Form.Group, {
      controlId: "tokenEvent",
      className: styles.billing_group
    }, /*#__PURE__*/React__default.createElement("iframe", {
      title: "CardPointeTokenizer",
      id: "tokenframe",
      name: "tokenframe",
      src: iFrameUrl,
      frameBorder: "0",
      scrolling: "no",
      width: "100%",
      height: "100%",
      onLoad: this.handleTokenEvent
    }, /*#__PURE__*/React__default.createElement("input", {
      type: "hidden",
      name: "token",
      id: "mytoken"
    })))));
  };

  _proto.renderForms = function renderForms() {
    var form = this.renderTokenizerUi();
    return form;
  };

  _proto.render = function render() {
    return /*#__PURE__*/React__default.createElement("div", {
      className: "cardpointe-tokenizer-view"
    }, this.renderForms());
  };

  return CardPointeTokenizer;
}(React.Component);

var NativeStackTokenizer = /*#__PURE__*/function (_Component) {
  _inheritsLoose(NativeStackTokenizer, _Component);

  function NativeStackTokenizer(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    _this.userEmvData = function (emvData) {
      _this.setState({
        emvData: emvData
      });
    };

    _this.state = {
      emvData: ''
    };
    return _this;
  }

  var _proto = NativeStackTokenizer.prototype;

  _proto.componentDidUpdate = function componentDidUpdate() {
    try {
      if (this.state.emvData.token.length === 16) {
        this.props.tokenProps.userEmvData(this.state.emvData);
      }
    } catch (err) {
      console.log('TOKENIZING CARD WITH NATIVESTACK ENGINEERING');
      console.log('This is your NativeStackToken: ', this.state.emvData);
    }
  };

  _proto.render = function render() {
    var tokenProps = {
      userEmvData: this.userEmvData,
      maskfirsttwo: this.props.tokenProps.maskfirsttwo,
      useexpiry: this.props.tokenProps.useexpiry,
      usemonthnames: this.props.tokenProps.usemonthnames,
      usecvv: this.props.tokenProps.usecvv,
      cardnumbernumericonly: this.props.tokenProps.cardnumbernumericonly,
      orientation: this.props.tokenProps.orientation,
      invalidinputevent: this.props.tokenProps.invalidinputevent,
      enhancedresponse: this.props.tokenProps.enhancedresponse,
      formatinput: this.props.tokenProps.formatinput,
      tokenizewheninactive: this.props.tokenProps.tokenizewheninactive,
      inactivityto: this.props.tokenProps.inactivityto
    };
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles.App
    }, /*#__PURE__*/React__default.createElement(CardPointeTokenizer, {
      site: this.props.site,
      port: this.props.port,
      tokenProps: tokenProps
    }));
  };

  return NativeStackTokenizer;
}(React.Component);

module.exports = NativeStackTokenizer;
//# sourceMappingURL=index.js.map