@healnow/payments-ui 1.0.0 → 1.1.0

package/lib/payments/card.js

@@ -1,177 +1,106 @@
 "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 _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 () {
+var _mounted, _messenger, _baseUrl, _clientKey, _tokenResolve, _tokenReject, _errorHandler, _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 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(), _Class_brand = /*#__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));
+    _classPrivateMethodInitSpec(this, _Class_brand);
+    _classPrivateFieldInitSpec(this, _mounted, false);
+    _classPrivateFieldInitSpec(this, _messenger, null);
+    _classPrivateFieldInitSpec(this, _baseUrl, null);
+    _classPrivateFieldInitSpec(this, _clientKey, null);
+    _classPrivateFieldInitSpec(this, _tokenResolve, null);
+    _classPrivateFieldInitSpec(this, _tokenReject, null);
+    _classPrivateFieldInitSpec(this, _errorHandler, null);
+    _classPrivateFieldSet(_messenger, this, new _channelMessenger["default"]());
+    _classPrivateFieldSet(_baseUrl, this, baseUrl);
+    _classPrivateFieldSet(_clientKey, this, clientKey);
+    _classPrivateFieldGet(_messenger, this).onMessage(_assertClassBrand(_Class_brand, this, _onMessage).bind(this));
   }
-
-  _createClass(Card, [{
+  return _createClass(Card, [{
     key: "onError",
     value: function onError(cb) {
-      _classPrivateFieldSet(this, _errorHandler, cb);
+      _classPrivateFieldSet(_errorHandler, this, cb);
     }
   }, {
     key: "tokenize",
     value: function tokenize() {
       var _this = this;
-
-      if (_classPrivateFieldGet(this, _tokenResolve)) return new Error('Card is already being tokenized');
+      if (_classPrivateFieldGet(_tokenResolve, this)) return new Error('Card is already being tokenized');
       return new Promise(function (resolve, reject) {
-        _classPrivateFieldGet(_this, _messenger).send({
+        _classPrivateFieldGet(_messenger, _this).send({
           type: 'tokenize'
         })["catch"](reject);
-
-        _classPrivateFieldSet(_this, _tokenResolve, resolve);
-
-        _classPrivateFieldSet(_this, _tokenReject, reject);
+        _classPrivateFieldSet(_tokenResolve, _this, resolve);
+        _classPrivateFieldSet(_tokenReject, _this, 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);
-
+        var iframe = _assertClassBrand(_Class_brand, _this2, _buildIframe).call(_this2);
         target.appendChild(iframe);
-
-        _classPrivateFieldSet(_this2, _mounted, true);
-
+        _classPrivateFieldSet(_mounted, _this2, true);
         iframe.addEventListener('load', function () {
           setTimeout(function () {
-            _classPrivateFieldGet(_this2, _messenger).connect(iframe).then(_classPrivateFieldGet(_this2, _messenger).send({
+            _classPrivateFieldGet(_messenger, _this2).connect(iframe).then(_classPrivateFieldGet(_messenger, _this2).send({
               type: 'init',
-              key: _classPrivateFieldGet(_this2, _clientKey)
+              key: _classPrivateFieldGet(_clientKey, _this2)
             }).then(resolve)["catch"](reject))["catch"](reject);
           }, 300);
         });
       });
     }
   }]);
-
-  return Card;
 }());
-
-function _buildIframe2() {
+function _buildIframe() {
   var iframe = document.createElement('iframe');
   iframe.hidden = false;
   iframe.style.border = 'none';
   iframe.height = '250px';
-  iframe.src = "".concat(_classPrivateFieldGet(this, _baseUrl), "/payments/ui");
+  iframe.src = "".concat(_classPrivateFieldGet(_baseUrl, this), "/payments/ui");
   iframe.width = '100%';
   return iframe;
 }
-
-function _onMessage2(message) {
+function _onMessage(message) {
   if (message.payload.type === 'error') {
-    if (typeof _classPrivateFieldGet(this, _errorHandler) === 'function') {
-      _classPrivateFieldGet(this, _errorHandler).call(this, message.payload);
+    if (typeof _classPrivateFieldGet(_errorHandler, this) === 'function') {
+      _classPrivateFieldGet(_errorHandler, this).call(this, message.payload);
     }
-
-    if (typeof _classPrivateFieldGet(this, _tokenReject) === 'function') {
-      _classPrivateFieldGet(this, _tokenReject).call(this, message.payload);
+    if (typeof _classPrivateFieldGet(_tokenReject, this) === 'function') {
+      _classPrivateFieldGet(_tokenReject, this).call(this, message.payload);
     }
   }
-
-  if (message.payload.type === 'token' && typeof _classPrivateFieldGet(this, _tokenResolve) === 'function') {
-    _classPrivateFieldGet(this, _tokenResolve).call(this, message.payload.value);
+  if (message.payload.type === 'token' && typeof _classPrivateFieldGet(_tokenResolve, this) === 'function') {
+    _classPrivateFieldGet(_tokenResolve, this).call(this, message.payload.value);
   }
-
-  _classPrivateFieldSet(this, _tokenResolve, null);
-
-  _classPrivateFieldSet(this, _tokenReject, null);
+  _classPrivateFieldSet(_tokenResolve, this, null);
+  _classPrivateFieldSet(_tokenReject, this, null);
 }
-
-var _default = Card;
-exports["default"] = _default;
+var _default = exports["default"] = Card;

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

@@ -4,24 +4,23 @@ 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 = {
+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); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var _default = exports["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);
+  },
+  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);
   }
-};
-exports["default"] = _default;
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@healnow/payments-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
-  "main": "dist/payments-ui.js",
+  "main": "lib/payments.js",
   "scripts": {
     "start": "webpack serve --mode development",
     "build:dist": "webpack",
@@ -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.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"
+    "@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),
 };

package/dist/payments-ui.js

@@ -1 +0,0 @@
-!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})()));