@healnow/payments-ui 1.0.1 → 1.1.0

package/lib/payments/checkout.js

@@ -0,0 +1,110 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _channelMessenger = _interopRequireDefault(require("@mladenilic/channel-messenger"));
+var _lodash = _interopRequireDefault(require("lodash.merge"));
+var _mounted, _connected, _messenger, _checkoutUrl, _errorHandler, _paymentHandler, _options, _Class_brand;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+var Checkout = (_mounted = /*#__PURE__*/new WeakMap(), _connected = /*#__PURE__*/new WeakMap(), _messenger = /*#__PURE__*/new WeakMap(), _checkoutUrl = /*#__PURE__*/new WeakMap(), _errorHandler = /*#__PURE__*/new WeakMap(), _paymentHandler = /*#__PURE__*/new WeakMap(), _options = /*#__PURE__*/new WeakMap(), _Class_brand = /*#__PURE__*/new WeakSet(), /*#__PURE__*/function () {
+  function Checkout() {
+    var checkoutUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, Checkout);
+    _classPrivateMethodInitSpec(this, _Class_brand);
+    _classPrivateFieldInitSpec(this, _mounted, false);
+    _classPrivateFieldInitSpec(this, _connected, false);
+    _classPrivateFieldInitSpec(this, _messenger, null);
+    _classPrivateFieldInitSpec(this, _checkoutUrl, null);
+    _classPrivateFieldInitSpec(this, _errorHandler, null);
+    _classPrivateFieldInitSpec(this, _paymentHandler, null);
+    _classPrivateFieldInitSpec(this, _options, {
+      applePay: {
+        domainName: document.location.hostname
+      }
+    });
+    _classPrivateFieldSet(_messenger, this, new _channelMessenger["default"]());
+    _classPrivateFieldSet(_checkoutUrl, this, checkoutUrl);
+    (0, _lodash["default"])(_classPrivateFieldGet(_options, this), options);
+    _classPrivateFieldGet(_messenger, this).onMessage(_assertClassBrand(_Class_brand, this, _onMessage).bind(this));
+  }
+  return _createClass(Checkout, [{
+    key: "onError",
+    value: function onError(cb) {
+      _classPrivateFieldSet(_errorHandler, this, cb);
+    }
+  }, {
+    key: "onPayment",
+    value: function onPayment(cb) {
+      _classPrivateFieldSet(_paymentHandler, this, cb);
+    }
+  }, {
+    key: "mount",
+    value: function mount(target) {
+      var _this = 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 = _assertClassBrand(_Class_brand, _this, _buildIframe).call(_this);
+        target.appendChild(iframe);
+        _classPrivateFieldSet(_mounted, _this, true);
+        iframe.addEventListener('load', function () {
+          var _connect = function connect() {
+            return setTimeout(function () {
+              if (_classPrivateFieldGet(_connected, _this)) return resolve();
+              _classPrivateFieldGet(_messenger, _this).connect(iframe).then(_connect)["catch"](reject);
+            }, 1000);
+          };
+          _connect();
+        });
+      });
+    }
+  }]);
+}());
+function _buildIframe() {
+  var iframe = document.createElement('iframe');
+  iframe.hidden = false;
+  iframe.style.border = 'none';
+  iframe.style.overflow = 'hidden';
+  iframe.height = '600px';
+  iframe.src = "".concat(_classPrivateFieldGet(_checkoutUrl, this), "/embedded");
+  iframe.width = '100%';
+  iframe.allow = 'payment';
+  iframe.scrolling = 'no';
+  return iframe;
+}
+function _initCheckout() {
+  _classPrivateFieldGet(_messenger, this).send({
+    type: 'init',
+    options: _classPrivateFieldGet(_options, this)
+  });
+}
+function _onMessage(message) {
+  if (message.payload.type === 'payment' && typeof _classPrivateFieldGet(_paymentHandler, this) === 'function') {
+    _classPrivateFieldGet(_paymentHandler, this).call(this, message.payload.value);
+  }
+  if (message.payload.type === 'error' && typeof _classPrivateFieldGet(_errorHandler, this) === 'function') {
+    _classPrivateFieldGet(_errorHandler, this).call(this, message.payload.value);
+  }
+  if (message.payload.type === 'connected') {
+    _classPrivateFieldSet(_connected, this, true);
+    _assertClassBrand(_Class_brand, this, _initCheckout).call(this);
+  }
+}
+var _default = exports["default"] = Checkout;

