@paydock/client-sdk 1.100.0 → 1.102.0-beta

package/bundles/widget.umd.js

@@ -684,7 +684,7 @@
   // the empty string is set in case if version not provided.
   //
   // e.g: grunt build --sdk-version=v1.0.0
-  SDK._version = 'v1.100.0';
+  SDK._version = 'v1.102.0-beta';
 
   var ENV = {
     SANDBOX: 'sandbox',
@@ -6575,7 +6575,8 @@
     PAYMENT_SUCCESS: 'payment_success',
     PAYMENT_IN_REVIEW: 'payment_in_review',
     PAYMENT_ERROR: 'payment_error',
-    CALLBACK: 'callback'
+    CALLBACK: 'callback',
+    AUTH_TOKENS_CHANGED: 'auth_tokens_changed'
   };
   var WalletService = /*#__PURE__*/function () {
     function WalletService(publicKey, meta) {
@@ -8364,14 +8365,16 @@
       return [].concat(_toConsumableArray(str), ["".concat(key).concat(separator).concat(value)]);
     }, []).join(",") : "";
   }
+
+  // src/checkout.ts
   var Checkout = /*#__PURE__*/function () {
     function Checkout(_ref3) {
       var _this = this,
         _this$callback;
-      var url = _ref3.url,
-        accessToken = _ref3.accessToken,
-        refreshToken = _ref3.refreshToken,
+      var auth = _ref3.auth,
+        url = _ref3.url,
         clientId = _ref3.clientId,
+        mode = _ref3.mode,
         orderId = _ref3.orderId,
         onCheckoutClosed = _ref3.onCheckoutClosed,
         onError = _ref3.onError,
@@ -8386,6 +8389,7 @@
       _defineProperty(this, "DEFAULT_FEATURES", {
         resizable: "no"
       });
+      _defineProperty(this, "auth", void 0);
       _defineProperty(this, "callback", void 0);
       _defineProperty(this, "error", void 0);
       _defineProperty(this, "frame", void 0);
@@ -8397,7 +8401,8 @@
       _defineProperty(this, "refreshToken", void 0);
       _defineProperty(this, "clientId", void 0);
       _defineProperty(this, "onCheckoutClosed", void 0);
-      _defineProperty(this, "onTokensChanged", void 0);
+      _defineProperty(this, "rootUrl", void 0);
+      _defineProperty(this, "targetOrigin", void 0);
       _defineProperty(this, "title", void 0);
       _defineProperty(this, "windowFeatures", void 0);
       _defineProperty(this, "windowObserver", void 0);
@@ -8421,7 +8426,13 @@
           window.addEventListener("message", _this.onMessage, false);
         }
       });
-      var merchantURL = encodeURIComponent(window.location.href.replace(/\/$/, ""));
+      _defineProperty(this, "postMessage", function () {
+        if (!!_this.frame && !!_this.rootUrl) {
+          _this.frame.postMessage({
+            auth: _objectSpread2({}, _this.auth)
+          }, _this.rootUrl);
+        }
+      });
       this.callback = (_this$callback = {}, _defineProperty(_this$callback, "ERROR" /* ERROR */, function ERROR(_ref4) {
         var error = _ref4.error,
           orderId2 = _ref4.orderId;
@@ -8442,13 +8453,14 @@
           orderId: orderId2
         });
       }), _defineProperty(_this$callback, "TOKENS_CHANGED" /* TOKENS_CHANGED */, function TOKENS_CHANGED(_ref7) {
-        var accessToken2 = _ref7.accessToken,
-          refreshToken2 = _ref7.refreshToken;
+        var accessToken = _ref7.accessToken,
+          refreshToken = _ref7.refreshToken;
         onTokensChanged === null || onTokensChanged === void 0 || onTokensChanged({
-          accessToken: accessToken2,
-          refreshToken: refreshToken2
+          accessToken: accessToken,
+          refreshToken: refreshToken
         });
       }), _this$callback);
+      this.auth = auth;
       this.isCheckoutOpen = false;
       this.error = void 0;
       this.frame = void 0;
