@paydock/client-sdk 1.103.1 → 1.103.11-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.103.1';
+  SDK._version = 'v1.103.11-beta';
 
   var ENV = {
     SANDBOX: 'sandbox',
@@ -2112,6 +2112,11 @@
       value: function getElement() {
         return document.querySelector(this.selector);
       }
+    }, {
+      key: "getSelector",
+      value: function getSelector() {
+        return this.selector;
+      }
     }, {
       key: "convertConfigs",
       value: function convertConfigs(params, allowValue) {
@@ -6492,9 +6497,11 @@
     var _super = _createSuper(WalletBackground);
     function WalletBackground(bgImageUrl) {
       var _this;
+      var hideCloseButton = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       _classCallCheck(this, WalletBackground);
       _this = _super.call(this);
       _this.bgImageUrl = bgImageUrl;
+      _this.hideCloseButton = hideCloseButton;
       _this.imageStyle = null;
       return _this;
     }
@@ -6517,6 +6524,7 @@
         var _this2 = this;
         var body = document.body || document.getElementsByTagName("body")[0];
         var template = String(TEMPLATE$2);
+        if (this.hideCloseButton === true) template = template.replace('<a href="#" data-close>Close</a>', '');
         this.overlay = document.createElement("div");
         this.overlay.classList.add("checkout-overlay");
         this.overlay.setAttribute("checkout-overlay", " ");
@@ -6550,7 +6558,10 @@
     PAYMENT_IN_REVIEW: 'payment_in_review',
     PAYMENT_ERROR: 'payment_error',
     CALLBACK: 'callback',
-    AUTH_TOKENS_CHANGED: 'auth_tokens_changed'
+    AUTH_TOKENS_CHANGED: 'auth_tokens_changed',
+    BUTTON_CLICK: 'button_click',
+    CHECKOUT_OPEN: 'checkout_open',
+    CHECKOUT_CLOSE: 'checkout_close'
   };
   var WalletService = /*#__PURE__*/function () {
     function WalletService(publicKey, meta) {
@@ -6592,6 +6603,18 @@
         // do nothing unless current wallet service overrides this method;
         return;
       }
+    }, {
+      key: "enable",
+      value: function enable() {
+        // do nothing unless current wallet service overrides this method;
+        return;
+      }
+    }, {
+      key: "disable",
+      value: function disable() {
+        // do nothing unless current wallet service overrides this method;
+        return;
+      }
     }, {
       key: "on",
       value: function on(eventName, cb) {
@@ -6865,6 +6888,23 @@
         return _extends(_extends({}, this.meta.style && {
           style: this.meta.style
         }), {
+          onClick: function onClick(_data, actions) {
+            var responseValue;
+            _this4.eventEmitter.emit(WALLET_EVENT.BUTTON_CLICK, {
+              attachResult: function attachResult(value) {
+                if (value && value instanceof Promise) {
+                  responseValue = value.then(function () {
+                    return actions.resolve();
+                  })["catch"](function () {
+                    return actions.reject();
+                  });
+                } else {
+                  responseValue = value;
+                }
+              }
+            });
+            return responseValue;
+          },
           createOrder: function createOrder() {
             return new Promise(function (resolve, reject) {
               _this4.eventEmitter.emit(WALLET_EVENT.CALLBACK, {
@@ -6914,6 +6954,9 @@
             });
             return _this4.pendingApprovalPromise;
           },
+          onCancel: function onCancel() {
+            return _this4.eventEmitter.emit(WALLET_EVENT.CHECKOUT_CLOSE);
+          },
           onError: function onError(err) {
             // Error handling so that paypal does not throw an uncaught error
             // We're already handling errors and notifying Merchants at "wallet-buttons.ts"
@@ -7230,11 +7273,20 @@
       _this.gatewayName = gatewayName;
       _this.eventEmitter = eventEmitter;
       _this.latestShippingData = {};
+      _this.onCancelPayment = function (event) {
+        return _this.eventEmitter.emit(WALLET_EVENT.CHECKOUT_CLOSE);
+      };
       _this.onValidateMerchant = function (event) {
-        _this.getMerchantSession().then(function (merchantSession) {
-          _this.paymentSession.completeMerchantValidation(merchantSession);
+        _this.handleMerchantOnButtonClickEvent().then(function () {
+          _this.getMerchantSession().then(function (merchantSession) {
+            _this.paymentSession.completeMerchantValidation(merchantSession);
+          })["catch"](function (err) {
+            console.error("Error fetching merchant session", err);
+            _this.paymentSession.abort();
+          });
         })["catch"](function (err) {
-          return console.error("Error fetching merchant session", err);
+          console.error('Error while processing merchant callback', err);
+          _this.paymentSession.abort();
         });
       };
       _this.onPaymentAuthorized = function (event) {
@@ -7485,6 +7537,7 @@
         this.paymentSession = new ApplePaySession(3, this.createRequest());
         this.paymentSession.onvalidatemerchant = this.onValidateMerchant;
         this.paymentSession.onpaymentauthorized = this.onPaymentAuthorized;
+        this.paymentSession.oncancel = this.onCancelPayment;
         this.paymentSession.onshippingcontactselected = this.onShippingContactSelected;
         this.paymentSession.onshippingmethodselected = this.onShippingMethodSelected;
         this.paymentSession.begin();
@@ -7544,6 +7597,28 @@
           });
         });
       }
+    }, {
+      key: "handleMerchantOnButtonClickEvent",
+      value: function handleMerchantOnButtonClickEvent() {
+        var _this6 = this;
+        return new Promise(function (resolve, reject) {
+          var merchantResult;
+          _this6.eventEmitter.emit(WALLET_EVENT.BUTTON_CLICK, {
+            attachResult: function attachResult(value) {
+              merchantResult = value;
+            }
+          });
+          if (merchantResult instanceof Promise) {
+            merchantResult.then(resolve)["catch"](reject);
+          } else {
+            if (merchantResult === false) {
+              reject();
+            } else {
+              resolve();
+            }
+          }
+        });
+      }
     }, {
       key: "createButtonStyle",
       value: function createButtonStyle() {
@@ -7563,6 +7638,7 @@
       _this = _super.call(this, publicKey, meta);
       _this.gatewayName = gatewayName;
       _this.eventEmitter = eventEmitter;
+      _this.processingButtonClick = false;
       _this.parseUpdateData = function (data) {
         var _a, _b, _c, _d, _e, _f;
         var shippingOption = (_b = (_a = _this.meta) === null || _a === void 0 ? void 0 : _a.shipping_options) === null || _b === void 0 ? void 0 : _b.find(function (o) {
@@ -7740,29 +7816,64 @@
         var _a, _b, _c;
         container.getElement().appendChild(this.paymentsClient.createButton({
           onClick: function onClick() {
-            return _this3.loadPaymentData();
+            return _this3.onGooglePayButtonClicked();
           },
           buttonType: ((_a = this.getMetaStyles()) === null || _a === void 0 ? void 0 : _a.button_type) || 'pay',
           buttonSizeMode: ((_b = this.getMetaStyles()) === null || _b === void 0 ? void 0 : _b.button_size_mode) || "fill",
           buttonColor: ((_c = this.getMetaStyles()) === null || _c === void 0 ? void 0 : _c.button_color) || "default"
         }));
       }
+    }, {
+      key: "onGooglePayButtonClicked",
+      value: function onGooglePayButtonClicked() {
+        var _this4 = this;
+        if (this.processingButtonClick) return;
+        this.processingButtonClick = true;
+        this.handleMerchantOnButtonClickEvent().then(function () {
+          _this4.loadPaymentData()["finally"](function () {
+            _this4.processingButtonClick = false;
+          });
+        })["catch"](function (err) {
+          _this4.processingButtonClick = false;
+          console.error('Error while processing merchant callback', err);
+        });
+      }
+    }, {
+      key: "handleMerchantOnButtonClickEvent",
+      value: function handleMerchantOnButtonClickEvent() {
+        var _this5 = this;
+        return new Promise(function (resolve, reject) {
+          var merchantResult;
+          _this5.eventEmitter.emit(WALLET_EVENT.BUTTON_CLICK, {
+            attachResult: function attachResult(value) {
+              merchantResult = value;
+            }
+          });
+          if (merchantResult instanceof Promise) {
+            merchantResult.then(resolve)["catch"](reject);
+          } else {
+            if (merchantResult === false) {
+              reject();
+            } else {
+              resolve();
+            }
+          }
+        });
+      }
     }, {
       key: "loadPaymentData",
       value: function loadPaymentData() {
-        this.paymentsClient.loadPaymentData(this.createPaymentDataRequest())
-        // .then((paymentData) => {
-        //     // if using gateway tokenization, pass this token without modification
-        //     // this.paymentToken = paymentData.paymentMethodData.tokenizationData.token;
-        // })
-        ["catch"](function () {
-          console.error('Error while loading payment data');
+        var _this6 = this;
+        return this.paymentsClient.loadPaymentData(this.createPaymentDataRequest())["catch"](function (err) {
+          _this6.eventEmitter.emit(WALLET_EVENT.CHECKOUT_CLOSE);
+          console.error('Error while loading payment data', err);
+          throw err;
         });
       }
     }, {
       key: "onPaymentAuthorized",
       value: function onPaymentAuthorized(paymentData) {
-        var _this4 = this;
+        var _this7 = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         var billingAddressLine1 = (_c = (_b = (_a = paymentData.paymentMethodData) === null || _a === void 0 ? void 0 : _a.info) === null || _b === void 0 ? void 0 : _b.billingAddress) === null || _c === void 0 ? void 0 : _c.address1;
         var billingAddressLine2 = (_f = (_e = (_d = paymentData.paymentMethodData) === null || _d === void 0 ? void 0 : _d.info) === null || _e === void 0 ? void 0 : _e.billingAddress) === null || _f === void 0 ? void 0 : _f.address2;
@@ -7778,7 +7889,7 @@
         var shippingContactPhone = (_q = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _q === void 0 ? void 0 : _q.phoneNumber;
         return new Promise(function (resolve) {
           var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-          return _this4.eventEmitter.emit(WALLET_EVENT.PAYMENT_METHOD_SELECTED, {
+          return _this7.eventEmitter.emit(WALLET_EVENT.PAYMENT_METHOD_SELECTED, {
             data: _extends({
               customer: {
                 payment_source: _extends(_extends(_extends(_extends({
@@ -7800,11 +7911,11 @@
                   ref_token: paymentData.paymentMethodData.tokenizationData.token
                 })
               }
-            }, _this4.isShippingRequired() && {
+            }, _this7.isShippingRequired() && {
               shipping: _extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends({}, shippingOptionMethod && {
                 method: shippingOptionMethod
-              }), _this4.hasShippingOptions() && {
-                options: _this4.meta.shipping_options
+              }), _this7.hasShippingOptions() && {
+                options: _this7.meta.shipping_options
               }), shippingAddressLine1 && {
                 address_line1: shippingAddressLine1
               }), shippingAddressLine2 && {
@@ -7848,12 +7959,12 @@
     }, {
       key: "onPaymentDataChanged",
       value: function onPaymentDataChanged(intermediatePaymentData) {
-        var _this5 = this;
+        var _this8 = this;
         if (!this.isShippingRequired()) return;
         var parsedUpdateData = this.parseUpdateData(intermediatePaymentData);
         var returnPromise = new Promise(function (res, rej) {
-          _this5.latestShippingChangePromiseResolve = res;
-          _this5.latestShippingChangePromiseReject = rej;
+          _this8.latestShippingChangePromiseResolve = res;
+          _this8.latestShippingChangePromiseReject = rej;
         });
         this.eventEmitter.emit(WALLET_EVENT.UPDATE, parsedUpdateData);
         return returnPromise;
@@ -8536,6 +8647,16 @@
     return Checkout;
   }();
 
+  function getFlypayV2Button() {
+    return "\n        <div id=\"loading-overlay\"></div>\n        <div class=\"flypay-v2-checkout-btn__wrapper\">\n            <svg viewBox=\"0 0 384 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g clip-path=\"url(#clip0_34013_168361)\">\n                    <rect width=\"384\" height=\"48\" rx=\"24\" fill=\"#212121\"/>\n                    <path d=\"M134.985 24.6006H132.387V29H129.847V16.7646H135.176C136.404 16.7646 137.384 17.0801 138.114 17.7109C138.845 18.3418 139.21 19.3185 139.21 20.6411C139.21 22.0854 138.845 23.1064 138.114 23.7041C137.384 24.3018 136.341 24.6006 134.985 24.6006ZM136.18 22.0522C136.512 21.759 136.678 21.2941 136.678 20.6577C136.678 20.0213 136.509 19.5675 136.172 19.2964C135.84 19.0252 135.372 18.8896 134.769 18.8896H132.387V22.4922H134.769C135.372 22.4922 135.843 22.3455 136.18 22.0522ZM141.277 20.9316C141.902 20.1348 142.976 19.7363 144.498 19.7363C145.488 19.7363 146.368 19.9328 147.137 20.3257C147.906 20.7186 148.291 21.4601 148.291 22.5503V26.7007C148.291 26.9884 148.297 27.3371 148.308 27.7466C148.324 28.0565 148.371 28.2668 148.449 28.3774C148.526 28.4881 148.642 28.5794 148.797 28.6514V29H146.224C146.152 28.8174 146.102 28.6458 146.075 28.4854C146.047 28.3249 146.025 28.1423 146.008 27.9375C145.682 28.2917 145.306 28.5933 144.879 28.8423C144.37 29.1356 143.795 29.2822 143.153 29.2822C142.334 29.2822 141.656 29.0498 141.119 28.585C140.588 28.1146 140.322 27.4505 140.322 26.5928C140.322 25.4805 140.751 24.6753 141.609 24.1772C142.079 23.9061 142.771 23.7124 143.684 23.5962L144.489 23.4966C144.926 23.4412 145.239 23.3721 145.427 23.2891C145.765 23.1452 145.934 22.9211 145.934 22.6167C145.934 22.2459 145.804 21.9914 145.543 21.853C145.289 21.7091 144.913 21.6372 144.415 21.6372C143.856 21.6372 143.46 21.7756 143.228 22.0522C143.062 22.257 142.951 22.5337 142.896 22.8823H140.613C140.663 22.091 140.884 21.4408 141.277 20.9316ZM143.037 27.29C143.258 27.4727 143.529 27.564 143.85 27.564C144.359 27.564 144.827 27.4146 145.253 27.1157C145.685 26.8169 145.909 26.2718 145.925 25.4805V24.6006C145.776 24.6947 145.624 24.7721 145.469 24.833C145.319 24.8883 145.112 24.9409 144.846 24.9907L144.315 25.0903C143.817 25.1789 143.46 25.2868 143.244 25.4141C142.879 25.6299 142.696 25.9647 142.696 26.4185C142.696 26.8224 142.81 27.113 143.037 27.29ZM154.077 26.626L155.944 19.9521H158.459L155.355 28.8506C154.757 30.5661 154.284 31.6286 153.936 32.0381C153.587 32.4531 152.89 32.6606 151.844 32.6606C151.633 32.6606 151.465 32.6579 151.337 32.6523C151.21 32.6523 151.019 32.644 150.765 32.6274V30.7349L151.063 30.7515C151.296 30.7625 151.517 30.7542 151.728 30.7266C151.938 30.6989 152.115 30.6353 152.259 30.5356C152.397 30.4416 152.524 30.2451 152.641 29.9463C152.762 29.6475 152.812 29.4648 152.79 29.3984L149.47 19.9521H152.101L154.077 26.626ZM171.458 29L170.039 22.4092L168.603 29H166.146L163.606 19.9521H166.146L167.557 26.4434L168.86 19.9521H171.259L172.637 26.4683L174.048 19.9521H176.514L173.891 29H171.458ZM180.257 19.9521V29H177.858V19.9521H180.257ZM180.257 16.6899V18.873H177.858V16.6899H180.257ZM186.699 27.3149V29.083L185.578 29.1245C184.46 29.1632 183.697 28.9696 183.287 28.5435C183.021 28.2723 182.889 27.8545 182.889 27.29V21.7202H181.627V20.0352H182.889V17.5117H185.229V20.0352H186.699V21.7202H185.229V26.5015C185.229 26.8722 185.277 27.1047 185.371 27.1987C185.465 27.2873 185.752 27.3315 186.234 27.3315C186.306 27.3315 186.381 27.3315 186.458 27.3315C186.541 27.326 186.621 27.3205 186.699 27.3149ZM196.394 23.6875V29H193.979V23.4966C193.979 23.0096 193.896 22.6167 193.729 22.3179C193.514 21.8973 193.104 21.687 192.501 21.687C191.876 21.687 191.4 21.8973 191.073 22.3179C190.752 22.7329 190.592 23.3278 190.592 24.1025V29H188.234V16.8062H190.592V21.1309C190.935 20.6051 191.331 20.2399 191.779 20.0352C192.233 19.8249 192.708 19.7197 193.207 19.7197C193.765 19.7197 194.272 19.8166 194.726 20.0103C195.185 20.2039 195.561 20.5 195.854 20.8984C196.104 21.236 196.256 21.5846 196.311 21.9443C196.366 22.2985 196.394 22.8796 196.394 23.6875Z\" fill=\"white\"/>\n                    <path d=\"M231.702 14.0094C231.71 13.9026 231.673 13.7973 231.601 13.7164C231.529 13.6354 231.428 13.5852 231.318 13.5766C231.296 13.5734 231.272 13.5734 231.25 13.5766H217.787C217.679 13.5725 217.573 13.6092 217.492 13.6791C217.411 13.749 217.362 13.8467 217.353 13.9517C217.344 14.0567 217.378 14.1609 217.446 14.2424C217.515 14.324 217.613 14.3765 217.72 14.3891C217.743 14.3924 217.767 14.3924 217.79 14.3891H231.256C231.367 14.396 231.476 14.3599 231.56 14.2888C231.643 14.2177 231.694 14.1172 231.702 14.0094V14.0094Z\" fill=\"white\"/>\n                    <path d=\"M226.501 35.2805C226.497 35.3338 226.503 35.3874 226.52 35.4382C226.537 35.4891 226.564 35.5362 226.6 35.5769C226.635 35.6176 226.679 35.6511 226.728 35.6754C226.776 35.6997 226.83 35.7144 226.884 35.7186H240.409C240.52 35.7272 240.629 35.6927 240.714 35.6227C240.798 35.5528 240.85 35.453 240.859 35.3454C240.868 35.2378 240.832 35.1312 240.761 35.049C240.689 34.9668 240.586 34.9158 240.476 34.9072H226.945C226.836 34.8998 226.728 34.9348 226.644 35.0047C226.561 35.0746 226.51 35.1738 226.501 35.2805Z\" fill=\"white\"/>\n                    <path d=\"M248.245 30.3548L251.02 19.1664C251.211 18.3788 251.052 17.6345 250.576 17.0708C250.109 16.5299 249.402 16.2227 248.578 16.2227H215.233C215.126 16.228 215.025 16.2733 214.951 16.3491C214.877 16.4249 214.836 16.5254 214.836 16.63C214.836 16.7345 214.877 16.8351 214.951 16.9108C215.025 16.9866 215.126 17.0319 215.233 17.0373H248.579C249.134 17.0373 249.597 17.2309 249.894 17.5782C250.203 17.9417 250.304 18.4437 250.172 18.9846L247.397 30.1731C247.112 31.3447 245.867 32.2989 244.622 32.2989H223.787C223.73 32.2961 223.674 32.3045 223.62 32.3237C223.567 32.3428 223.519 32.3724 223.477 32.4105C223.436 32.4486 223.403 32.4945 223.381 32.5453C223.359 32.5961 223.347 32.6509 223.347 32.7062C223.347 32.7616 223.359 32.8163 223.381 32.8671C223.403 32.918 223.436 32.9638 223.477 33.0019C223.519 33.0401 223.567 33.0696 223.62 33.0888C223.674 33.108 223.73 33.1164 223.787 33.1135H244.619C246.249 33.1157 247.876 31.8759 248.245 30.3548Z\" fill=\"white\"/>\n                    <path d=\"M213.705 16.2227L211.328 16.7625V28.9657H213.715V16.2227H213.705Z\" fill=\"white\"/>\n                    <path d=\"M218.82 29.0569C219.368 29.0431 219.909 28.9313 220.416 28.7269V30.2112C220.416 31.61 219.6 31.9908 218.89 31.9908H218.3V34.3406H218.896C221.322 34.3406 222.826 32.7579 222.826 30.2112V20.3945L220.416 20.9355V24.9762C220.416 26.0872 219.879 26.7071 218.823 26.7071C217.768 26.7071 217.231 26.0894 217.231 24.9762V20.3978L214.82 20.9387V24.9794C214.817 27.3822 216.427 29.0569 218.82 29.0569Z\" fill=\"white\"/>\n                    <path d=\"M206.282 22.6056H209.279V20.4765H206.282V20.4667H206.264C206.272 19.2951 207.062 18.3409 208.655 18.3409H210.542V16.2227H208.655C205.366 16.2227 203.906 18.1202 203.898 20.4635V28.9657H206.282V22.6056Z\" fill=\"white\"/>\n                    <path d=\"M226.233 28.9713L226.93 26.3749H228.558C229.111 26.3815 229.663 26.3086 230.195 26.1585C230.671 26.0264 231.117 25.806 231.508 25.5094C231.877 25.2255 232.178 24.8662 232.39 24.4568C232.613 24.0151 232.725 23.5276 232.715 23.0352C232.715 22.3017 232.493 21.7154 232.049 21.2761C231.742 20.9673 231.36 20.7386 230.939 20.6108C230.43 20.4649 229.901 20.3963 229.371 20.4074H226.652L224.352 28.9605H226.23L226.233 28.9713ZM229.302 22.1124C229.541 22.1057 229.778 22.1367 230.006 22.2044C230.186 22.2621 230.348 22.3612 230.48 22.4932C230.574 22.587 230.647 22.6982 230.695 22.8201C230.744 22.942 230.767 23.0722 230.762 23.2029C230.773 23.4234 230.726 23.6428 230.626 23.8407C230.525 24.0385 230.375 24.2081 230.188 24.3334C229.804 24.5985 229.3 24.7305 228.669 24.7305H227.386L228.084 22.1156H229.305L229.302 22.1124Z\" fill=\"white\"/>\n                    <path d=\"M230.516 28.9656H232.546L233.843 27.0475H237.462L237.731 28.9656H239.665L238.306 20.3477H236.498L230.516 28.9656ZM236.85 22.5752L237.239 25.4031H234.965L236.85 22.5752Z\" fill=\"white\"/>\n                    <path d=\"M241.671 25.5911L240.765 28.9632H242.651L243.518 25.761L248.204 20.4102H248.201H245.929L242.992 23.9543L241.989 20.4102H239.898L241.671 25.5911Z\" fill=\"white\"/>\n                </g>\n                <defs>\n                    <clipPath id=\"clip0_34013_168361\">\n                        <rect width=\"384\" height=\"48\" rx=\"24\" fill=\"white\"/>\n                    </clipPath>\n                </defs>\n            </svg>\n        </div>\n    ";
+  }
+  function getDisabledFlypayV2Button() {
+    return "\n        <div id=\"loading-overlay\"></div>\n        <div class=\"flypay-v2-checkout-btn-disabled\">\n            <svg viewBox=\"0 0 384 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g clip-path=\"url(#clip0_34032_180021)\">\n                    <rect x=\"0.5\" y=\"0.5\" width=\"383\" height=\"47\" rx=\"23.5\" stroke=\"#212121\"/>\n                    <path d=\"M134.985 24.6006H132.387V29H129.847V16.7646H135.176C136.404 16.7646 137.384 17.0801 138.114 17.7109C138.845 18.3418 139.21 19.3185 139.21 20.6411C139.21 22.0854 138.845 23.1064 138.114 23.7041C137.384 24.3018 136.341 24.6006 134.985 24.6006ZM136.18 22.0522C136.512 21.759 136.678 21.2941 136.678 20.6577C136.678 20.0213 136.509 19.5675 136.172 19.2964C135.84 19.0252 135.372 18.8896 134.769 18.8896H132.387V22.4922H134.769C135.372 22.4922 135.843 22.3455 136.18 22.0522ZM141.277 20.9316C141.902 20.1348 142.976 19.7363 144.498 19.7363C145.488 19.7363 146.368 19.9328 147.137 20.3257C147.906 20.7186 148.291 21.4601 148.291 22.5503V26.7007C148.291 26.9884 148.297 27.3371 148.308 27.7466C148.324 28.0565 148.371 28.2668 148.449 28.3774C148.526 28.4881 148.642 28.5794 148.797 28.6514V29H146.224C146.152 28.8174 146.102 28.6458 146.075 28.4854C146.047 28.3249 146.025 28.1423 146.008 27.9375C145.682 28.2917 145.306 28.5933 144.879 28.8423C144.37 29.1356 143.795 29.2822 143.153 29.2822C142.334 29.2822 141.656 29.0498 141.119 28.585C140.588 28.1146 140.322 27.4505 140.322 26.5928C140.322 25.4805 140.751 24.6753 141.609 24.1772C142.079 23.9061 142.771 23.7124 143.684 23.5962L144.489 23.4966C144.926 23.4412 145.239 23.3721 145.427 23.2891C145.765 23.1452 145.934 22.9211 145.934 22.6167C145.934 22.2459 145.804 21.9914 145.543 21.853C145.289 21.7091 144.913 21.6372 144.415 21.6372C143.856 21.6372 143.46 21.7756 143.228 22.0522C143.062 22.257 142.951 22.5337 142.896 22.8823H140.613C140.663 22.091 140.884 21.4408 141.277 20.9316ZM143.037 27.29C143.258 27.4727 143.529 27.564 143.85 27.564C144.359 27.564 144.827 27.4146 145.253 27.1157C145.685 26.8169 145.909 26.2718 145.925 25.4805V24.6006C145.776 24.6947 145.624 24.7721 145.469 24.833C145.319 24.8883 145.112 24.9409 144.846 24.9907L144.315 25.0903C143.817 25.1789 143.46 25.2868 143.244 25.4141C142.879 25.6299 142.696 25.9647 142.696 26.4185C142.696 26.8224 142.81 27.113 143.037 27.29ZM154.077 26.626L155.944 19.9521H158.459L155.355 28.8506C154.757 30.5661 154.284 31.6286 153.936 32.0381C153.587 32.4531 152.89 32.6606 151.844 32.6606C151.633 32.6606 151.465 32.6579 151.337 32.6523C151.21 32.6523 151.019 32.644 150.765 32.6274V30.7349L151.063 30.7515C151.296 30.7625 151.517 30.7542 151.728 30.7266C151.938 30.6989 152.115 30.6353 152.259 30.5356C152.397 30.4416 152.524 30.2451 152.641 29.9463C152.762 29.6475 152.812 29.4648 152.79 29.3984L149.47 19.9521H152.101L154.077 26.626ZM171.458 29L170.039 22.4092L168.603 29H166.146L163.606 19.9521H166.146L167.557 26.4434L168.86 19.9521H171.259L172.637 26.4683L174.048 19.9521H176.514L173.891 29H171.458ZM180.257 19.9521V29H177.858V19.9521H180.257ZM180.257 16.6899V18.873H177.858V16.6899H180.257ZM186.699 27.3149V29.083L185.578 29.1245C184.46 29.1632 183.697 28.9696 183.287 28.5435C183.021 28.2723 182.889 27.8545 182.889 27.29V21.7202H181.627V20.0352H182.889V17.5117H185.229V20.0352H186.699V21.7202H185.229V26.5015C185.229 26.8722 185.277 27.1047 185.371 27.1987C185.465 27.2873 185.752 27.3315 186.234 27.3315C186.306 27.3315 186.381 27.3315 186.458 27.3315C186.541 27.326 186.621 27.3205 186.699 27.3149ZM196.394 23.6875V29H193.979V23.4966C193.979 23.0096 193.896 22.6167 193.729 22.3179C193.514 21.8973 193.104 21.687 192.501 21.687C191.876 21.687 191.4 21.8973 191.073 22.3179C190.752 22.7329 190.592 23.3278 190.592 24.1025V29H188.234V16.8062H190.592V21.1309C190.935 20.6051 191.331 20.2399 191.779 20.0352C192.233 19.8249 192.708 19.7197 193.207 19.7197C193.765 19.7197 194.272 19.8166 194.726 20.0103C195.185 20.2039 195.561 20.5 195.854 20.8984C196.104 21.236 196.256 21.5846 196.311 21.9443C196.366 22.2985 196.394 22.8796 196.394 23.6875Z\" fill=\"#212121\"/>\n                    <path d=\"M231.702 14.0094C231.71 13.9026 231.673 13.7973 231.601 13.7164C231.529 13.6354 231.428 13.5852 231.318 13.5766C231.296 13.5734 231.272 13.5734 231.25 13.5766H217.787C217.679 13.5725 217.573 13.6092 217.492 13.6791C217.411 13.749 217.362 13.8467 217.353 13.9517C217.344 14.0567 217.378 14.1609 217.446 14.2424C217.515 14.324 217.613 14.3765 217.72 14.3891C217.743 14.3924 217.767 14.3924 217.79 14.3891H231.256C231.367 14.396 231.476 14.3599 231.56 14.2888C231.643 14.2177 231.694 14.1172 231.702 14.0094V14.0094Z\" fill=\"#212121\"/>\n                    <path d=\"M226.501 35.2805C226.497 35.3338 226.503 35.3874 226.52 35.4382C226.537 35.4891 226.564 35.5362 226.6 35.5769C226.635 35.6176 226.679 35.6511 226.728 35.6754C226.776 35.6997 226.83 35.7144 226.884 35.7186H240.409C240.52 35.7272 240.629 35.6927 240.714 35.6227C240.798 35.5528 240.85 35.453 240.859 35.3454C240.868 35.2378 240.832 35.1312 240.761 35.049C240.689 34.9668 240.586 34.9158 240.476 34.9072H226.945C226.836 34.8998 226.728 34.9348 226.644 35.0047C226.561 35.0746 226.51 35.1738 226.501 35.2805Z\" fill=\"#212121\"/>\n                    <path d=\"M248.245 30.3548L251.02 19.1664C251.211 18.3788 251.052 17.6345 250.576 17.0708C250.109 16.5299 249.402 16.2227 248.578 16.2227H215.233C215.126 16.228 215.025 16.2733 214.951 16.3491C214.877 16.4249 214.836 16.5254 214.836 16.63C214.836 16.7345 214.877 16.8351 214.951 16.9108C215.025 16.9866 215.126 17.0319 215.233 17.0373H248.579C249.134 17.0373 249.597 17.2309 249.894 17.5782C250.203 17.9417 250.304 18.4437 250.172 18.9846L247.397 30.1731C247.112 31.3447 245.867 32.2989 244.622 32.2989H223.787C223.73 32.2961 223.674 32.3045 223.62 32.3237C223.567 32.3428 223.519 32.3724 223.477 32.4105C223.436 32.4486 223.403 32.4945 223.381 32.5453C223.359 32.5961 223.347 32.6509 223.347 32.7062C223.347 32.7616 223.359 32.8163 223.381 32.8671C223.403 32.918 223.436 32.9638 223.477 33.0019C223.519 33.0401 223.567 33.0696 223.62 33.0888C223.674 33.108 223.73 33.1164 223.787 33.1135H244.619C246.249 33.1157 247.876 31.8759 248.245 30.3548Z\" fill=\"#212121\"/>\n                    <path d=\"M213.705 16.2227L211.328 16.7625V28.9657H213.715V16.2227H213.705Z\" fill=\"#212121\"/>\n                    <path d=\"M218.82 29.0569C219.368 29.0431 219.909 28.9313 220.416 28.7269V30.2112C220.416 31.61 219.6 31.9908 218.89 31.9908H218.3V34.3406H218.896C221.322 34.3406 222.826 32.7579 222.826 30.2112V20.3945L220.416 20.9355V24.9762C220.416 26.0872 219.879 26.7071 218.823 26.7071C217.768 26.7071 217.231 26.0894 217.231 24.9762V20.3978L214.82 20.9387V24.9794C214.817 27.3822 216.427 29.0569 218.82 29.0569Z\" fill=\"#212121\"/>\n                    <path d=\"M206.282 22.6056H209.279V20.4765H206.282V20.4667H206.264C206.272 19.2951 207.062 18.3409 208.655 18.3409H210.542V16.2227H208.655C205.366 16.2227 203.906 18.1202 203.898 20.4635V28.9657H206.282V22.6056Z\" fill=\"#212121\"/>\n                    <path d=\"M226.233 28.9713L226.93 26.3749H228.558C229.111 26.3815 229.663 26.3086 230.195 26.1585C230.671 26.0264 231.117 25.806 231.508 25.5094C231.877 25.2255 232.178 24.8662 232.39 24.4568C232.613 24.0151 232.725 23.5276 232.715 23.0352C232.715 22.3017 232.493 21.7154 232.049 21.2761C231.742 20.9673 231.36 20.7386 230.939 20.6108C230.43 20.4649 229.901 20.3963 229.371 20.4074H226.652L224.352 28.9605H226.23L226.233 28.9713ZM229.302 22.1124C229.541 22.1057 229.778 22.1367 230.006 22.2044C230.186 22.2621 230.348 22.3612 230.48 22.4932C230.574 22.587 230.647 22.6982 230.695 22.8201C230.744 22.942 230.767 23.0722 230.762 23.2029C230.773 23.4234 230.726 23.6428 230.626 23.8407C230.525 24.0385 230.375 24.2081 230.188 24.3334C229.804 24.5985 229.3 24.7305 228.669 24.7305H227.386L228.084 22.1156H229.305L229.302 22.1124Z\" fill=\"#212121\"/>\n                    <path d=\"M230.516 28.9656H232.546L233.843 27.0475H237.462L237.731 28.9656H239.665L238.306 20.3477H236.498L230.516 28.9656ZM236.85 22.5752L237.239 25.4031H234.965L236.85 22.5752Z\" fill=\"#212121\"/>\n                    <path d=\"M241.671 25.5911L240.765 28.9632H242.651L243.518 25.761L248.204 20.4102H248.201H245.929L242.992 23.9543L241.989 20.4102H239.898L241.671 25.5911Z\" fill=\"#212121\"/>\n                </g>\n                <defs>\n                    <clipPath id=\"clip0_34032_180021\">\n                        <rect width=\"384\" height=\"48\" rx=\"24\" fill=\"white\"/>\n                    </clipPath>\n                </defs>\n            </svg>\n        </div>\n    ";
+  }
+  function createFlypayV2ButtonStyle(containerId) {
+    return "\n        ".concat(containerId, " {\n            position: relative;\n        }\n\n        #loading-overlay {\n            position: absolute;\n            height: 100%;\n            width: 100%;\n            background: rgba(255, 255, 255, 0.7);\n            display: none;\n            justify-content: center;\n            align-items: center;\n            cursor: not-allowed; /* Make it look not clickable */\n        }\n\n        #loading-overlay::after {\n            content: \"\";\n            height: 60%;\n            aspect-ratio: 1 / 1;\n            display: inline-block;\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            width: 100%;\n            height: fit-content;\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-checkout-btn-disabled {\n            width: 100%;\n            height: fit-content;\n            border: none; /* Remove borders */\n            background: transparent; /* Make the button background transparent */\n            cursor: not-allowed; /* Make it look not clickable */\n            outline: none; /* Remove focus outline */\n            padding: 0; /* Remove any default padding */\n        }\n    ");
+  }
+
   var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
     function adopt(value) {
       return value instanceof P ? value : new P(function (resolve) {
@@ -8570,47 +8691,79 @@
       var _this;
       _classCallCheck(this, FlypayV2WalletService);
       _this = _super.call(this, publicKey, meta);
+      _this.processingButtonClick = false;
       _this.onFlypayV2ButtonClick = function () {
-        return __awaiter(_assertThisInitialized(_this), void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-          var loadingOverlay, button;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+        return __awaiter(_assertThisInitialized(_this), void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+          var _this2 = this;
+          var setLoadingOverlayDisplay;
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                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;
+                setLoadingOverlayDisplay = function setLoadingOverlayDisplay(displayStyle) {
+                  var loadingOverlay = document.getElementById('loading-overlay');
+                  if (loadingOverlay) loadingOverlay.style.display = displayStyle;
+                };
+                this.disable();
+                setLoadingOverlayDisplay('flex');
+                if (!this.processingButtonClick) {
+                  _context2.next = 5;
                   break;
                 }
-                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 (this.orderId) {
-                  this.flypayV2Checkout(this.orderId);
-                } else {
-                  this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE);
-                }
-                _context.next = 18;
-                break;
-              case 13:
-                _context.prev = 13;
-                _context.t0 = _context["catch"](3);
-                if (loadingOverlay) loadingOverlay.style.display = 'none';
-                if (button) button.disabled = false;
-                this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, {
-                  err: _context.t0
+                return _context2.abrupt("return");
+              case 5:
+                this.processingButtonClick = true;
+                this.handleMerchantOnButtonClickEvent().then(function () {
+                  return __awaiter(_this2, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                    var _a, _b;
+                    return _regeneratorRuntime().wrap(function _callee$(_context) {
+                      while (1) switch (_context.prev = _context.next) {
+                        case 0:
+                          _context.prev = 0;
+                          this.processingButtonClick = false;
+                          if (this.orderId) {
+                            _context.next = 6;
+                            break;
+                          }
+                          _context.next = 5;
+                          return this.getOrderId();
+                        case 5:
+                          this.orderId = _context.sent;
+                        case 6:
+                          setLoadingOverlayDisplay('none');
+                          this.background = this.initBackground();
+                          if (this.orderId) {
+                            (_a = this.background) === null || _a === void 0 ? void 0 : _a.initControl();
+                            this.flypayV2Checkout(this.orderId);
+                          } else {
+                            this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE);
+                          }
+                          _context.next = 17;
+                          break;
+                        case 11:
+                          _context.prev = 11;
+                          _context.t0 = _context["catch"](0);
+                          (_b = this.background) === null || _b === void 0 ? void 0 : _b.clear();
+                          setLoadingOverlayDisplay('none');
+                          this.enable();
+                          this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, {
+                            err: _context.t0
+                          });
+                        case 17:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }, _callee, this, [[0, 11]]);
+                  }));
+                })["catch"](function (err) {
+                  _this2.processingButtonClick = false;
+                  setLoadingOverlayDisplay('none');
+                  _this2.enable();
                 });
-              case 18:
+              case 7:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
-          }, _callee, this, [[3, 13]]);
+          }, _callee2, this);
         }));
       };
       _this.accessToken = meta === null || meta === void 0 ? void 0 : meta.access_token;
@@ -8621,6 +8774,7 @@
     _createClass(FlypayV2WalletService, [{
       key: "load",
       value: function load(container) {
+        this.containerId = container.getSelector();
         this.mount(container);
       }
     }, {
@@ -8629,37 +8783,73 @@
         this.link.setEnv(env);
         return _get(_getPrototypeOf(FlypayV2WalletService.prototype), "setEnv", this).call(this, env);
       }
+    }, {
+      key: "enable",
+      value: function enable() {
+        var button = document.getElementById('flypay-v2-button');
+        if (button) {
+          button.disabled = false;
+          this.flypayV2Button.innerHTML = getFlypayV2Button();
+        }
+      }
+    }, {
+      key: "disable",
+      value: function disable() {
+        var button = document.getElementById('flypay-v2-button');
+        if (button) {
+          button.disabled = true;
+          this.flypayV2Button.innerHTML = getDisabledFlypayV2Button();
+        }
+      }
     }, {
       key: "mount",
       value: function mount(container) {
-        var flypayV2Button = this.getButton();
-        flypayV2Button.onclick = this.onFlypayV2ButtonClick;
-        container.getElement().appendChild(flypayV2Button);
+        this.flypayV2Button = this.getButton();
+        this.flypayV2Button.onclick = this.onFlypayV2ButtonClick;
+        container.getElement().appendChild(this.flypayV2Button);
       }
     }, {
       key: "getButton",
       value: function getButton() {
         var style = document.createElement('style');
-        style.innerHTML = this.createButtonStyle();
+        style.innerHTML = createFlypayV2ButtonStyle(this.containerId);
         document.head.appendChild(style);
-        var flypayV2Button = document.createElement('button');
-        flypayV2Button.classList.add('flypay-v2-checkout-btn');
-        flypayV2Button.setAttribute('type', 'button');
-        flypayV2Button.setAttribute('id', 'flypay-v2-button');
-        flypayV2Button.innerHTML = "\n        <div id=\"loading-overlay\"></div>\n        <div class=\"flypay-v2-checkout-btn__wrapper\">\n            <img src=\"".concat(this.link.getBaseUrl(), "/images/flypay-checkout.png\" alt=\"Flypay Checkout\" class=\"flypay-v2-image\">\n        </div>\n    ");
-        return flypayV2Button;
+        this.flypayV2Button = document.createElement('button');
+        this.flypayV2Button.classList.add('flypay-v2-checkout-btn');
+        this.flypayV2Button.setAttribute('type', 'button');
+        this.flypayV2Button.setAttribute('aria-label', 'Pay with flypay');
+        this.flypayV2Button.setAttribute('id', 'flypay-v2-button');
+        this.flypayV2Button.innerHTML = getFlypayV2Button();
+        return this.flypayV2Button;
       }
     }, {
-      key: "createButtonStyle",
-      value: function createButtonStyle() {
-        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: "handleMerchantOnButtonClickEvent",
+      value: function handleMerchantOnButtonClickEvent() {
+        var _this3 = this;
+        return new Promise(function (resolve, reject) {
+          var merchantResult;
+          _this3.eventEmitter.emit(WALLET_EVENT.BUTTON_CLICK, {
+            attachResult: function attachResult(value) {
+              merchantResult = value;
+            }
+          });
+          if (merchantResult instanceof Promise) {
+            merchantResult.then(resolve)["catch"](reject);
+          } else {
+            if (merchantResult === false) {
+              reject();
+            } else {
+              resolve();
+            }
+          }
+        });
       }
     }, {
       key: "getOrderId",
       value: function getOrderId() {
-        var _this2 = this;
+        var _this4 = this;
         return new Promise(function (resolve, reject) {
-          return _this2.eventEmitter.emit(WALLET_EVENT.CALLBACK, {
+          return _this4.eventEmitter.emit(WALLET_EVENT.CALLBACK, {
             data: {
               request_type: 'CREATE_SESSION'
             },
@@ -8675,7 +8865,7 @@
     }, {
       key: "flypayV2Checkout",
       value: function flypayV2Checkout(orderId) {
-        var _this3 = this;
+        var _this5 = this;
         var _a, _b;
         this.checkout = new Checkout(_extends(_extends({
           orderId: orderId
@@ -8685,41 +8875,59 @@
           }), this.refreshToken && {
             refresh_token: this.refreshToken
           }),
-          mode: "express"
+          mode: 'express'
         }), {
           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.cxbflypay.com.au' : 'https://checkout.sandbox.cxbflypay.com.au',
           onCheckoutClosed: function onCheckoutClosed() {
-            var button = document.getElementById('flypay-v2-button');
-            if (button) button.disabled = false;
+            var _a;
+            _this5.eventEmitter.emit(WALLET_EVENT.CHECKOUT_CLOSE);
+            (_a = _this5.background) === null || _a === void 0 ? void 0 : _a.clear();
+            _this5.enable();
           },
           onError: function onError(err) {
-            return _this3.eventEmitter.emit(WALLET_EVENT.PAYMENT_ERROR, {
+            return _this5.eventEmitter.emit(WALLET_EVENT.PAYMENT_ERROR, {
               error: err
             });
           },
           onPaymentSuccess: function onPaymentSuccess(data) {
-            return _this3.eventEmitter.emit(WALLET_EVENT.PAYMENT_SUCCESS, data);
+            return _this5.eventEmitter.emit(WALLET_EVENT.PAYMENT_SUCCESS, data);
           },
           onPaymentError: function onPaymentError(err) {
-            return _this3.eventEmitter.emit(WALLET_EVENT.PAYMENT_ERROR, {
+            return _this5.eventEmitter.emit(WALLET_EVENT.PAYMENT_ERROR, {
               error: err
             });
           },
           onTokensChanged: function onTokensChanged(_ref) {
             var accessToken = _ref.accessToken,
               refreshToken = _ref.refreshToken;
-            _this3.accessToken = accessToken;
-            _this3.refreshToken = refreshToken;
-            _this3.eventEmitter.emit(WALLET_EVENT.AUTH_TOKENS_CHANGED, {
+            _this5.accessToken = accessToken;
+            _this5.refreshToken = refreshToken;
+            _this5.eventEmitter.emit(WALLET_EVENT.AUTH_TOKENS_CHANGED, {
               accessToken: accessToken,
               refreshToken: refreshToken
             });
           }
         }));
         this.checkout.open();
+        if (this.checkout.isCheckoutOpen) this.eventEmitter.emit(WALLET_EVENT.CHECKOUT_OPEN, {});
         this.checkout.listenMessage();
       }
+    }, {
+      key: "initBackground",
+      value: function initBackground() {
+        var _this6 = this;
+        var hideCloseButton = true;
+        var bg = new WalletBackground(this.link.getNetUrl() + FLYPAY_LOGO_LINK, hideCloseButton);
+        bg.setBackdropTitle("");
+        bg.setBackdropDescription("");
+        bg.onTrigger(TRIGGER$1.CLOSE, function () {
+          var _a;
+          _this6.checkout.close();
+          (_a = _this6.background) === null || _a === void 0 ? void 0 : _a.clear();
+        });
+        return bg;
+      }
     }]);
     return FlypayV2WalletService;
   }(WalletService);
@@ -8733,6 +8941,7 @@
    * @param {string} UPDATE=update
    * @param {string} PAYMENT_SUCCESSFUL=paymentSuccessful
    * @param {string} PAYMENT_ERROR=paymentError
+   * @param {string} ON_CLICK=onClick
    */
   var EVENT$1 = {
     UNAVAILABLE: "unavailable",
@@ -8740,68 +8949,11 @@
     PAYMENT_SUCCESSFUL: "paymentSuccessful",
     PAYMENT_ERROR: "paymentError",
     PAYMENT_IN_REVIEW: "paymentInReview",
-    AUTH_TOKENS_CHANGED: "authTokensChanged"
+    AUTH_TOKENS_CHANGED: "authTokensChanged",
+    ON_CLICK: "onClick",
+    ON_CHECKOUT_OPEN: "onCheckoutOpen",
+    ON_CHECKOUT_CLOSE: "onCheckoutClose"
   };
-  /**
-   * Interface of data used by the wallet checkout and payment proccess.
-   * @interface IWalletMeta
-   *
-   * @type {object}
-   * @param {string} [amount_label] Label shown next to the total amount to be paid. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, Flypay V2, PayPal, Afterpay].
-   * @param {string} [country] Country of the user. 2 letter ISO code format. Required for [Stripe, ApplePay, GooglePay, Afterpay]. N/A for [FlyPay, Flypay V2, PayPal].
-   * @param {boolean} [pay_later] Used to enable Pay Later feature in PayPal Smart Checkout WalletButton integration when available. Optional for [PayPal]. N/A for other wallets.
-   * @param {boolean} [standalone] Used to enable Standalone Buttons feature in PayPal Smart Checkout WalletButton integration. Used together with `pay_later`. Optional for [PayPal]. N/A for other wallets.
-   * @param {boolean} [show_billing_address] Used to hide/show the billing address on ApplePay and GooglePay popups. Default value is false. Optional for [ApplePay, GooglePay]. N/A for other wallets.
-   * @param {boolean} [request_payer_name] Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
-   * @param {boolean} [request_payer_email] Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
-   * @param {boolean} [request_payer_phone] Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
-   * @param {string} [access_token] Used for Flypay V2 express flow. Optional for [Flypay V2]. N/A for other wallets.
-   * @param {string} [refresh_token] Used for Flypay V2 express flow. Optional for [Flypay V2]. N/A for other wallets.
-   * @param {boolean} [request_shipping] Used to request or not shipping address in the Wallet checkout, being able to handle amount changes via the `update` event. Optional for [FlyPay, PayPal, ApplePay, GooglePay]. N/A for [Flypay V2, Stripe, Afterpay].
-   * @param {IApplePayShippingOption[] | IPayPalShippingOption[]} [shipping_options] Used to provide available shipping options.(To use shipping_options the request_shipping flag should be true). Optional for [ApplePay]. N/A for the other wallets.
-   * @param {string} [merchant_name] Merchant Name used for GooglePay integration via MPGS. Required for [GooglePay]. N/A for other wallets.
-   * @param {object} [raw_data_initialization] Used to provide values to initialize wallet with raw data. Optional for [ApplePay]. N/A for the other wallets.
-   * @param {object} [style] For **Paypal**: used to style the buttons, check possible values in the [style guide](https://developer.paypal.com/docs/business/checkout/reference/style-guide).
-   * When `standalone` and `pay_later`, extra options can be provided in `style.messages` with the [messages style options](https://developer.paypal.com/docs/checkout/pay-later/us/integrate/reference/#stylelayout).
-   * Also used at **ApplePay**, **GooglePay** and **Afterpay** to select button type.
-   * Optional for [PayPal, ApplePay, GooglePay, Afterpay]. N/A for [Stripe, FlyPay, Flypay V2].
-   * @param {object} [style.button_type] Used to select ApplePay button type (e.g: 'buy','donate', etc), check possible values at https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css.
-   * Also select button type for GooglePay (check GooglePayStyles) and Afterpay (check AfterpayStyles). Optional for [ApplePay, GooglePay, Afterpay]. N/A for other wallets.
-   * @param {object} [style.height] Used to select Afterpay button height. Optional for [Afterpay]. N/A for other wallets.
-   * @param {array} [wallets] By default if this is not sent or empty, we will try to show either Apple Pay or Google Pay buttons. This can be limited sending the following array in this field: ['apple','google]. Optional for [Stripe, ApplePay, GooglePay]. N/A for other wallets.
-   */
-  /**
-   * Interface of Shipping Options for ApplePay
-   * @interface IApplePayShippingOption
-   *
-   * @type {object}
-   * @param {string} [id] Identifier of the Shipping Option. Required.
-   * @param {string} [label] Identifier of the Shipping Option. Required.
-   * @param {string} [amount] Amount of the Shipping Option. Required.
-   * @param {string} [detail] Details of the Shipping Option. Required.
-   * @param {string} [type] Type of the Shipping Option. Values can be 'ELECTRONIC', 'GROUND', 'NOT_SHIPPED', 'OVERNIGHT', 'PICKUP', 'PRIORITY', 'SAME_DAY'. Optional.
-   */
-  /**
-   * Interface of Shipping Options for GooglePay
-   * @interface IGooglePayShippingOption
-   *
-   * @type {object}
-   * @param {string} [id] Identifier of the Shipping Option. Required.
-   * @param {string} [label] Identifier of the Shipping Option. Required.
-   * @param {string} [detail] Details of the Shipping Option. Optional.
-   * @param {string} [type] Type of the Shipping Option. Values can be 'ELECTRONIC', 'GROUND', 'NOT_SHIPPED', 'OVERNIGHT', 'PICKUP', 'PRIORITY', 'SAME_DAY'. Optional.
-   */
-  /**
-   * Interface of Shipping Options for PayPal
-   * @interface IPayPalShippingOption
-   *
-   * @type {object}
-   * @param {string} [id] Identifier of the Shipping Option. Required.
-   * @param {string} [label] Identifier of the Shipping Option. Required.
-   * @param {string} [amount] Amount of the Shipping Option. Required.
-   * @param {string} [currency] Currency of the Shipping Option. Required.
-   * @param {string} [type] Type of the Shipping Option. Values can be 'SHIPPING' or 'PICKUP'. Required.
-   */
   /**
    * Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Flypay V2, Paypal, Afterpay)
    * @constructor
@@ -8976,6 +9128,28 @@
         this.api.setEnv(env, alias);
         this.service.setEnv(env);
       }
+      /**
+       * Current method can enable the payment button. This method is only supported for Flypay V2.
+       *
+       * @example
+       * button.enable();
+       */
+    }, {
+      key: "enable",
+      value: function enable() {
+        this.service.enable();
+      }
+      /**
+       * Current method can disable the payment button. This method is only supported for Flypay V2.
+       *
+       * @example
+       * button.disable('production', 'paydock.com');
+       */
+    }, {
+      key: "disable",
+      value: function disable() {
+        this.service.disable();
+      }
       /**
        * Closes the checkout forcibly. Currently supported in Flypay wallet.
        *
@@ -9179,6 +9353,69 @@
           });
         });
       }
+      /**
+       * Registers a callback function to be invoked when the wallet button gets clicked.
+       * There are two operational modes supported, Synchronous and Asynchronous.
+       * When asynchronous operations need to occur on the callback handler, attaching the Promise via `attachResult` is required to have the wallet wait for a result.
+       * When synchronous operations occur on the callback handler, attaching a boolean result via `attachResult` is optional to control the execution flow.
+       * Note this is supported for Paypal, GooglePay and ApplePay wallet buttons at the moment.
+       *
+       * @example
+       * button.onClick((data) => {
+       *      performValidationLogic();
+       * });
+       *
+       * @param {listener} handler - Function to be called when the wallet button is clicked.
+       */
+    }, {
+      key: "onClick",
+      value: function onClick(handler) {
+        if (typeof handler === 'function') return this.eventEmitter.subscribe(EVENT$1.ON_CLICK, handler);
+      }
+      /**
+       * Registers a callback function to be invoked when the wallet checkout opens.
+       * Note this is supported for FlypayV2 wallet button at the moment.
+       *
+       * @example
+       * button.onCheckoutOpen((data) => {
+       *      console.log('Checkout opens');
+       * });
+       *
+       * @param {listener} handler - Function to be called when the wallet checkout opens.
+       */
+    }, {
+      key: "onCheckoutOpen",
+      value: function onCheckoutOpen(handler) {
+        var _this8 = this;
+        if (typeof handler === 'function') return this.eventEmitter.subscribe(EVENT$1.ON_CHECKOUT_OPEN, handler);
+        return new Promise(function (resolve) {
+          return _this8.eventEmitter.subscribe(EVENT$1.ON_CHECKOUT_OPEN, function (err) {
+            return resolve(err);
+          });
+        });
+      }
+      /**
+       * Registers a callback function to be invoked when the wallet checkout closes.
+       * Note this is supported for FlypayV2 wallet button at the moment.
+       *
+       * @example
+       * button.onCheckoutClose(() => {
+       *      console.log('Wallet checkout closes');
+       * });
+       *
+       * @param {listener} handler - Function to be called when the wallet checkout closes.
+       */
+    }, {
+      key: "onCheckoutClose",
+      value: function onCheckoutClose(handler) {
+        var _this9 = this;
+        if (typeof handler === 'function') return this.eventEmitter.subscribe(EVENT$1.ON_CHECKOUT_CLOSE, handler);
+        return new Promise(function (resolve) {
+          return _this9.eventEmitter.subscribe(EVENT$1.ON_CHECKOUT_CLOSE, function (err) {
+            return resolve(err);
+          });
+        });
+      }
     }, {
       key: "setupServiceCallbacks",
       value: function setupServiceCallbacks() {
@@ -9190,13 +9427,16 @@
         this.setupPaymentInReviewCallback();
         this.setupPaymentErrorCallback();
         this.setupAuthTokensChangedCallback();
+        this.setupOnClickCallback();
+        this.setupOnCheckoutOpenCallback();
+        this.setupOnCheckoutCloseCallback();
       }
     }, {
       key: "setupUnavailableCallback",
       value: function setupUnavailableCallback() {
-        var _this8 = this;
+        var _this10 = this;
         this.service.on(WALLET_EVENT.UNAVAILABLE, function (eventData) {
-          return _this8.eventEmitter.emit(EVENT$1.UNAVAILABLE, {
+          return _this10.eventEmitter.emit(EVENT$1.UNAVAILABLE, {
             event: EVENT$1.UNAVAILABLE,
             data: eventData
           });
@@ -9205,25 +9445,58 @@
     }, {
       key: "setupUpdateCallback",
       value: function setupUpdateCallback() {
-        var _this9 = this;
+        var _this11 = this;
         this.service.on(WALLET_EVENT.UPDATE, function (eventData) {
-          return _this9.hasUpdateHandler ? _this9.eventEmitter.emit(EVENT$1.UPDATE, {
+          return _this11.hasUpdateHandler ? _this11.eventEmitter.emit(EVENT$1.UPDATE, {
             event: EVENT$1.UPDATE,
             data: eventData
-          }) : _this9.update({
+          }) : _this11.update({
             success: true
           });
         });
       }
+    }, {
+      key: "setupOnClickCallback",
+      value: function setupOnClickCallback() {
+        var _this12 = this;
+        this.service.on(WALLET_EVENT.BUTTON_CLICK, function (data) {
+          return _this12.eventEmitter.emit(EVENT$1.ON_CLICK, {
+            event: EVENT$1.ON_CLICK,
+            data: data
+          });
+        });
+      }
+    }, {
+      key: "setupOnCheckoutOpenCallback",
+      value: function setupOnCheckoutOpenCallback() {
+        var _this13 = this;
+        this.service.on(WALLET_EVENT.CHECKOUT_OPEN, function (data) {
+          return _this13.eventEmitter.emit(EVENT$1.ON_CHECKOUT_OPEN, {
+            event: EVENT$1.ON_CHECKOUT_OPEN,
+            data: data
+          });
+        });
+      }
+    }, {
+      key: "setupOnCheckoutCloseCallback",
+      value: function setupOnCheckoutCloseCallback() {
+        var _this14 = this;
+        this.service.on(WALLET_EVENT.CHECKOUT_CLOSE, function (data) {
+          return _this14.eventEmitter.emit(EVENT$1.ON_CHECKOUT_CLOSE, {
+            event: EVENT$1.ON_CHECKOUT_CLOSE,
+            data: data
+          });
+        });
+      }
     }, {
       key: "setupWalletCallback",
       value: function setupWalletCallback() {
-        var _this10 = this;
+        var _this15 = this;
         this.service.on(WALLET_EVENT.CALLBACK, function (eventData) {
           var data = eventData.data,
             onSuccess = eventData.onSuccess,
             onError = eventData.onError;
-          _this10.api.charge().walletCallback(data).then(function (res) {
+          _this15.api.charge().walletCallback(data).then(function (res) {
             return onSuccess(res);
           }, function (err) {
             return onError(err.message);
@@ -9233,15 +9506,15 @@
     }, {
       key: "setupPaymentCallback",
       value: function setupPaymentCallback() {
-        var _this11 = this;
+        var _this16 = this;
         this.service.on(WALLET_EVENT.PAYMENT_METHOD_SELECTED, function (eventData) {
           var data = eventData.data,
             onSuccess = eventData.onSuccess,
             onError = eventData.onError;
-          _this11.api.charge().walletCapture(data).then(function (captureResult) {
+          _this16.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;
-            _this11.eventEmitter.emit(event, {
+            _this16.eventEmitter.emit(event, {
               event: event,
               data: _extends(_extends({}, captureResult), data.customer && {
                 payer_name: data.customer.payer_name,
@@ -9251,7 +9524,7 @@
             });
           }, function (err) {
             if (typeof onError === 'function') onError(err);
-            _this11.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
+            _this16.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
               event: EVENT$1.PAYMENT_ERROR,
               data: err
             });
@@ -9261,9 +9534,9 @@
     }, {
       key: "setupPaymentSuccessCallback",
       value: function setupPaymentSuccessCallback() {
-        var _this12 = this;
+        var _this17 = this;
         this.service.on(WALLET_EVENT.PAYMENT_SUCCESS, function (eventData) {
-          return _this12.eventEmitter.emit(EVENT$1.PAYMENT_SUCCESSFUL, {
+          return _this17.eventEmitter.emit(EVENT$1.PAYMENT_SUCCESSFUL, {
             event: EVENT$1.PAYMENT_SUCCESSFUL,
             data: eventData
           });
@@ -9272,9 +9545,9 @@
     }, {
       key: "setupPaymentInReviewCallback",
       value: function setupPaymentInReviewCallback() {
-        var _this13 = this;
+        var _this18 = this;
         this.service.on(WALLET_EVENT.PAYMENT_IN_REVIEW, function (eventData) {
-          return _this13.eventEmitter.emit(EVENT$1.PAYMENT_IN_REVIEW, {
+          return _this18.eventEmitter.emit(EVENT$1.PAYMENT_IN_REVIEW, {
             event: EVENT$1.PAYMENT_IN_REVIEW,
             data: eventData
           });
@@ -9283,9 +9556,9 @@
     }, {
       key: "setupPaymentErrorCallback",
       value: function setupPaymentErrorCallback() {
-        var _this14 = this;
+        var _this19 = this;
         this.service.on(WALLET_EVENT.PAYMENT_ERROR, function (eventData) {
-          return _this14.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
+          return _this19.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
             event: EVENT$1.PAYMENT_ERROR,
             data: eventData
           });
@@ -9294,9 +9567,9 @@
     }, {
       key: "setupAuthTokensChangedCallback",
       value: function setupAuthTokensChangedCallback() {
-        var _this15 = this;
+        var _this20 = this;
         this.service.on(WALLET_EVENT.AUTH_TOKENS_CHANGED, function (eventData) {
-          return _this15.eventEmitter.emit(EVENT$1.AUTH_TOKENS_CHANGED, {
+          return _this20.eventEmitter.emit(EVENT$1.AUTH_TOKENS_CHANGED, {
             event: EVENT$1.AUTH_TOKENS_CHANGED,
             data: eventData
           });