@healnow/payments-ui 1.0.0

package/dist/payments-ui.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.PaymentsUI=t():e.PaymentsUI=t()}(self,(()=>(()=>{"use strict";var e={625:(e,t,n)=>{t.Z=void 0;var r,i,o,a,s,c,l,u,f,h,p,d,y,v=(r=n(100))&&r.__esModule?r:{default:r};function w(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?w(Object(n),!0).forEach((function(t){j(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function m(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function g(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function k(e,t){E(e,t),t.add(e)}function O(e,t,n){E(e,t),t.set(e,n)}function E(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function j(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function P(e,t){return function(e,t){return t.get?t.get.call(e):t.value}(e,C(e,t,"get"))}function C(e,t,n){if(!t.has(e))throw new TypeError("attempted to "+n+" private field on non-instance");return t.get(e)}function S(e,t,n){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return n}var W=(o=new WeakMap,a=new WeakSet,s=new WeakSet,c=new WeakSet,l=new WeakSet,u=new WeakSet,f=new WeakSet,h=new WeakSet,p=new WeakSet,d=new WeakSet,y=new WeakSet,i=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};m(this,e),k(this,y),k(this,d),k(this,p),k(this,h),k(this,f),k(this,u),k(this,l),k(this,c),k(this,s),k(this,a),O(this,o,{writable:!0,value:null}),this.options=b({timeout:5e3,ack:!1},t),this.messageBuffer=[],this.listeners={global:[],ack:{}},this.connected=!1}var t,n;return t=e,n=[{key:"connect",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"*",r=new MessageChannel,i=S(this,y,z).call(this,null,e.opcodes.CONNECT);return t.contentWindow.postMessage(i,n,[r.port2]),S(this,l,A).call(this,r.port1),S(this,c,x).call(this,i)}},{key:"close",value:function(){var t=this;if(!this.connected)throw new Error("Cannot close connection. Not connected.");return this.send(null,e.opcodes.CLOSE).then((function(e){return S(t,u,_).call(t),e}))}},{key:"send",value:function(e,t){var n=S(this,y,z).call(this,e,t);return S(this,a,M).call(this,n)}},{key:"waitForConnection",value:function(e){var t=this;return new Promise((function(n){e.addEventListener("message",(function(e){t.connected||(S(t,f,N).call(t,e),t.connected&&n())}))}))}},{key:"onMessage",value:function(e){this.listeners.global.push(e)}},{key:"onError",value:function(e){var t,n;n=e,function(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=n}}(t=this,C(t,o,"set"),n)}}],n&&g(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}(),j(i,"opcodes",{CONNECT:"messenger::connect",CLOSE:"messenger::close",ACK:"messenger::ack",MESSAGE:"messenger::message"}),i);function M(e){return this.connected?this.port.postMessage(e):this.messageBuffer.push(e),S(this,c,x).call(this,e)}function T(e){this.options.ack&&this.send(e,W.opcodes.ACK)}function x(e){var t=this;return new Promise((function(n,r){if(!t.options.ack||e.opcode===W.opcodes.ACK)return n(e);var i=setTimeout((function(){delete t.listeners.ack[e.id],r("ACK not received")}),t.options.timeout);t.listeners.ack[e.id]=function(){clearTimeout(i),delete t.listeners.ack[e.id],n(e)}}))}function A(e){for(this.port=e,this.port.onmessage=S(this,f,N).bind(this),this.port.onmessageerror=S(this,h,B).bind(this),this.connected=!0;this.messageBuffer.length>0;)S(this,a,M).call(this,this.messageBuffer.shift()).catch(S(this,h,B))}function _(){this.port.close(),this.connected=!1}function N(e){var t=e.data;switch(t.opcode){case W.opcodes.CONNECT:S(this,l,A).call(this,e.ports[0]),S(this,s,T).call(this,t.id);break;case W.opcodes.CLOSE:S(this,s,T).call(this,t.id),S(this,u,_).call(this);break;case W.opcodes.ACK:S(this,p,L).call(this,t.payload);break;default:S(this,s,T).call(this,t.id),S(this,d,R).call(this,t)}}function B(e){if(P(this,o)){var t=e.data;P(this,o).call(this,t)}}function L(e){this.listeners.ack[e]&&this.listeners.ack[e](e)}function R(e){this.listeners.global.forEach((function(t){return t(e)}))}function z(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:W.opcodes.MESSAGE;return{id:(0,v.default)(),opcode:t,payload:e}}var K=W;t.Z=K},100:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default=function(){var e=new Uint32Array(4);return crypto.getRandomValues(e),Array.from(e).concat([performance.now()]).map((function(e){return e.toString(36)})).join("")}}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var r={};return(()=>{n.d(r,{default:()=>S});var e,t,i,o,a,s,c,l,u,f=n(625);function h(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function d(e,t){v(e,t),t.add(e)}function y(e,t,n){v(e,t),t.set(e,n)}function v(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function w(e,t,n){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return n}function b(e,t){return function(e,t){return t.get?t.get.call(e):t.value}(e,g(e,t,"get"))}function m(e,t,n){return function(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=n}}(e,g(e,t,"set"),n),n}function g(e,t,n){if(!t.has(e))throw new TypeError("attempted to "+n+" private field on non-instance");return t.get(e)}function k(){var e=document.createElement("iframe");return e.hidden=!1,e.style.border="none",e.height="250px",e.src="".concat(b(this,i),"/payments/ui"),e.width="100%",e}function O(e){"error"===e.payload.type&&("function"==typeof b(this,c)&&b(this,c).call(this,e.payload),"function"==typeof b(this,s)&&b(this,s).call(this,e.payload)),"token"===e.payload.type&&"function"==typeof b(this,a)&&b(this,a).call(this,e.payload.value),m(this,a,null),m(this,s,null)}const E=(e=new WeakMap,t=new WeakMap,i=new WeakMap,o=new WeakMap,a=new WeakMap,s=new WeakMap,c=new WeakMap,l=new WeakSet,u=new WeakSet,function(){function n(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",p=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";h(this,n),d(this,u),d(this,l),y(this,e,{writable:!0,value:!1}),y(this,t,{writable:!0,value:null}),y(this,i,{writable:!0,value:null}),y(this,o,{writable:!0,value:null}),y(this,a,{writable:!0,value:null}),y(this,s,{writable:!0,value:null}),y(this,c,{writable:!0,value:null}),m(this,t,new f.Z),m(this,i,r),m(this,o,p),b(this,t).onMessage(w(this,u,O).bind(this))}var r,v;return r=n,(v=[{key:"onError",value:function(e){m(this,c,e)}},{key:"tokenize",value:function(){var e=this;return b(this,a)?new Error("Card is already being tokenized"):new Promise((function(n,r){b(e,t).send({type:"tokenize"}).catch(r),m(e,a,n),m(e,s,r)}))}},{key:"mount",value:function(n){var r=this;if("string"==typeof n&&(n=document.querySelector(n)),!n||!n instanceof HTMLElement)throw new Error("Invalid mount target");return new Promise((function(i,a){var s=w(r,l,k).call(r);n.appendChild(s),m(r,e,!0),s.addEventListener("load",(function(){setTimeout((function(){b(r,t).connect(s).then(b(r,t).send({type:"init",key:b(r,o)}).then(i).catch(a)).catch(a)}),300)}))}))}}])&&p(r.prototype,v),Object.defineProperty(r,"prototype",{writable:!1}),n}());function j(e,t,n){return j=P()?Reflect.construct.bind():function(e,t,n){var r=[null];r.push.apply(r,t);var i=new(Function.bind.apply(e,r));return n&&C(i,n.prototype),i},j.apply(null,arguments)}function P(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function C(e,t){return C=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},C(e,t)}const S={card:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return j(E,t)}}})(),r.default})()));

package/lib/payments/card.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _channelMessenger = _interopRequireDefault(require("@mladenilic/channel-messenger"));
+
+var _mounted, _messenger, _baseUrl, _clientKey, _tokenResolve, _tokenReject, _errorHandler, _buildIframe, _onMessage;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
+
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+
+function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+
+function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
+
+function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
+
+var Card = (_mounted = /*#__PURE__*/new WeakMap(), _messenger = /*#__PURE__*/new WeakMap(), _baseUrl = /*#__PURE__*/new WeakMap(), _clientKey = /*#__PURE__*/new WeakMap(), _tokenResolve = /*#__PURE__*/new WeakMap(), _tokenReject = /*#__PURE__*/new WeakMap(), _errorHandler = /*#__PURE__*/new WeakMap(), _buildIframe = /*#__PURE__*/new WeakSet(), _onMessage = /*#__PURE__*/new WeakSet(), /*#__PURE__*/function () {
+  function Card() {
+    var baseUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var clientKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
+    _classCallCheck(this, Card);
+
+    _classPrivateMethodInitSpec(this, _onMessage);
+
+    _classPrivateMethodInitSpec(this, _buildIframe);
+
+    _classPrivateFieldInitSpec(this, _mounted, {
+      writable: true,
+      value: false
+    });
+
+    _classPrivateFieldInitSpec(this, _messenger, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _baseUrl, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _clientKey, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _tokenResolve, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _tokenReject, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _errorHandler, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldSet(this, _messenger, new _channelMessenger["default"]());
+
+    _classPrivateFieldSet(this, _baseUrl, baseUrl);
+
+    _classPrivateFieldSet(this, _clientKey, clientKey);
+
+    _classPrivateFieldGet(this, _messenger).onMessage(_classPrivateMethodGet(this, _onMessage, _onMessage2).bind(this));
+  }
+
+  _createClass(Card, [{
+    key: "onError",
+    value: function onError(cb) {
+      _classPrivateFieldSet(this, _errorHandler, cb);
+    }
+  }, {
+    key: "tokenize",
+    value: function tokenize() {
+      var _this = this;
+
+      if (_classPrivateFieldGet(this, _tokenResolve)) return new Error('Card is already being tokenized');
+      return new Promise(function (resolve, reject) {
+        _classPrivateFieldGet(_this, _messenger).send({
+          type: 'tokenize'
+        })["catch"](reject);
+
+        _classPrivateFieldSet(_this, _tokenResolve, resolve);
+
+        _classPrivateFieldSet(_this, _tokenReject, reject);
+      });
+    }
+  }, {
+    key: "mount",
+    value: function mount(target) {
+      var _this2 = this;
+
+      if (typeof target === 'string') {
+        target = document.querySelector(target);
+      }
+
+      if (!target || !target instanceof HTMLElement) throw new Error('Invalid mount target');
+      return new Promise(function (resolve, reject) {
+        var iframe = _classPrivateMethodGet(_this2, _buildIframe, _buildIframe2).call(_this2);
+
+        target.appendChild(iframe);
+
+        _classPrivateFieldSet(_this2, _mounted, true);
+
+        iframe.addEventListener('load', function () {
+          setTimeout(function () {
+            _classPrivateFieldGet(_this2, _messenger).connect(iframe).then(_classPrivateFieldGet(_this2, _messenger).send({
+              type: 'init',
+              key: _classPrivateFieldGet(_this2, _clientKey)
+            }).then(resolve)["catch"](reject))["catch"](reject);
+          }, 300);
+        });
+      });
+    }
+  }]);
+
+  return Card;
+}());
+
+function _buildIframe2() {
+  var iframe = document.createElement('iframe');
+  iframe.hidden = false;
+  iframe.style.border = 'none';
+  iframe.height = '250px';
+  iframe.src = "".concat(_classPrivateFieldGet(this, _baseUrl), "/payments/ui");
+  iframe.width = '100%';
+  return iframe;
+}
+
+function _onMessage2(message) {
+  if (message.payload.type === 'error') {
+    if (typeof _classPrivateFieldGet(this, _errorHandler) === 'function') {
+      _classPrivateFieldGet(this, _errorHandler).call(this, message.payload);
+    }
+
+    if (typeof _classPrivateFieldGet(this, _tokenReject) === 'function') {
+      _classPrivateFieldGet(this, _tokenReject).call(this, message.payload);
+    }
+  }
+
+  if (message.payload.type === 'token' && typeof _classPrivateFieldGet(this, _tokenResolve) === 'function') {
+    _classPrivateFieldGet(this, _tokenResolve).call(this, message.payload.value);
+  }
+
+  _classPrivateFieldSet(this, _tokenResolve, null);
+
+  _classPrivateFieldSet(this, _tokenReject, null);
+}
+
+var _default = Card;
+exports["default"] = _default;

package/lib/payments.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _card = _interopRequireDefault(require("./payments/card"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var _default = {
+  card: function card() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _construct(_card["default"], args);
+  }
+};
+exports["default"] = _default;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@healnow/payments-ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/payments-ui.js",
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build:dist": "webpack",
+    "build:lib": "babel src -d lib",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "author": "Mladen Ilic <mladen@healnow.io>",
+  "license": "ISC",
+  "dependencies": {
+    "@mladenilic/channel-messenger": "^1.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "babel-loader": "^8.2.5",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.0"
+  }
+}

package/src/payments/card.js

@@ -0,0 +1,90 @@
+import ChannelMessenger from '@mladenilic/channel-messenger';
+
+const Card = class {
+  #mounted = false;
+  #messenger = null;
+  #baseUrl = null;
+  #clientKey = null;
+  #tokenResolve = null;
+  #tokenReject = null;
+  #errorHandler = null;
+
+  constructor(baseUrl = '', clientKey = '') {
+    this.#messenger = new ChannelMessenger();
+    this.#baseUrl = baseUrl;
+    this.#clientKey = clientKey;
+
+    this.#messenger.onMessage(this.#onMessage.bind(this));
+  }
+
+  onError(cb) {
+    this.#errorHandler = cb;
+  }
+
+  tokenize() {
+    if (this.#tokenResolve) return new Error('Card is already being tokenized');
+
+    return new Promise((resolve, reject) => {
+      this.#messenger.send({ type: 'tokenize' }).catch(reject);
+
+      this.#tokenResolve = resolve;
+      this.#tokenReject = reject;
+    });
+  }
+
+  mount(target) {
+    if (typeof target === 'string') {
+      target = document.querySelector(target);
+    }
+
+    if (!target || !target instanceof HTMLElement) throw new Error('Invalid mount target');
+
+    return new Promise((resolve, reject) => {
+      const iframe = this.#buildIframe();
+      target.appendChild(iframe);
+      this.#mounted = true;
+
+      iframe.addEventListener('load', () => {
+        setTimeout(() => {
+          this.#messenger.connect(iframe).then(
+            this.#messenger.send({ type: 'init', key: this.#clientKey })
+              .then(resolve).catch(reject)
+          ).catch(reject)
+        }, 300);
+      });
+    });
+  }
+
+  #buildIframe() {
+    const iframe = document.createElement('iframe');
+
+    iframe.hidden = false;
+    iframe.style.border = 'none';
+    iframe.height = '250px';
+    iframe.src = `${this.#baseUrl}/payments/ui`;
+    iframe.width = '100%';
+
+    return iframe;
+  }
+
+  #onMessage(message) {
+    if (message.payload.type === 'error') {
+      if (typeof this.#errorHandler === 'function') {
+        this.#errorHandler(message.payload);
+      }
+
+      if (typeof this.#tokenReject === 'function') {
+        this.#tokenReject(message.payload);
+      }
+    }
+
+    if (message.payload.type === 'token' && typeof this.#tokenResolve === 'function') {
+      this.#tokenResolve(message.payload.value);
+    }
+
+    this.#tokenResolve = null;
+    this.#tokenReject = null;
+  }
+}
+
+export default Card;

package/src/payments.js

@@ -0,0 +1,5 @@
+import Card from './payments/card';
+
+export default {
+  card: (...args) => new Card(...args),
+};