@@ -8456,6 +8468,9 @@
         var data = e.data,
           origin = e.origin;
         if (origin === url) {
+          if ((data === null || data === void 0 ? void 0 : data.isDomReady) === true) {
+            _this.postMessage();
+          }
           if (data !== null && data !== void 0 && data.isPaymentSuccessful) {
             _this.callback["PAYMENT_SUCCESS" /* PAYMENT_SUCCESS */]({
               orderId: data.orderId
@@ -8481,13 +8496,13 @@
           }
         }
       };
-      this.url = "".concat(url, "?orderId=").concat(orderId, "&merchant=").concat(merchantURL);
+      var checkoutMode = mode || "default" /* DEFAULT */;
+      this.rootUrl = url;
+      this.targetOrigin = window.location.href.replace(/\/$/, "");
+      this.url = "".concat(url, "?orderId=").concat(orderId, "&merchantUrl=").concat(encodeURIComponent(this.targetOrigin), "&mode=").concat(checkoutMode);
       this.orderId = orderId;
-      this.accessToken = accessToken;
-      this.refreshToken = refreshToken;
       this.clientId = clientId;
       this.onCheckoutClosed = onCheckoutClosed;
-      this.onTokensChanged = onTokensChanged;
       this.title = title;
       this.windowFeatures = windowFeatures;
       this.windowObserver = void 0;
@@ -8587,36 +8602,37 @@
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                loadingOverlay = document.getElementById("loading-overlay");
-                button = document.getElementById("flypay-v2-button");
+                loadingOverlay = document.getElementById('loading-overlay');
+                button = document.getElementById('flypay-v2-button');
                 if (button) button.disabled = true;
                 _context.prev = 3;
                 if (this.orderId) {
                   _context.next = 9;
                   break;
                 }
-                if (loadingOverlay) loadingOverlay.style.display = "flex";
+                if (loadingOverlay) loadingOverlay.style.display = 'flex';
                 _context.next = 8;
                 return this.getOrderId();
               case 8:
                 this.orderId = _context.sent;
               case 9:
-                if (loadingOverlay) loadingOverlay.style.display = "none";
+                if (loadingOverlay) loadingOverlay.style.display = 'none';
                 if (this.orderId) {
                   this.flypayV2Checkout(this.orderId);
                 } else {
                   this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE);
                 }
-                _context.next = 17;
+                _context.next = 18;
                 break;
               case 13:
                 _context.prev = 13;
                 _context.t0 = _context["catch"](3);
-                if (loadingOverlay) loadingOverlay.style.display = "none";
+                if (loadingOverlay) loadingOverlay.style.display = 'none';
+                if (button) button.disabled = false;
                 this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, {
                   err: _context.t0
                 });
-              case 17:
+              case 18:
               case "end":
                 return _context.stop();
             }