package/lib/payments.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _card = _interopRequireDefault(require("./payments/card"));
+var _checkout = _interopRequireDefault(require("./payments/checkout"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _construct(t, e, r) { if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); var o = [null]; o.push.apply(o, e); var p = new (t.bind.apply(t, o))(); return r && _setPrototypeOf(p, r.prototype), p; }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
@@ -15,5 +16,11 @@ var _default = exports["default"] = {
       args[_key] = arguments[_key];
     }
     return _construct(_card["default"], args);
+  },
+  checkout: function checkout() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    return _construct(_checkout["default"], args);
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@healnow/payments-ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
   "main": "lib/payments.js",
   "scripts": {
@@ -16,15 +16,16 @@
   "author": "Mladen Ilic <mladen@healnow.io>",
   "license": "ISC",
   "dependencies": {
-    "@mladenilic/channel-messenger": "^1.0.1"
+    "@mladenilic/channel-messenger": "^1.0.1",
+    "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "babel-loader": "^9.2.1",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
+    "@babel/cli": "^7.28.0",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "babel-loader": "^10.0.0",
+    "webpack": "^5.100.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   }
 }

package/src/payments/checkout.js

@@ -0,0 +1,96 @@
+import ChannelMessenger from '@mladenilic/channel-messenger';
+import merge from 'lodash.merge'
+
+const Checkout = class {
+  #mounted = false;
+  #connected = false;
+  #messenger = null;
+  #checkoutUrl = null;
+  #errorHandler = null;
+  #paymentHandler = null;
+  #options = {
+    applePay: {
+      domainName: document.location.hostname
+    }
+  };
+
+  constructor(checkoutUrl = '', options = {}) {
+    this.#messenger = new ChannelMessenger();
+    this.#checkoutUrl = checkoutUrl;
+
+    merge(this.#options, options);
+
+    this.#messenger.onMessage(this.#onMessage.bind(this));
+  }
+
+  onError(cb) {
+    this.#errorHandler = cb;
+  }
+
+  onPayment(cb) {
+    this.#paymentHandler = cb;
+  }
+
+  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', () => {
+        const connect = () => setTimeout(() => {
+          if (this.#connected) return resolve();
+
+          this.#messenger.connect(iframe)
+            .then(connect)
+            .catch(reject);
+        }, 1000)
+
+        connect()
+      });
+    })
+  }
+
+  #buildIframe() {
+    const iframe = document.createElement('iframe');
+
+    iframe.hidden = false;
+    iframe.style.border = 'none';
+    iframe.style.overflow = 'hidden';
+    iframe.height = '600px';
+    iframe.src = `${this.#checkoutUrl}/embedded`;
+    iframe.width = '100%';
+    iframe.allow = 'payment';
+    iframe.scrolling = 'no';
+
+    return iframe;
+  }
+
+  #initCheckout() {
+    this.#messenger.send({ type: 'init', options: this.#options })
+  }
+
+  #onMessage(message) {
+    if (message.payload.type === 'payment' && typeof this.#paymentHandler === 'function') {
+      this.#paymentHandler(message.payload.value);
+    }
+
+    if (message.payload.type === 'error' && typeof this.#errorHandler === 'function') {
+      this.#errorHandler(message.payload.value);
+    }
+
+    if (message.payload.type === 'connected') {
+      this.#connected = true;
+
+      this.#initCheckout();
+    }
+  }
+}
+
+export default Checkout;

package/src/payments.js

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