@healnow/payments-ui 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/payments/card.js +41 -57
- package/lib/payments/checkout.js +67 -58
- package/lib/payments.js +7 -10
- package/package.json +7 -2
- package/src/payments/checkout.js +52 -15
package/lib/payments/card.js
CHANGED
|
@@ -1,29 +1,22 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
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); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
8
7
|
var _channelMessenger = _interopRequireDefault(require("@mladenilic/channel-messenger"));
|
|
9
8
|
var _mounted, _messenger, _baseUrl, _clientKey, _tokenResolve, _tokenReject, _errorHandler, _Class_brand;
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : {
|
|
11
|
-
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
12
|
-
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); } }
|
|
13
|
-
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
14
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
15
|
-
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); }
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
10
|
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
|
|
17
11
|
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
|
18
12
|
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
|
19
13
|
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
|
|
20
14
|
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
|
|
21
15
|
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"); }
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
_classCallCheck(this, Card);
|
|
16
|
+
const 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(), class Card {
|
|
17
|
+
constructor() {
|
|
18
|
+
let baseUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
19
|
+
let clientKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
27
20
|
_classPrivateMethodInitSpec(this, _Class_brand);
|
|
28
21
|
_classPrivateFieldInitSpec(this, _mounted, false);
|
|
29
22
|
_classPrivateFieldInitSpec(this, _messenger, null);
|
|
@@ -32,7 +25,7 @@ var Card = (_mounted = /*#__PURE__*/new WeakMap(), _messenger = /*#__PURE__*/new
|
|
|
32
25
|
_classPrivateFieldInitSpec(this, _tokenResolve, null);
|
|
33
26
|
_classPrivateFieldInitSpec(this, _tokenReject, null);
|
|
34
27
|
_classPrivateFieldInitSpec(this, _errorHandler, null);
|
|
35
|
-
_classPrivateFieldSet(_messenger, this, new _channelMessenger
|
|
28
|
+
_classPrivateFieldSet(_messenger, this, new _channelMessenger.default({
|
|
36
29
|
timeout: 300,
|
|
37
30
|
connection: {
|
|
38
31
|
retries: 100,
|
|
@@ -44,52 +37,43 @@ var Card = (_mounted = /*#__PURE__*/new WeakMap(), _messenger = /*#__PURE__*/new
|
|
|
44
37
|
_classPrivateFieldSet(_clientKey, this, clientKey);
|
|
45
38
|
_classPrivateFieldGet(_messenger, this).onMessage(_assertClassBrand(_Class_brand, this, _onMessage).bind(this));
|
|
46
39
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
40
|
+
onError(cb) {
|
|
41
|
+
_classPrivateFieldSet(_errorHandler, this, cb);
|
|
42
|
+
}
|
|
43
|
+
tokenize() {
|
|
44
|
+
if (_classPrivateFieldGet(_tokenResolve, this)) {
|
|
45
|
+
return Promise.reject(new Error('Card is already being tokenized'));
|
|
51
46
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
_classPrivateFieldSet(_tokenResolve, _this, resolve);
|
|
64
|
-
_classPrivateFieldSet(_tokenReject, _this, reject);
|
|
65
|
-
});
|
|
47
|
+
return new Promise((resolve, reject) => {
|
|
48
|
+
_classPrivateFieldGet(_messenger, this).send({
|
|
49
|
+
type: 'tokenize'
|
|
50
|
+
}).catch(reject);
|
|
51
|
+
_classPrivateFieldSet(_tokenResolve, this, resolve);
|
|
52
|
+
_classPrivateFieldSet(_tokenReject, this, reject);
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
mount(target) {
|
|
56
|
+
if (typeof target === 'string') {
|
|
57
|
+
target = document.querySelector(target);
|
|
66
58
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
iframe.addEventListener('load', function () {
|
|
80
|
-
_classPrivateFieldGet(_messenger, _this2).connect(iframe).then(function () {
|
|
81
|
-
_classPrivateFieldGet(_messenger, _this2).send({
|
|
82
|
-
type: 'init',
|
|
83
|
-
key: _classPrivateFieldGet(_clientKey, _this2)
|
|
84
|
-
}).then(resolve)["catch"](reject);
|
|
85
|
-
})["catch"](reject);
|
|
86
|
-
});
|
|
59
|
+
if (!target || !target instanceof HTMLElement) throw new Error('Invalid mount target');
|
|
60
|
+
return new Promise((resolve, reject) => {
|
|
61
|
+
const iframe = _assertClassBrand(_Class_brand, this, _buildIframe).call(this);
|
|
62
|
+
target.appendChild(iframe);
|
|
63
|
+
_classPrivateFieldSet(_mounted, this, true);
|
|
64
|
+
iframe.addEventListener('load', () => {
|
|
65
|
+
_classPrivateFieldGet(_messenger, this).connect(iframe).then(() => {
|
|
66
|
+
_classPrivateFieldGet(_messenger, this).send({
|
|
67
|
+
type: 'init',
|
|
68
|
+
key: _classPrivateFieldGet(_clientKey, this)
|
|
69
|
+
}).then(resolve).catch(reject);
|
|
70
|
+
}).catch(reject);
|
|
87
71
|
});
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
});
|
|
91
75
|
function _buildIframe() {
|
|
92
|
-
|
|
76
|
+
const iframe = document.createElement('iframe');
|
|
93
77
|
iframe.hidden = false;
|
|
94
78
|
iframe.style.border = 'none';
|
|
95
79
|
iframe.height = '250px';
|
|
@@ -112,4 +96,4 @@ function _onMessage(message) {
|
|
|
112
96
|
_classPrivateFieldSet(_tokenResolve, this, null);
|
|
113
97
|
_classPrivateFieldSet(_tokenReject, this, null);
|
|
114
98
|
}
|
|
115
|
-
var _default = exports
|
|
99
|
+
var _default = exports.default = Card;
|
package/lib/payments/checkout.js
CHANGED
|
@@ -1,88 +1,86 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
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); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
8
7
|
var _channelMessenger = _interopRequireDefault(require("@mladenilic/channel-messenger"));
|
|
9
8
|
var _lodash = _interopRequireDefault(require("lodash.merge"));
|
|
10
|
-
var _mounted, _connected, _messenger, _checkoutUrl,
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : {
|
|
12
|
-
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
13
|
-
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); } }
|
|
14
|
-
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
15
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
16
|
-
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); }
|
|
9
|
+
var _mounted, _connected, _messenger, _checkoutUrl, _onErrorHandler, _onPaymentHandler, _iframeObject, _minHeight, _options, _Class_brand;
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
11
|
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
|
|
18
12
|
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
|
19
13
|
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
|
20
14
|
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
|
|
21
15
|
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
|
|
22
16
|
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"); }
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
_classCallCheck(this, Checkout);
|
|
17
|
+
const Checkout = (_mounted = /*#__PURE__*/new WeakMap(), _connected = /*#__PURE__*/new WeakMap(), _messenger = /*#__PURE__*/new WeakMap(), _checkoutUrl = /*#__PURE__*/new WeakMap(), _onErrorHandler = /*#__PURE__*/new WeakMap(), _onPaymentHandler = /*#__PURE__*/new WeakMap(), _iframeObject = /*#__PURE__*/new WeakMap(), _minHeight = /*#__PURE__*/new WeakMap(), _options = /*#__PURE__*/new WeakMap(), _Class_brand = /*#__PURE__*/new WeakSet(), class Checkout {
|
|
18
|
+
constructor() {
|
|
19
|
+
let checkoutUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
20
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
28
21
|
_classPrivateMethodInitSpec(this, _Class_brand);
|
|
29
22
|
_classPrivateFieldInitSpec(this, _mounted, false);
|
|
30
23
|
_classPrivateFieldInitSpec(this, _connected, false);
|
|
31
24
|
_classPrivateFieldInitSpec(this, _messenger, null);
|
|
32
25
|
_classPrivateFieldInitSpec(this, _checkoutUrl, null);
|
|
33
|
-
_classPrivateFieldInitSpec(this,
|
|
34
|
-
_classPrivateFieldInitSpec(this,
|
|
26
|
+
_classPrivateFieldInitSpec(this, _onErrorHandler, null);
|
|
27
|
+
_classPrivateFieldInitSpec(this, _onPaymentHandler, null);
|
|
28
|
+
_classPrivateFieldInitSpec(this, _iframeObject, null);
|
|
29
|
+
_classPrivateFieldInitSpec(this, _minHeight, 650);
|
|
35
30
|
_classPrivateFieldInitSpec(this, _options, {
|
|
36
31
|
applePay: {
|
|
37
32
|
domainName: document.location.hostname
|
|
38
33
|
}
|
|
39
34
|
});
|
|
40
|
-
_classPrivateFieldSet(_messenger, this, new _channelMessenger
|
|
35
|
+
_classPrivateFieldSet(_messenger, this, new _channelMessenger.default());
|
|
41
36
|
_classPrivateFieldSet(_checkoutUrl, this, checkoutUrl);
|
|
42
|
-
(0, _lodash
|
|
37
|
+
(0, _lodash.default)(_classPrivateFieldGet(_options, this), options);
|
|
43
38
|
_classPrivateFieldGet(_messenger, this).onMessage(_assertClassBrand(_Class_brand, this, _onMessage).bind(this));
|
|
44
39
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
40
|
+
onError(cb) {
|
|
41
|
+
_classPrivateFieldSet(_onErrorHandler, this, cb);
|
|
42
|
+
}
|
|
43
|
+
onPayment(cb) {
|
|
44
|
+
_classPrivateFieldSet(_onPaymentHandler, this, cb);
|
|
45
|
+
}
|
|
46
|
+
mount(target) {
|
|
47
|
+
if (_classPrivateFieldGet(_mounted, this)) throw new Error('Checkout is already mounted');
|
|
48
|
+
if (typeof target === 'string') {
|
|
49
|
+
target = document.querySelector(target);
|
|
54
50
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
_classPrivateFieldSet(_mounted, _this, true);
|
|
67
|
-
iframe.addEventListener('load', function () {
|
|
68
|
-
var _connect = function connect() {
|
|
69
|
-
return setTimeout(function () {
|
|
70
|
-
if (_classPrivateFieldGet(_connected, _this)) return resolve();
|
|
71
|
-
_classPrivateFieldGet(_messenger, _this).connect(iframe).then(_connect)["catch"](reject);
|
|
72
|
-
}, 1000);
|
|
73
|
-
};
|
|
74
|
-
_connect();
|
|
75
|
-
});
|
|
51
|
+
if (!target || !(target instanceof HTMLElement)) throw new Error('Invalid mount target');
|
|
52
|
+
return new Promise((resolve, reject) => {
|
|
53
|
+
_classPrivateFieldSet(_iframeObject, this, _assertClassBrand(_Class_brand, this, _buildIframe).call(this));
|
|
54
|
+
target.appendChild(_classPrivateFieldGet(_iframeObject, this));
|
|
55
|
+
_classPrivateFieldSet(_mounted, this, true);
|
|
56
|
+
_classPrivateFieldGet(_iframeObject, this).addEventListener('load', () => {
|
|
57
|
+
const connect = () => setTimeout(() => {
|
|
58
|
+
if (_classPrivateFieldGet(_connected, this)) return resolve();
|
|
59
|
+
_classPrivateFieldGet(_messenger, this).connect(_classPrivateFieldGet(_iframeObject, this)).then(connect).catch(reject);
|
|
60
|
+
}, 1000);
|
|
61
|
+
connect();
|
|
76
62
|
});
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
unmount() {
|
|
66
|
+
if (!_classPrivateFieldGet(_mounted, this)) throw new Error('Checkout is not mounted');
|
|
67
|
+
if (!_classPrivateFieldGet(_iframeObject, this)) throw new Error('Invalid checkout object');
|
|
68
|
+
return new Promise((resolve, reject) => {
|
|
69
|
+
_classPrivateFieldGet(_messenger, this).close().then(() => {
|
|
70
|
+
_classPrivateFieldGet(_iframeObject, this).remove();
|
|
71
|
+
_classPrivateFieldSet(_iframeObject, this, null);
|
|
72
|
+
_classPrivateFieldSet(_mounted, this, false);
|
|
73
|
+
resolve();
|
|
74
|
+
}).catch(reject);
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
});
|
|
80
78
|
function _buildIframe() {
|
|
81
|
-
|
|
79
|
+
const iframe = document.createElement('iframe');
|
|
82
80
|
iframe.hidden = false;
|
|
83
81
|
iframe.style.border = 'none';
|
|
84
82
|
iframe.style.overflow = 'hidden';
|
|
85
|
-
iframe.height =
|
|
83
|
+
iframe.height = "".concat(_classPrivateFieldGet(_minHeight, this), "px");
|
|
86
84
|
iframe.src = "".concat(_classPrivateFieldGet(_checkoutUrl, this), "/embedded");
|
|
87
85
|
iframe.width = '100%';
|
|
88
86
|
iframe.allow = 'payment';
|
|
@@ -95,16 +93,27 @@ function _initCheckout() {
|
|
|
95
93
|
options: _classPrivateFieldGet(_options, this)
|
|
96
94
|
});
|
|
97
95
|
}
|
|
96
|
+
function _heightChangeHandler(value) {
|
|
97
|
+
if (!_classPrivateFieldGet(_iframeObject, this) || typeof value !== 'number') return;
|
|
98
|
+
if (value < _classPrivateFieldGet(_minHeight, this)) {
|
|
99
|
+
_classPrivateFieldGet(_iframeObject, this).height = "".concat(_classPrivateFieldGet(_minHeight, this), "px");
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
_classPrivateFieldGet(_iframeObject, this).height = "".concat(value, "px");
|
|
103
|
+
}
|
|
98
104
|
function _onMessage(message) {
|
|
99
|
-
if (message.payload.type === 'payment' && typeof _classPrivateFieldGet(
|
|
100
|
-
_classPrivateFieldGet(
|
|
105
|
+
if (message.payload.type === 'payment' && typeof _classPrivateFieldGet(_onPaymentHandler, this) === 'function') {
|
|
106
|
+
_classPrivateFieldGet(_onPaymentHandler, this).call(this, message.payload.value);
|
|
107
|
+
}
|
|
108
|
+
if (message.payload.type === 'error' && typeof _classPrivateFieldGet(_onErrorHandler, this) === 'function') {
|
|
109
|
+
_classPrivateFieldGet(_onErrorHandler, this).call(this, message.payload.value);
|
|
101
110
|
}
|
|
102
|
-
if (message.payload.type === '
|
|
103
|
-
|
|
111
|
+
if (message.payload.type === 'height') {
|
|
112
|
+
_assertClassBrand(_Class_brand, this, _heightChangeHandler).call(this, message.payload.value);
|
|
104
113
|
}
|
|
105
114
|
if (message.payload.type === 'connected') {
|
|
106
115
|
_classPrivateFieldSet(_connected, this, true);
|
|
107
116
|
_assertClassBrand(_Class_brand, this, _initCheckout).call(this);
|
|
108
117
|
}
|
|
109
118
|
}
|
|
110
|
-
var _default = exports
|
|
119
|
+
var _default = exports.default = Checkout;
|
package/lib/payments.js
CHANGED
|
@@ -3,24 +3,21 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
var _card = _interopRequireDefault(require("./payments/card"));
|
|
8
8
|
var _checkout = _interopRequireDefault(require("./payments/checkout"));
|
|
9
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
13
|
-
var _default = exports["default"] = {
|
|
14
|
-
card: function card() {
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
var _default = exports.default = {
|
|
11
|
+
card: function () {
|
|
15
12
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
16
13
|
args[_key] = arguments[_key];
|
|
17
14
|
}
|
|
18
|
-
return
|
|
15
|
+
return new _card.default(...args);
|
|
19
16
|
},
|
|
20
|
-
checkout: function
|
|
17
|
+
checkout: function () {
|
|
21
18
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
22
19
|
args[_key2] = arguments[_key2];
|
|
23
20
|
}
|
|
24
|
-
return
|
|
21
|
+
return new _checkout.default(...args);
|
|
25
22
|
}
|
|
26
23
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@healnow/payments-ui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/payments.js",
|
|
6
6
|
"scripts": {
|
|
@@ -27,5 +27,10 @@
|
|
|
27
27
|
"webpack": "^5.104.1",
|
|
28
28
|
"webpack-cli": "^6.0.1",
|
|
29
29
|
"webpack-dev-server": "^5.2.2"
|
|
30
|
-
}
|
|
30
|
+
},
|
|
31
|
+
"browserslist": [
|
|
32
|
+
"> 0.2%",
|
|
33
|
+
"not dead",
|
|
34
|
+
"not op_mini all"
|
|
35
|
+
]
|
|
31
36
|
}
|
package/src/payments/checkout.js
CHANGED
|
@@ -6,12 +6,14 @@ const Checkout = class {
|
|
|
6
6
|
#connected = false;
|
|
7
7
|
#messenger = null;
|
|
8
8
|
#checkoutUrl = null;
|
|
9
|
-
#
|
|
10
|
-
#
|
|
9
|
+
#onErrorHandler = null;
|
|
10
|
+
#onPaymentHandler = null;
|
|
11
|
+
#iframeObject = null;
|
|
12
|
+
#minHeight = 650;
|
|
11
13
|
#options = {
|
|
12
14
|
applePay: {
|
|
13
15
|
domainName: document.location.hostname
|
|
14
|
-
}
|
|
16
|
+
},
|
|
15
17
|
};
|
|
16
18
|
|
|
17
19
|
constructor(checkoutUrl = '', options = {}) {
|
|
@@ -24,14 +26,16 @@ const Checkout = class {
|
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
onError(cb) {
|
|
27
|
-
this.#
|
|
29
|
+
this.#onErrorHandler = cb;
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
onPayment(cb) {
|
|
31
|
-
this.#
|
|
33
|
+
this.#onPaymentHandler = cb;
|
|
32
34
|
}
|
|
33
35
|
|
|
34
36
|
mount(target) {
|
|
37
|
+
if (this.#mounted) throw new Error('Checkout is already mounted');
|
|
38
|
+
|
|
35
39
|
if (typeof target === 'string') {
|
|
36
40
|
target = document.querySelector(target);
|
|
37
41
|
}
|
|
@@ -39,22 +43,40 @@ const Checkout = class {
|
|
|
39
43
|
if (!target || !(target instanceof HTMLElement)) throw new Error('Invalid mount target');
|
|
40
44
|
|
|
41
45
|
return new Promise((resolve, reject) => {
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
this.#iframeObject = this.#buildIframe();
|
|
47
|
+
|
|
48
|
+
target.appendChild(this.#iframeObject);
|
|
44
49
|
this.#mounted = true;
|
|
45
50
|
|
|
46
|
-
|
|
51
|
+
this.#iframeObject.addEventListener('load', () => {
|
|
47
52
|
const connect = () => setTimeout(() => {
|
|
48
53
|
if (this.#connected) return resolve();
|
|
49
54
|
|
|
50
|
-
this.#messenger.connect(
|
|
55
|
+
this.#messenger.connect(this.#iframeObject)
|
|
51
56
|
.then(connect)
|
|
52
57
|
.catch(reject);
|
|
53
58
|
}, 1000)
|
|
54
59
|
|
|
55
60
|
connect()
|
|
56
61
|
});
|
|
57
|
-
})
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
unmount() {
|
|
66
|
+
if (!this.#mounted) throw new Error('Checkout is not mounted');
|
|
67
|
+
|
|
68
|
+
if (!this.#iframeObject) throw new Error('Invalid checkout object');
|
|
69
|
+
|
|
70
|
+
return new Promise((resolve, reject) => {
|
|
71
|
+
this.#messenger.close()
|
|
72
|
+
.then(() => {
|
|
73
|
+
this.#iframeObject.remove();
|
|
74
|
+
this.#iframeObject = null;
|
|
75
|
+
this.#mounted = false;
|
|
76
|
+
resolve();
|
|
77
|
+
})
|
|
78
|
+
.catch(reject);
|
|
79
|
+
});
|
|
58
80
|
}
|
|
59
81
|
|
|
60
82
|
#buildIframe() {
|
|
@@ -63,7 +85,7 @@ const Checkout = class {
|
|
|
63
85
|
iframe.hidden = false;
|
|
64
86
|
iframe.style.border = 'none';
|
|
65
87
|
iframe.style.overflow = 'hidden';
|
|
66
|
-
iframe.height =
|
|
88
|
+
iframe.height = `${this.#minHeight}px`;
|
|
67
89
|
iframe.src = `${this.#checkoutUrl}/embedded`;
|
|
68
90
|
iframe.width = '100%';
|
|
69
91
|
iframe.allow = 'payment';
|
|
@@ -76,13 +98,28 @@ const Checkout = class {
|
|
|
76
98
|
this.#messenger.send({ type: 'init', options: this.#options })
|
|
77
99
|
}
|
|
78
100
|
|
|
101
|
+
#heightChangeHandler(value) {
|
|
102
|
+
if (!this.#iframeObject || typeof value !== 'number') return;
|
|
103
|
+
|
|
104
|
+
if (value < this.#minHeight) {
|
|
105
|
+
this.#iframeObject.height = `${this.#minHeight}px`;
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
this.#iframeObject.height = `${value}px`;
|
|
110
|
+
}
|
|
111
|
+
|
|
79
112
|
#onMessage(message) {
|
|
80
|
-
if (message.payload.type === 'payment' && typeof this.#
|
|
81
|
-
this.#
|
|
113
|
+
if (message.payload.type === 'payment' && typeof this.#onPaymentHandler === 'function') {
|
|
114
|
+
this.#onPaymentHandler(message.payload.value);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
if (message.payload.type === 'error' && typeof this.#onErrorHandler === 'function') {
|
|
118
|
+
this.#onErrorHandler(message.payload.value);
|
|
82
119
|
}
|
|
83
120
|
|
|
84
|
-
if (message.payload.type === '
|
|
85
|
-
this.#
|
|
121
|
+
if (message.payload.type === 'height') {
|
|
122
|
+
this.#heightChangeHandler(message.payload.value);
|
|
86
123
|
}
|
|
87
124
|
|
|
88
125
|
if (message.payload.type === 'connected') {
|