@@ -8662,7 +8678,7 @@
     }, {
       key: "createButtonStyle",
       value: function createButtonStyle() {
-        return "\n      #widget {\n        position: relative;\n      }\n\n      #loading-overlay {\n        position: absolute;\n        width: 268px;\n        height: 74px;\n        background: rgba(255, 255, 255, 0.7);\n        display: none;\n        justify-content: center;\n        align-items: center;\n      }\n\n      #loading-overlay::after {\n        content: \"\";\n        display: inline-block;\n        width: 40px;\n        height: 40px;\n        border: 4px solid #ccc;\n        border-top-color: #333;\n        border-radius: 50%;\n\n        /* Vendor prefixes for animation property */\n        -webkit-animation: spin 1s infinite linear;\n        -moz-animation: spin 1s infinite linear;\n        -o-animation: spin 1s infinite linear;\n        animation: spin 1s infinite linear;\n      }\n\n      @-webkit-keyframes spin {\n        0% {\n          -webkit-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n\n      @-moz-keyframes spin {\n        0% {\n          -moz-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -moz-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n\n      @-o-keyframes spin {\n        0% {\n          -o-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -o-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n\n      @keyframes spin {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      .flypay-v2-checkout-btn {\n          border: none; /* Remove borders */\n          background: transparent; /* Make the button background transparent */\n          cursor: pointer; /* Make it look clickable */\n          outline: none; /* Remove focus outline */\n          padding: 0; /* Remove any default padding */\n      }\n\n      .flypay-v2-image {\n          display: block; /* Display the image as block to remove any gaps */\n          border: none; /* Ensure the image doesn't have a border */\n          width: 100%; /* Make the image take full width of the container */\n      }\n    ";
+        return "\n\t\t\t#widget {\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t#loading-overlay {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 268px;\n\t\t\t\theight: 74px;\n\t\t\t\tbackground: rgba(255, 255, 255, 0.7);\n\t\t\t\tdisplay: none;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t#loading-overlay::after {\n\t\t\t\tcontent: \"\";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\twidth: 40px;\n\t\t\t\theight: 40px;\n\t\t\t\tborder: 4px solid #ccc;\n\t\t\t\tborder-top-color: #333;\n\t\t\t\tborder-radius: 50%;\n\n\t\t\t\t/* Vendor prefixes for animation property */\n\t\t\t\t-webkit-animation: spin 1s infinite linear;\n\t\t\t\t-moz-animation: spin 1s infinite linear;\n\t\t\t\t-o-animation: spin 1s infinite linear;\n\t\t\t\tanimation: spin 1s infinite linear;\n\t\t\t}\n\n\t\t\t@-webkit-keyframes spin {\n\t\t\t\t0% {\n\t\t\t\t-webkit-transform: rotate(0deg);\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t-webkit-transform: rotate(360deg);\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@-moz-keyframes spin {\n\t\t\t\t0% {\n\t\t\t\t-moz-transform: rotate(0deg);\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t-moz-transform: rotate(360deg);\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@-o-keyframes spin {\n\t\t\t\t0% {\n\t\t\t\t-o-transform: rotate(0deg);\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t-o-transform: rotate(360deg);\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@keyframes spin {\n\t\t\t\t0% {\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.flypay-v2-checkout-btn {\n\t\t\t\tborder: none; /* Remove borders */\n\t\t\t\tbackground: transparent; /* Make the button background transparent */\n\t\t\t\tcursor: pointer; /* Make it look clickable */\n\t\t\t\toutline: none; /* Remove focus outline */\n\t\t\t\tpadding: 0; /* Remove any default padding */\n\t\t\t}\n\n\t\t\t.flypay-v2-image {\n\t\t\t\tdisplay: block; /* Display the image as block to remove any gaps */\n\t\t\t\tborder: none; /* Ensure the image doesn't have a border */\n\t\t\t\twidth: 100%; /* Make the image take full width of the container */\n\t\t\t}\n\t\t";
       }
     }, {
       key: "getOrderId",
@@ -8671,7 +8687,7 @@
         return new Promise(function (resolve, reject) {
           return _this2.eventEmitter.emit(WALLET_EVENT.CALLBACK, {
             data: {
-              request_type: "CREATE_SESSION"
+              request_type: 'CREATE_SESSION'
             },
             onSuccess: function onSuccess(res) {
               return resolve(res.id);
@@ -8686,17 +8702,21 @@
       key: "flypayV2Checkout",
       value: function flypayV2Checkout(orderId) {
         var _this3 = this;
-        this.checkout = new Checkout(_extends(_extends(_extends({
+        var _a, _b;
+        this.checkout = new Checkout(_extends(_extends({
           orderId: orderId
-        }, this.accessToken && {
-          accessToken: this.accessToken
-        }), this.refreshToken && {
-          refreshToken: this.refreshToken
+        }, (this.accessToken || this.refreshToken) && {
+          auth: _extends(_extends({}, this.accessToken && {
+            access_token: this.accessToken
+          }), this.refreshToken && {
+            refresh_token: this.refreshToken
+          }),
+          mode: "express"
         }), {
-          clientId: '633727af-5bd2-4733-8e08-04074a98300d',
-          url: 'https://checkout.release.cxbflypay.com.au',
+          clientId: ((_a = this.meta) === null || _a === void 0 ? void 0 : _a.gateway_mode) === 'live' ? 'dbbd114e-3583-4db5-915e-59f1b3dcd08b' : '924ac1ce-00f4-44e4-8277-06cae751ef1a',
+          url: ((_b = this.meta) === null || _b === void 0 ? void 0 : _b.gateway_mode) === 'live' ? 'https://checkout.beem.com.au' : 'https://release.checkout.beem.com.au',
           onCheckoutClosed: function onCheckoutClosed() {
-            var button = document.getElementById("flypay-v2-button");
+            var button = document.getElementById('flypay-v2-button');
             if (button) button.disabled = false;
           },
           onError: function onError(err) {
@@ -8717,6 +8737,10 @@
               refreshToken = _ref.refreshToken;
             _this3.accessToken = accessToken;
             _this3.refreshToken = refreshToken;
+            _this3.eventEmitter.emit(WALLET_EVENT.AUTH_TOKENS_CHANGED, {
+              accessToken: accessToken,
+              refreshToken: refreshToken
+            });
           }
         }));
         this.checkout.open();
@@ -8741,7 +8765,8 @@
     UPDATE: "update",
     PAYMENT_SUCCESSFUL: "paymentSuccessful",
     PAYMENT_ERROR: "paymentError",
-    PAYMENT_IN_REVIEW: "paymentInReview"
+    PAYMENT_IN_REVIEW: "paymentInReview",
+    AUTH_TOKENS_CHANGED: "authTokensChanged"
   };
   /**
    * Interface of data used by the wallet checkout and payment proccess.
@@ -9151,6 +9176,33 @@
           });
         });
       }
+      /**
+       * Registers a callback function to be invoked when authentication tokens are changed.
+       * This function allows you to respond to changes in authentication tokens, such as when a user logs in.
+       *
+       * @example
+       * button.onAuthTokensChanged((eventData) => {
+       *     console.log('Authentication tokens changed:', eventData);
+       * });
+       *
+       * @example
+       * button.onAuthTokensChanged().then((eventData) => {
+       *     console.log('Authentication tokens changed:', eventData);
+       * });
+       *
+       * @param {listener} [handler] - Function to be called when authentication tokens are changed.
+       */
+    }, {
+      key: "onAuthTokensChanged",
+      value: function onAuthTokensChanged(handler) {
+        var _this7 = this;
+        if (typeof handler === 'function') return this.eventEmitter.subscribe(EVENT$1.AUTH_TOKENS_CHANGED, handler);
+        return new Promise(function (resolve) {
+          return _this7.eventEmitter.subscribe(EVENT$1.AUTH_TOKENS_CHANGED, function (err) {
+            return resolve(err);
+          });
+        });
+      }
     }, {
       key: "setupServiceCallbacks",
       value: function setupServiceCallbacks() {
@@ -9161,13 +9213,14 @@
         this.setupPaymentSuccessCallback();
         this.setupPaymentInReviewCallback();
         this.setupPaymentErrorCallback();
+        this.setupAuthTokensChangedCallback();
       }
     }, {
       key: "setupUnavailableCallback",
       value: function setupUnavailableCallback() {
-        var _this7 = this;
+        var _this8 = this;
         this.service.on(WALLET_EVENT.UNAVAILABLE, function (eventData) {
-          return _this7.eventEmitter.emit(EVENT$1.UNAVAILABLE, {
+          return _this8.eventEmitter.emit(EVENT$1.UNAVAILABLE, {
             event: EVENT$1.UNAVAILABLE,
             data: eventData
           });
@@ -9176,12 +9229,12 @@
     }, {
       key: "setupUpdateCallback",
       value: function setupUpdateCallback() {
-        var _this8 = this;
+        var _this9 = this;
         this.service.on(WALLET_EVENT.UPDATE, function (eventData) {
-          return _this8.hasUpdateHandler ? _this8.eventEmitter.emit(EVENT$1.UPDATE, {
+          return _this9.hasUpdateHandler ? _this9.eventEmitter.emit(EVENT$1.UPDATE, {
             event: EVENT$1.UPDATE,
             data: eventData
-          }) : _this8.update({
+          }) : _this9.update({
             success: true
           });
         });
@@ -9189,12 +9242,12 @@
     }, {
       key: "setupWalletCallback",
       value: function setupWalletCallback() {
-        var _this9 = this;
+        var _this10 = this;
         this.service.on(WALLET_EVENT.CALLBACK, function (eventData) {
           var data = eventData.data,
             onSuccess = eventData.onSuccess,
             onError = eventData.onError;
-          _this9.api.charge().walletCallback(data).then(function (res) {
+          _this10.api.charge().walletCallback(data).then(function (res) {
             return onSuccess(res);
           }, function (err) {
             return onError(err.message);
@@ -9204,15 +9257,15 @@
     }, {
       key: "setupPaymentCallback",
       value: function setupPaymentCallback() {
-        var _this10 = this;
+        var _this11 = this;
         this.service.on(WALLET_EVENT.PAYMENT_METHOD_SELECTED, function (eventData) {
           var data = eventData.data,
             onSuccess = eventData.onSuccess,
             onError = eventData.onError;
-          _this10.api.charge().walletCapture(data).then(function (captureResult) {
+          _this11.api.charge().walletCapture(data).then(function (captureResult) {
             if (typeof onSuccess === 'function') onSuccess();
             var event = captureResult.status === 'inreview' ? EVENT$1.PAYMENT_IN_REVIEW : EVENT$1.PAYMENT_SUCCESSFUL;
-            _this10.eventEmitter.emit(event, {
+            _this11.eventEmitter.emit(event, {
               event: event,
               data: _extends(_extends({}, captureResult), data.customer && {
                 payer_name: data.customer.payer_name,
@@ -9222,7 +9275,7 @@
             });
           }, function (err) {
             if (typeof onError === 'function') onError(err);
-            _this10.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
+            _this11.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
               event: EVENT$1.PAYMENT_ERROR,
               data: err
             });
@@ -9232,9 +9285,9 @@
     }, {
       key: "setupPaymentSuccessCallback",
       value: function setupPaymentSuccessCallback() {
-        var _this11 = this;
+        var _this12 = this;
         this.service.on(WALLET_EVENT.PAYMENT_SUCCESS, function (eventData) {
-          return _this11.eventEmitter.emit(EVENT$1.PAYMENT_SUCCESSFUL, {
+          return _this12.eventEmitter.emit(EVENT$1.PAYMENT_SUCCESSFUL, {
             event: EVENT$1.PAYMENT_SUCCESSFUL,
             data: eventData
           });
@@ -9243,9 +9296,9 @@
     }, {
       key: "setupPaymentInReviewCallback",
       value: function setupPaymentInReviewCallback() {
-        var _this12 = this;
+        var _this13 = this;
         this.service.on(WALLET_EVENT.PAYMENT_IN_REVIEW, function (eventData) {
-          return _this12.eventEmitter.emit(EVENT$1.PAYMENT_IN_REVIEW, {
+          return _this13.eventEmitter.emit(EVENT$1.PAYMENT_IN_REVIEW, {
             event: EVENT$1.PAYMENT_IN_REVIEW,
             data: eventData
           });
@@ -9254,14 +9307,25 @@
     }, {
       key: "setupPaymentErrorCallback",
       value: function setupPaymentErrorCallback() {
-        var _this13 = this;
+        var _this14 = this;
         this.service.on(WALLET_EVENT.PAYMENT_ERROR, function (eventData) {
-          return _this13.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
+          return _this14.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
             event: EVENT$1.PAYMENT_ERROR,
             data: eventData
           });
         });
       }
+    }, {
+      key: "setupAuthTokensChangedCallback",
+      value: function setupAuthTokensChangedCallback() {
+        var _this15 = this;
+        this.service.on(WALLET_EVENT.AUTH_TOKENS_CHANGED, function (eventData) {
+          return _this15.eventEmitter.emit(EVENT$1.AUTH_TOKENS_CHANGED, {
+            event: EVENT$1.AUTH_TOKENS_CHANGED,
+            data: eventData
+          });
+        });
+      }
     }]);
     return WalletButtons;
   }();