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

package/README.md

@@ -20,13 +20,7 @@ A lightweight, secure, and customizable checkout experience for payments — bui
 ### Via CDN
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/boxpay-checkout-js-sdk/dist/boxpay-checkout-js-sdk.min.js"></script>
-```
-
-### Local Script
-
-```html
-<script src="path-to/boxpay-checkout-js-sdk.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/boxpay-checkout-web-sdk@1.0.2-beta.0/dist/boxpay.esm.min.js"></script>
 ```
 
 ---
@@ -156,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

@@ -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

@@ -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.0",
+  "version": "1.0.2-beta.0",
   "description": "",
   "main": "dist/boxpay-checkout-web-sdk.js",
   "module": "dist/boxpay.esm.js",