boxpay-checkout-web-sdk 1.0.1 → 1.0.2-beta.0

package/README.md

@@ -20,7 +20,7 @@ A lightweight, secure, and customizable checkout experience for payments — bui
 ### Via CDN
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/boxpay-checkout-web-sdk/dist/boxpay.esm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/boxpay-checkout-web-sdk@1.0.2-beta.0/dist/boxpay.esm.min.js"></script>
 ```
 
 ---
@@ -150,7 +150,6 @@ This method renders the checkout UI directly into a container on your webpage.
 | `appearance.payButton.fontSize` | `String` | No | Width of the Pay button<br>Example: `"1rem"` |
 | `appearance.payButton.padding` | `String` | No | Width of the Pay button<br>Example: `"0.5rem 1rem"` |
 
-
 ---
 
 ## ⚙ Options

package/dist/boxpay-checkout-web-sdk.js

@@ -1510,7 +1510,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _services_apiService_common_service__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../services/apiService/common.service */ \"./src/services/apiService/common.service.ts\");\n/* harmony import */ var _rajesh896_broprint_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @rajesh896/broprint.js */ \"./node_modules/@rajesh896/broprint.js/lib/index.mjs\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../loader */ \"./src/components/loader.ts\");\n/* harmony import */ var _utils_domUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/domUtils */ \"./src/utils/domUtils.ts\");\n/* harmony import */ var _utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils/paymentHandlers */ \"./src/utils/paymentHandlers.ts\");\n/* harmony import */ var _utils_paymentInstanceFactory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/paymentInstanceFactory */ \"./src/utils/paymentInstanceFactory.ts\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../state/globalState */ \"./src/state/globalState.ts\");\n/* harmony import */ var _utils_themeController__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/themeController */ \"./src/utils/themeController.ts\");\n/* harmony import */ var _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../utils/EventBus */ \"./src/utils/EventBus.ts\");\nfunction _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); }\nfunction _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = \"function\" == typeof Symbol ? Symbol : {}, n = r.iterator || \"@@iterator\", o = r.toStringTag || \"@@toStringTag\"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, \"_invoke\", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError(\"Generator is already running\"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = \"next\"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError(\"iterator result is not an object\"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i[\"return\"]) && t.call(i), c < 2 && (u = TypeError(\"The iterator does not provide a '\" + o + \"' method\"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, \"GeneratorFunction\")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, \"constructor\", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, \"constructor\", GeneratorFunction), GeneratorFunction.displayName = \"GeneratorFunction\", _regeneratorDefine2(GeneratorFunctionPrototype, o, \"GeneratorFunction\"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, \"Generator\"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, \"toString\", function () { return \"[object Generator]\"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }\nfunction _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, \"\", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o(\"next\", 0), o(\"throw\", 1), o(\"return\", 2)); }, _regeneratorDefine2(e, r, n, t); }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _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); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _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); }\n\n\n\n\n\n\n\n\n\n\nvar notAllowedPaymentStatuses = [\"EXPIRED\", \"PAID\", \"PROCESSING\", \"EXPIRED\", \"DISABLED\"];\nvar MAX_WIDTH = 1400;\nvar PaymentElements = /*#__PURE__*/function () {\n  function PaymentElements(props) {\n    var _props$options, _props$options2, _props$options3;\n    _classCallCheck(this, PaymentElements);\n    _defineProperty(this, \"activePaymentMethod\", \"\");\n    _defineProperty(this, \"browserFingerprint\", \"\");\n    _defineProperty(this, \"sessionDetails\", {});\n    _defineProperty(this, \"paymentInstances\", {});\n    _defineProperty(this, \"formValidity\", {\n      isValid: false,\n      invalidFields: []\n    });\n    // private oneTimePayment: boolean = false;\n    _defineProperty(this, \"paymentMethodsToShow\", {});\n    _defineProperty(this, \"showPayButton\", true);\n    Object.assign(this, props);\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('mode', this.mode);\n    this.maxWidth = MAX_WIDTH;\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('MAX_WIDTH', MAX_WIDTH);\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('oneTimePayment', ((_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.oneTimePayment) || false);\n    this.initiatePayment = function () {};\n    this.showPayButton = (_props$options2 = props.options) === null || _props$options2 === void 0 || (_props$options2 = _props$options2.payButton) === null || _props$options2 === void 0 ? void 0 : _props$options2.show;\n    this.onPaymentButtonValidity = (_props$options3 = props.options) === null || _props$options3 === void 0 || (_props$options3 = _props$options3.payButton) === null || _props$options3 === void 0 ? void 0 : _props$options3.onPaymentButtonValidity;\n    if (this.showPayButton === false) {\n      this.initiatePayment = this.handlePayButtonClick.bind(this);\n    }\n    void this.initialize();\n  }\n  return _createClass(PaymentElements, [{\n    key: \"handleThemeColors\",\n    value: function handleThemeColors() {\n      var theme = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get('appearance');\n      document.querySelectorAll(\".label\").forEach(function (label) {\n        return label.style.color = (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor) || \"#333\";\n      });\n    }\n  }, {\n    key: \"initialize\",\n    value: function () {\n      var _initialize = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {\n        var _resp$paymentDetails,\n          _resp$paymentDetails2,\n          _resp$merchantDetails,\n          _resp$configs,\n          _resp$paymentDetails3,\n          _resp$paymentDetails4,\n          _this = this,\n          _this$onLoad3;\n        var rootDiv, container, resp, isSubscription, _this$onLoad, merchantTheme, _this$onLoad2, _resp$paymentDetails$, amount, currencySymbol, currencyCode, formattedAmount, tabsContainer, formContainer, payDiv, _i, _Object$keys, method, instance;\n        return _regenerator().w(function (_context) {\n          while (1) switch (_context.n) {\n            case 0:\n              rootDiv = document.getElementById(this.container);\n              container = document.createElement(\"div\");\n              rootDiv.style.maxWidth = this.maxWidth + \"px\";\n              rootDiv.classList.add(\"payment-elements-root\");\n              rootDiv.innerHTML = '';\n              container.classList.add(\"payment-elements-container\");\n              if (container) {\n                _context.n = 1;\n                break;\n              }\n              throw new Error(\"\".concat(this.container, \" not found\"));\n            case 1:\n              (0,_loader__WEBPACK_IMPORTED_MODULE_3__.getLoaderTemplate)(container, \"Loading payment options...\");\n              rootDiv.append(container);\n              _context.n = 2;\n              return (0,_rajesh896_broprint_js__WEBPACK_IMPORTED_MODULE_1__.getCurrentBrowserFingerPrint)();\n            case 2:\n              this.browserFingerprint = _context.v;\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"sessionToken\", this.sessionToken);\n              _context.n = 3;\n              return (0,_services_apiService_common_service__WEBPACK_IMPORTED_MODULE_0__.getSession)(this.sessionToken);\n            case 3:\n              resp = _context.v;\n              // check for subscription\n              isSubscription = !(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isEmpty)(resp === null || resp === void 0 || (_resp$paymentDetails = resp.paymentDetails) === null || _resp$paymentDetails === void 0 ? void 0 : _resp$paymentDetails.subscriptionDetails);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"isSubscription\", isSubscription);\n              if (!notAllowedPaymentStatuses.includes(resp.status)) {\n                _context.n = 4;\n                break;\n              }\n              return _context.a(2, (_this$onLoad = this.onLoad) === null || _this$onLoad === void 0 ? void 0 : _this$onLoad.call(this, {\n                message: \"This checkout token is \".concat(resp === null || resp === void 0 ? void 0 : resp.status)\n              }));\n            case 4:\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('currencySymbol', resp === null || resp === void 0 || (_resp$paymentDetails2 = resp.paymentDetails) === null || _resp$paymentDetails2 === void 0 || (_resp$paymentDetails2 = _resp$paymentDetails2.money) === null || _resp$paymentDetails2 === void 0 ? void 0 : _resp$paymentDetails2.currencySymbol);\n              this.sessionDetails = resp;\n              merchantTheme = resp === null || resp === void 0 || (_resp$merchantDetails = resp.merchantDetails) === null || _resp$merchantDetails === void 0 ? void 0 : _resp$merchantDetails.checkoutTheme;\n              (0,_utils_themeController__WEBPACK_IMPORTED_MODULE_8__.handleAppearanceOptions)({\n                appearance: this.appearance,\n                theme: {\n                  themePrimaryColor: merchantTheme.primaryButtonColor,\n                  themeSecondaryColor: merchantTheme.secondaryButtonColor,\n                  themePrimaryTextColor: merchantTheme.primaryButtonColor,\n                  themeSecondaryTextColor: merchantTheme.secondaryButtonColor\n                }\n              });\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"sessionDetails\", resp);\n              // this.paymentMethodsToShow = orderPaymentMethodsByUserPreference(\n              //     getPaymentOptionsToDisplay(resp?.configs?.paymentMethods, this.paymentMethods),\n              //     this.paymentMethods\n              // );\n              this.paymentMethodsToShow = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.orderPaymentMethodsByUserPreference)((0,_utils__WEBPACK_IMPORTED_MODULE_2__.getPaymentOptionsToDisplay)(resp === null || resp === void 0 || (_resp$configs = resp.configs) === null || _resp$configs === void 0 ? void 0 : _resp$configs.paymentMethods, this.paymentMethods.includes('card') ? ['card'] : []), this.paymentMethods);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"paymentMethodsToShow\", this.paymentMethodsToShow);\n              if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isEmpty)(this.paymentMethodsToShow)) {\n                _context.n = 5;\n                break;\n              }\n              return _context.a(2, (_this$onLoad2 = this.onLoad) === null || _this$onLoad2 === void 0 ? void 0 : _this$onLoad2.call(this, {\n                message: \"No valid payment methods found\"\n              }));\n            case 5:\n              this.shopper = this.shopperDetails || (resp === null || resp === void 0 || (_resp$paymentDetails3 = resp.paymentDetails) === null || _resp$paymentDetails3 === void 0 ? void 0 : _resp$paymentDetails3.shopper);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"shopper\", this.shopper);\n              _resp$paymentDetails$ = resp === null || resp === void 0 || (_resp$paymentDetails4 = resp.paymentDetails) === null || _resp$paymentDetails4 === void 0 ? void 0 : _resp$paymentDetails4.money, amount = _resp$paymentDetails$.amount, currencySymbol = _resp$paymentDetails$.currencySymbol, currencyCode = _resp$paymentDetails$.currencyCode;\n              formattedAmount = String((0,_utils__WEBPACK_IMPORTED_MODULE_2__.numberToCurrency)(amount, currencyCode));\n              container.innerHTML = \"\";\n              tabsContainer = undefined;\n              this.activePaymentMethod = Object.keys(this.paymentMethodsToShow)[0];\n              if (Object.keys(this.paymentMethodsToShow).length > 1) {\n                tabsContainer = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createTabsContainer)(this.paymentMethodsToShow, this.activePaymentMethod, this.switchPaymentMethod.bind(this));\n              }\n              formContainer = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createFormContainer)();\n              if (this.showPayButton) {\n                payDiv = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createPayButton)(function () {\n                  return (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createPayLabel)(currencySymbol, formattedAmount);\n                }, function (e) {\n                  e.preventDefault();\n                  (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handleButtonLoader)(_this.boxpayPayButton, true);\n                  void _this.handlePayButtonClick();\n                });\n                payDiv.style.maxWidth = this.maxWidth + \"px\";\n                this.boxpayPayButton = payDiv.querySelector(\"button\");\n              }\n              if (tabsContainer) {\n                container.append(tabsContainer, formContainer);\n              } else {\n                container.append(formContainer);\n              }\n              this.handleSubscriptionCheckBox(rootDiv);\n              if (this.showPayButton) {\n                rootDiv.append(payDiv);\n              }\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"activePaymentMethod\", this.activePaymentMethod);\n              for (_i = 0, _Object$keys = Object.keys(this.paymentMethodsToShow); _i < _Object$keys.length; _i++) {\n                method = _Object$keys[_i];\n                instance = (0,_utils_paymentInstanceFactory__WEBPACK_IMPORTED_MODULE_6__.createPaymentInstance)(method, formContainer, payDiv, this.paymentMethodsToShow, this.options || {}, this.handleFormValidityChange.bind(this), this.updatePayButtonText.bind(this), this);\n                this.paymentInstances[method] = instance;\n              }\n              this.mountActiveMethod();\n              (_this$onLoad3 = this.onLoad) === null || _this$onLoad3 === void 0 || _this$onLoad3.call(this, {\n                message: \"Payment Elements Loaded\"\n              });\n            case 6:\n              return _context.a(2);\n          }\n        }, _callee, this);\n      }));\n      function initialize() {\n        return _initialize.apply(this, arguments);\n      }\n      return initialize;\n    }()\n  }, {\n    key: \"handleSubscriptionCheckBox\",\n    value: function handleSubscriptionCheckBox(rootDiv) {\n      var isSubscription = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get(\"isSubscription\");\n      var oneTimePayment = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get(\"oneTimePayment\");\n      if (isSubscription && oneTimePayment) {\n        _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('isOneTimePaymentChecked', true);\n        // globalState.set('sendSiFlag', true);\n      } else if (isSubscription && !oneTimePayment) {\n        var siElement = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createCheckBox)(\"Setup automatic payments\", function () {});\n        rootDiv.appendChild(siElement);\n        // globalState.set('sendSiFlag', true);\n      } else {\n        // globalState.set('sendSiFlag', false);\n      }\n    }\n  }, {\n    key: \"switchPaymentMethod\",\n    value: function switchPaymentMethod(method) {\n      if (this.activePaymentMethod === method) return;\n      this.activePaymentMethod = method;\n      this.mountActiveMethod();\n      this.handleFormValidityChange({\n        isValid: false,\n        invalidFields: []\n      });\n      this.updatePayButtonText();\n\n      // stop if any status polling is going on\n      var controller = {\n        cancelled: true\n      };\n      _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"pollController\", controller);\n    }\n  }, {\n    key: \"mountActiveMethod\",\n    value: function mountActiveMethod() {\n      var _activeInstance$rende;\n      var formContainer = document.getElementById(\"payment-form-container\");\n      if (!formContainer) return;\n      formContainer.innerHTML = \"\";\n      var activeInstance = this.paymentInstances[this.activePaymentMethod];\n      _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"activePaymentMethod\", this.activePaymentMethod);\n      _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"CURRENT_PAYMENT_METHOD\", this.activePaymentMethod);\n      activeInstance === null || activeInstance === void 0 || (_activeInstance$rende = activeInstance.render) === null || _activeInstance$rende === void 0 || _activeInstance$rende.call(activeInstance);\n      (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.updateActiveTab)(this.activePaymentMethod);\n      this.handleThemeColors();\n    }\n  }, {\n    key: \"handleFormValidityChange\",\n    value: function handleFormValidityChange(_ref) {\n      var isValid = _ref.isValid,\n        invalidFields = _ref.invalidFields;\n      this.formValidity = {\n        isValid: isValid,\n        invalidFields: invalidFields\n      };\n      if (this.boxpayPayButton) this.boxpayPayButton.disabled = !isValid;\n      if (!this.showPayButton) {\n        if (typeof this.onPaymentButtonValidity === 'function') {\n          this.onPaymentButtonValidity(isValid);\n        }\n      }\n    }\n  }, {\n    key: \"handlePayButtonClick\",\n    value: function () {\n      var _handlePayButtonClick = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {\n        var controller, res;\n        return _regenerator().w(function (_context2) {\n          while (1) switch (_context2.n) {\n            case 0:\n              console.log(\"PAY btn clicked\");\n              if (!this.boxpayPayButton) {\n                _context2.n = 2;\n                break;\n              }\n              if (!this.boxpayPayButton.disabled) {\n                _context2.n = 1;\n                break;\n              }\n              return _context2.a(2);\n            case 1:\n              this.boxpayPayButton.disabled = true;\n            case 2:\n              controller = {\n                cancelled: false\n              };\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"pollController\", controller);\n              _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"PAY_BTN_CLICKED\", {});\n              _context2.n = 3;\n              return (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handlePayClick)(this);\n            case 3:\n              res = _context2.v;\n              return _context2.a(2, res);\n          }\n        }, _callee2, this);\n      }));\n      function handlePayButtonClick() {\n        return _handlePayButtonClick.apply(this, arguments);\n      }\n      return handlePayButtonClick;\n    }()\n  }, {\n    key: \"sendResponse\",\n    value: function sendResponse(response) {\n      if (this.boxpayPayButton) {\n        (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handleButtonLoader)(this.boxpayPayButton, false);\n      }\n      if ((response === null || response === void 0 ? void 0 : response.status) !== \"ERROR\") {\n        var _this$onPayment;\n        _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"SENDING_RESPONSE\", response);\n        (_this$onPayment = this.onPayment) === null || _this$onPayment === void 0 || _this$onPayment.call(this, response);\n      }\n      return response;\n    }\n  }, {\n    key: \"updatePayButtonText\",\n    value: function updatePayButtonText(text) {\n      var _this$sessionDetails;\n      if (!this.boxpayPayButton) return;\n      var _ref2 = ((_this$sessionDetails = this.sessionDetails) === null || _this$sessionDetails === void 0 || (_this$sessionDetails = _this$sessionDetails.paymentDetails) === null || _this$sessionDetails === void 0 ? void 0 : _this$sessionDetails.money) || {},\n        amount = _ref2.amount,\n        currencySymbol = _ref2.currencySymbol;\n      this.boxpayPayButton.textContent = text || \"Pay \".concat(currencySymbol, \" \").concat(amount);\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PaymentElements);\n\n//# sourceURL=webpack://BoxPayCheckout/./src/components/paymentElements/PaymentElement.controller.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _services_apiService_common_service__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../services/apiService/common.service */ \"./src/services/apiService/common.service.ts\");\n/* harmony import */ var _rajesh896_broprint_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @rajesh896/broprint.js */ \"./node_modules/@rajesh896/broprint.js/lib/index.mjs\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../loader */ \"./src/components/loader.ts\");\n/* harmony import */ var _utils_domUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/domUtils */ \"./src/utils/domUtils.ts\");\n/* harmony import */ var _utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils/paymentHandlers */ \"./src/utils/paymentHandlers.ts\");\n/* harmony import */ var _utils_paymentInstanceFactory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/paymentInstanceFactory */ \"./src/utils/paymentInstanceFactory.ts\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../state/globalState */ \"./src/state/globalState.ts\");\n/* harmony import */ var _utils_themeController__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/themeController */ \"./src/utils/themeController.ts\");\n/* harmony import */ var _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../utils/EventBus */ \"./src/utils/EventBus.ts\");\nfunction _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); }\nfunction _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = \"function\" == typeof Symbol ? Symbol : {}, n = r.iterator || \"@@iterator\", o = r.toStringTag || \"@@toStringTag\"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, \"_invoke\", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError(\"Generator is already running\"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = \"next\"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError(\"iterator result is not an object\"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i[\"return\"]) && t.call(i), c < 2 && (u = TypeError(\"The iterator does not provide a '\" + o + \"' method\"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, \"GeneratorFunction\")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, \"constructor\", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, \"constructor\", GeneratorFunction), GeneratorFunction.displayName = \"GeneratorFunction\", _regeneratorDefine2(GeneratorFunctionPrototype, o, \"GeneratorFunction\"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, \"Generator\"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, \"toString\", function () { return \"[object Generator]\"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }\nfunction _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, \"\", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o(\"next\", 0), o(\"throw\", 1), o(\"return\", 2)); }, _regeneratorDefine2(e, r, n, t); }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _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); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _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); }\n\n\n\n\n\n\n\n\n\n\nvar notAllowedPaymentStatuses = [\"EXPIRED\", \"PAID\", \"PROCESSING\", \"EXPIRED\", \"DISABLED\"];\nvar MAX_WIDTH = 1400;\nvar PaymentElements = /*#__PURE__*/function () {\n  function PaymentElements(props) {\n    var _props$options, _props$options2, _props$options3;\n    _classCallCheck(this, PaymentElements);\n    _defineProperty(this, \"activePaymentMethod\", \"\");\n    _defineProperty(this, \"browserFingerprint\", \"\");\n    _defineProperty(this, \"sessionDetails\", {});\n    _defineProperty(this, \"paymentInstances\", {});\n    _defineProperty(this, \"formValidity\", {\n      isValid: false,\n      invalidFields: []\n    });\n    // private oneTimePayment: boolean = false;\n    _defineProperty(this, \"paymentMethodsToShow\", {});\n    _defineProperty(this, \"showPayButton\", true);\n    Object.assign(this, props);\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('mode', this.mode);\n    this.maxWidth = MAX_WIDTH;\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('MAX_WIDTH', MAX_WIDTH);\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('oneTimePayment', ((_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.oneTimePayment) || false);\n    this.initiatePayment = function () {};\n    this.showPayButton = (_props$options2 = props.options) === null || _props$options2 === void 0 || (_props$options2 = _props$options2.payButton) === null || _props$options2 === void 0 ? void 0 : _props$options2.show;\n    this.onPaymentButtonValidity = (_props$options3 = props.options) === null || _props$options3 === void 0 || (_props$options3 = _props$options3.payButton) === null || _props$options3 === void 0 ? void 0 : _props$options3.onPaymentButtonValidity;\n    if (this.showPayButton === false) {\n      this.initiatePayment = this.handlePayButtonClick.bind(this);\n    }\n    void this.initialize();\n  }\n  return _createClass(PaymentElements, [{\n    key: \"handleThemeColors\",\n    value: function handleThemeColors() {\n      var theme = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get('appearance');\n      document.querySelectorAll(\".label\").forEach(function (label) {\n        return label.style.color = (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor) || \"#333\";\n      });\n    }\n  }, {\n    key: \"initialize\",\n    value: function () {\n      var _initialize = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {\n        var _resp$paymentDetails,\n          _resp$paymentDetails2,\n          _resp$merchantDetails,\n          _resp$configs,\n          _resp$paymentDetails3,\n          _resp$paymentDetails4,\n          _this = this,\n          _this$onLoad3;\n        var rootDiv, container, resp, isSubscription, _this$onLoad, merchantTheme, _this$onLoad2, _resp$paymentDetails$, amount, currencySymbol, currencyCode, formattedAmount, tabsContainer, formContainer, payDiv, _i, _Object$keys, method, instance;\n        return _regenerator().w(function (_context) {\n          while (1) switch (_context.n) {\n            case 0:\n              rootDiv = document.getElementById(this.container);\n              container = document.createElement(\"div\");\n              rootDiv.style.maxWidth = this.maxWidth + \"px\";\n              rootDiv.classList.add(\"payment-elements-root\");\n              rootDiv.innerHTML = '';\n              container.classList.add(\"payment-elements-container\");\n              if (container) {\n                _context.n = 1;\n                break;\n              }\n              throw new Error(\"\".concat(this.container, \" not found\"));\n            case 1:\n              (0,_loader__WEBPACK_IMPORTED_MODULE_3__.getLoaderTemplate)(container, \"Loading payment options...\");\n              rootDiv.append(container);\n              _context.n = 2;\n              return (0,_rajesh896_broprint_js__WEBPACK_IMPORTED_MODULE_1__.getCurrentBrowserFingerPrint)();\n            case 2:\n              this.browserFingerprint = _context.v;\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"sessionToken\", this.sessionToken);\n              _context.n = 3;\n              return (0,_services_apiService_common_service__WEBPACK_IMPORTED_MODULE_0__.getSession)(this.sessionToken);\n            case 3:\n              resp = _context.v;\n              // check for subscription\n              isSubscription = !(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isEmpty)(resp === null || resp === void 0 || (_resp$paymentDetails = resp.paymentDetails) === null || _resp$paymentDetails === void 0 ? void 0 : _resp$paymentDetails.subscriptionDetails);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"isSubscription\", isSubscription);\n              if (!notAllowedPaymentStatuses.includes(resp.status)) {\n                _context.n = 4;\n                break;\n              }\n              return _context.a(2, (_this$onLoad = this.onLoad) === null || _this$onLoad === void 0 ? void 0 : _this$onLoad.call(this, {\n                message: \"This checkout token is \".concat(resp === null || resp === void 0 ? void 0 : resp.status)\n              }));\n            case 4:\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('currencySymbol', resp === null || resp === void 0 || (_resp$paymentDetails2 = resp.paymentDetails) === null || _resp$paymentDetails2 === void 0 || (_resp$paymentDetails2 = _resp$paymentDetails2.money) === null || _resp$paymentDetails2 === void 0 ? void 0 : _resp$paymentDetails2.currencySymbol);\n              this.sessionDetails = resp;\n              merchantTheme = resp === null || resp === void 0 || (_resp$merchantDetails = resp.merchantDetails) === null || _resp$merchantDetails === void 0 ? void 0 : _resp$merchantDetails.checkoutTheme;\n              (0,_utils_themeController__WEBPACK_IMPORTED_MODULE_8__.handleAppearanceOptions)({\n                appearance: this.appearance,\n                theme: {\n                  themePrimaryColor: merchantTheme.primaryButtonColor,\n                  themeSecondaryColor: merchantTheme.secondaryButtonColor,\n                  themePrimaryTextColor: merchantTheme.primaryButtonColor,\n                  themeSecondaryTextColor: merchantTheme.secondaryButtonColor\n                }\n              });\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"sessionDetails\", resp);\n              this.paymentMethodsToShow = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.orderPaymentMethodsByUserPreference)((0,_utils__WEBPACK_IMPORTED_MODULE_2__.getPaymentOptionsToDisplay)(resp === null || resp === void 0 || (_resp$configs = resp.configs) === null || _resp$configs === void 0 ? void 0 : _resp$configs.paymentMethods, this.paymentMethods), this.paymentMethods);\n              // this.paymentMethodsToShow = orderPaymentMethodsByUserPreference(\n              //     getPaymentOptionsToDisplay(resp?.configs?.paymentMethods, this.paymentMethods.includes('card') ? ['card'] : []),\n              //     this.paymentMethods\n              // );\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"paymentMethodsToShow\", this.paymentMethodsToShow);\n              if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isEmpty)(this.paymentMethodsToShow)) {\n                _context.n = 5;\n                break;\n              }\n              return _context.a(2, (_this$onLoad2 = this.onLoad) === null || _this$onLoad2 === void 0 ? void 0 : _this$onLoad2.call(this, {\n                message: \"No valid payment methods found\"\n              }));\n            case 5:\n              this.shopper = this.shopperDetails || (resp === null || resp === void 0 || (_resp$paymentDetails3 = resp.paymentDetails) === null || _resp$paymentDetails3 === void 0 ? void 0 : _resp$paymentDetails3.shopper);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"shopper\", this.shopper);\n              _resp$paymentDetails$ = resp === null || resp === void 0 || (_resp$paymentDetails4 = resp.paymentDetails) === null || _resp$paymentDetails4 === void 0 ? void 0 : _resp$paymentDetails4.money, amount = _resp$paymentDetails$.amount, currencySymbol = _resp$paymentDetails$.currencySymbol, currencyCode = _resp$paymentDetails$.currencyCode;\n              formattedAmount = String((0,_utils__WEBPACK_IMPORTED_MODULE_2__.numberToCurrency)(amount, currencyCode));\n              container.innerHTML = \"\";\n              tabsContainer = undefined;\n              this.activePaymentMethod = Object.keys(this.paymentMethodsToShow)[0];\n              if (Object.keys(this.paymentMethodsToShow).length > 1) {\n                tabsContainer = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createTabsContainer)(this.paymentMethodsToShow, this.activePaymentMethod, this.switchPaymentMethod.bind(this));\n              }\n              formContainer = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createFormContainer)();\n              if (this.showPayButton) {\n                payDiv = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createPayButton)(function () {\n                  return (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createPayLabel)(currencySymbol, formattedAmount);\n                }, function (e) {\n                  e.preventDefault();\n                  (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handleButtonLoader)(_this.boxpayPayButton, true);\n                  void _this.handlePayButtonClick();\n                });\n                payDiv.style.maxWidth = this.maxWidth + \"px\";\n                this.boxpayPayButton = payDiv.querySelector(\"button\");\n              }\n              if (tabsContainer) {\n                container.append(tabsContainer, formContainer);\n              } else {\n                container.append(formContainer);\n              }\n              this.handleSubscriptionCheckBox(rootDiv);\n              if (this.showPayButton) {\n                rootDiv.append(payDiv);\n              }\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"activePaymentMethod\", this.activePaymentMethod);\n              for (_i = 0, _Object$keys = Object.keys(this.paymentMethodsToShow); _i < _Object$keys.length; _i++) {\n                method = _Object$keys[_i];\n                instance = (0,_utils_paymentInstanceFactory__WEBPACK_IMPORTED_MODULE_6__.createPaymentInstance)(method, formContainer, payDiv, this.paymentMethodsToShow, this.options || {}, this.handleFormValidityChange.bind(this), this.updatePayButtonText.bind(this), this);\n                this.paymentInstances[method] = instance;\n              }\n              this.mountActiveMethod();\n              (_this$onLoad3 = this.onLoad) === null || _this$onLoad3 === void 0 || _this$onLoad3.call(this, {\n                message: \"Payment Elements Loaded\"\n              });\n            case 6:\n              return _context.a(2);\n          }\n        }, _callee, this);\n      }));\n      function initialize() {\n        return _initialize.apply(this, arguments);\n      }\n      return initialize;\n    }()\n  }, {\n    key: \"handleSubscriptionCheckBox\",\n    value: function handleSubscriptionCheckBox(rootDiv) {\n      var isSubscription = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get(\"isSubscription\");\n      var oneTimePayment = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get(\"oneTimePayment\");\n      if (isSubscription && oneTimePayment) {\n        _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('isOneTimePaymentChecked', true);\n        // globalState.set('sendSiFlag', true);\n      } else if (isSubscription && !oneTimePayment) {\n        var siElement = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createCheckBox)(\"Setup automatic payments\", function () {});\n        rootDiv.appendChild(siElement);\n        // globalState.set('sendSiFlag', true);\n      } else {\n        // globalState.set('sendSiFlag', false);\n      }\n    }\n  }, {\n    key: \"switchPaymentMethod\",\n    value: function switchPaymentMethod(method) {\n      if (this.activePaymentMethod === method) return;\n      this.activePaymentMethod = method;\n      this.mountActiveMethod();\n      this.handleFormValidityChange({\n        isValid: false,\n        invalidFields: []\n      });\n      this.updatePayButtonText();\n\n      // stop if any status polling is going on\n      var controller = {\n        cancelled: true\n      };\n      _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"pollController\", controller);\n    }\n  }, {\n    key: \"mountActiveMethod\",\n    value: function mountActiveMethod() {\n      var _activeInstance$rende;\n      var formContainer = document.getElementById(\"payment-form-container\");\n      if (!formContainer) return;\n      formContainer.innerHTML = \"\";\n      var activeInstance = this.paymentInstances[this.activePaymentMethod];\n      _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"activePaymentMethod\", this.activePaymentMethod);\n      _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"CURRENT_PAYMENT_METHOD\", this.activePaymentMethod);\n      activeInstance === null || activeInstance === void 0 || (_activeInstance$rende = activeInstance.render) === null || _activeInstance$rende === void 0 || _activeInstance$rende.call(activeInstance);\n      (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.updateActiveTab)(this.activePaymentMethod);\n      this.handleThemeColors();\n    }\n  }, {\n    key: \"handleFormValidityChange\",\n    value: function handleFormValidityChange(_ref) {\n      var isValid = _ref.isValid,\n        invalidFields = _ref.invalidFields;\n      this.formValidity = {\n        isValid: isValid,\n        invalidFields: invalidFields\n      };\n      if (this.boxpayPayButton) this.boxpayPayButton.disabled = !isValid;\n      if (!this.showPayButton) {\n        if (typeof this.onPaymentButtonValidity === 'function') {\n          this.onPaymentButtonValidity(isValid);\n        }\n      }\n    }\n  }, {\n    key: \"handlePayButtonClick\",\n    value: function () {\n      var _handlePayButtonClick = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {\n        var controller, res;\n        return _regenerator().w(function (_context2) {\n          while (1) switch (_context2.n) {\n            case 0:\n              console.log(\"PAY btn clicked\");\n              if (!this.boxpayPayButton) {\n                _context2.n = 2;\n                break;\n              }\n              if (!this.boxpayPayButton.disabled) {\n                _context2.n = 1;\n                break;\n              }\n              return _context2.a(2);\n            case 1:\n              this.boxpayPayButton.disabled = true;\n            case 2:\n              controller = {\n                cancelled: false\n              };\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"pollController\", controller);\n              _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"PAY_BTN_CLICKED\", {});\n              _context2.n = 3;\n              return (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handlePayClick)(this);\n            case 3:\n              res = _context2.v;\n              return _context2.a(2, res);\n          }\n        }, _callee2, this);\n      }));\n      function handlePayButtonClick() {\n        return _handlePayButtonClick.apply(this, arguments);\n      }\n      return handlePayButtonClick;\n    }()\n  }, {\n    key: \"sendResponse\",\n    value: function sendResponse(response) {\n      if (this.boxpayPayButton) {\n        (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handleButtonLoader)(this.boxpayPayButton, false);\n      }\n      if ((response === null || response === void 0 ? void 0 : response.status) !== \"ERROR\") {\n        var _this$onPayment;\n        _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"SENDING_RESPONSE\", response);\n        (_this$onPayment = this.onPayment) === null || _this$onPayment === void 0 || _this$onPayment.call(this, response);\n      }\n      return response;\n    }\n  }, {\n    key: \"updatePayButtonText\",\n    value: function updatePayButtonText(text) {\n      var _this$sessionDetails;\n      if (!this.boxpayPayButton) return;\n      var _ref2 = ((_this$sessionDetails = this.sessionDetails) === null || _this$sessionDetails === void 0 || (_this$sessionDetails = _this$sessionDetails.paymentDetails) === null || _this$sessionDetails === void 0 ? void 0 : _this$sessionDetails.money) || {},\n        amount = _ref2.amount,\n        currencySymbol = _ref2.currencySymbol;\n      this.boxpayPayButton.textContent = text || \"Pay \".concat(currencySymbol, \" \").concat(amount);\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PaymentElements);\n\n//# sourceURL=webpack://BoxPayCheckout/./src/components/paymentElements/PaymentElement.controller.ts?\n}");
 
 /***/ }),
 
@@ -1532,7 +1532,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _templates_emiTemplate_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../templates/emiTemplate.html */ \"./src/templates/emiTemplate.html\");\n/* harmony import */ var _assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../assets/icons/right-arrow.svg */ \"./src/assets/icons/right-arrow.svg\");\n/* harmony import */ var _assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../assets/icons/back-btn.svg */ \"./src/assets/icons/back-btn.svg\");\n/* harmony import */ var _styles_emiPayment_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../styles/emiPayment.css */ \"./src/styles/emiPayment.css\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\n/* harmony import */ var _EmiHistory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../EmiHistory */ \"./src/components/EmiHistory.ts\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../state/globalState */ \"./src/state/globalState.ts\");\n/* harmony import */ var _CardPayment__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./CardPayment */ \"./src/components/paymentElements/paymentElement/CardPayment.ts\");\nfunction _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); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _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); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _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); }\n\n\n\n\n\n\n\n\nvar allEmiTabs = [{\n  title: \"Credit Card\",\n  id: \"CreditCardEMI\"\n}, {\n  title: \"Debit Card\",\n  id: \"DebitCardEMI\"\n}, {\n  title: \"Others\",\n  id: \"CardlessEMI\"\n}];\nvar EmiPayment = /*#__PURE__*/function () {\n  function EmiPayment(form, payButtonEl, emiList, options) {\n    var _options$payButton, _this$appearance, _this$appearance2;\n    _classCallCheck(this, EmiPayment);\n    _defineProperty(this, \"history\", new _EmiHistory__WEBPACK_IMPORTED_MODULE_5__.EmiHistory());\n    _defineProperty(this, \"expandedBankId\", null);\n    _defineProperty(this, \"expandedTenure\", null);\n    this.currencySymbol = _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.get('currencySymbol');\n    this.form = form;\n    this.payButtonEl = payButtonEl;\n    this.onFormValidityChange = options === null || options === void 0 ? void 0 : options.onFormValidityChange;\n    this.updatePayButtonText = options === null || options === void 0 ? void 0 : options.updatePayButtonText;\n    this.onFormValidityChange({\n      isValid: false,\n      invalidFields: []\n    });\n    this.showPaymentButton = (options === null || options === void 0 || (_options$payButton = options.payButton) === null || _options$payButton === void 0 ? void 0 : _options$payButton.show) !== false;\n    this.appearance = _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.get('appearance');\n    this.theme = {\n      primaryColor: (_this$appearance = this.appearance) === null || _this$appearance === void 0 ? void 0 : _this$appearance.primaryColor,\n      secondaryColor: (_this$appearance2 = this.appearance) === null || _this$appearance2 === void 0 ? void 0 : _this$appearance2.secondaryColor\n    };\n    var availableTabs = allEmiTabs.filter(function (tab) {\n      return emiList.some(function (emi) {\n        return emi.brand === tab.id;\n      });\n    });\n    this.emiTabs = availableTabs.map(function (tab) {\n      var filtered = emiList.filter(function (item) {\n        return item.brand === tab.id;\n      });\n      var unique = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.getUniqueEmiOptions)(filtered);\n      return {\n        id: tab.id,\n        title: tab.title,\n        emiList: unique\n      };\n    });\n  }\n\n  // -------------------------\n  // INITIAL RENDER\n  // -------------------------\n  return _createClass(EmiPayment, [{\n    key: \"render\",\n    value: function render() {\n      this.form.innerHTML = _templates_emiTemplate_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\n      this.renderCategoriesScreen();\n      // if (this.showPaymentButton && this.payButtonEl) {\n      //     this.form.appendChild(this.payButtonEl);\n      // }\n      return this.form;\n    }\n\n    // -------------------------\n    // SCREEN 1: CATEGORY SCREEN\n    // -------------------------\n  }, {\n    key: \"renderCategoriesScreen\",\n    value: function renderCategoriesScreen() {\n      var _this = this;\n      this.history.clear();\n      this.history.push(\"categories\");\n      var root = this.form.querySelector(\"#emi-container\");\n      root.innerHTML = \"\\n            <div id=\\\"emi-container\\\">\\n                \".concat(this.emiTabs.map(function (tab) {\n        var logos = tab.emiList.slice(0, 2);\n        return \"\\n            <div class=\\\"emi-row\\\" data-emi=\\\"\".concat(tab.id, \"\\\">\\n                            <div class=\\\"emi-left\\\">\\n                                <span class=\\\"emi-name label\\\">\").concat(tab.title, \"</span>\\n                                \").concat(logos.map(function (emi) {\n          var logo = emi.bestEmiMethod.logoUrl || \"\";\n          return \"<img src=\\\"\".concat(logo, \"\\\" width=\\\"16\\\" />\");\n        }).join(\"\"), \"\\n                            </div>\\n                            <label><img src=\\\"\").concat(_assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__, \"\\\" width=\\\"16\\\" /></label>\\n                        </div>\\n                    \");\n      }).join(\"\"), \"\\n            </div>\\n        \");\n      root.querySelectorAll(\".emi-row\").forEach(function (row) {\n        row.addEventListener(\"click\", function () {\n          var id = row.getAttribute(\"data-emi\");\n          var tab = _this.emiTabs.find(function (t) {\n            return t.id === id;\n          });\n          _this.selectedCategory = tab.id === \"CreditCardEMI\" ? \"emi/cc\" : \"emi/dc\";\n          if (tab) _this.renderBankScreen(tab);\n        });\n      });\n    }\n\n    // -------------------------\n    // SCREEN 2: BANK LIST\n    // -------------------------\n  }, {\n    key: \"renderBankScreen\",\n    value: function renderBankScreen(tab) {\n      var _this2 = this;\n      var root = this.form.querySelector(\"#emi-container\");\n      if (tab.title === 'Others') {\n        this.renderCardLessEMI(tab);\n        return;\n      }\n      root.innerHTML = \"\\n            <div class=\\\"emi-header\\\">\\n                <img src=\\\"\".concat(_assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__, \"\\\" width=\\\"32\\\" id=\\\"emi-back-btn\\\"/>\\n            </div>\\n            <div id=\\\"emi-banks-list\\\">\\n                \").concat(tab.emiList.map(function (bank) {\n        var logo = bank.bestEmiMethod.logoUrl || \"\";\n        var isBankExpanded = _this2.expandedBankId === bank.id;\n        return \"<div class=\\\"emi-bank-wrapper\\\" data-bank-id=\\\"\".concat(bank.id, \"\\\">\\n                        <div class=\\\"emi-bank-row\\\">\\n                            <div class=\\\"left\\\">\\n                                <div>\\n                                    <img src=\\\"\").concat(logo, \"\\\" width=\\\"32\\\" />\\n                                    <span class=\\\"\\\">\").concat(bank.bestEmiMethod.issuerTitle, \"</span>\\n                                </div>\\n                                <div>\\n                                    \").concat(bank.offerType && bank.offerType.map(function (type) {\n          return \"<span class=\\\"emi-offer\\\">\".concat(type, \"</span>\");\n        }).join(\" \"), \"\\n                                </div>\\n                            </div>\\n                            <img class=\\\"arrow \").concat(isBankExpanded ? \"rotated\" : \"\", \"\\\"  src=\\\"\").concat(_assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__, \"\\\" width=\\\"14\\\" />\\n                        </div>\\n\\n                        <div class=\\\"emi-tenure-box \").concat(isBankExpanded ? \"open\" : \"\", \"\\\">\\n                            \").concat(bank.allEmiMethod.map(function (t) {\n          var _t$emiMethod = t.emiMethod,\n            duration = _t$emiMethod.duration,\n            emiAmountLocaleFull = _t$emiMethod.emiAmountLocaleFull,\n            interestChargedAmountLocaleFull = _t$emiMethod.interestChargedAmountLocaleFull,\n            effectiveInterestRate = _t$emiMethod.effectiveInterestRate,\n            processingFee = _t$emiMethod.processingFee,\n            merchantBorneInterestAmountLocaleFull = _t$emiMethod.merchantBorneInterestAmountLocaleFull,\n            netAmountLocaleFull = _t$emiMethod.netAmountLocaleFull;\n          return \"\\n                                <div class=\\\"emi-tenure-row-main\\\">\\n                                    <div class=\\\"emi-tenure-row\\\" data-bank=\\\"\".concat(bank.id, \"\\\" data-tenure=\\\"\").concat(t.emiMethod.duration, \"\\\">\\n                                        <div class=\\\"emi-main-text\\\">\\n                                            <div class=\\\"emi-tenure-info\\\">\\n                                                <div>\\n                                                    <span>\").concat(_this2.currencySymbol).concat(emiAmountLocaleFull, \" x \").concat(duration, \" months</span>\\n                                                    <span> | \").concat(effectiveInterestRate, \"%</span>\\n                                                </div>\\n                                                <div>\\n                                                    \").concat(!(0,_utils__WEBPACK_IMPORTED_MODULE_4__.isEmpty)(t.offerType) ? t.offerType.map(function (type) {\n            return \"<span class=\\\"emi-offer\\\">\".concat(type, \"</span>\");\n          }).join(\" \") : '', \"\\n                                                </div>\\n                                            </div>\\n                                        </div>\\n                                        <label class=\\\"sdk-checkbox-container\\\">\\n                                            <input type=\\\"checkbox\\\" class=\\\"sdk-checkbox\\\" name=\\\"walletSelect\\\" />\\n                                            <span class=\\\"sdk-checkmark\\\"></span>\\n                                        </label>\\n                                    </div>\\n                                    <div class=\\\"emi-tenure-details\\\">\\n                                        <div class=\\\"emi-subtext\\\">\\n                                            <span> Interest \").concat(_this2.currencySymbol, \" \").concat(interestChargedAmountLocaleFull, \"</span>\\n                                            <span> \").concat(merchantBorneInterestAmountLocaleFull !== '0' ? \"| Discount \".concat(_this2.currencySymbol, \" \").concat(merchantBorneInterestAmountLocaleFull) : '', \"</span>\\n                                            \").concat(!(0,_utils__WEBPACK_IMPORTED_MODULE_4__.isEmpty)(processingFee) ? \" <span>| Processing Fee \".concat(_this2.currencySymbol).concat(processingFee === null || processingFee === void 0 ? void 0 : processingFee.amountLocaleFull, \" + GST</span>\") : '', \"\\n                                            <span>| Your card will be charged for an amount of \").concat(_this2.currencySymbol).concat(netAmountLocaleFull, \"</span>\\n                                        </div>\\n                                        <div class=\\\"emi-card-from\\\"></div>\\n                                    </div>\\n                                </div>\\n                            \");\n        }).join(\"\"), \"\\n                        </div>\\n                    </div>\\n                \");\n      }).join(\"\"));\n\n      // Apply theme\n      this.applyTheme(root);\n\n      // BACK BUTTON\n      root.querySelector(\"#emi-back-btn\").addEventListener(\"click\", function () {\n        _this2.goBack();\n      });\n\n      // BANK EXPANSION\n      root.querySelectorAll(\".emi-bank-wrapper\").forEach(function (wrapper) {\n        var bankId = wrapper.getAttribute(\"data-bank-id\");\n        var row = wrapper.querySelector(\".emi-bank-row\");\n        row.addEventListener(\"click\", function () {\n          _this2.toggleBank(tab, bankId);\n        });\n      });\n      root.querySelector(\"#emi-banks-list\").addEventListener(\"click\", function (e) {\n        var _this2$onFormValidity;\n        var clicked = e.target;\n\n        // Find parent wrapper\n        var mainRow = clicked.closest(\".emi-tenure-row-main\");\n        if (!mainRow) return;\n        // Find the actual row that contains data attributes\n        var innerRow = mainRow.querySelector(\".emi-tenure-row\");\n        if (!innerRow) return;\n        var selectedTenure = innerRow.getAttribute(\"data-tenure\");\n        _this2.selectedTenure = selectedTenure;\n        var bankId = innerRow.getAttribute(\"data-bank\");\n        var bank = tab.emiList.find(function (b) {\n          return b.id === bankId;\n        });\n        var tenure = bank === null || bank === void 0 ? void 0 : bank.allEmiMethod.find(function (t) {\n          return t.emiMethod.duration === Number(selectedTenure);\n        });\n        _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.set(\"emiTenure\", tenure);\n        _this2.updatePayButtonText(\"Pay \".concat(_this2.currencySymbol).concat(tenure.emiMethod.netAmountLocaleFull));\n\n        // Toggle selection (only one active)\n        var allRows = root.querySelectorAll(\".emi-tenure-row-main\");\n        allRows.forEach(function (r) {\n          var checkbox = r.querySelector(\".sdk-checkbox\");\n          if (!checkbox) return;\n          if (r === mainRow) {\n            var isActive = !r.classList.contains(\"active\");\n            r.classList.toggle(\"active\", isActive);\n            checkbox.checked = isActive;\n          } else {\n            r.classList.remove(\"active\");\n            checkbox.checked = false;\n          }\n        });\n\n        // 🎯 Inject card form here\n        var details = mainRow.querySelector(\".emi-card-from\");\n        details.innerHTML = \"\";\n\n        // ❗ Reset any previous validity flags (optional)\n        (_this2$onFormValidity = _this2.onFormValidityChange) === null || _this2$onFormValidity === void 0 || _this2$onFormValidity.call(_this2, {\n          isValid: false,\n          invalidFields: []\n        });\n\n        // Recreate a fresh card form\n        details.appendChild(_this2.renderCardScreen());\n      });\n    }\n  }, {\n    key: \"renderCardLessEMI\",\n    value: function renderCardLessEMI(tab) {\n      var _this3 = this;\n      var root = this.form.querySelector(\"#emi-container\");\n      // 1️⃣ Build HTML\n      var html = tab.emiList.flatMap(function (cardLess) {\n        return cardLess.allEmiMethod.map(function (t) {\n          return \"\\n                <div class=\\\"cardless-row\\\" data-emi=\\\"\".concat(t.emiMethod.cardlessEmiProviderValue, \"\\\"> \\n                    <div class=\\\"cardless-left\\\"> \\n                        <img src=\\\"\").concat(t.logoUrl, \"\\\" alt=\\\"\").concat(t.emiMethod.cardlessEmiProviderTitle, \"\\\" class=\\\"cardless-logo\\\" />\\n                        <span class=\\\"cardless-name label\\\">\").concat(t.emiMethod.cardlessEmiProviderTitle, \"</span> \\n                    </div> \\n                    <label class=\\\"cardless-checkbox-container\\\"> \\n                        <input type=\\\"checkbox\\\" class=\\\"cardless-checkbox\\\" name=\\\"walletSelect\\\" /> \\n                        <span class=\\\"cardless-checkmark\\\"></span>\\n                    </label> \\n                </div>\\n            \");\n        });\n      }).join('');\n\n      // 2️⃣ Inject into DOM\n      root.innerHTML = \"\\n            <div class=\\\"emi-header\\\">\\n                    <img src=\\\"\".concat(_assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__, \"\\\" width=\\\"32\\\" id=\\\"emi-back-btn\\\"/>\\n                </div>\\n                \").concat(html, \"\\n            \");\n      this.applyTheme(root);\n      root.querySelector(\"#emi-back-btn\").addEventListener(\"click\", function () {\n        _this3.goBack();\n      });\n      // 3️⃣ Attach listeners\n      var rows = root.querySelectorAll('.cardless-row');\n      rows.forEach(function (row) {\n        row.addEventListener('click', function () {\n          var emiType = row.getAttribute('data-emi');\n          _this3.handleCardLessEMISelection(emiType);\n          _this3.selectedCategory = \"emi/cardless\";\n          rows.forEach(function (r) {\n            var checkbox = r.querySelector('.cardless-checkbox');\n            checkbox.checked = r === row;\n            r.classList.toggle('active', r === row);\n          });\n        });\n      });\n      return html;\n    }\n  }, {\n    key: \"handleCardLessEMISelection\",\n    value: function handleCardLessEMISelection(cardLessEMIName) {\n      var _this$onFormValidityC;\n      this.selectedCardLessEMI = cardLessEMIName;\n\n      // Notify parent of validity\n      (_this$onFormValidityC = this.onFormValidityChange) === null || _this$onFormValidityC === void 0 || _this$onFormValidityC.call(this, {\n        isValid: !!cardLessEMIName,\n        invalidFields: cardLessEMIName ? [] : [{\n          isValid: !!cardLessEMIName,\n          msz: ''\n        }]\n      });\n    }\n\n    // 🔹 Apply theme colors to wallet buttons\n  }, {\n    key: \"applyTheme\",\n    value: function applyTheme(container) {\n      var secondaryColor = this.theme.secondaryColor;\n      var style = document.createElement(\"style\");\n      style.innerHTML = \"\\n            .sdk-checkbox {\\n                border-color: \".concat(secondaryColor, \";\\n            }\\n\\n            .sdk-checkbox:checked+.sdk-checkmark {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color:  \").concat(secondaryColor, \";\\n            }\\n\\n            .sdk-checkbox:checked {\\n                background-color: \").concat(secondaryColor, \";\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .sdk-row-main:hover {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox:checked+.cardless-checkmark {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color:  \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox:checked {\\n                background-color: \").concat(secondaryColor, \";\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-row.active {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color: \").concat((0,_utils__WEBPACK_IMPORTED_MODULE_4__.hexToRgba)(secondaryColor, 0.1), \";\\n            }\\n\\n            .cardless-row:hover {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n        \");\n      container.appendChild(style);\n    }\n\n    // -------------------------\n    // BANK EXPANSION LOGIC\n    // -------------------------\n  }, {\n    key: \"toggleBank\",\n    value: function toggleBank(tab, bankId) {\n      this.expandedBankId = this.expandedBankId === bankId ? null : bankId;\n      this.renderBankScreen(tab);\n    }\n\n    // -------------------------\n    // UNIVERSAL BACK LOGIC\n    // -------------------------\n  }, {\n    key: \"goBack\",\n    value: function goBack() {\n      this.history.pop();\n      var screen = this.history.current();\n      this.onFormValidityChange({\n        isValid: false,\n        invalidFields: []\n      });\n      if (screen === \"categories\") {\n        this.renderCategoriesScreen();\n      } else if (screen === \"banks\") {\n        var lastTab = this.emiTabs[0]; // You can track last visited tab\n        this.renderBankScreen(lastTab);\n      } else {\n        this.renderCategoriesScreen();\n      }\n    }\n  }, {\n    key: \"renderCardScreen\",\n    value: function renderCardScreen() {\n      // Create a standalone container for the card form\n      var container = document.createElement(\"div\");\n      container.classList.add(\"emi-card-container\");\n      container.addEventListener(\"click\", function (e) {\n        e.stopPropagation();\n      });\n      // Create a card payment instance that renders INSIDE this container\n      var cardPayment = new _CardPayment__WEBPACK_IMPORTED_MODULE_7__[\"default\"](container, this.payButtonEl, _objectSpread(_objectSpread({}, this.options), {}, {\n        onFormValidityChange: this.onFormValidityChange\n      }));\n      // Render and return a real DOM element\n      return cardPayment.render();\n    }\n  }, {\n    key: \"getInstrumentDetails\",\n    value: function getInstrumentDetails() {\n      var _formData$get, _formData$get2;\n      var formData = new FormData(this.form);\n      var expiry = ((_formData$get = formData.get('expiryDate')) === null || _formData$get === void 0 ? void 0 : _formData$get.split('/')) || [];\n      var _expiry = _slicedToArray(expiry, 2),\n        expiryMonth = _expiry[0],\n        expiryYear = _expiry[1];\n      return _objectSpread(_objectSpread({}, this.selectedCategory !== 'emi/cardless' ? {\n        card: {\n          number: (_formData$get2 = formData.get('cardNumber')) === null || _formData$get2 === void 0 ? void 0 : _formData$get2.replace(/\\s+/g, ''),\n          holderName: formData.get('nameOnCard'),\n          expiry: \"20\".concat(expiryYear, \"-\").concat(expiryMonth),\n          cvc: formData.get('cvv')\n        }\n      } : {}), {}, {\n        emi: this.selectedCategory !== 'emi/cardless' ? {\n          duration: this.selectedTenure\n        } : {\n          provider: this.selectedCardLessEMI\n        },\n        type: this.selectedCategory\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EmiPayment);\n\n//# sourceURL=webpack://BoxPayCheckout/./src/components/paymentElements/paymentElement/EmiPayment.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _templates_emiTemplate_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../templates/emiTemplate.html */ \"./src/templates/emiTemplate.html\");\n/* harmony import */ var _assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../assets/icons/right-arrow.svg */ \"./src/assets/icons/right-arrow.svg\");\n/* harmony import */ var _assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../assets/icons/back-btn.svg */ \"./src/assets/icons/back-btn.svg\");\n/* harmony import */ var _styles_emiPayment_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../styles/emiPayment.css */ \"./src/styles/emiPayment.css\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\n/* harmony import */ var _EmiHistory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../EmiHistory */ \"./src/components/EmiHistory.ts\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../state/globalState */ \"./src/state/globalState.ts\");\n/* harmony import */ var _CardPayment__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./CardPayment */ \"./src/components/paymentElements/paymentElement/CardPayment.ts\");\nfunction _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); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _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); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _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); }\n\n\n\n\n\n\n\n\nvar allEmiTabs = [{\n  title: \"Credit Card\",\n  id: \"CreditCardEMI\"\n}, {\n  title: \"Debit Card\",\n  id: \"DebitCardEMI\"\n}, {\n  title: \"Others\",\n  id: \"CardlessEMI\"\n}];\nvar EmiPayment = /*#__PURE__*/function () {\n  function EmiPayment(form, payButtonEl, emiList, options) {\n    var _options$payButton, _this$appearance, _this$appearance2;\n    _classCallCheck(this, EmiPayment);\n    _defineProperty(this, \"history\", new _EmiHistory__WEBPACK_IMPORTED_MODULE_5__.EmiHistory());\n    _defineProperty(this, \"expandedBankId\", null);\n    _defineProperty(this, \"expandedTenure\", null);\n    this.currencySymbol = _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.get('currencySymbol');\n    this.form = form;\n    this.payButtonEl = payButtonEl;\n    this.onFormValidityChange = options === null || options === void 0 ? void 0 : options.onFormValidityChange;\n    this.updatePayButtonText = options === null || options === void 0 ? void 0 : options.updatePayButtonText;\n    this.onFormValidityChange({\n      isValid: false,\n      invalidFields: []\n    });\n    this.showPaymentButton = (options === null || options === void 0 || (_options$payButton = options.payButton) === null || _options$payButton === void 0 ? void 0 : _options$payButton.show) !== false;\n    this.appearance = _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.get('appearance');\n    this.theme = {\n      primaryColor: (_this$appearance = this.appearance) === null || _this$appearance === void 0 ? void 0 : _this$appearance.primaryColor,\n      secondaryColor: (_this$appearance2 = this.appearance) === null || _this$appearance2 === void 0 ? void 0 : _this$appearance2.secondaryColor\n    };\n    var availableTabs = allEmiTabs.filter(function (tab) {\n      return emiList.some(function (emi) {\n        return emi.brand === tab.id;\n      });\n    });\n    this.emiTabs = availableTabs.map(function (tab) {\n      var filtered = emiList.filter(function (item) {\n        return item.brand === tab.id;\n      });\n      // const sortedData = filtered.sort((a, b) => {\n      //     if (a.emiMethod.cardlessEmiProvider) {\n      //         return a.emiMethod.cardlessEmiProvider.localeCompare(b.emiMethod.cardlessEmiProvider)\n      //     } else {\n      //         return a.emiMethod.issuer.localeCompare(b.emiMethod.issuer)\n      //     }\n      // });\n      var unique = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.getUniqueEmiOptions)(filtered);\n      return {\n        id: tab.id,\n        title: tab.title,\n        emiList: unique\n      };\n    });\n  }\n\n  // -------------------------\n  // INITIAL RENDER\n  // -------------------------\n  return _createClass(EmiPayment, [{\n    key: \"render\",\n    value: function render() {\n      this.form.innerHTML = _templates_emiTemplate_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\n      this.renderCategoriesScreen();\n      // if (this.showPaymentButton && this.payButtonEl) {\n      //     this.form.appendChild(this.payButtonEl);\n      // }\n      return this.form;\n    }\n\n    // -------------------------\n    // SCREEN 1: CATEGORY SCREEN\n    // -------------------------\n  }, {\n    key: \"renderCategoriesScreen\",\n    value: function renderCategoriesScreen() {\n      var _this = this;\n      this.history.clear();\n      this.history.push(\"categories\");\n      var root = this.form.querySelector(\"#emi-container\");\n      root.innerHTML = \"\\n            <div id=\\\"emi-container\\\">\\n                \".concat(this.emiTabs.map(function (tab) {\n        var logos = tab.emiList.slice(0, 2);\n        return \"\\n            <div class=\\\"emi-row\\\" data-emi=\\\"\".concat(tab.id, \"\\\">\\n                            <div class=\\\"emi-left\\\">\\n                                <span class=\\\"emi-name label\\\">\").concat(tab.title, \"</span>\\n                                \").concat(logos.map(function (emi) {\n          var logo = emi.bestEmiMethod.logoUrl || \"\";\n          return \"<img src=\\\"\".concat(logo, \"\\\" width=\\\"16\\\" />\");\n        }).join(\"\"), \"\\n                            </div>\\n                            <label><img src=\\\"\").concat(_assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__, \"\\\" width=\\\"16\\\" /></label>\\n                        </div>\\n                    \");\n      }).join(\"\"), \"\\n            </div>\\n        \");\n      root.querySelectorAll(\".emi-row\").forEach(function (row) {\n        row.addEventListener(\"click\", function () {\n          var id = row.getAttribute(\"data-emi\");\n          var tab = _this.emiTabs.find(function (t) {\n            return t.id === id;\n          });\n          _this.selectedCategory = tab.id === \"CreditCardEMI\" ? \"emi/cc\" : \"emi/dc\";\n          if (tab) _this.renderBankScreen(tab);\n        });\n      });\n    }\n\n    // -------------------------\n    // SCREEN 2: BANK LIST\n    // -------------------------\n  }, {\n    key: \"renderBankScreen\",\n    value: function renderBankScreen(tab) {\n      var _this2 = this;\n      var root = this.form.querySelector(\"#emi-container\");\n      if (tab.title === 'Others') {\n        this.renderCardLessEMI(tab);\n        return;\n      }\n      console.log(\"tab:\", tab);\n      root.innerHTML = \"\\n            <div class=\\\"emi-header\\\">\\n                <img src=\\\"\".concat(_assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__, \"\\\" width=\\\"32\\\" id=\\\"emi-back-btn\\\"/>\\n            </div>\\n            <div id=\\\"emi-banks-list\\\">\\n                \").concat(tab.emiList.map(function (bank) {\n        var logo = bank.bestEmiMethod.logoUrl || \"\";\n        var isBankExpanded = _this2.expandedBankId === bank.id;\n        return \"<div class=\\\"emi-bank-wrapper\\\" data-bank-id=\\\"\".concat(bank.id, \"\\\">\\n                        <div class=\\\"emi-bank-row\\\">\\n                            <div class=\\\"left\\\">\\n                                <div>\\n                                    <img src=\\\"\").concat(logo, \"\\\" width=\\\"32\\\" />\\n                                    <span class=\\\"\\\">\").concat(bank.bestEmiMethod.issuerTitle, \"</span>\\n                                </div>\\n                                <div>\\n                                    \").concat(bank.offerType && bank.offerType.map(function (type) {\n          return \"<span class=\\\"emi-offer\\\">\".concat(type, \"</span>\");\n        }).join(\" \"), \"\\n                                </div>\\n                            </div>\\n                            <img class=\\\"arrow \").concat(isBankExpanded ? \"rotated\" : \"\", \"\\\"  src=\\\"\").concat(_assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__, \"\\\" width=\\\"14\\\" />\\n                        </div>\\n\\n                        <div class=\\\"emi-tenure-box \").concat(isBankExpanded ? \"open\" : \"\", \"\\\">\\n                            \").concat(bank.allEmiMethod.map(function (t) {\n          var _t$emiMethod = t.emiMethod,\n            duration = _t$emiMethod.duration,\n            emiAmountLocaleFull = _t$emiMethod.emiAmountLocaleFull,\n            interestChargedAmountLocaleFull = _t$emiMethod.interestChargedAmountLocaleFull,\n            effectiveInterestRate = _t$emiMethod.effectiveInterestRate,\n            processingFee = _t$emiMethod.processingFee,\n            merchantBorneInterestAmountLocaleFull = _t$emiMethod.merchantBorneInterestAmountLocaleFull,\n            totalAmountLocaleFull = _t$emiMethod.totalAmountLocaleFull;\n          return \"\\n                                <div class=\\\"emi-tenure-row-main\\\">\\n                                    <div class=\\\"emi-tenure-row\\\" data-bank=\\\"\".concat(bank.id, \"\\\" data-tenure=\\\"\").concat(t.emiMethod.duration, \"\\\">\\n                                        <div class=\\\"emi-main-text\\\">\\n                                            <div class=\\\"emi-tenure-info\\\">\\n                                                <div>\\n                                                    <span>\").concat(_this2.currencySymbol).concat(emiAmountLocaleFull, \" x \").concat(duration, \" months</span>\\n                                                    <span> | \").concat(effectiveInterestRate, \"%</span>\\n                                                </div>\\n                                                <div>\\n                                                    \").concat(!(0,_utils__WEBPACK_IMPORTED_MODULE_4__.isEmpty)(t.offerType) ? t.offerType.map(function (type) {\n            return \"<span class=\\\"emi-offer\\\">\".concat(type, \"</span>\");\n          }).join(\" \") : '', \"\\n                                                </div>\\n                                            </div>\\n                                        </div>\\n                                        <label class=\\\"sdk-checkbox-container\\\">\\n                                            <input type=\\\"checkbox\\\" class=\\\"sdk-checkbox\\\" name=\\\"walletSelect\\\" />\\n                                            <span class=\\\"sdk-checkmark\\\"></span>\\n                                        </label>\\n                                    </div>\\n                                    <div class=\\\"emi-tenure-details\\\">\\n                                        <div class=\\\"emi-subtext\\\">\\n                                            <span> Interest \").concat(_this2.currencySymbol, \" \").concat(interestChargedAmountLocaleFull, \"</span>\\n                                            <span> \").concat(merchantBorneInterestAmountLocaleFull !== '0' ? \"| Discount \".concat(_this2.currencySymbol, \" \").concat(merchantBorneInterestAmountLocaleFull) : '', \"</span>\\n                                            \").concat(!(0,_utils__WEBPACK_IMPORTED_MODULE_4__.isEmpty)(processingFee) ? \" <span>| Processing Fee \".concat(_this2.currencySymbol).concat(processingFee === null || processingFee === void 0 ? void 0 : processingFee.amountLocaleFull, \" + GST</span>\") : '', \"\\n                                            <span>| Your card will be charged for an amount of \").concat(_this2.currencySymbol).concat(totalAmountLocaleFull, \"</span>\\n                                        </div>\\n                                        <div class=\\\"emi-card-from\\\"></div>\\n                                    </div>\\n                                </div>\\n                            \");\n        }).join(\"\"), \"\\n                        </div>\\n                    </div>\\n                \");\n      }).join(\"\"));\n\n      // Apply theme\n      this.applyTheme(root);\n\n      // BACK BUTTON\n      root.querySelector(\"#emi-back-btn\").addEventListener(\"click\", function () {\n        _this2.goBack();\n      });\n\n      // BANK EXPANSION\n      root.querySelectorAll(\".emi-bank-wrapper\").forEach(function (wrapper) {\n        var bankId = wrapper.getAttribute(\"data-bank-id\");\n        var row = wrapper.querySelector(\".emi-bank-row\");\n        row.addEventListener(\"click\", function () {\n          _this2.toggleBank(tab, bankId);\n        });\n      });\n      root.querySelector(\"#emi-banks-list\").addEventListener(\"click\", function (e) {\n        var _this2$onFormValidity;\n        var clicked = e.target;\n\n        // Find parent wrapper\n        var mainRow = clicked.closest(\".emi-tenure-row-main\");\n        if (!mainRow) return;\n        // Find the actual row that contains data attributes\n        var innerRow = mainRow.querySelector(\".emi-tenure-row\");\n        if (!innerRow) return;\n        var selectedTenure = innerRow.getAttribute(\"data-tenure\");\n        _this2.selectedTenure = selectedTenure;\n        var bankId = innerRow.getAttribute(\"data-bank\");\n        var bank = tab.emiList.find(function (b) {\n          return b.id === bankId;\n        });\n        var tenure = bank === null || bank === void 0 ? void 0 : bank.allEmiMethod.find(function (t) {\n          return t.emiMethod.duration === Number(selectedTenure);\n        });\n        _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.set(\"emiTenure\", tenure);\n        _this2.updatePayButtonText(\"Pay \".concat(_this2.currencySymbol).concat(tenure.emiMethod.totalAmountLocaleFull));\n\n        // Toggle selection (only one active)\n        var allRows = root.querySelectorAll(\".emi-tenure-row-main\");\n        allRows.forEach(function (r) {\n          var checkbox = r.querySelector(\".sdk-checkbox\");\n          if (!checkbox) return;\n          if (r === mainRow) {\n            var isActive = !r.classList.contains(\"active\");\n            r.classList.toggle(\"active\", isActive);\n            checkbox.checked = isActive;\n          } else {\n            r.classList.remove(\"active\");\n            checkbox.checked = false;\n          }\n        });\n\n        // 🎯 Inject card form here\n        var details = mainRow.querySelector(\".emi-card-from\");\n        details.innerHTML = \"\";\n\n        // ❗ Reset any previous validity flags (optional)\n        (_this2$onFormValidity = _this2.onFormValidityChange) === null || _this2$onFormValidity === void 0 || _this2$onFormValidity.call(_this2, {\n          isValid: false,\n          invalidFields: []\n        });\n\n        // Recreate a fresh card form\n        details.appendChild(_this2.renderCardScreen());\n      });\n    }\n  }, {\n    key: \"renderCardLessEMI\",\n    value: function renderCardLessEMI(tab) {\n      var _this3 = this;\n      var root = this.form.querySelector(\"#emi-container\");\n      // 1️⃣ Build HTML\n      var html = tab.emiList.flatMap(function (cardLess) {\n        return cardLess.allEmiMethod.map(function (t) {\n          return \"\\n                <div class=\\\"cardless-row\\\" data-emi=\\\"\".concat(t.emiMethod.cardlessEmiProviderValue, \"\\\"> \\n                    <div class=\\\"cardless-left\\\"> \\n                        <img src=\\\"\").concat(t.logoUrl, \"\\\" alt=\\\"\").concat(t.emiMethod.cardlessEmiProviderTitle, \"\\\" class=\\\"cardless-logo\\\" />\\n                        <span class=\\\"cardless-name label\\\">\").concat(t.emiMethod.cardlessEmiProviderTitle, \"</span> \\n                    </div> \\n                    <label class=\\\"cardless-checkbox-container\\\"> \\n                        <input type=\\\"checkbox\\\" class=\\\"cardless-checkbox\\\" name=\\\"walletSelect\\\" /> \\n                        <span class=\\\"cardless-checkmark\\\"></span>\\n                    </label> \\n                </div>\\n            \");\n        });\n      }).join('');\n\n      // 2️⃣ Inject into DOM\n      root.innerHTML = \"\\n            <div class=\\\"emi-header\\\">\\n                    <img src=\\\"\".concat(_assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__, \"\\\" width=\\\"32\\\" id=\\\"emi-back-btn\\\"/>\\n                </div>\\n                \").concat(html, \"\\n            \");\n      this.applyTheme(root);\n      root.querySelector(\"#emi-back-btn\").addEventListener(\"click\", function () {\n        _this3.goBack();\n      });\n      // 3️⃣ Attach listeners\n      var rows = root.querySelectorAll('.cardless-row');\n      rows.forEach(function (row) {\n        row.addEventListener('click', function () {\n          var emiType = row.getAttribute('data-emi');\n          _this3.handleCardLessEMISelection(emiType);\n          _this3.selectedCategory = \"emi/cardless\";\n          rows.forEach(function (r) {\n            var checkbox = r.querySelector('.cardless-checkbox');\n            checkbox.checked = r === row;\n            r.classList.toggle('active', r === row);\n          });\n        });\n      });\n      return html;\n    }\n  }, {\n    key: \"handleCardLessEMISelection\",\n    value: function handleCardLessEMISelection(cardLessEMIName) {\n      var _this$onFormValidityC;\n      this.selectedCardLessEMI = cardLessEMIName;\n\n      // Notify parent of validity\n      (_this$onFormValidityC = this.onFormValidityChange) === null || _this$onFormValidityC === void 0 || _this$onFormValidityC.call(this, {\n        isValid: !!cardLessEMIName,\n        invalidFields: cardLessEMIName ? [] : [{\n          isValid: !!cardLessEMIName,\n          msz: ''\n        }]\n      });\n    }\n\n    // 🔹 Apply theme colors to wallet buttons\n  }, {\n    key: \"applyTheme\",\n    value: function applyTheme(container) {\n      var secondaryColor = this.theme.secondaryColor;\n      var style = document.createElement(\"style\");\n      style.innerHTML = \"\\n            .sdk-checkbox {\\n                border-color: \".concat(secondaryColor, \";\\n            }\\n\\n            .sdk-checkbox:checked+.sdk-checkmark {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color:  \").concat(secondaryColor, \";\\n            }\\n\\n            .sdk-checkbox:checked {\\n                background-color: \").concat(secondaryColor, \";\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .sdk-row-main:hover {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox:checked+.cardless-checkmark {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color:  \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox:checked {\\n                background-color: \").concat(secondaryColor, \";\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-row.active {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color: \").concat((0,_utils__WEBPACK_IMPORTED_MODULE_4__.hexToRgba)(secondaryColor, 0.1), \";\\n            }\\n\\n            .cardless-row:hover {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n        \");\n      container.appendChild(style);\n    }\n\n    // -------------------------\n    // BANK EXPANSION LOGIC\n    // -------------------------\n  }, {\n    key: \"toggleBank\",\n    value: function toggleBank(tab, bankId) {\n      this.expandedBankId = this.expandedBankId === bankId ? null : bankId;\n      this.renderBankScreen(tab);\n    }\n\n    // -------------------------\n    // UNIVERSAL BACK LOGIC\n    // -------------------------\n  }, {\n    key: \"goBack\",\n    value: function goBack() {\n      this.history.pop();\n      var screen = this.history.current();\n      this.onFormValidityChange({\n        isValid: false,\n        invalidFields: []\n      });\n      if (screen === \"categories\") {\n        this.renderCategoriesScreen();\n      } else if (screen === \"banks\") {\n        var lastTab = this.emiTabs[0]; // You can track last visited tab\n        this.renderBankScreen(lastTab);\n      } else {\n        this.renderCategoriesScreen();\n      }\n    }\n  }, {\n    key: \"renderCardScreen\",\n    value: function renderCardScreen() {\n      // Create a standalone container for the card form\n      var container = document.createElement(\"div\");\n      container.classList.add(\"emi-card-container\");\n      container.addEventListener(\"click\", function (e) {\n        e.stopPropagation();\n      });\n      // Create a card payment instance that renders INSIDE this container\n      var cardPayment = new _CardPayment__WEBPACK_IMPORTED_MODULE_7__[\"default\"](container, this.payButtonEl, _objectSpread(_objectSpread({}, this.options), {}, {\n        onFormValidityChange: this.onFormValidityChange\n      }));\n      // Render and return a real DOM element\n      return cardPayment.render();\n    }\n  }, {\n    key: \"getInstrumentDetails\",\n    value: function getInstrumentDetails() {\n      var _formData$get, _formData$get2;\n      var formData = new FormData(this.form);\n      var expiry = ((_formData$get = formData.get('expiryDate')) === null || _formData$get === void 0 ? void 0 : _formData$get.split('/')) || [];\n      var _expiry = _slicedToArray(expiry, 2),\n        expiryMonth = _expiry[0],\n        expiryYear = _expiry[1];\n      return _objectSpread(_objectSpread({}, this.selectedCategory !== 'emi/cardless' ? {\n        card: {\n          number: (_formData$get2 = formData.get('cardNumber')) === null || _formData$get2 === void 0 ? void 0 : _formData$get2.replace(/\\s+/g, ''),\n          holderName: formData.get('nameOnCard'),\n          expiry: \"20\".concat(expiryYear, \"-\").concat(expiryMonth),\n          cvc: formData.get('cvv')\n        }\n      } : {}), {}, {\n        emi: this.selectedCategory !== 'emi/cardless' ? {\n          duration: this.selectedTenure\n        } : {\n          provider: this.selectedCardLessEMI\n        },\n        type: this.selectedCategory\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EmiPayment);\n\n//# sourceURL=webpack://BoxPayCheckout/./src/components/paymentElements/paymentElement/EmiPayment.ts?\n}");
 
 /***/ }),
 
@@ -1785,7 +1785,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/lib/axios.js\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../state/globalState */ \"./src/state/globalState.ts\");\n\n\nvar state = _state_globalState__WEBPACK_IMPORTED_MODULE_1__.globalState.getState();\nvar axiosInstance = axios__WEBPACK_IMPORTED_MODULE_0__[\"default\"].create({});\n\n// ✅ Request interceptor\naxiosInstance.interceptors.request.use(function (config) {\n  var state = _state_globalState__WEBPACK_IMPORTED_MODULE_1__.globalState.getState();\n  if (state.mode === \"production\") {\n    config.baseURL = \"https://apis.boxpay.in/v0\";\n  } else {\n    config.baseURL = \"https://test-apis.boxpay.tech/v0\";\n  }\n  return config;\n}, function (error) {\n  // Handle request errors\n  return Promise.reject(error);\n});\n\n// ✅ Response interceptor\naxiosInstance.interceptors.response.use(function (response) {\n  // Handle successful responses\n  return response;\n}, function (error) {\n  // Handle response errors\n  return Promise.reject(error);\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (axiosInstance);\n\n//# sourceURL=webpack://BoxPayCheckout/./src/utils/axiosInstance.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/lib/axios.js\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../state/globalState */ \"./src/state/globalState.ts\");\n\n\nvar axiosInstance = axios__WEBPACK_IMPORTED_MODULE_0__[\"default\"].create({});\n\n// ✅ Request interceptor\naxiosInstance.interceptors.request.use(function (config) {\n  var state = _state_globalState__WEBPACK_IMPORTED_MODULE_1__.globalState.getState();\n  if (state.mode === \"production\") {\n    config.baseURL = \"https://apis.boxpay.in/v0\";\n  } else {\n    config.baseURL = \"https://test-apis.boxpay.tech/v0\";\n  }\n  return config;\n}, function (error) {\n  // Handle request errors\n  return Promise.reject(error);\n});\n\n// ✅ Response interceptor\naxiosInstance.interceptors.response.use(function (response) {\n  // Handle successful responses\n  return response;\n}, function (error) {\n  // Handle response errors\n  return Promise.reject(error);\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (axiosInstance);\n\n//# sourceURL=webpack://BoxPayCheckout/./src/utils/axiosInstance.ts?\n}");
 
 /***/ }),
 
@@ -1895,7 +1895,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   validateCVV: () => (/* binding */ validateCVV),\n/* harmony export */   validateCardNumber: () => (/* binding */ validateCardNumber),\n/* harmony export */   validateExpiryDate: () => (/* binding */ validateExpiryDate),\n/* harmony export */   validateName: () => (/* binding */ validateName)\n/* harmony export */ });\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../state/globalState */ \"./src/state/globalState.ts\");\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n/**\r\n * Validate card number using Luhn algorithm.\r\n * Accepts strings that may contain spaces or non-digit characters.\r\n */\n\nvar validateCardNumber = function validateCardNumber(cardNumber) {\n  var _paymentMethodsToShow, _paymentMethodsToShow2, _cardBinData$paymentM;\n  var invalid = {\n    isValid: false,\n    msz: \"Invalid Card Number\"\n  };\n  if (!cardNumber) return invalid;\n  var activePaymentMethod = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"activePaymentMethod\");\n  var emiTenure = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"emiTenure\");\n  var cardBinData = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"cardBinData\");\n  var paymentMethodsToShow = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"paymentMethodsToShow\");\n  var SUPPORTED_CARD_BRANDS = (_paymentMethodsToShow = paymentMethodsToShow === null || paymentMethodsToShow === void 0 || (_paymentMethodsToShow2 = paymentMethodsToShow.Card) === null || _paymentMethodsToShow2 === void 0 ? void 0 : _paymentMethodsToShow2.map(function (el) {\n    return el.brand;\n  })) !== null && _paymentMethodsToShow !== void 0 ? _paymentMethodsToShow : [];\n  if (cardBinData !== null && cardBinData !== void 0 && (_cardBinData$paymentM = cardBinData.paymentMethod) !== null && _cardBinData$paymentM !== void 0 && _cardBinData$paymentM.brand && !SUPPORTED_CARD_BRANDS.includes(cardBinData.paymentMethod.brand)) {\n    return {\n      isValid: false,\n      msz: \"This card is not supported for the payment.\"\n    };\n  }\n\n  // Digits only, max 16 characters\n  var sanitized = cardNumber.replace(/\\D/g, \"\").slice(0, 16);\n\n  // Luhn check\n  var sum = 0;\n  var doubleDigit = false;\n  for (var i = sanitized.length - 1; i >= 0; i--) {\n    var digit = parseInt(sanitized[i], 10) || 0;\n    if (doubleDigit) {\n      digit *= 2;\n      if (digit > 9) digit -= 9;\n    }\n    sum += digit;\n    doubleDigit = !doubleDigit;\n  }\n\n  // ❗ VALID if Luhn passes → but your old code inverted this\n  var luhnValid = sum % 10 === 0;\n  if (!luhnValid) return invalid;\n\n  // EMI compatibility check\n  if ((activePaymentMethod === null || activePaymentMethod === void 0 ? void 0 : activePaymentMethod.toUpperCase()) === \"EMI\" && cardBinData && emiTenure && (cardBinData === null || cardBinData === void 0 ? void 0 : cardBinData.issuerName) !== emiTenure.emiMethod.issuer) {\n    return {\n      isValid: false,\n      msz: \"No EMI plans found for this card. Try another card number.\"\n    };\n  }\n  return {\n    isValid: true,\n    msz: \"\"\n  };\n};\nvar validateName = function validateName(name) {\n  if (!!name.trim()) {\n    return {\n      isValid: true,\n      msz: \"\"\n    };\n  } else {\n    return {\n      isValid: false,\n      msz: \"Invalid Name\"\n    };\n  }\n};\n\n/**\r\n * Validate expiry date in MM/YY format.\r\n * Behaviour preserved from original:\r\n *  - If input is falsy -> returns false\r\n *  - Sanitizes to first 5 chars\r\n *  - If sanitizedValue is falsy -> returns true  (preserved as requested)\r\n *  - Otherwise checks month/year against current date and regex pattern\r\n */\nvar validateExpiryDate = function validateExpiryDate(date) {\n  if (!date) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n  var sanitizedValue = date.slice(0, 5);\n  var _sanitizedValue$split = sanitizedValue.split(\"/\"),\n    _sanitizedValue$split2 = _slicedToArray(_sanitizedValue$split, 2),\n    monthStr = _sanitizedValue$split2[0],\n    yearStr = _sanitizedValue$split2[1];\n\n  // Must match MM/YY\n  if (!/^(0[1-9]|1[0-2])\\/\\d{2}$/.test(sanitizedValue)) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n  var month = parseInt(monthStr, 10);\n  var year = parseInt(yearStr, 10);\n  var now = new Date();\n  var currentMonth = now.getMonth() + 1;\n  var currentYear = now.getFullYear() % 100;\n\n  // Expired year\n  if (year < currentYear) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n\n  // Same year but expired month\n  if (year === currentYear && month < currentMonth) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n\n  // Valid\n  return {\n    isValid: true,\n    msz: \"\"\n  };\n};\n\n/**\r\n * Validate CVV length depending on card brand.\r\n * - AMERICANEXPRESS => 4 digits\r\n * - others => 3 digits\r\n */\nvar validateCVV = function validateCVV(value, brand) {\n  var cvv = value !== null && value !== void 0 ? value : \"\";\n  var isAmex = (brand !== null && brand !== void 0 ? brand : \"\").toUpperCase() === \"AMERICANEXPRESS\";\n  var regex = isAmex ? /^[0-9]{4}$/ : /^[0-9]{3}$/;\n  var isValid = regex.test(cvv);\n  return {\n    isValid: isValid,\n    msz: isValid ? \"\" : \"Invalid CVV\"\n  };\n};\n\n//# sourceURL=webpack://BoxPayCheckout/./src/utils/validation/cardPaymentValidation.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   validateCVV: () => (/* binding */ validateCVV),\n/* harmony export */   validateCardNumber: () => (/* binding */ validateCardNumber),\n/* harmony export */   validateExpiryDate: () => (/* binding */ validateExpiryDate),\n/* harmony export */   validateName: () => (/* binding */ validateName)\n/* harmony export */ });\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../state/globalState */ \"./src/state/globalState.ts\");\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n/**\r\n * Validate card number using Luhn algorithm.\r\n * Accepts strings that may contain spaces or non-digit characters.\r\n */\n\nvar validateCardNumber = function validateCardNumber(cardNumber) {\n  var _paymentMethodsToShow, _paymentMethodsToShow2, _cardBinData$paymentM;\n  var invalid = {\n    isValid: false,\n    msz: \"Invalid Card Number\"\n  };\n  if (!cardNumber) return invalid;\n  var activePaymentMethod = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"activePaymentMethod\");\n  var emiTenure = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"emiTenure\");\n  var cardBinData = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"cardBinData\");\n  var paymentMethodsToShow = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"paymentMethodsToShow\");\n  var SUPPORTED_CARD_BRANDS = (_paymentMethodsToShow = paymentMethodsToShow === null || paymentMethodsToShow === void 0 || (_paymentMethodsToShow2 = paymentMethodsToShow.Card) === null || _paymentMethodsToShow2 === void 0 ? void 0 : _paymentMethodsToShow2.map(function (el) {\n    return el.brand;\n  })) !== null && _paymentMethodsToShow !== void 0 ? _paymentMethodsToShow : [];\n  if (cardBinData !== null && cardBinData !== void 0 && (_cardBinData$paymentM = cardBinData.paymentMethod) !== null && _cardBinData$paymentM !== void 0 && _cardBinData$paymentM.brand && !SUPPORTED_CARD_BRANDS.includes(cardBinData.paymentMethod.brand)) {\n    return {\n      isValid: false,\n      msz: \"This card is not supported for the payment.\"\n    };\n  }\n\n  // Digits only, max 16 characters\n  var sanitized = cardNumber.replace(/\\D/g, \"\").slice(0, 16);\n\n  // Luhn check\n  var sum = 0;\n  var doubleDigit = false;\n  for (var i = sanitized.length - 1; i >= 0; i--) {\n    var digit = parseInt(sanitized[i], 10) || 0;\n    if (doubleDigit) {\n      digit *= 2;\n      if (digit > 9) digit -= 9;\n    }\n    sum += digit;\n    doubleDigit = !doubleDigit;\n  }\n\n  // ❗ VALID if Luhn passes → but your old code inverted this\n  var luhnValid = sum % 10 === 0;\n  if (!luhnValid) return invalid;\n\n  // EMI compatibility check\n  if ((activePaymentMethod === null || activePaymentMethod === void 0 ? void 0 : activePaymentMethod.toUpperCase()) === \"EMI\" && cardBinData && emiTenure && (cardBinData === null || cardBinData === void 0 ? void 0 : cardBinData.issuerName) !== emiTenure.emiMethod.issuer) {\n    if (cardBinData.issuerName) {\n      var _emiTenure$emiMethod;\n      return {\n        isValid: false,\n        msz: \"This is \".concat(cardBinData.issuerTitle, \" Card. Please enter a card number that belongs to \").concat((_emiTenure$emiMethod = emiTenure.emiMethod) === null || _emiTenure$emiMethod === void 0 ? void 0 : _emiTenure$emiMethod.issuerTitle, \" Card.\")\n      };\n    } else {\n      return {\n        isValid: false,\n        msz: \"We couldn't find any EMI plans for this card. Please try using a different card number\"\n      };\n    }\n  }\n  return {\n    isValid: true,\n    msz: \"\"\n  };\n};\nvar validateName = function validateName(name) {\n  if (!!name.trim()) {\n    return {\n      isValid: true,\n      msz: \"\"\n    };\n  } else {\n    return {\n      isValid: false,\n      msz: \"Invalid Name\"\n    };\n  }\n};\n\n/**\r\n * Validate expiry date in MM/YY format.\r\n * Behaviour preserved from original:\r\n *  - If input is falsy -> returns false\r\n *  - Sanitizes to first 5 chars\r\n *  - If sanitizedValue is falsy -> returns true  (preserved as requested)\r\n *  - Otherwise checks month/year against current date and regex pattern\r\n */\nvar validateExpiryDate = function validateExpiryDate(date) {\n  if (!date) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n  var sanitizedValue = date.slice(0, 5);\n  var _sanitizedValue$split = sanitizedValue.split(\"/\"),\n    _sanitizedValue$split2 = _slicedToArray(_sanitizedValue$split, 2),\n    monthStr = _sanitizedValue$split2[0],\n    yearStr = _sanitizedValue$split2[1];\n\n  // Must match MM/YY\n  if (!/^(0[1-9]|1[0-2])\\/\\d{2}$/.test(sanitizedValue)) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n  var month = parseInt(monthStr, 10);\n  var year = parseInt(yearStr, 10);\n  var now = new Date();\n  var currentMonth = now.getMonth() + 1;\n  var currentYear = now.getFullYear() % 100;\n\n  // Expired year\n  if (year < currentYear) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n\n  // Same year but expired month\n  if (year === currentYear && month < currentMonth) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n\n  // Valid\n  return {\n    isValid: true,\n    msz: \"\"\n  };\n};\n\n/**\r\n * Validate CVV length depending on card brand.\r\n * - AMERICANEXPRESS => 4 digits\r\n * - others => 3 digits\r\n */\nvar validateCVV = function validateCVV(value, brand) {\n  var cvv = value !== null && value !== void 0 ? value : \"\";\n  var isAmex = (brand !== null && brand !== void 0 ? brand : \"\").toUpperCase() === \"AMERICANEXPRESS\";\n  var regex = isAmex ? /^[0-9]{4}$/ : /^[0-9]{3}$/;\n  var isValid = regex.test(cvv);\n  return {\n    isValid: isValid,\n    msz: isValid ? \"\" : \"Invalid CVV\"\n  };\n};\n\n//# sourceURL=webpack://BoxPayCheckout/./src/utils/validation/cardPaymentValidation.ts?\n}");
 
 /***/ }),
 

package/dist/boxpay.esm.js

@@ -1500,7 +1500,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _services_apiService_common_service__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../services/apiService/common.service */ \"./src/services/apiService/common.service.ts\");\n/* harmony import */ var _rajesh896_broprint_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @rajesh896/broprint.js */ \"./node_modules/@rajesh896/broprint.js/lib/index.mjs\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../loader */ \"./src/components/loader.ts\");\n/* harmony import */ var _utils_domUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/domUtils */ \"./src/utils/domUtils.ts\");\n/* harmony import */ var _utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils/paymentHandlers */ \"./src/utils/paymentHandlers.ts\");\n/* harmony import */ var _utils_paymentInstanceFactory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/paymentInstanceFactory */ \"./src/utils/paymentInstanceFactory.ts\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../state/globalState */ \"./src/state/globalState.ts\");\n/* harmony import */ var _utils_themeController__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/themeController */ \"./src/utils/themeController.ts\");\n/* harmony import */ var _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../utils/EventBus */ \"./src/utils/EventBus.ts\");\nfunction _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); }\nfunction _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = \"function\" == typeof Symbol ? Symbol : {}, n = r.iterator || \"@@iterator\", o = r.toStringTag || \"@@toStringTag\"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, \"_invoke\", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError(\"Generator is already running\"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = \"next\"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError(\"iterator result is not an object\"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i[\"return\"]) && t.call(i), c < 2 && (u = TypeError(\"The iterator does not provide a '\" + o + \"' method\"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, \"GeneratorFunction\")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, \"constructor\", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, \"constructor\", GeneratorFunction), GeneratorFunction.displayName = \"GeneratorFunction\", _regeneratorDefine2(GeneratorFunctionPrototype, o, \"GeneratorFunction\"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, \"Generator\"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, \"toString\", function () { return \"[object Generator]\"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }\nfunction _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, \"\", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o(\"next\", 0), o(\"throw\", 1), o(\"return\", 2)); }, _regeneratorDefine2(e, r, n, t); }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _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); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _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); }\n\n\n\n\n\n\n\n\n\n\nvar notAllowedPaymentStatuses = [\"EXPIRED\", \"PAID\", \"PROCESSING\", \"EXPIRED\", \"DISABLED\"];\nvar MAX_WIDTH = 1400;\nvar PaymentElements = /*#__PURE__*/function () {\n  function PaymentElements(props) {\n    var _props$options, _props$options2, _props$options3;\n    _classCallCheck(this, PaymentElements);\n    _defineProperty(this, \"activePaymentMethod\", \"\");\n    _defineProperty(this, \"browserFingerprint\", \"\");\n    _defineProperty(this, \"sessionDetails\", {});\n    _defineProperty(this, \"paymentInstances\", {});\n    _defineProperty(this, \"formValidity\", {\n      isValid: false,\n      invalidFields: []\n    });\n    // private oneTimePayment: boolean = false;\n    _defineProperty(this, \"paymentMethodsToShow\", {});\n    _defineProperty(this, \"showPayButton\", true);\n    Object.assign(this, props);\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('mode', this.mode);\n    this.maxWidth = MAX_WIDTH;\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('MAX_WIDTH', MAX_WIDTH);\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('oneTimePayment', ((_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.oneTimePayment) || false);\n    this.initiatePayment = function () {};\n    this.showPayButton = (_props$options2 = props.options) === null || _props$options2 === void 0 || (_props$options2 = _props$options2.payButton) === null || _props$options2 === void 0 ? void 0 : _props$options2.show;\n    this.onPaymentButtonValidity = (_props$options3 = props.options) === null || _props$options3 === void 0 || (_props$options3 = _props$options3.payButton) === null || _props$options3 === void 0 ? void 0 : _props$options3.onPaymentButtonValidity;\n    if (this.showPayButton === false) {\n      this.initiatePayment = this.handlePayButtonClick.bind(this);\n    }\n    void this.initialize();\n  }\n  return _createClass(PaymentElements, [{\n    key: \"handleThemeColors\",\n    value: function handleThemeColors() {\n      var theme = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get('appearance');\n      document.querySelectorAll(\".label\").forEach(function (label) {\n        return label.style.color = (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor) || \"#333\";\n      });\n    }\n  }, {\n    key: \"initialize\",\n    value: function () {\n      var _initialize = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {\n        var _resp$paymentDetails,\n          _resp$paymentDetails2,\n          _resp$merchantDetails,\n          _resp$configs,\n          _resp$paymentDetails3,\n          _resp$paymentDetails4,\n          _this = this,\n          _this$onLoad3;\n        var rootDiv, container, resp, isSubscription, _this$onLoad, merchantTheme, _this$onLoad2, _resp$paymentDetails$, amount, currencySymbol, currencyCode, formattedAmount, tabsContainer, formContainer, payDiv, _i, _Object$keys, method, instance;\n        return _regenerator().w(function (_context) {\n          while (1) switch (_context.n) {\n            case 0:\n              rootDiv = document.getElementById(this.container);\n              container = document.createElement(\"div\");\n              rootDiv.style.maxWidth = this.maxWidth + \"px\";\n              rootDiv.classList.add(\"payment-elements-root\");\n              rootDiv.innerHTML = '';\n              container.classList.add(\"payment-elements-container\");\n              if (container) {\n                _context.n = 1;\n                break;\n              }\n              throw new Error(\"\".concat(this.container, \" not found\"));\n            case 1:\n              (0,_loader__WEBPACK_IMPORTED_MODULE_3__.getLoaderTemplate)(container, \"Loading payment options...\");\n              rootDiv.append(container);\n              _context.n = 2;\n              return (0,_rajesh896_broprint_js__WEBPACK_IMPORTED_MODULE_1__.getCurrentBrowserFingerPrint)();\n            case 2:\n              this.browserFingerprint = _context.v;\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"sessionToken\", this.sessionToken);\n              _context.n = 3;\n              return (0,_services_apiService_common_service__WEBPACK_IMPORTED_MODULE_0__.getSession)(this.sessionToken);\n            case 3:\n              resp = _context.v;\n              // check for subscription\n              isSubscription = !(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isEmpty)(resp === null || resp === void 0 || (_resp$paymentDetails = resp.paymentDetails) === null || _resp$paymentDetails === void 0 ? void 0 : _resp$paymentDetails.subscriptionDetails);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"isSubscription\", isSubscription);\n              if (!notAllowedPaymentStatuses.includes(resp.status)) {\n                _context.n = 4;\n                break;\n              }\n              return _context.a(2, (_this$onLoad = this.onLoad) === null || _this$onLoad === void 0 ? void 0 : _this$onLoad.call(this, {\n                message: \"This checkout token is \".concat(resp === null || resp === void 0 ? void 0 : resp.status)\n              }));\n            case 4:\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('currencySymbol', resp === null || resp === void 0 || (_resp$paymentDetails2 = resp.paymentDetails) === null || _resp$paymentDetails2 === void 0 || (_resp$paymentDetails2 = _resp$paymentDetails2.money) === null || _resp$paymentDetails2 === void 0 ? void 0 : _resp$paymentDetails2.currencySymbol);\n              this.sessionDetails = resp;\n              merchantTheme = resp === null || resp === void 0 || (_resp$merchantDetails = resp.merchantDetails) === null || _resp$merchantDetails === void 0 ? void 0 : _resp$merchantDetails.checkoutTheme;\n              (0,_utils_themeController__WEBPACK_IMPORTED_MODULE_8__.handleAppearanceOptions)({\n                appearance: this.appearance,\n                theme: {\n                  themePrimaryColor: merchantTheme.primaryButtonColor,\n                  themeSecondaryColor: merchantTheme.secondaryButtonColor,\n                  themePrimaryTextColor: merchantTheme.primaryButtonColor,\n                  themeSecondaryTextColor: merchantTheme.secondaryButtonColor\n                }\n              });\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"sessionDetails\", resp);\n              // this.paymentMethodsToShow = orderPaymentMethodsByUserPreference(\n              //     getPaymentOptionsToDisplay(resp?.configs?.paymentMethods, this.paymentMethods),\n              //     this.paymentMethods\n              // );\n              this.paymentMethodsToShow = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.orderPaymentMethodsByUserPreference)((0,_utils__WEBPACK_IMPORTED_MODULE_2__.getPaymentOptionsToDisplay)(resp === null || resp === void 0 || (_resp$configs = resp.configs) === null || _resp$configs === void 0 ? void 0 : _resp$configs.paymentMethods, this.paymentMethods.includes('card') ? ['card'] : []), this.paymentMethods);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"paymentMethodsToShow\", this.paymentMethodsToShow);\n              if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isEmpty)(this.paymentMethodsToShow)) {\n                _context.n = 5;\n                break;\n              }\n              return _context.a(2, (_this$onLoad2 = this.onLoad) === null || _this$onLoad2 === void 0 ? void 0 : _this$onLoad2.call(this, {\n                message: \"No valid payment methods found\"\n              }));\n            case 5:\n              this.shopper = this.shopperDetails || (resp === null || resp === void 0 || (_resp$paymentDetails3 = resp.paymentDetails) === null || _resp$paymentDetails3 === void 0 ? void 0 : _resp$paymentDetails3.shopper);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"shopper\", this.shopper);\n              _resp$paymentDetails$ = resp === null || resp === void 0 || (_resp$paymentDetails4 = resp.paymentDetails) === null || _resp$paymentDetails4 === void 0 ? void 0 : _resp$paymentDetails4.money, amount = _resp$paymentDetails$.amount, currencySymbol = _resp$paymentDetails$.currencySymbol, currencyCode = _resp$paymentDetails$.currencyCode;\n              formattedAmount = String((0,_utils__WEBPACK_IMPORTED_MODULE_2__.numberToCurrency)(amount, currencyCode));\n              container.innerHTML = \"\";\n              tabsContainer = undefined;\n              this.activePaymentMethod = Object.keys(this.paymentMethodsToShow)[0];\n              if (Object.keys(this.paymentMethodsToShow).length > 1) {\n                tabsContainer = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createTabsContainer)(this.paymentMethodsToShow, this.activePaymentMethod, this.switchPaymentMethod.bind(this));\n              }\n              formContainer = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createFormContainer)();\n              if (this.showPayButton) {\n                payDiv = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createPayButton)(function () {\n                  return (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createPayLabel)(currencySymbol, formattedAmount);\n                }, function (e) {\n                  e.preventDefault();\n                  (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handleButtonLoader)(_this.boxpayPayButton, true);\n                  void _this.handlePayButtonClick();\n                });\n                payDiv.style.maxWidth = this.maxWidth + \"px\";\n                this.boxpayPayButton = payDiv.querySelector(\"button\");\n              }\n              if (tabsContainer) {\n                container.append(tabsContainer, formContainer);\n              } else {\n                container.append(formContainer);\n              }\n              this.handleSubscriptionCheckBox(rootDiv);\n              if (this.showPayButton) {\n                rootDiv.append(payDiv);\n              }\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"activePaymentMethod\", this.activePaymentMethod);\n              for (_i = 0, _Object$keys = Object.keys(this.paymentMethodsToShow); _i < _Object$keys.length; _i++) {\n                method = _Object$keys[_i];\n                instance = (0,_utils_paymentInstanceFactory__WEBPACK_IMPORTED_MODULE_6__.createPaymentInstance)(method, formContainer, payDiv, this.paymentMethodsToShow, this.options || {}, this.handleFormValidityChange.bind(this), this.updatePayButtonText.bind(this), this);\n                this.paymentInstances[method] = instance;\n              }\n              this.mountActiveMethod();\n              (_this$onLoad3 = this.onLoad) === null || _this$onLoad3 === void 0 || _this$onLoad3.call(this, {\n                message: \"Payment Elements Loaded\"\n              });\n            case 6:\n              return _context.a(2);\n          }\n        }, _callee, this);\n      }));\n      function initialize() {\n        return _initialize.apply(this, arguments);\n      }\n      return initialize;\n    }()\n  }, {\n    key: \"handleSubscriptionCheckBox\",\n    value: function handleSubscriptionCheckBox(rootDiv) {\n      var isSubscription = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get(\"isSubscription\");\n      var oneTimePayment = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get(\"oneTimePayment\");\n      if (isSubscription && oneTimePayment) {\n        _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('isOneTimePaymentChecked', true);\n        // globalState.set('sendSiFlag', true);\n      } else if (isSubscription && !oneTimePayment) {\n        var siElement = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createCheckBox)(\"Setup automatic payments\", function () {});\n        rootDiv.appendChild(siElement);\n        // globalState.set('sendSiFlag', true);\n      } else {\n        // globalState.set('sendSiFlag', false);\n      }\n    }\n  }, {\n    key: \"switchPaymentMethod\",\n    value: function switchPaymentMethod(method) {\n      if (this.activePaymentMethod === method) return;\n      this.activePaymentMethod = method;\n      this.mountActiveMethod();\n      this.handleFormValidityChange({\n        isValid: false,\n        invalidFields: []\n      });\n      this.updatePayButtonText();\n\n      // stop if any status polling is going on\n      var controller = {\n        cancelled: true\n      };\n      _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"pollController\", controller);\n    }\n  }, {\n    key: \"mountActiveMethod\",\n    value: function mountActiveMethod() {\n      var _activeInstance$rende;\n      var formContainer = document.getElementById(\"payment-form-container\");\n      if (!formContainer) return;\n      formContainer.innerHTML = \"\";\n      var activeInstance = this.paymentInstances[this.activePaymentMethod];\n      _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"activePaymentMethod\", this.activePaymentMethod);\n      _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"CURRENT_PAYMENT_METHOD\", this.activePaymentMethod);\n      activeInstance === null || activeInstance === void 0 || (_activeInstance$rende = activeInstance.render) === null || _activeInstance$rende === void 0 || _activeInstance$rende.call(activeInstance);\n      (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.updateActiveTab)(this.activePaymentMethod);\n      this.handleThemeColors();\n    }\n  }, {\n    key: \"handleFormValidityChange\",\n    value: function handleFormValidityChange(_ref) {\n      var isValid = _ref.isValid,\n        invalidFields = _ref.invalidFields;\n      this.formValidity = {\n        isValid: isValid,\n        invalidFields: invalidFields\n      };\n      if (this.boxpayPayButton) this.boxpayPayButton.disabled = !isValid;\n      if (!this.showPayButton) {\n        if (typeof this.onPaymentButtonValidity === 'function') {\n          this.onPaymentButtonValidity(isValid);\n        }\n      }\n    }\n  }, {\n    key: \"handlePayButtonClick\",\n    value: function () {\n      var _handlePayButtonClick = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {\n        var controller, res;\n        return _regenerator().w(function (_context2) {\n          while (1) switch (_context2.n) {\n            case 0:\n              console.log(\"PAY btn clicked\");\n              if (!this.boxpayPayButton) {\n                _context2.n = 2;\n                break;\n              }\n              if (!this.boxpayPayButton.disabled) {\n                _context2.n = 1;\n                break;\n              }\n              return _context2.a(2);\n            case 1:\n              this.boxpayPayButton.disabled = true;\n            case 2:\n              controller = {\n                cancelled: false\n              };\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"pollController\", controller);\n              _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"PAY_BTN_CLICKED\", {});\n              _context2.n = 3;\n              return (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handlePayClick)(this);\n            case 3:\n              res = _context2.v;\n              return _context2.a(2, res);\n          }\n        }, _callee2, this);\n      }));\n      function handlePayButtonClick() {\n        return _handlePayButtonClick.apply(this, arguments);\n      }\n      return handlePayButtonClick;\n    }()\n  }, {\n    key: \"sendResponse\",\n    value: function sendResponse(response) {\n      if (this.boxpayPayButton) {\n        (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handleButtonLoader)(this.boxpayPayButton, false);\n      }\n      if ((response === null || response === void 0 ? void 0 : response.status) !== \"ERROR\") {\n        var _this$onPayment;\n        _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"SENDING_RESPONSE\", response);\n        (_this$onPayment = this.onPayment) === null || _this$onPayment === void 0 || _this$onPayment.call(this, response);\n      }\n      return response;\n    }\n  }, {\n    key: \"updatePayButtonText\",\n    value: function updatePayButtonText(text) {\n      var _this$sessionDetails;\n      if (!this.boxpayPayButton) return;\n      var _ref2 = ((_this$sessionDetails = this.sessionDetails) === null || _this$sessionDetails === void 0 || (_this$sessionDetails = _this$sessionDetails.paymentDetails) === null || _this$sessionDetails === void 0 ? void 0 : _this$sessionDetails.money) || {},\n        amount = _ref2.amount,\n        currencySymbol = _ref2.currencySymbol;\n      this.boxpayPayButton.textContent = text || \"Pay \".concat(currencySymbol, \" \").concat(amount);\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PaymentElements);\n\n//# sourceURL=webpack://boxpay-checkout-web-sdk/./src/components/paymentElements/PaymentElement.controller.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _services_apiService_common_service__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../services/apiService/common.service */ \"./src/services/apiService/common.service.ts\");\n/* harmony import */ var _rajesh896_broprint_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @rajesh896/broprint.js */ \"./node_modules/@rajesh896/broprint.js/lib/index.mjs\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../loader */ \"./src/components/loader.ts\");\n/* harmony import */ var _utils_domUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/domUtils */ \"./src/utils/domUtils.ts\");\n/* harmony import */ var _utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils/paymentHandlers */ \"./src/utils/paymentHandlers.ts\");\n/* harmony import */ var _utils_paymentInstanceFactory__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/paymentInstanceFactory */ \"./src/utils/paymentInstanceFactory.ts\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../state/globalState */ \"./src/state/globalState.ts\");\n/* harmony import */ var _utils_themeController__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/themeController */ \"./src/utils/themeController.ts\");\n/* harmony import */ var _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../utils/EventBus */ \"./src/utils/EventBus.ts\");\nfunction _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); }\nfunction _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = \"function\" == typeof Symbol ? Symbol : {}, n = r.iterator || \"@@iterator\", o = r.toStringTag || \"@@toStringTag\"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, \"_invoke\", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError(\"Generator is already running\"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = \"next\"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError(\"iterator result is not an object\"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i[\"return\"]) && t.call(i), c < 2 && (u = TypeError(\"The iterator does not provide a '\" + o + \"' method\"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, \"GeneratorFunction\")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, \"constructor\", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, \"constructor\", GeneratorFunction), GeneratorFunction.displayName = \"GeneratorFunction\", _regeneratorDefine2(GeneratorFunctionPrototype, o, \"GeneratorFunction\"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, \"Generator\"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, \"toString\", function () { return \"[object Generator]\"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }\nfunction _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, \"\", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o(\"next\", 0), o(\"throw\", 1), o(\"return\", 2)); }, _regeneratorDefine2(e, r, n, t); }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _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); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _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); }\n\n\n\n\n\n\n\n\n\n\nvar notAllowedPaymentStatuses = [\"EXPIRED\", \"PAID\", \"PROCESSING\", \"EXPIRED\", \"DISABLED\"];\nvar MAX_WIDTH = 1400;\nvar PaymentElements = /*#__PURE__*/function () {\n  function PaymentElements(props) {\n    var _props$options, _props$options2, _props$options3;\n    _classCallCheck(this, PaymentElements);\n    _defineProperty(this, \"activePaymentMethod\", \"\");\n    _defineProperty(this, \"browserFingerprint\", \"\");\n    _defineProperty(this, \"sessionDetails\", {});\n    _defineProperty(this, \"paymentInstances\", {});\n    _defineProperty(this, \"formValidity\", {\n      isValid: false,\n      invalidFields: []\n    });\n    // private oneTimePayment: boolean = false;\n    _defineProperty(this, \"paymentMethodsToShow\", {});\n    _defineProperty(this, \"showPayButton\", true);\n    Object.assign(this, props);\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('mode', this.mode);\n    this.maxWidth = MAX_WIDTH;\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('MAX_WIDTH', MAX_WIDTH);\n    _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('oneTimePayment', ((_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.oneTimePayment) || false);\n    this.initiatePayment = function () {};\n    this.showPayButton = (_props$options2 = props.options) === null || _props$options2 === void 0 || (_props$options2 = _props$options2.payButton) === null || _props$options2 === void 0 ? void 0 : _props$options2.show;\n    this.onPaymentButtonValidity = (_props$options3 = props.options) === null || _props$options3 === void 0 || (_props$options3 = _props$options3.payButton) === null || _props$options3 === void 0 ? void 0 : _props$options3.onPaymentButtonValidity;\n    if (this.showPayButton === false) {\n      this.initiatePayment = this.handlePayButtonClick.bind(this);\n    }\n    void this.initialize();\n  }\n  return _createClass(PaymentElements, [{\n    key: \"handleThemeColors\",\n    value: function handleThemeColors() {\n      var theme = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get('appearance');\n      document.querySelectorAll(\".label\").forEach(function (label) {\n        return label.style.color = (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor) || \"#333\";\n      });\n    }\n  }, {\n    key: \"initialize\",\n    value: function () {\n      var _initialize = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {\n        var _resp$paymentDetails,\n          _resp$paymentDetails2,\n          _resp$merchantDetails,\n          _resp$configs,\n          _resp$paymentDetails3,\n          _resp$paymentDetails4,\n          _this = this,\n          _this$onLoad3;\n        var rootDiv, container, resp, isSubscription, _this$onLoad, merchantTheme, _this$onLoad2, _resp$paymentDetails$, amount, currencySymbol, currencyCode, formattedAmount, tabsContainer, formContainer, payDiv, _i, _Object$keys, method, instance;\n        return _regenerator().w(function (_context) {\n          while (1) switch (_context.n) {\n            case 0:\n              rootDiv = document.getElementById(this.container);\n              container = document.createElement(\"div\");\n              rootDiv.style.maxWidth = this.maxWidth + \"px\";\n              rootDiv.classList.add(\"payment-elements-root\");\n              rootDiv.innerHTML = '';\n              container.classList.add(\"payment-elements-container\");\n              if (container) {\n                _context.n = 1;\n                break;\n              }\n              throw new Error(\"\".concat(this.container, \" not found\"));\n            case 1:\n              (0,_loader__WEBPACK_IMPORTED_MODULE_3__.getLoaderTemplate)(container, \"Loading payment options...\");\n              rootDiv.append(container);\n              _context.n = 2;\n              return (0,_rajesh896_broprint_js__WEBPACK_IMPORTED_MODULE_1__.getCurrentBrowserFingerPrint)();\n            case 2:\n              this.browserFingerprint = _context.v;\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"sessionToken\", this.sessionToken);\n              _context.n = 3;\n              return (0,_services_apiService_common_service__WEBPACK_IMPORTED_MODULE_0__.getSession)(this.sessionToken);\n            case 3:\n              resp = _context.v;\n              // check for subscription\n              isSubscription = !(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isEmpty)(resp === null || resp === void 0 || (_resp$paymentDetails = resp.paymentDetails) === null || _resp$paymentDetails === void 0 ? void 0 : _resp$paymentDetails.subscriptionDetails);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"isSubscription\", isSubscription);\n              if (!notAllowedPaymentStatuses.includes(resp.status)) {\n                _context.n = 4;\n                break;\n              }\n              return _context.a(2, (_this$onLoad = this.onLoad) === null || _this$onLoad === void 0 ? void 0 : _this$onLoad.call(this, {\n                message: \"This checkout token is \".concat(resp === null || resp === void 0 ? void 0 : resp.status)\n              }));\n            case 4:\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('currencySymbol', resp === null || resp === void 0 || (_resp$paymentDetails2 = resp.paymentDetails) === null || _resp$paymentDetails2 === void 0 || (_resp$paymentDetails2 = _resp$paymentDetails2.money) === null || _resp$paymentDetails2 === void 0 ? void 0 : _resp$paymentDetails2.currencySymbol);\n              this.sessionDetails = resp;\n              merchantTheme = resp === null || resp === void 0 || (_resp$merchantDetails = resp.merchantDetails) === null || _resp$merchantDetails === void 0 ? void 0 : _resp$merchantDetails.checkoutTheme;\n              (0,_utils_themeController__WEBPACK_IMPORTED_MODULE_8__.handleAppearanceOptions)({\n                appearance: this.appearance,\n                theme: {\n                  themePrimaryColor: merchantTheme.primaryButtonColor,\n                  themeSecondaryColor: merchantTheme.secondaryButtonColor,\n                  themePrimaryTextColor: merchantTheme.primaryButtonColor,\n                  themeSecondaryTextColor: merchantTheme.secondaryButtonColor\n                }\n              });\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"sessionDetails\", resp);\n              this.paymentMethodsToShow = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.orderPaymentMethodsByUserPreference)((0,_utils__WEBPACK_IMPORTED_MODULE_2__.getPaymentOptionsToDisplay)(resp === null || resp === void 0 || (_resp$configs = resp.configs) === null || _resp$configs === void 0 ? void 0 : _resp$configs.paymentMethods, this.paymentMethods), this.paymentMethods);\n              // this.paymentMethodsToShow = orderPaymentMethodsByUserPreference(\n              //     getPaymentOptionsToDisplay(resp?.configs?.paymentMethods, this.paymentMethods.includes('card') ? ['card'] : []),\n              //     this.paymentMethods\n              // );\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"paymentMethodsToShow\", this.paymentMethodsToShow);\n              if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isEmpty)(this.paymentMethodsToShow)) {\n                _context.n = 5;\n                break;\n              }\n              return _context.a(2, (_this$onLoad2 = this.onLoad) === null || _this$onLoad2 === void 0 ? void 0 : _this$onLoad2.call(this, {\n                message: \"No valid payment methods found\"\n              }));\n            case 5:\n              this.shopper = this.shopperDetails || (resp === null || resp === void 0 || (_resp$paymentDetails3 = resp.paymentDetails) === null || _resp$paymentDetails3 === void 0 ? void 0 : _resp$paymentDetails3.shopper);\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"shopper\", this.shopper);\n              _resp$paymentDetails$ = resp === null || resp === void 0 || (_resp$paymentDetails4 = resp.paymentDetails) === null || _resp$paymentDetails4 === void 0 ? void 0 : _resp$paymentDetails4.money, amount = _resp$paymentDetails$.amount, currencySymbol = _resp$paymentDetails$.currencySymbol, currencyCode = _resp$paymentDetails$.currencyCode;\n              formattedAmount = String((0,_utils__WEBPACK_IMPORTED_MODULE_2__.numberToCurrency)(amount, currencyCode));\n              container.innerHTML = \"\";\n              tabsContainer = undefined;\n              this.activePaymentMethod = Object.keys(this.paymentMethodsToShow)[0];\n              if (Object.keys(this.paymentMethodsToShow).length > 1) {\n                tabsContainer = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createTabsContainer)(this.paymentMethodsToShow, this.activePaymentMethod, this.switchPaymentMethod.bind(this));\n              }\n              formContainer = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createFormContainer)();\n              if (this.showPayButton) {\n                payDiv = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createPayButton)(function () {\n                  return (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createPayLabel)(currencySymbol, formattedAmount);\n                }, function (e) {\n                  e.preventDefault();\n                  (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handleButtonLoader)(_this.boxpayPayButton, true);\n                  void _this.handlePayButtonClick();\n                });\n                payDiv.style.maxWidth = this.maxWidth + \"px\";\n                this.boxpayPayButton = payDiv.querySelector(\"button\");\n              }\n              if (tabsContainer) {\n                container.append(tabsContainer, formContainer);\n              } else {\n                container.append(formContainer);\n              }\n              this.handleSubscriptionCheckBox(rootDiv);\n              if (this.showPayButton) {\n                rootDiv.append(payDiv);\n              }\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"activePaymentMethod\", this.activePaymentMethod);\n              for (_i = 0, _Object$keys = Object.keys(this.paymentMethodsToShow); _i < _Object$keys.length; _i++) {\n                method = _Object$keys[_i];\n                instance = (0,_utils_paymentInstanceFactory__WEBPACK_IMPORTED_MODULE_6__.createPaymentInstance)(method, formContainer, payDiv, this.paymentMethodsToShow, this.options || {}, this.handleFormValidityChange.bind(this), this.updatePayButtonText.bind(this), this);\n                this.paymentInstances[method] = instance;\n              }\n              this.mountActiveMethod();\n              (_this$onLoad3 = this.onLoad) === null || _this$onLoad3 === void 0 || _this$onLoad3.call(this, {\n                message: \"Payment Elements Loaded\"\n              });\n            case 6:\n              return _context.a(2);\n          }\n        }, _callee, this);\n      }));\n      function initialize() {\n        return _initialize.apply(this, arguments);\n      }\n      return initialize;\n    }()\n  }, {\n    key: \"handleSubscriptionCheckBox\",\n    value: function handleSubscriptionCheckBox(rootDiv) {\n      var isSubscription = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get(\"isSubscription\");\n      var oneTimePayment = _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.get(\"oneTimePayment\");\n      if (isSubscription && oneTimePayment) {\n        _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set('isOneTimePaymentChecked', true);\n        // globalState.set('sendSiFlag', true);\n      } else if (isSubscription && !oneTimePayment) {\n        var siElement = (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.createCheckBox)(\"Setup automatic payments\", function () {});\n        rootDiv.appendChild(siElement);\n        // globalState.set('sendSiFlag', true);\n      } else {\n        // globalState.set('sendSiFlag', false);\n      }\n    }\n  }, {\n    key: \"switchPaymentMethod\",\n    value: function switchPaymentMethod(method) {\n      if (this.activePaymentMethod === method) return;\n      this.activePaymentMethod = method;\n      this.mountActiveMethod();\n      this.handleFormValidityChange({\n        isValid: false,\n        invalidFields: []\n      });\n      this.updatePayButtonText();\n\n      // stop if any status polling is going on\n      var controller = {\n        cancelled: true\n      };\n      _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"pollController\", controller);\n    }\n  }, {\n    key: \"mountActiveMethod\",\n    value: function mountActiveMethod() {\n      var _activeInstance$rende;\n      var formContainer = document.getElementById(\"payment-form-container\");\n      if (!formContainer) return;\n      formContainer.innerHTML = \"\";\n      var activeInstance = this.paymentInstances[this.activePaymentMethod];\n      _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"activePaymentMethod\", this.activePaymentMethod);\n      _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"CURRENT_PAYMENT_METHOD\", this.activePaymentMethod);\n      activeInstance === null || activeInstance === void 0 || (_activeInstance$rende = activeInstance.render) === null || _activeInstance$rende === void 0 || _activeInstance$rende.call(activeInstance);\n      (0,_utils_domUtils__WEBPACK_IMPORTED_MODULE_4__.updateActiveTab)(this.activePaymentMethod);\n      this.handleThemeColors();\n    }\n  }, {\n    key: \"handleFormValidityChange\",\n    value: function handleFormValidityChange(_ref) {\n      var isValid = _ref.isValid,\n        invalidFields = _ref.invalidFields;\n      this.formValidity = {\n        isValid: isValid,\n        invalidFields: invalidFields\n      };\n      if (this.boxpayPayButton) this.boxpayPayButton.disabled = !isValid;\n      if (!this.showPayButton) {\n        if (typeof this.onPaymentButtonValidity === 'function') {\n          this.onPaymentButtonValidity(isValid);\n        }\n      }\n    }\n  }, {\n    key: \"handlePayButtonClick\",\n    value: function () {\n      var _handlePayButtonClick = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {\n        var controller, res;\n        return _regenerator().w(function (_context2) {\n          while (1) switch (_context2.n) {\n            case 0:\n              console.log(\"PAY btn clicked\");\n              if (!this.boxpayPayButton) {\n                _context2.n = 2;\n                break;\n              }\n              if (!this.boxpayPayButton.disabled) {\n                _context2.n = 1;\n                break;\n              }\n              return _context2.a(2);\n            case 1:\n              this.boxpayPayButton.disabled = true;\n            case 2:\n              controller = {\n                cancelled: false\n              };\n              _state_globalState__WEBPACK_IMPORTED_MODULE_7__.globalState.set(\"pollController\", controller);\n              _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"PAY_BTN_CLICKED\", {});\n              _context2.n = 3;\n              return (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handlePayClick)(this);\n            case 3:\n              res = _context2.v;\n              return _context2.a(2, res);\n          }\n        }, _callee2, this);\n      }));\n      function handlePayButtonClick() {\n        return _handlePayButtonClick.apply(this, arguments);\n      }\n      return handlePayButtonClick;\n    }()\n  }, {\n    key: \"sendResponse\",\n    value: function sendResponse(response) {\n      if (this.boxpayPayButton) {\n        (0,_utils_paymentHandlers__WEBPACK_IMPORTED_MODULE_5__.handleButtonLoader)(this.boxpayPayButton, false);\n      }\n      if ((response === null || response === void 0 ? void 0 : response.status) !== \"ERROR\") {\n        var _this$onPayment;\n        _utils_EventBus__WEBPACK_IMPORTED_MODULE_9__.EventBus.emit(\"SENDING_RESPONSE\", response);\n        (_this$onPayment = this.onPayment) === null || _this$onPayment === void 0 || _this$onPayment.call(this, response);\n      }\n      return response;\n    }\n  }, {\n    key: \"updatePayButtonText\",\n    value: function updatePayButtonText(text) {\n      var _this$sessionDetails;\n      if (!this.boxpayPayButton) return;\n      var _ref2 = ((_this$sessionDetails = this.sessionDetails) === null || _this$sessionDetails === void 0 || (_this$sessionDetails = _this$sessionDetails.paymentDetails) === null || _this$sessionDetails === void 0 ? void 0 : _this$sessionDetails.money) || {},\n        amount = _ref2.amount,\n        currencySymbol = _ref2.currencySymbol;\n      this.boxpayPayButton.textContent = text || \"Pay \".concat(currencySymbol, \" \").concat(amount);\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PaymentElements);\n\n//# sourceURL=webpack://boxpay-checkout-web-sdk/./src/components/paymentElements/PaymentElement.controller.ts?\n}");
 
 /***/ }),
 
@@ -1522,7 +1522,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _templates_emiTemplate_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../templates/emiTemplate.html */ \"./src/templates/emiTemplate.html\");\n/* harmony import */ var _assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../assets/icons/right-arrow.svg */ \"./src/assets/icons/right-arrow.svg\");\n/* harmony import */ var _assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../assets/icons/back-btn.svg */ \"./src/assets/icons/back-btn.svg\");\n/* harmony import */ var _styles_emiPayment_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../styles/emiPayment.css */ \"./src/styles/emiPayment.css\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\n/* harmony import */ var _EmiHistory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../EmiHistory */ \"./src/components/EmiHistory.ts\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../state/globalState */ \"./src/state/globalState.ts\");\n/* harmony import */ var _CardPayment__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./CardPayment */ \"./src/components/paymentElements/paymentElement/CardPayment.ts\");\nfunction _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); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _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); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _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); }\n\n\n\n\n\n\n\n\nvar allEmiTabs = [{\n  title: \"Credit Card\",\n  id: \"CreditCardEMI\"\n}, {\n  title: \"Debit Card\",\n  id: \"DebitCardEMI\"\n}, {\n  title: \"Others\",\n  id: \"CardlessEMI\"\n}];\nvar EmiPayment = /*#__PURE__*/function () {\n  function EmiPayment(form, payButtonEl, emiList, options) {\n    var _options$payButton, _this$appearance, _this$appearance2;\n    _classCallCheck(this, EmiPayment);\n    _defineProperty(this, \"history\", new _EmiHistory__WEBPACK_IMPORTED_MODULE_5__.EmiHistory());\n    _defineProperty(this, \"expandedBankId\", null);\n    _defineProperty(this, \"expandedTenure\", null);\n    this.currencySymbol = _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.get('currencySymbol');\n    this.form = form;\n    this.payButtonEl = payButtonEl;\n    this.onFormValidityChange = options === null || options === void 0 ? void 0 : options.onFormValidityChange;\n    this.updatePayButtonText = options === null || options === void 0 ? void 0 : options.updatePayButtonText;\n    this.onFormValidityChange({\n      isValid: false,\n      invalidFields: []\n    });\n    this.showPaymentButton = (options === null || options === void 0 || (_options$payButton = options.payButton) === null || _options$payButton === void 0 ? void 0 : _options$payButton.show) !== false;\n    this.appearance = _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.get('appearance');\n    this.theme = {\n      primaryColor: (_this$appearance = this.appearance) === null || _this$appearance === void 0 ? void 0 : _this$appearance.primaryColor,\n      secondaryColor: (_this$appearance2 = this.appearance) === null || _this$appearance2 === void 0 ? void 0 : _this$appearance2.secondaryColor\n    };\n    var availableTabs = allEmiTabs.filter(function (tab) {\n      return emiList.some(function (emi) {\n        return emi.brand === tab.id;\n      });\n    });\n    this.emiTabs = availableTabs.map(function (tab) {\n      var filtered = emiList.filter(function (item) {\n        return item.brand === tab.id;\n      });\n      var unique = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.getUniqueEmiOptions)(filtered);\n      return {\n        id: tab.id,\n        title: tab.title,\n        emiList: unique\n      };\n    });\n  }\n\n  // -------------------------\n  // INITIAL RENDER\n  // -------------------------\n  return _createClass(EmiPayment, [{\n    key: \"render\",\n    value: function render() {\n      this.form.innerHTML = _templates_emiTemplate_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\n      this.renderCategoriesScreen();\n      // if (this.showPaymentButton && this.payButtonEl) {\n      //     this.form.appendChild(this.payButtonEl);\n      // }\n      return this.form;\n    }\n\n    // -------------------------\n    // SCREEN 1: CATEGORY SCREEN\n    // -------------------------\n  }, {\n    key: \"renderCategoriesScreen\",\n    value: function renderCategoriesScreen() {\n      var _this = this;\n      this.history.clear();\n      this.history.push(\"categories\");\n      var root = this.form.querySelector(\"#emi-container\");\n      root.innerHTML = \"\\n            <div id=\\\"emi-container\\\">\\n                \".concat(this.emiTabs.map(function (tab) {\n        var logos = tab.emiList.slice(0, 2);\n        return \"\\n            <div class=\\\"emi-row\\\" data-emi=\\\"\".concat(tab.id, \"\\\">\\n                            <div class=\\\"emi-left\\\">\\n                                <span class=\\\"emi-name label\\\">\").concat(tab.title, \"</span>\\n                                \").concat(logos.map(function (emi) {\n          var logo = emi.bestEmiMethod.logoUrl || \"\";\n          return \"<img src=\\\"\".concat(logo, \"\\\" width=\\\"16\\\" />\");\n        }).join(\"\"), \"\\n                            </div>\\n                            <label><img src=\\\"\").concat(_assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__, \"\\\" width=\\\"16\\\" /></label>\\n                        </div>\\n                    \");\n      }).join(\"\"), \"\\n            </div>\\n        \");\n      root.querySelectorAll(\".emi-row\").forEach(function (row) {\n        row.addEventListener(\"click\", function () {\n          var id = row.getAttribute(\"data-emi\");\n          var tab = _this.emiTabs.find(function (t) {\n            return t.id === id;\n          });\n          _this.selectedCategory = tab.id === \"CreditCardEMI\" ? \"emi/cc\" : \"emi/dc\";\n          if (tab) _this.renderBankScreen(tab);\n        });\n      });\n    }\n\n    // -------------------------\n    // SCREEN 2: BANK LIST\n    // -------------------------\n  }, {\n    key: \"renderBankScreen\",\n    value: function renderBankScreen(tab) {\n      var _this2 = this;\n      var root = this.form.querySelector(\"#emi-container\");\n      if (tab.title === 'Others') {\n        this.renderCardLessEMI(tab);\n        return;\n      }\n      root.innerHTML = \"\\n            <div class=\\\"emi-header\\\">\\n                <img src=\\\"\".concat(_assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__, \"\\\" width=\\\"32\\\" id=\\\"emi-back-btn\\\"/>\\n            </div>\\n            <div id=\\\"emi-banks-list\\\">\\n                \").concat(tab.emiList.map(function (bank) {\n        var logo = bank.bestEmiMethod.logoUrl || \"\";\n        var isBankExpanded = _this2.expandedBankId === bank.id;\n        return \"<div class=\\\"emi-bank-wrapper\\\" data-bank-id=\\\"\".concat(bank.id, \"\\\">\\n                        <div class=\\\"emi-bank-row\\\">\\n                            <div class=\\\"left\\\">\\n                                <div>\\n                                    <img src=\\\"\").concat(logo, \"\\\" width=\\\"32\\\" />\\n                                    <span class=\\\"\\\">\").concat(bank.bestEmiMethod.issuerTitle, \"</span>\\n                                </div>\\n                                <div>\\n                                    \").concat(bank.offerType && bank.offerType.map(function (type) {\n          return \"<span class=\\\"emi-offer\\\">\".concat(type, \"</span>\");\n        }).join(\" \"), \"\\n                                </div>\\n                            </div>\\n                            <img class=\\\"arrow \").concat(isBankExpanded ? \"rotated\" : \"\", \"\\\"  src=\\\"\").concat(_assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__, \"\\\" width=\\\"14\\\" />\\n                        </div>\\n\\n                        <div class=\\\"emi-tenure-box \").concat(isBankExpanded ? \"open\" : \"\", \"\\\">\\n                            \").concat(bank.allEmiMethod.map(function (t) {\n          var _t$emiMethod = t.emiMethod,\n            duration = _t$emiMethod.duration,\n            emiAmountLocaleFull = _t$emiMethod.emiAmountLocaleFull,\n            interestChargedAmountLocaleFull = _t$emiMethod.interestChargedAmountLocaleFull,\n            effectiveInterestRate = _t$emiMethod.effectiveInterestRate,\n            processingFee = _t$emiMethod.processingFee,\n            merchantBorneInterestAmountLocaleFull = _t$emiMethod.merchantBorneInterestAmountLocaleFull,\n            netAmountLocaleFull = _t$emiMethod.netAmountLocaleFull;\n          return \"\\n                                <div class=\\\"emi-tenure-row-main\\\">\\n                                    <div class=\\\"emi-tenure-row\\\" data-bank=\\\"\".concat(bank.id, \"\\\" data-tenure=\\\"\").concat(t.emiMethod.duration, \"\\\">\\n                                        <div class=\\\"emi-main-text\\\">\\n                                            <div class=\\\"emi-tenure-info\\\">\\n                                                <div>\\n                                                    <span>\").concat(_this2.currencySymbol).concat(emiAmountLocaleFull, \" x \").concat(duration, \" months</span>\\n                                                    <span> | \").concat(effectiveInterestRate, \"%</span>\\n                                                </div>\\n                                                <div>\\n                                                    \").concat(!(0,_utils__WEBPACK_IMPORTED_MODULE_4__.isEmpty)(t.offerType) ? t.offerType.map(function (type) {\n            return \"<span class=\\\"emi-offer\\\">\".concat(type, \"</span>\");\n          }).join(\" \") : '', \"\\n                                                </div>\\n                                            </div>\\n                                        </div>\\n                                        <label class=\\\"sdk-checkbox-container\\\">\\n                                            <input type=\\\"checkbox\\\" class=\\\"sdk-checkbox\\\" name=\\\"walletSelect\\\" />\\n                                            <span class=\\\"sdk-checkmark\\\"></span>\\n                                        </label>\\n                                    </div>\\n                                    <div class=\\\"emi-tenure-details\\\">\\n                                        <div class=\\\"emi-subtext\\\">\\n                                            <span> Interest \").concat(_this2.currencySymbol, \" \").concat(interestChargedAmountLocaleFull, \"</span>\\n                                            <span> \").concat(merchantBorneInterestAmountLocaleFull !== '0' ? \"| Discount \".concat(_this2.currencySymbol, \" \").concat(merchantBorneInterestAmountLocaleFull) : '', \"</span>\\n                                            \").concat(!(0,_utils__WEBPACK_IMPORTED_MODULE_4__.isEmpty)(processingFee) ? \" <span>| Processing Fee \".concat(_this2.currencySymbol).concat(processingFee === null || processingFee === void 0 ? void 0 : processingFee.amountLocaleFull, \" + GST</span>\") : '', \"\\n                                            <span>| Your card will be charged for an amount of \").concat(_this2.currencySymbol).concat(netAmountLocaleFull, \"</span>\\n                                        </div>\\n                                        <div class=\\\"emi-card-from\\\"></div>\\n                                    </div>\\n                                </div>\\n                            \");\n        }).join(\"\"), \"\\n                        </div>\\n                    </div>\\n                \");\n      }).join(\"\"));\n\n      // Apply theme\n      this.applyTheme(root);\n\n      // BACK BUTTON\n      root.querySelector(\"#emi-back-btn\").addEventListener(\"click\", function () {\n        _this2.goBack();\n      });\n\n      // BANK EXPANSION\n      root.querySelectorAll(\".emi-bank-wrapper\").forEach(function (wrapper) {\n        var bankId = wrapper.getAttribute(\"data-bank-id\");\n        var row = wrapper.querySelector(\".emi-bank-row\");\n        row.addEventListener(\"click\", function () {\n          _this2.toggleBank(tab, bankId);\n        });\n      });\n      root.querySelector(\"#emi-banks-list\").addEventListener(\"click\", function (e) {\n        var _this2$onFormValidity;\n        var clicked = e.target;\n\n        // Find parent wrapper\n        var mainRow = clicked.closest(\".emi-tenure-row-main\");\n        if (!mainRow) return;\n        // Find the actual row that contains data attributes\n        var innerRow = mainRow.querySelector(\".emi-tenure-row\");\n        if (!innerRow) return;\n        var selectedTenure = innerRow.getAttribute(\"data-tenure\");\n        _this2.selectedTenure = selectedTenure;\n        var bankId = innerRow.getAttribute(\"data-bank\");\n        var bank = tab.emiList.find(function (b) {\n          return b.id === bankId;\n        });\n        var tenure = bank === null || bank === void 0 ? void 0 : bank.allEmiMethod.find(function (t) {\n          return t.emiMethod.duration === Number(selectedTenure);\n        });\n        _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.set(\"emiTenure\", tenure);\n        _this2.updatePayButtonText(\"Pay \".concat(_this2.currencySymbol).concat(tenure.emiMethod.netAmountLocaleFull));\n\n        // Toggle selection (only one active)\n        var allRows = root.querySelectorAll(\".emi-tenure-row-main\");\n        allRows.forEach(function (r) {\n          var checkbox = r.querySelector(\".sdk-checkbox\");\n          if (!checkbox) return;\n          if (r === mainRow) {\n            var isActive = !r.classList.contains(\"active\");\n            r.classList.toggle(\"active\", isActive);\n            checkbox.checked = isActive;\n          } else {\n            r.classList.remove(\"active\");\n            checkbox.checked = false;\n          }\n        });\n\n        // 🎯 Inject card form here\n        var details = mainRow.querySelector(\".emi-card-from\");\n        details.innerHTML = \"\";\n\n        // ❗ Reset any previous validity flags (optional)\n        (_this2$onFormValidity = _this2.onFormValidityChange) === null || _this2$onFormValidity === void 0 || _this2$onFormValidity.call(_this2, {\n          isValid: false,\n          invalidFields: []\n        });\n\n        // Recreate a fresh card form\n        details.appendChild(_this2.renderCardScreen());\n      });\n    }\n  }, {\n    key: \"renderCardLessEMI\",\n    value: function renderCardLessEMI(tab) {\n      var _this3 = this;\n      var root = this.form.querySelector(\"#emi-container\");\n      // 1️⃣ Build HTML\n      var html = tab.emiList.flatMap(function (cardLess) {\n        return cardLess.allEmiMethod.map(function (t) {\n          return \"\\n                <div class=\\\"cardless-row\\\" data-emi=\\\"\".concat(t.emiMethod.cardlessEmiProviderValue, \"\\\"> \\n                    <div class=\\\"cardless-left\\\"> \\n                        <img src=\\\"\").concat(t.logoUrl, \"\\\" alt=\\\"\").concat(t.emiMethod.cardlessEmiProviderTitle, \"\\\" class=\\\"cardless-logo\\\" />\\n                        <span class=\\\"cardless-name label\\\">\").concat(t.emiMethod.cardlessEmiProviderTitle, \"</span> \\n                    </div> \\n                    <label class=\\\"cardless-checkbox-container\\\"> \\n                        <input type=\\\"checkbox\\\" class=\\\"cardless-checkbox\\\" name=\\\"walletSelect\\\" /> \\n                        <span class=\\\"cardless-checkmark\\\"></span>\\n                    </label> \\n                </div>\\n            \");\n        });\n      }).join('');\n\n      // 2️⃣ Inject into DOM\n      root.innerHTML = \"\\n            <div class=\\\"emi-header\\\">\\n                    <img src=\\\"\".concat(_assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__, \"\\\" width=\\\"32\\\" id=\\\"emi-back-btn\\\"/>\\n                </div>\\n                \").concat(html, \"\\n            \");\n      this.applyTheme(root);\n      root.querySelector(\"#emi-back-btn\").addEventListener(\"click\", function () {\n        _this3.goBack();\n      });\n      // 3️⃣ Attach listeners\n      var rows = root.querySelectorAll('.cardless-row');\n      rows.forEach(function (row) {\n        row.addEventListener('click', function () {\n          var emiType = row.getAttribute('data-emi');\n          _this3.handleCardLessEMISelection(emiType);\n          _this3.selectedCategory = \"emi/cardless\";\n          rows.forEach(function (r) {\n            var checkbox = r.querySelector('.cardless-checkbox');\n            checkbox.checked = r === row;\n            r.classList.toggle('active', r === row);\n          });\n        });\n      });\n      return html;\n    }\n  }, {\n    key: \"handleCardLessEMISelection\",\n    value: function handleCardLessEMISelection(cardLessEMIName) {\n      var _this$onFormValidityC;\n      this.selectedCardLessEMI = cardLessEMIName;\n\n      // Notify parent of validity\n      (_this$onFormValidityC = this.onFormValidityChange) === null || _this$onFormValidityC === void 0 || _this$onFormValidityC.call(this, {\n        isValid: !!cardLessEMIName,\n        invalidFields: cardLessEMIName ? [] : [{\n          isValid: !!cardLessEMIName,\n          msz: ''\n        }]\n      });\n    }\n\n    // 🔹 Apply theme colors to wallet buttons\n  }, {\n    key: \"applyTheme\",\n    value: function applyTheme(container) {\n      var secondaryColor = this.theme.secondaryColor;\n      var style = document.createElement(\"style\");\n      style.innerHTML = \"\\n            .sdk-checkbox {\\n                border-color: \".concat(secondaryColor, \";\\n            }\\n\\n            .sdk-checkbox:checked+.sdk-checkmark {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color:  \").concat(secondaryColor, \";\\n            }\\n\\n            .sdk-checkbox:checked {\\n                background-color: \").concat(secondaryColor, \";\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .sdk-row-main:hover {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox:checked+.cardless-checkmark {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color:  \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox:checked {\\n                background-color: \").concat(secondaryColor, \";\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-row.active {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color: \").concat((0,_utils__WEBPACK_IMPORTED_MODULE_4__.hexToRgba)(secondaryColor, 0.1), \";\\n            }\\n\\n            .cardless-row:hover {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n        \");\n      container.appendChild(style);\n    }\n\n    // -------------------------\n    // BANK EXPANSION LOGIC\n    // -------------------------\n  }, {\n    key: \"toggleBank\",\n    value: function toggleBank(tab, bankId) {\n      this.expandedBankId = this.expandedBankId === bankId ? null : bankId;\n      this.renderBankScreen(tab);\n    }\n\n    // -------------------------\n    // UNIVERSAL BACK LOGIC\n    // -------------------------\n  }, {\n    key: \"goBack\",\n    value: function goBack() {\n      this.history.pop();\n      var screen = this.history.current();\n      this.onFormValidityChange({\n        isValid: false,\n        invalidFields: []\n      });\n      if (screen === \"categories\") {\n        this.renderCategoriesScreen();\n      } else if (screen === \"banks\") {\n        var lastTab = this.emiTabs[0]; // You can track last visited tab\n        this.renderBankScreen(lastTab);\n      } else {\n        this.renderCategoriesScreen();\n      }\n    }\n  }, {\n    key: \"renderCardScreen\",\n    value: function renderCardScreen() {\n      // Create a standalone container for the card form\n      var container = document.createElement(\"div\");\n      container.classList.add(\"emi-card-container\");\n      container.addEventListener(\"click\", function (e) {\n        e.stopPropagation();\n      });\n      // Create a card payment instance that renders INSIDE this container\n      var cardPayment = new _CardPayment__WEBPACK_IMPORTED_MODULE_7__[\"default\"](container, this.payButtonEl, _objectSpread(_objectSpread({}, this.options), {}, {\n        onFormValidityChange: this.onFormValidityChange\n      }));\n      // Render and return a real DOM element\n      return cardPayment.render();\n    }\n  }, {\n    key: \"getInstrumentDetails\",\n    value: function getInstrumentDetails() {\n      var _formData$get, _formData$get2;\n      var formData = new FormData(this.form);\n      var expiry = ((_formData$get = formData.get('expiryDate')) === null || _formData$get === void 0 ? void 0 : _formData$get.split('/')) || [];\n      var _expiry = _slicedToArray(expiry, 2),\n        expiryMonth = _expiry[0],\n        expiryYear = _expiry[1];\n      return _objectSpread(_objectSpread({}, this.selectedCategory !== 'emi/cardless' ? {\n        card: {\n          number: (_formData$get2 = formData.get('cardNumber')) === null || _formData$get2 === void 0 ? void 0 : _formData$get2.replace(/\\s+/g, ''),\n          holderName: formData.get('nameOnCard'),\n          expiry: \"20\".concat(expiryYear, \"-\").concat(expiryMonth),\n          cvc: formData.get('cvv')\n        }\n      } : {}), {}, {\n        emi: this.selectedCategory !== 'emi/cardless' ? {\n          duration: this.selectedTenure\n        } : {\n          provider: this.selectedCardLessEMI\n        },\n        type: this.selectedCategory\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EmiPayment);\n\n//# sourceURL=webpack://boxpay-checkout-web-sdk/./src/components/paymentElements/paymentElement/EmiPayment.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _templates_emiTemplate_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../templates/emiTemplate.html */ \"./src/templates/emiTemplate.html\");\n/* harmony import */ var _assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../assets/icons/right-arrow.svg */ \"./src/assets/icons/right-arrow.svg\");\n/* harmony import */ var _assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../assets/icons/back-btn.svg */ \"./src/assets/icons/back-btn.svg\");\n/* harmony import */ var _styles_emiPayment_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../styles/emiPayment.css */ \"./src/styles/emiPayment.css\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\n/* harmony import */ var _EmiHistory__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../EmiHistory */ \"./src/components/EmiHistory.ts\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../state/globalState */ \"./src/state/globalState.ts\");\n/* harmony import */ var _CardPayment__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./CardPayment */ \"./src/components/paymentElements/paymentElement/CardPayment.ts\");\nfunction _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); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _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); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _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); }\n\n\n\n\n\n\n\n\nvar allEmiTabs = [{\n  title: \"Credit Card\",\n  id: \"CreditCardEMI\"\n}, {\n  title: \"Debit Card\",\n  id: \"DebitCardEMI\"\n}, {\n  title: \"Others\",\n  id: \"CardlessEMI\"\n}];\nvar EmiPayment = /*#__PURE__*/function () {\n  function EmiPayment(form, payButtonEl, emiList, options) {\n    var _options$payButton, _this$appearance, _this$appearance2;\n    _classCallCheck(this, EmiPayment);\n    _defineProperty(this, \"history\", new _EmiHistory__WEBPACK_IMPORTED_MODULE_5__.EmiHistory());\n    _defineProperty(this, \"expandedBankId\", null);\n    _defineProperty(this, \"expandedTenure\", null);\n    this.currencySymbol = _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.get('currencySymbol');\n    this.form = form;\n    this.payButtonEl = payButtonEl;\n    this.onFormValidityChange = options === null || options === void 0 ? void 0 : options.onFormValidityChange;\n    this.updatePayButtonText = options === null || options === void 0 ? void 0 : options.updatePayButtonText;\n    this.onFormValidityChange({\n      isValid: false,\n      invalidFields: []\n    });\n    this.showPaymentButton = (options === null || options === void 0 || (_options$payButton = options.payButton) === null || _options$payButton === void 0 ? void 0 : _options$payButton.show) !== false;\n    this.appearance = _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.get('appearance');\n    this.theme = {\n      primaryColor: (_this$appearance = this.appearance) === null || _this$appearance === void 0 ? void 0 : _this$appearance.primaryColor,\n      secondaryColor: (_this$appearance2 = this.appearance) === null || _this$appearance2 === void 0 ? void 0 : _this$appearance2.secondaryColor\n    };\n    var availableTabs = allEmiTabs.filter(function (tab) {\n      return emiList.some(function (emi) {\n        return emi.brand === tab.id;\n      });\n    });\n    this.emiTabs = availableTabs.map(function (tab) {\n      var filtered = emiList.filter(function (item) {\n        return item.brand === tab.id;\n      });\n      // const sortedData = filtered.sort((a, b) => {\n      //     if (a.emiMethod.cardlessEmiProvider) {\n      //         return a.emiMethod.cardlessEmiProvider.localeCompare(b.emiMethod.cardlessEmiProvider)\n      //     } else {\n      //         return a.emiMethod.issuer.localeCompare(b.emiMethod.issuer)\n      //     }\n      // });\n      var unique = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.getUniqueEmiOptions)(filtered);\n      return {\n        id: tab.id,\n        title: tab.title,\n        emiList: unique\n      };\n    });\n  }\n\n  // -------------------------\n  // INITIAL RENDER\n  // -------------------------\n  return _createClass(EmiPayment, [{\n    key: \"render\",\n    value: function render() {\n      this.form.innerHTML = _templates_emiTemplate_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\n      this.renderCategoriesScreen();\n      // if (this.showPaymentButton && this.payButtonEl) {\n      //     this.form.appendChild(this.payButtonEl);\n      // }\n      return this.form;\n    }\n\n    // -------------------------\n    // SCREEN 1: CATEGORY SCREEN\n    // -------------------------\n  }, {\n    key: \"renderCategoriesScreen\",\n    value: function renderCategoriesScreen() {\n      var _this = this;\n      this.history.clear();\n      this.history.push(\"categories\");\n      var root = this.form.querySelector(\"#emi-container\");\n      root.innerHTML = \"\\n            <div id=\\\"emi-container\\\">\\n                \".concat(this.emiTabs.map(function (tab) {\n        var logos = tab.emiList.slice(0, 2);\n        return \"\\n            <div class=\\\"emi-row\\\" data-emi=\\\"\".concat(tab.id, \"\\\">\\n                            <div class=\\\"emi-left\\\">\\n                                <span class=\\\"emi-name label\\\">\").concat(tab.title, \"</span>\\n                                \").concat(logos.map(function (emi) {\n          var logo = emi.bestEmiMethod.logoUrl || \"\";\n          return \"<img src=\\\"\".concat(logo, \"\\\" width=\\\"16\\\" />\");\n        }).join(\"\"), \"\\n                            </div>\\n                            <label><img src=\\\"\").concat(_assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__, \"\\\" width=\\\"16\\\" /></label>\\n                        </div>\\n                    \");\n      }).join(\"\"), \"\\n            </div>\\n        \");\n      root.querySelectorAll(\".emi-row\").forEach(function (row) {\n        row.addEventListener(\"click\", function () {\n          var id = row.getAttribute(\"data-emi\");\n          var tab = _this.emiTabs.find(function (t) {\n            return t.id === id;\n          });\n          _this.selectedCategory = tab.id === \"CreditCardEMI\" ? \"emi/cc\" : \"emi/dc\";\n          if (tab) _this.renderBankScreen(tab);\n        });\n      });\n    }\n\n    // -------------------------\n    // SCREEN 2: BANK LIST\n    // -------------------------\n  }, {\n    key: \"renderBankScreen\",\n    value: function renderBankScreen(tab) {\n      var _this2 = this;\n      var root = this.form.querySelector(\"#emi-container\");\n      if (tab.title === 'Others') {\n        this.renderCardLessEMI(tab);\n        return;\n      }\n      console.log(\"tab:\", tab);\n      root.innerHTML = \"\\n            <div class=\\\"emi-header\\\">\\n                <img src=\\\"\".concat(_assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__, \"\\\" width=\\\"32\\\" id=\\\"emi-back-btn\\\"/>\\n            </div>\\n            <div id=\\\"emi-banks-list\\\">\\n                \").concat(tab.emiList.map(function (bank) {\n        var logo = bank.bestEmiMethod.logoUrl || \"\";\n        var isBankExpanded = _this2.expandedBankId === bank.id;\n        return \"<div class=\\\"emi-bank-wrapper\\\" data-bank-id=\\\"\".concat(bank.id, \"\\\">\\n                        <div class=\\\"emi-bank-row\\\">\\n                            <div class=\\\"left\\\">\\n                                <div>\\n                                    <img src=\\\"\").concat(logo, \"\\\" width=\\\"32\\\" />\\n                                    <span class=\\\"\\\">\").concat(bank.bestEmiMethod.issuerTitle, \"</span>\\n                                </div>\\n                                <div>\\n                                    \").concat(bank.offerType && bank.offerType.map(function (type) {\n          return \"<span class=\\\"emi-offer\\\">\".concat(type, \"</span>\");\n        }).join(\" \"), \"\\n                                </div>\\n                            </div>\\n                            <img class=\\\"arrow \").concat(isBankExpanded ? \"rotated\" : \"\", \"\\\"  src=\\\"\").concat(_assets_icons_right_arrow_svg__WEBPACK_IMPORTED_MODULE_1__, \"\\\" width=\\\"14\\\" />\\n                        </div>\\n\\n                        <div class=\\\"emi-tenure-box \").concat(isBankExpanded ? \"open\" : \"\", \"\\\">\\n                            \").concat(bank.allEmiMethod.map(function (t) {\n          var _t$emiMethod = t.emiMethod,\n            duration = _t$emiMethod.duration,\n            emiAmountLocaleFull = _t$emiMethod.emiAmountLocaleFull,\n            interestChargedAmountLocaleFull = _t$emiMethod.interestChargedAmountLocaleFull,\n            effectiveInterestRate = _t$emiMethod.effectiveInterestRate,\n            processingFee = _t$emiMethod.processingFee,\n            merchantBorneInterestAmountLocaleFull = _t$emiMethod.merchantBorneInterestAmountLocaleFull,\n            totalAmountLocaleFull = _t$emiMethod.totalAmountLocaleFull;\n          return \"\\n                                <div class=\\\"emi-tenure-row-main\\\">\\n                                    <div class=\\\"emi-tenure-row\\\" data-bank=\\\"\".concat(bank.id, \"\\\" data-tenure=\\\"\").concat(t.emiMethod.duration, \"\\\">\\n                                        <div class=\\\"emi-main-text\\\">\\n                                            <div class=\\\"emi-tenure-info\\\">\\n                                                <div>\\n                                                    <span>\").concat(_this2.currencySymbol).concat(emiAmountLocaleFull, \" x \").concat(duration, \" months</span>\\n                                                    <span> | \").concat(effectiveInterestRate, \"%</span>\\n                                                </div>\\n                                                <div>\\n                                                    \").concat(!(0,_utils__WEBPACK_IMPORTED_MODULE_4__.isEmpty)(t.offerType) ? t.offerType.map(function (type) {\n            return \"<span class=\\\"emi-offer\\\">\".concat(type, \"</span>\");\n          }).join(\" \") : '', \"\\n                                                </div>\\n                                            </div>\\n                                        </div>\\n                                        <label class=\\\"sdk-checkbox-container\\\">\\n                                            <input type=\\\"checkbox\\\" class=\\\"sdk-checkbox\\\" name=\\\"walletSelect\\\" />\\n                                            <span class=\\\"sdk-checkmark\\\"></span>\\n                                        </label>\\n                                    </div>\\n                                    <div class=\\\"emi-tenure-details\\\">\\n                                        <div class=\\\"emi-subtext\\\">\\n                                            <span> Interest \").concat(_this2.currencySymbol, \" \").concat(interestChargedAmountLocaleFull, \"</span>\\n                                            <span> \").concat(merchantBorneInterestAmountLocaleFull !== '0' ? \"| Discount \".concat(_this2.currencySymbol, \" \").concat(merchantBorneInterestAmountLocaleFull) : '', \"</span>\\n                                            \").concat(!(0,_utils__WEBPACK_IMPORTED_MODULE_4__.isEmpty)(processingFee) ? \" <span>| Processing Fee \".concat(_this2.currencySymbol).concat(processingFee === null || processingFee === void 0 ? void 0 : processingFee.amountLocaleFull, \" + GST</span>\") : '', \"\\n                                            <span>| Your card will be charged for an amount of \").concat(_this2.currencySymbol).concat(totalAmountLocaleFull, \"</span>\\n                                        </div>\\n                                        <div class=\\\"emi-card-from\\\"></div>\\n                                    </div>\\n                                </div>\\n                            \");\n        }).join(\"\"), \"\\n                        </div>\\n                    </div>\\n                \");\n      }).join(\"\"));\n\n      // Apply theme\n      this.applyTheme(root);\n\n      // BACK BUTTON\n      root.querySelector(\"#emi-back-btn\").addEventListener(\"click\", function () {\n        _this2.goBack();\n      });\n\n      // BANK EXPANSION\n      root.querySelectorAll(\".emi-bank-wrapper\").forEach(function (wrapper) {\n        var bankId = wrapper.getAttribute(\"data-bank-id\");\n        var row = wrapper.querySelector(\".emi-bank-row\");\n        row.addEventListener(\"click\", function () {\n          _this2.toggleBank(tab, bankId);\n        });\n      });\n      root.querySelector(\"#emi-banks-list\").addEventListener(\"click\", function (e) {\n        var _this2$onFormValidity;\n        var clicked = e.target;\n\n        // Find parent wrapper\n        var mainRow = clicked.closest(\".emi-tenure-row-main\");\n        if (!mainRow) return;\n        // Find the actual row that contains data attributes\n        var innerRow = mainRow.querySelector(\".emi-tenure-row\");\n        if (!innerRow) return;\n        var selectedTenure = innerRow.getAttribute(\"data-tenure\");\n        _this2.selectedTenure = selectedTenure;\n        var bankId = innerRow.getAttribute(\"data-bank\");\n        var bank = tab.emiList.find(function (b) {\n          return b.id === bankId;\n        });\n        var tenure = bank === null || bank === void 0 ? void 0 : bank.allEmiMethod.find(function (t) {\n          return t.emiMethod.duration === Number(selectedTenure);\n        });\n        _state_globalState__WEBPACK_IMPORTED_MODULE_6__.globalState.set(\"emiTenure\", tenure);\n        _this2.updatePayButtonText(\"Pay \".concat(_this2.currencySymbol).concat(tenure.emiMethod.totalAmountLocaleFull));\n\n        // Toggle selection (only one active)\n        var allRows = root.querySelectorAll(\".emi-tenure-row-main\");\n        allRows.forEach(function (r) {\n          var checkbox = r.querySelector(\".sdk-checkbox\");\n          if (!checkbox) return;\n          if (r === mainRow) {\n            var isActive = !r.classList.contains(\"active\");\n            r.classList.toggle(\"active\", isActive);\n            checkbox.checked = isActive;\n          } else {\n            r.classList.remove(\"active\");\n            checkbox.checked = false;\n          }\n        });\n\n        // 🎯 Inject card form here\n        var details = mainRow.querySelector(\".emi-card-from\");\n        details.innerHTML = \"\";\n\n        // ❗ Reset any previous validity flags (optional)\n        (_this2$onFormValidity = _this2.onFormValidityChange) === null || _this2$onFormValidity === void 0 || _this2$onFormValidity.call(_this2, {\n          isValid: false,\n          invalidFields: []\n        });\n\n        // Recreate a fresh card form\n        details.appendChild(_this2.renderCardScreen());\n      });\n    }\n  }, {\n    key: \"renderCardLessEMI\",\n    value: function renderCardLessEMI(tab) {\n      var _this3 = this;\n      var root = this.form.querySelector(\"#emi-container\");\n      // 1️⃣ Build HTML\n      var html = tab.emiList.flatMap(function (cardLess) {\n        return cardLess.allEmiMethod.map(function (t) {\n          return \"\\n                <div class=\\\"cardless-row\\\" data-emi=\\\"\".concat(t.emiMethod.cardlessEmiProviderValue, \"\\\"> \\n                    <div class=\\\"cardless-left\\\"> \\n                        <img src=\\\"\").concat(t.logoUrl, \"\\\" alt=\\\"\").concat(t.emiMethod.cardlessEmiProviderTitle, \"\\\" class=\\\"cardless-logo\\\" />\\n                        <span class=\\\"cardless-name label\\\">\").concat(t.emiMethod.cardlessEmiProviderTitle, \"</span> \\n                    </div> \\n                    <label class=\\\"cardless-checkbox-container\\\"> \\n                        <input type=\\\"checkbox\\\" class=\\\"cardless-checkbox\\\" name=\\\"walletSelect\\\" /> \\n                        <span class=\\\"cardless-checkmark\\\"></span>\\n                    </label> \\n                </div>\\n            \");\n        });\n      }).join('');\n\n      // 2️⃣ Inject into DOM\n      root.innerHTML = \"\\n            <div class=\\\"emi-header\\\">\\n                    <img src=\\\"\".concat(_assets_icons_back_btn_svg__WEBPACK_IMPORTED_MODULE_2__, \"\\\" width=\\\"32\\\" id=\\\"emi-back-btn\\\"/>\\n                </div>\\n                \").concat(html, \"\\n            \");\n      this.applyTheme(root);\n      root.querySelector(\"#emi-back-btn\").addEventListener(\"click\", function () {\n        _this3.goBack();\n      });\n      // 3️⃣ Attach listeners\n      var rows = root.querySelectorAll('.cardless-row');\n      rows.forEach(function (row) {\n        row.addEventListener('click', function () {\n          var emiType = row.getAttribute('data-emi');\n          _this3.handleCardLessEMISelection(emiType);\n          _this3.selectedCategory = \"emi/cardless\";\n          rows.forEach(function (r) {\n            var checkbox = r.querySelector('.cardless-checkbox');\n            checkbox.checked = r === row;\n            r.classList.toggle('active', r === row);\n          });\n        });\n      });\n      return html;\n    }\n  }, {\n    key: \"handleCardLessEMISelection\",\n    value: function handleCardLessEMISelection(cardLessEMIName) {\n      var _this$onFormValidityC;\n      this.selectedCardLessEMI = cardLessEMIName;\n\n      // Notify parent of validity\n      (_this$onFormValidityC = this.onFormValidityChange) === null || _this$onFormValidityC === void 0 || _this$onFormValidityC.call(this, {\n        isValid: !!cardLessEMIName,\n        invalidFields: cardLessEMIName ? [] : [{\n          isValid: !!cardLessEMIName,\n          msz: ''\n        }]\n      });\n    }\n\n    // 🔹 Apply theme colors to wallet buttons\n  }, {\n    key: \"applyTheme\",\n    value: function applyTheme(container) {\n      var secondaryColor = this.theme.secondaryColor;\n      var style = document.createElement(\"style\");\n      style.innerHTML = \"\\n            .sdk-checkbox {\\n                border-color: \".concat(secondaryColor, \";\\n            }\\n\\n            .sdk-checkbox:checked+.sdk-checkmark {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color:  \").concat(secondaryColor, \";\\n            }\\n\\n            .sdk-checkbox:checked {\\n                background-color: \").concat(secondaryColor, \";\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .sdk-row-main:hover {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox:checked+.cardless-checkmark {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color:  \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-checkbox:checked {\\n                background-color: \").concat(secondaryColor, \";\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n\\n            .cardless-row.active {\\n                border-color: \").concat(secondaryColor, \";\\n                background-color: \").concat((0,_utils__WEBPACK_IMPORTED_MODULE_4__.hexToRgba)(secondaryColor, 0.1), \";\\n            }\\n\\n            .cardless-row:hover {\\n                border-color: \").concat(secondaryColor, \";\\n            }\\n        \");\n      container.appendChild(style);\n    }\n\n    // -------------------------\n    // BANK EXPANSION LOGIC\n    // -------------------------\n  }, {\n    key: \"toggleBank\",\n    value: function toggleBank(tab, bankId) {\n      this.expandedBankId = this.expandedBankId === bankId ? null : bankId;\n      this.renderBankScreen(tab);\n    }\n\n    // -------------------------\n    // UNIVERSAL BACK LOGIC\n    // -------------------------\n  }, {\n    key: \"goBack\",\n    value: function goBack() {\n      this.history.pop();\n      var screen = this.history.current();\n      this.onFormValidityChange({\n        isValid: false,\n        invalidFields: []\n      });\n      if (screen === \"categories\") {\n        this.renderCategoriesScreen();\n      } else if (screen === \"banks\") {\n        var lastTab = this.emiTabs[0]; // You can track last visited tab\n        this.renderBankScreen(lastTab);\n      } else {\n        this.renderCategoriesScreen();\n      }\n    }\n  }, {\n    key: \"renderCardScreen\",\n    value: function renderCardScreen() {\n      // Create a standalone container for the card form\n      var container = document.createElement(\"div\");\n      container.classList.add(\"emi-card-container\");\n      container.addEventListener(\"click\", function (e) {\n        e.stopPropagation();\n      });\n      // Create a card payment instance that renders INSIDE this container\n      var cardPayment = new _CardPayment__WEBPACK_IMPORTED_MODULE_7__[\"default\"](container, this.payButtonEl, _objectSpread(_objectSpread({}, this.options), {}, {\n        onFormValidityChange: this.onFormValidityChange\n      }));\n      // Render and return a real DOM element\n      return cardPayment.render();\n    }\n  }, {\n    key: \"getInstrumentDetails\",\n    value: function getInstrumentDetails() {\n      var _formData$get, _formData$get2;\n      var formData = new FormData(this.form);\n      var expiry = ((_formData$get = formData.get('expiryDate')) === null || _formData$get === void 0 ? void 0 : _formData$get.split('/')) || [];\n      var _expiry = _slicedToArray(expiry, 2),\n        expiryMonth = _expiry[0],\n        expiryYear = _expiry[1];\n      return _objectSpread(_objectSpread({}, this.selectedCategory !== 'emi/cardless' ? {\n        card: {\n          number: (_formData$get2 = formData.get('cardNumber')) === null || _formData$get2 === void 0 ? void 0 : _formData$get2.replace(/\\s+/g, ''),\n          holderName: formData.get('nameOnCard'),\n          expiry: \"20\".concat(expiryYear, \"-\").concat(expiryMonth),\n          cvc: formData.get('cvv')\n        }\n      } : {}), {}, {\n        emi: this.selectedCategory !== 'emi/cardless' ? {\n          duration: this.selectedTenure\n        } : {\n          provider: this.selectedCardLessEMI\n        },\n        type: this.selectedCategory\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EmiPayment);\n\n//# sourceURL=webpack://boxpay-checkout-web-sdk/./src/components/paymentElements/paymentElement/EmiPayment.ts?\n}");
 
 /***/ }),
 
@@ -1775,7 +1775,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/lib/axios.js\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../state/globalState */ \"./src/state/globalState.ts\");\n\n\nvar state = _state_globalState__WEBPACK_IMPORTED_MODULE_1__.globalState.getState();\nvar axiosInstance = axios__WEBPACK_IMPORTED_MODULE_0__[\"default\"].create({});\n\n// ✅ Request interceptor\naxiosInstance.interceptors.request.use(function (config) {\n  var state = _state_globalState__WEBPACK_IMPORTED_MODULE_1__.globalState.getState();\n  if (state.mode === \"production\") {\n    config.baseURL = \"https://apis.boxpay.in/v0\";\n  } else {\n    config.baseURL = \"https://test-apis.boxpay.tech/v0\";\n  }\n  return config;\n}, function (error) {\n  // Handle request errors\n  return Promise.reject(error);\n});\n\n// ✅ Response interceptor\naxiosInstance.interceptors.response.use(function (response) {\n  // Handle successful responses\n  return response;\n}, function (error) {\n  // Handle response errors\n  return Promise.reject(error);\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (axiosInstance);\n\n//# sourceURL=webpack://boxpay-checkout-web-sdk/./src/utils/axiosInstance.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ \"./node_modules/axios/lib/axios.js\");\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../state/globalState */ \"./src/state/globalState.ts\");\n\n\nvar axiosInstance = axios__WEBPACK_IMPORTED_MODULE_0__[\"default\"].create({});\n\n// ✅ Request interceptor\naxiosInstance.interceptors.request.use(function (config) {\n  var state = _state_globalState__WEBPACK_IMPORTED_MODULE_1__.globalState.getState();\n  if (state.mode === \"production\") {\n    config.baseURL = \"https://apis.boxpay.in/v0\";\n  } else {\n    config.baseURL = \"https://test-apis.boxpay.tech/v0\";\n  }\n  return config;\n}, function (error) {\n  // Handle request errors\n  return Promise.reject(error);\n});\n\n// ✅ Response interceptor\naxiosInstance.interceptors.response.use(function (response) {\n  // Handle successful responses\n  return response;\n}, function (error) {\n  // Handle response errors\n  return Promise.reject(error);\n});\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (axiosInstance);\n\n//# sourceURL=webpack://boxpay-checkout-web-sdk/./src/utils/axiosInstance.ts?\n}");
 
 /***/ }),
 
@@ -1885,7 +1885,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   validateCVV: () => (/* binding */ validateCVV),\n/* harmony export */   validateCardNumber: () => (/* binding */ validateCardNumber),\n/* harmony export */   validateExpiryDate: () => (/* binding */ validateExpiryDate),\n/* harmony export */   validateName: () => (/* binding */ validateName)\n/* harmony export */ });\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../state/globalState */ \"./src/state/globalState.ts\");\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n/**\r\n * Validate card number using Luhn algorithm.\r\n * Accepts strings that may contain spaces or non-digit characters.\r\n */\n\nvar validateCardNumber = function validateCardNumber(cardNumber) {\n  var _paymentMethodsToShow, _paymentMethodsToShow2, _cardBinData$paymentM;\n  var invalid = {\n    isValid: false,\n    msz: \"Invalid Card Number\"\n  };\n  if (!cardNumber) return invalid;\n  var activePaymentMethod = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"activePaymentMethod\");\n  var emiTenure = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"emiTenure\");\n  var cardBinData = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"cardBinData\");\n  var paymentMethodsToShow = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"paymentMethodsToShow\");\n  var SUPPORTED_CARD_BRANDS = (_paymentMethodsToShow = paymentMethodsToShow === null || paymentMethodsToShow === void 0 || (_paymentMethodsToShow2 = paymentMethodsToShow.Card) === null || _paymentMethodsToShow2 === void 0 ? void 0 : _paymentMethodsToShow2.map(function (el) {\n    return el.brand;\n  })) !== null && _paymentMethodsToShow !== void 0 ? _paymentMethodsToShow : [];\n  if (cardBinData !== null && cardBinData !== void 0 && (_cardBinData$paymentM = cardBinData.paymentMethod) !== null && _cardBinData$paymentM !== void 0 && _cardBinData$paymentM.brand && !SUPPORTED_CARD_BRANDS.includes(cardBinData.paymentMethod.brand)) {\n    return {\n      isValid: false,\n      msz: \"This card is not supported for the payment.\"\n    };\n  }\n\n  // Digits only, max 16 characters\n  var sanitized = cardNumber.replace(/\\D/g, \"\").slice(0, 16);\n\n  // Luhn check\n  var sum = 0;\n  var doubleDigit = false;\n  for (var i = sanitized.length - 1; i >= 0; i--) {\n    var digit = parseInt(sanitized[i], 10) || 0;\n    if (doubleDigit) {\n      digit *= 2;\n      if (digit > 9) digit -= 9;\n    }\n    sum += digit;\n    doubleDigit = !doubleDigit;\n  }\n\n  // ❗ VALID if Luhn passes → but your old code inverted this\n  var luhnValid = sum % 10 === 0;\n  if (!luhnValid) return invalid;\n\n  // EMI compatibility check\n  if ((activePaymentMethod === null || activePaymentMethod === void 0 ? void 0 : activePaymentMethod.toUpperCase()) === \"EMI\" && cardBinData && emiTenure && (cardBinData === null || cardBinData === void 0 ? void 0 : cardBinData.issuerName) !== emiTenure.emiMethod.issuer) {\n    return {\n      isValid: false,\n      msz: \"No EMI plans found for this card. Try another card number.\"\n    };\n  }\n  return {\n    isValid: true,\n    msz: \"\"\n  };\n};\nvar validateName = function validateName(name) {\n  if (!!name.trim()) {\n    return {\n      isValid: true,\n      msz: \"\"\n    };\n  } else {\n    return {\n      isValid: false,\n      msz: \"Invalid Name\"\n    };\n  }\n};\n\n/**\r\n * Validate expiry date in MM/YY format.\r\n * Behaviour preserved from original:\r\n *  - If input is falsy -> returns false\r\n *  - Sanitizes to first 5 chars\r\n *  - If sanitizedValue is falsy -> returns true  (preserved as requested)\r\n *  - Otherwise checks month/year against current date and regex pattern\r\n */\nvar validateExpiryDate = function validateExpiryDate(date) {\n  if (!date) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n  var sanitizedValue = date.slice(0, 5);\n  var _sanitizedValue$split = sanitizedValue.split(\"/\"),\n    _sanitizedValue$split2 = _slicedToArray(_sanitizedValue$split, 2),\n    monthStr = _sanitizedValue$split2[0],\n    yearStr = _sanitizedValue$split2[1];\n\n  // Must match MM/YY\n  if (!/^(0[1-9]|1[0-2])\\/\\d{2}$/.test(sanitizedValue)) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n  var month = parseInt(monthStr, 10);\n  var year = parseInt(yearStr, 10);\n  var now = new Date();\n  var currentMonth = now.getMonth() + 1;\n  var currentYear = now.getFullYear() % 100;\n\n  // Expired year\n  if (year < currentYear) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n\n  // Same year but expired month\n  if (year === currentYear && month < currentMonth) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n\n  // Valid\n  return {\n    isValid: true,\n    msz: \"\"\n  };\n};\n\n/**\r\n * Validate CVV length depending on card brand.\r\n * - AMERICANEXPRESS => 4 digits\r\n * - others => 3 digits\r\n */\nvar validateCVV = function validateCVV(value, brand) {\n  var cvv = value !== null && value !== void 0 ? value : \"\";\n  var isAmex = (brand !== null && brand !== void 0 ? brand : \"\").toUpperCase() === \"AMERICANEXPRESS\";\n  var regex = isAmex ? /^[0-9]{4}$/ : /^[0-9]{3}$/;\n  var isValid = regex.test(cvv);\n  return {\n    isValid: isValid,\n    msz: isValid ? \"\" : \"Invalid CVV\"\n  };\n};\n\n//# sourceURL=webpack://boxpay-checkout-web-sdk/./src/utils/validation/cardPaymentValidation.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   validateCVV: () => (/* binding */ validateCVV),\n/* harmony export */   validateCardNumber: () => (/* binding */ validateCardNumber),\n/* harmony export */   validateExpiryDate: () => (/* binding */ validateExpiryDate),\n/* harmony export */   validateName: () => (/* binding */ validateName)\n/* harmony export */ });\n/* harmony import */ var _state_globalState__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../state/globalState */ \"./src/state/globalState.ts\");\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n/**\r\n * Validate card number using Luhn algorithm.\r\n * Accepts strings that may contain spaces or non-digit characters.\r\n */\n\nvar validateCardNumber = function validateCardNumber(cardNumber) {\n  var _paymentMethodsToShow, _paymentMethodsToShow2, _cardBinData$paymentM;\n  var invalid = {\n    isValid: false,\n    msz: \"Invalid Card Number\"\n  };\n  if (!cardNumber) return invalid;\n  var activePaymentMethod = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"activePaymentMethod\");\n  var emiTenure = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"emiTenure\");\n  var cardBinData = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"cardBinData\");\n  var paymentMethodsToShow = _state_globalState__WEBPACK_IMPORTED_MODULE_0__.globalState.get(\"paymentMethodsToShow\");\n  var SUPPORTED_CARD_BRANDS = (_paymentMethodsToShow = paymentMethodsToShow === null || paymentMethodsToShow === void 0 || (_paymentMethodsToShow2 = paymentMethodsToShow.Card) === null || _paymentMethodsToShow2 === void 0 ? void 0 : _paymentMethodsToShow2.map(function (el) {\n    return el.brand;\n  })) !== null && _paymentMethodsToShow !== void 0 ? _paymentMethodsToShow : [];\n  if (cardBinData !== null && cardBinData !== void 0 && (_cardBinData$paymentM = cardBinData.paymentMethod) !== null && _cardBinData$paymentM !== void 0 && _cardBinData$paymentM.brand && !SUPPORTED_CARD_BRANDS.includes(cardBinData.paymentMethod.brand)) {\n    return {\n      isValid: false,\n      msz: \"This card is not supported for the payment.\"\n    };\n  }\n\n  // Digits only, max 16 characters\n  var sanitized = cardNumber.replace(/\\D/g, \"\").slice(0, 16);\n\n  // Luhn check\n  var sum = 0;\n  var doubleDigit = false;\n  for (var i = sanitized.length - 1; i >= 0; i--) {\n    var digit = parseInt(sanitized[i], 10) || 0;\n    if (doubleDigit) {\n      digit *= 2;\n      if (digit > 9) digit -= 9;\n    }\n    sum += digit;\n    doubleDigit = !doubleDigit;\n  }\n\n  // ❗ VALID if Luhn passes → but your old code inverted this\n  var luhnValid = sum % 10 === 0;\n  if (!luhnValid) return invalid;\n\n  // EMI compatibility check\n  if ((activePaymentMethod === null || activePaymentMethod === void 0 ? void 0 : activePaymentMethod.toUpperCase()) === \"EMI\" && cardBinData && emiTenure && (cardBinData === null || cardBinData === void 0 ? void 0 : cardBinData.issuerName) !== emiTenure.emiMethod.issuer) {\n    if (cardBinData.issuerName) {\n      var _emiTenure$emiMethod;\n      return {\n        isValid: false,\n        msz: \"This is \".concat(cardBinData.issuerTitle, \" Card. Please enter a card number that belongs to \").concat((_emiTenure$emiMethod = emiTenure.emiMethod) === null || _emiTenure$emiMethod === void 0 ? void 0 : _emiTenure$emiMethod.issuerTitle, \" Card.\")\n      };\n    } else {\n      return {\n        isValid: false,\n        msz: \"We couldn't find any EMI plans for this card. Please try using a different card number\"\n      };\n    }\n  }\n  return {\n    isValid: true,\n    msz: \"\"\n  };\n};\nvar validateName = function validateName(name) {\n  if (!!name.trim()) {\n    return {\n      isValid: true,\n      msz: \"\"\n    };\n  } else {\n    return {\n      isValid: false,\n      msz: \"Invalid Name\"\n    };\n  }\n};\n\n/**\r\n * Validate expiry date in MM/YY format.\r\n * Behaviour preserved from original:\r\n *  - If input is falsy -> returns false\r\n *  - Sanitizes to first 5 chars\r\n *  - If sanitizedValue is falsy -> returns true  (preserved as requested)\r\n *  - Otherwise checks month/year against current date and regex pattern\r\n */\nvar validateExpiryDate = function validateExpiryDate(date) {\n  if (!date) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n  var sanitizedValue = date.slice(0, 5);\n  var _sanitizedValue$split = sanitizedValue.split(\"/\"),\n    _sanitizedValue$split2 = _slicedToArray(_sanitizedValue$split, 2),\n    monthStr = _sanitizedValue$split2[0],\n    yearStr = _sanitizedValue$split2[1];\n\n  // Must match MM/YY\n  if (!/^(0[1-9]|1[0-2])\\/\\d{2}$/.test(sanitizedValue)) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n  var month = parseInt(monthStr, 10);\n  var year = parseInt(yearStr, 10);\n  var now = new Date();\n  var currentMonth = now.getMonth() + 1;\n  var currentYear = now.getFullYear() % 100;\n\n  // Expired year\n  if (year < currentYear) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n\n  // Same year but expired month\n  if (year === currentYear && month < currentMonth) {\n    return {\n      isValid: false,\n      msz: \"Invalid Expiry Date\"\n    };\n  }\n\n  // Valid\n  return {\n    isValid: true,\n    msz: \"\"\n  };\n};\n\n/**\r\n * Validate CVV length depending on card brand.\r\n * - AMERICANEXPRESS => 4 digits\r\n * - others => 3 digits\r\n */\nvar validateCVV = function validateCVV(value, brand) {\n  var cvv = value !== null && value !== void 0 ? value : \"\";\n  var isAmex = (brand !== null && brand !== void 0 ? brand : \"\").toUpperCase() === \"AMERICANEXPRESS\";\n  var regex = isAmex ? /^[0-9]{4}$/ : /^[0-9]{3}$/;\n  var isValid = regex.test(cvv);\n  return {\n    isValid: isValid,\n    msz: isValid ? \"\" : \"Invalid CVV\"\n  };\n};\n\n//# sourceURL=webpack://boxpay-checkout-web-sdk/./src/utils/validation/cardPaymentValidation.ts?\n}");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxpay-checkout-web-sdk",
-  "version": "1.0.1",
+  "version": "1.0.2-beta.0",
   "description": "",
   "main": "dist/boxpay-checkout-web-sdk.js",
   "module": "dist/boxpay.esm.js",