@miden-npm/angular 2.1.7 → 2.2.0

package/fesm2022/miden-npm-angular.mjs

@@ -898,118 +898,43 @@ const urlValidator = () => {
     };
 };
 
-var CardSchemes;
-(function (CardSchemes) {
-    CardSchemes[CardSchemes["Visa"] = 1] = "Visa";
-    CardSchemes[CardSchemes["MasterCard"] = 2] = "MasterCard";
-    CardSchemes[CardSchemes["Verve"] = 3] = "Verve";
-    CardSchemes[CardSchemes["MastercardAndVisa"] = 4] = "MastercardAndVisa";
-    CardSchemes[CardSchemes["AmericanExpress"] = 5] = "AmericanExpress";
-    CardSchemes[CardSchemes["Discover"] = 6] = "Discover";
-    CardSchemes[CardSchemes["JCB"] = 7] = "JCB";
-    CardSchemes[CardSchemes["DinersClub"] = 8] = "DinersClub";
-    CardSchemes[CardSchemes["Maestro"] = 9] = "Maestro";
-    CardSchemes[CardSchemes["UnionPay"] = 10] = "UnionPay";
-    CardSchemes[CardSchemes["UnionPay3DS"] = 11] = "UnionPay3DS";
-    CardSchemes[CardSchemes["UnionPayNon3DS"] = 12] = "UnionPayNon3DS";
-    CardSchemes[CardSchemes["UATP"] = 13] = "UATP";
-    CardSchemes[CardSchemes["PayPak"] = 14] = "PayPak";
-    CardSchemes[CardSchemes["Jaywan"] = 15] = "Jaywan";
-    CardSchemes[CardSchemes["Mada"] = 16] = "Mada";
-    CardSchemes[CardSchemes["MadaVisa"] = 17] = "MadaVisa";
-    CardSchemes[CardSchemes["MadaMastercard"] = 18] = "MadaMastercard";
-    CardSchemes[CardSchemes["Unknown"] = 19] = "Unknown";
-})(CardSchemes || (CardSchemes = {}));
-// ---------- Generic scheme regexes ----------
-const VISA_RE = /^4\d{12}(\d{3}){0,2}$/; // 13, 16, 19 digits
-const MC_RE = /^(?:5[1-5]\d{14}|2(?:2(?:2[1-9]|[3-9]\d)|[3-6]\d{2}|7(?:[01]\d|20))\d{12})(?:\d{0,3})?$/; // 16-19
-const AMEX_RE = /^(34|37)\d{13}$/; // 15
-const DISCOVER_RE = /^(?:6011|65|64[4-9]|622(?:12[6-9]|1[3-9]\d|[2-8]\d{2}|9(?:0\d|1\d|2[0-5])))\d{12,15}$/; // 16-19
-const JCB_RE = /^(?:35(?:2[8-9]|[3-8]\d))\d{12,15}$/; // 16-19
-const DINERS_RE = /^(?:3(?:0[0-5]\d|095|6\d|[89]\d))\d{11,13}$/; // 14-16
-const MAESTRO_RE = /^(?:50|5[6-9]|6[0-9])\d{10,17}$/; // 12-19
-const UNIONPAY_RE = /^62\d{14,17}$/; // 16-19
-const UATP_RE = /^1\d{14}$/; // 15
-// ---------- Known local/test BINs ----------
-const VERVE_BIN6_RANGES = [
-    [506099, 506198],
-    [650002, 650027],
-];
-const VERVE_BIN6_SINGLES = new Set([507865, 507866]);
-const PAYPAK_BIN6 = new Set([220545, 220543]);
-const JAYWAN_BIN7 = new Set([6690109]);
-const MADA_ONLY_BIN6 = new Set([968209, 873646]);
-const MADA_VISA_BIN6 = new Set([422818, 486094]);
-const MADA_MC_BIN6 = new Set([529741, 543357]);
-const UNIONPAY_3DS_BIN6 = new Set([620108]);
-const UNIONPAY_NON3DS_BIN6 = new Set([621423]);
-function cardType(cardNumber) {
-    const scheme = detect(cardNumber);
-    return CardSchemes[scheme]; // numeric enum reverse mapping -> name
-}
-function detect(cardNumber) {
-    if (!cardNumber || !cardNumber.trim())
-        return CardSchemes.Unknown;
-    // Normalize: digits only
-    const digits = cardNumber.replace(/\D/g, '');
-    if (digits.length < 12 || digits.length > 19)
-        return CardSchemes.Unknown;
-    // ---------- 1) Exact local/test BIN routing FIRST ----------
-    if (digits.length >= 6) {
-        const bin6 = parseInt(digits.slice(0, 6), 10);
-        // mada-only
-        if (MADA_ONLY_BIN6.has(bin6) && digits.length >= 16 && digits.length <= 19)
-            return CardSchemes.Mada;
-        // mada Visa
-        if (MADA_VISA_BIN6.has(bin6) && VISA_RE.test(digits))
-            return CardSchemes.MadaVisa;
-        // mada Mastercard
-        if (MADA_MC_BIN6.has(bin6) && MC_RE.test(digits))
-            return CardSchemes.MadaMastercard;
-        // PayPak
-        if (PAYPAK_BIN6.has(bin6) && digits.length === 16)
-            return CardSchemes.PayPak;
-        // UnionPay test BINs with 3DS status
-        if (UNIONPAY_3DS_BIN6.has(bin6) && UNIONPAY_RE.test(digits))
-            return CardSchemes.UnionPay3DS;
-        if (UNIONPAY_NON3DS_BIN6.has(bin6) && UNIONPAY_RE.test(digits))
-            return CardSchemes.UnionPayNon3DS;
-        // Verve
-        if (isVerve(bin6, digits.length))
-            return CardSchemes.Verve;
-    }
-    if (digits.length >= 7) {
-        const bin7 = parseInt(digits.slice(0, 7), 10);
-        // Jaywan
-        if (JAYWAN_BIN7.has(bin7) && digits.length === 16)
-            return CardSchemes.Jaywan;
-    }
-    // ---------- 2) Generic schemes ----------
-    if (UATP_RE.test(digits))
-        return CardSchemes.UATP;
-    if (AMEX_RE.test(digits))
-        return CardSchemes.AmericanExpress;
-    if (DISCOVER_RE.test(digits))
-        return CardSchemes.Discover;
-    if (JCB_RE.test(digits))
-        return CardSchemes.JCB;
-    if (DINERS_RE.test(digits))
-        return CardSchemes.DinersClub;
-    if (MC_RE.test(digits))
-        return CardSchemes.MasterCard;
-    if (VISA_RE.test(digits))
-        return CardSchemes.Visa;
-    if (UNIONPAY_RE.test(digits))
-        return CardSchemes.UnionPay;
-    if (MAESTRO_RE.test(digits))
-        return CardSchemes.Maestro;
-    return CardSchemes.Unknown;
-}
-function isVerve(bin6, length) {
-    if (length < 16 || length > 19)
-        return false;
-    const inRange = VERVE_BIN6_RANGES.some(([start, end]) => bin6 >= start && bin6 <= end);
-    return inRange || VERVE_BIN6_SINGLES.has(bin6);
+/**
+ * Detects the card type based on the card number
+ * @param cardNumber - The card number (can include spaces)
+ * @returns The detected card type as a string
+ */
+function cardTypeHandler(cardNumber) {
+    // Remove spaces and non-digits
+    const cleanNumber = cardNumber.replace(/\s/g, "").replace(/\D/g, "");
+    // Visa
+    if (/^4/.test(cleanNumber)) {
+        return "Visa";
+    }
+    // MasterCard
+    if (/^5[1-5]/.test(cleanNumber) || /^2[2-7]/.test(cleanNumber)) {
+        return "MasterCard";
+    }
+    // American Express
+    if (/^3[47]/.test(cleanNumber)) {
+        return "AmericanExpress";
+    }
+    // Discover
+    if (/^6(?:011|5)/.test(cleanNumber)) {
+        return "Discover";
+    }
+    // JCB
+    if (/^35/.test(cleanNumber)) {
+        return "JCB";
+    }
+    // Diners Club
+    if (/^3[0689]/.test(cleanNumber)) {
+        return "DinersClub";
+    }
+    // Verve (Nigerian card)
+    if (/^506/.test(cleanNumber)) {
+        return "Verve";
+    }
+    return "Unknown";
 }
 
 class InputComponent {
@@ -1794,6 +1719,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+class IconAmexComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconAmexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IconAmexComponent, isStandalone: true, selector: "icon-amex", ngImport: i0, template: "<svg\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 -10.769 60 60\"\n  enable-background=\"new 0 0 780 500\"\n  version=\"1.1\"\n  xmlSpace=\"preserve\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path width=\"780\" height=\"500\" fill=\"#2557D6\" d=\"M0 0h60v38.462H0z\" />\n  <path\n    d=\"M0.019 18.13h2.88l0.649 -1.501h1.454l0.647 1.501h5.667v-1.147l0.506 1.153h2.942l0.506 -1.169v1.165h14.083l-0.006 -2.463h0.273c0.191 0.006 0.246 0.023 0.246 0.325v2.139h7.284v-0.574c0.588 0.301 1.502 0.574 2.704 0.574h3.064l0.656 -1.501h1.454l0.641 1.501h5.905v-1.425l0.894 1.425h4.732V8.706h-4.683v1.113l-0.655 -1.113h-4.806v1.113l-0.602 -1.113H39.965c-1.087 0 -2.042 0.145 -2.813 0.55v-0.55h-4.479v0.55c-0.491 -0.417 -1.16 -0.55 -1.904 -0.55H14.405l-1.098 2.434 -1.127 -2.434H7.022v1.113l-0.567 -1.113H2.061L0.019 13.187zm18.18 -1.359h-1.728l-0.006 -5.292 -2.444 5.292h-1.48l-2.45 -5.296v5.296h-3.429l-0.647 -1.507h-3.51l-0.654 1.507H0.019l3.018 -6.756h2.505l2.867 6.397V10.014h2.751l2.206 4.583 2.026 -4.583h2.807zm-12.761 -2.909 -1.154 -2.694 -1.147 2.694zm19.639 2.909H19.445V10.014h5.631v1.407h-3.946v1.218h3.851v1.385h-3.851v1.349h3.946zm7.936 -4.937a1.905 1.905 0 0 1 -1.188 1.801c0.369 0.135 0.684 0.372 0.834 0.569 0.238 0.336 0.279 0.636 0.279 1.24v1.327h-1.7l-0.006 -0.852c0 -0.406 0.041 -0.991 -0.266 -1.317 -0.246 -0.237 -0.622 -0.289 -1.228 -0.289h-1.81v2.458h-1.685V10.014h3.877c0.862 0 1.496 0.022 2.041 0.324 0.533 0.302 0.853 0.743 0.853 1.496m-2.131 1.003c-0.232 0.135 -0.505 0.139 -0.834 0.139H28v-1.501h2.075c0.293 0 0.601 0.013 0.799 0.122 0.218 0.099 0.354 0.308 0.354 0.598 0 0.295 -0.129 0.533 -0.347 0.642m4.834 3.933h-1.72V10.014h1.72zm19.966 0h-2.389l-3.195 -5.072V16.77H46.665l-0.656 -1.507h-3.502l-0.636 1.507h-1.973c-0.819 0 -1.857 -0.173 -2.444 -0.748 -0.593 -0.574 -0.9 -1.351 -0.9 -2.579 0 -1.002 0.184 -1.918 0.908 -2.642 0.545 -0.539 1.399 -0.788 2.56 -0.788h1.632v1.448h-1.599c-0.615 0 -0.963 0.087 -1.297 0.4 -0.287 0.284 -0.484 0.823 -0.484 1.53 0 0.724 0.15 1.246 0.464 1.587 0.26 0.268 0.731 0.348 1.175 0.348h0.757l2.376 -5.314h2.526l2.854 6.391V10.014h2.567l2.963 4.705v-4.705h1.726zm-10.246 -2.909 -1.167 -2.693 -1.16 2.693zm14.541 13.698c-0.409 0.574 -1.207 0.865 -2.288 0.865h-3.256V26.975h3.242c0.322 0 0.546 -0.041 0.682 -0.168a0.585 0.585 0 0 0 0.2 -0.441c0 -0.197 -0.082 -0.353 -0.206 -0.447 -0.122 -0.103 -0.3 -0.15 -0.594 -0.15 -1.583 -0.051 -3.557 0.047 -3.557 -2.092 0 -0.98 0.649 -2.012 2.418 -2.012h3.357v-1.345h-3.12c-0.942 0 -1.625 0.216 -2.11 0.552v-0.552h-4.614c-0.738 0 -1.604 0.175 -2.014 0.552v-0.552h-8.24v0.552c-0.655 -0.453 -1.762 -0.552 -2.273 -0.552h-5.435v0.552c-0.519 -0.481 -1.673 -0.552 -2.376 -0.552H23.712l-1.392 1.444 -1.304 -1.444H11.93v9.43H20.845l1.435 -1.466 1.351 1.466 5.495 0.004v-2.219h0.54c0.729 0.011 1.589 -0.018 2.348 -0.332v2.545h4.533v-2.458h0.218c0.279 0 0.306 0.011 0.306 0.278v2.179h13.77c0.874 0 1.788 -0.214 2.294 -0.604v0.604h4.367c0.909 0 1.796 -0.122 2.472 -0.434v-1.757zm-27.303 -3.627c0 1.877 -1.462 2.265 -2.936 2.265H27.635v2.267h-3.276l-2.075 -2.237 -2.157 2.237H13.45V21.706h6.779l2.074 2.216 2.144 -2.216h5.386c1.337 0 2.841 0.355 2.841 2.227m-13.402 3.111h-4.144v-1.345h3.701v-1.379h-3.701V23.09h4.226l1.844 1.97zm6.678 0.774 -2.588 -2.753 2.588 -2.666zm3.828 -3.005h-2.179v-1.721h2.198c0.609 0 1.031 0.237 1.031 0.829 0 0.585 -0.403 0.892 -1.05 0.892m11.412 -3.106h5.626v1.397h-3.947v1.228h3.851v1.379h-3.851v1.345l3.947 0.006v1.403H41.189zm-2.163 3.618c0.375 0.133 0.682 0.37 0.826 0.568 0.238 0.33 0.273 0.638 0.28 1.234v1.34h-1.692v-0.846c0 -0.406 0.041 -1.008 -0.273 -1.323 -0.246 -0.242 -0.622 -0.3 -1.236 -0.3h-1.802v2.469h-1.694V21.706h3.892c0.854 0 1.475 0.036 2.028 0.319 0.532 0.308 0.867 0.73 0.867 1.501a1.895 1.895 0 0 1 -1.194 1.798m-0.953 -0.855c-0.226 0.128 -0.504 0.14 -0.832 0.14h-2.048v-1.518h2.075c0.3 0 0.601 0.006 0.804 0.122 0.218 0.11 0.349 0.319 0.349 0.608s-0.131 0.522 -0.349 0.648m15.217 0.43c0.329 0.326 0.504 0.736 0.504 1.432 0 1.454 -0.948 2.132 -2.648 2.132h-3.283V27.015h3.27c0.32 0 0.546 -0.041 0.689 -0.168 0.116 -0.104 0.199 -0.257 0.199 -0.441 0 -0.197 -0.09 -0.353 -0.206 -0.447 -0.129 -0.103 -0.306 -0.15 -0.6 -0.15 -1.577 -0.051 -3.55 0.047 -3.55 -2.091 0 -0.981 0.642 -2.012 2.41 -2.012h3.38v1.438h-3.092c-0.306 0 -0.506 0.011 -0.675 0.122 -0.184 0.11 -0.253 0.272 -0.253 0.486 0 0.255 0.157 0.428 0.369 0.503 0.178 0.059 0.369 0.076 0.656 0.076l0.907 0.024c0.915 0.021 1.543 0.173 1.925 0.543m6.689 -1.809h-3.072c-0.306 0 -0.51 0.011 -0.682 0.122 -0.178 0.11 -0.246 0.272 -0.246 0.486 0 0.255 0.15 0.428 0.368 0.503 0.178 0.059 0.369 0.076 0.649 0.076l0.913 0.024c0.922 0.022 1.537 0.173 1.913 0.544 0.069 0.051 0.11 0.11 0.157 0.168z\"\n    fill=\"#fff\"\n  />\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconAmexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'icon-amex', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 -10.769 60 60\"\n  enable-background=\"new 0 0 780 500\"\n  version=\"1.1\"\n  xmlSpace=\"preserve\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path width=\"780\" height=\"500\" fill=\"#2557D6\" d=\"M0 0h60v38.462H0z\" />\n  <path\n    d=\"M0.019 18.13h2.88l0.649 -1.501h1.454l0.647 1.501h5.667v-1.147l0.506 1.153h2.942l0.506 -1.169v1.165h14.083l-0.006 -2.463h0.273c0.191 0.006 0.246 0.023 0.246 0.325v2.139h7.284v-0.574c0.588 0.301 1.502 0.574 2.704 0.574h3.064l0.656 -1.501h1.454l0.641 1.501h5.905v-1.425l0.894 1.425h4.732V8.706h-4.683v1.113l-0.655 -1.113h-4.806v1.113l-0.602 -1.113H39.965c-1.087 0 -2.042 0.145 -2.813 0.55v-0.55h-4.479v0.55c-0.491 -0.417 -1.16 -0.55 -1.904 -0.55H14.405l-1.098 2.434 -1.127 -2.434H7.022v1.113l-0.567 -1.113H2.061L0.019 13.187zm18.18 -1.359h-1.728l-0.006 -5.292 -2.444 5.292h-1.48l-2.45 -5.296v5.296h-3.429l-0.647 -1.507h-3.51l-0.654 1.507H0.019l3.018 -6.756h2.505l2.867 6.397V10.014h2.751l2.206 4.583 2.026 -4.583h2.807zm-12.761 -2.909 -1.154 -2.694 -1.147 2.694zm19.639 2.909H19.445V10.014h5.631v1.407h-3.946v1.218h3.851v1.385h-3.851v1.349h3.946zm7.936 -4.937a1.905 1.905 0 0 1 -1.188 1.801c0.369 0.135 0.684 0.372 0.834 0.569 0.238 0.336 0.279 0.636 0.279 1.24v1.327h-1.7l-0.006 -0.852c0 -0.406 0.041 -0.991 -0.266 -1.317 -0.246 -0.237 -0.622 -0.289 -1.228 -0.289h-1.81v2.458h-1.685V10.014h3.877c0.862 0 1.496 0.022 2.041 0.324 0.533 0.302 0.853 0.743 0.853 1.496m-2.131 1.003c-0.232 0.135 -0.505 0.139 -0.834 0.139H28v-1.501h2.075c0.293 0 0.601 0.013 0.799 0.122 0.218 0.099 0.354 0.308 0.354 0.598 0 0.295 -0.129 0.533 -0.347 0.642m4.834 3.933h-1.72V10.014h1.72zm19.966 0h-2.389l-3.195 -5.072V16.77H46.665l-0.656 -1.507h-3.502l-0.636 1.507h-1.973c-0.819 0 -1.857 -0.173 -2.444 -0.748 -0.593 -0.574 -0.9 -1.351 -0.9 -2.579 0 -1.002 0.184 -1.918 0.908 -2.642 0.545 -0.539 1.399 -0.788 2.56 -0.788h1.632v1.448h-1.599c-0.615 0 -0.963 0.087 -1.297 0.4 -0.287 0.284 -0.484 0.823 -0.484 1.53 0 0.724 0.15 1.246 0.464 1.587 0.26 0.268 0.731 0.348 1.175 0.348h0.757l2.376 -5.314h2.526l2.854 6.391V10.014h2.567l2.963 4.705v-4.705h1.726zm-10.246 -2.909 -1.167 -2.693 -1.16 2.693zm14.541 13.698c-0.409 0.574 -1.207 0.865 -2.288 0.865h-3.256V26.975h3.242c0.322 0 0.546 -0.041 0.682 -0.168a0.585 0.585 0 0 0 0.2 -0.441c0 -0.197 -0.082 -0.353 -0.206 -0.447 -0.122 -0.103 -0.3 -0.15 -0.594 -0.15 -1.583 -0.051 -3.557 0.047 -3.557 -2.092 0 -0.98 0.649 -2.012 2.418 -2.012h3.357v-1.345h-3.12c-0.942 0 -1.625 0.216 -2.11 0.552v-0.552h-4.614c-0.738 0 -1.604 0.175 -2.014 0.552v-0.552h-8.24v0.552c-0.655 -0.453 -1.762 -0.552 -2.273 -0.552h-5.435v0.552c-0.519 -0.481 -1.673 -0.552 -2.376 -0.552H23.712l-1.392 1.444 -1.304 -1.444H11.93v9.43H20.845l1.435 -1.466 1.351 1.466 5.495 0.004v-2.219h0.54c0.729 0.011 1.589 -0.018 2.348 -0.332v2.545h4.533v-2.458h0.218c0.279 0 0.306 0.011 0.306 0.278v2.179h13.77c0.874 0 1.788 -0.214 2.294 -0.604v0.604h4.367c0.909 0 1.796 -0.122 2.472 -0.434v-1.757zm-27.303 -3.627c0 1.877 -1.462 2.265 -2.936 2.265H27.635v2.267h-3.276l-2.075 -2.237 -2.157 2.237H13.45V21.706h6.779l2.074 2.216 2.144 -2.216h5.386c1.337 0 2.841 0.355 2.841 2.227m-13.402 3.111h-4.144v-1.345h3.701v-1.379h-3.701V23.09h4.226l1.844 1.97zm6.678 0.774 -2.588 -2.753 2.588 -2.666zm3.828 -3.005h-2.179v-1.721h2.198c0.609 0 1.031 0.237 1.031 0.829 0 0.585 -0.403 0.892 -1.05 0.892m11.412 -3.106h5.626v1.397h-3.947v1.228h3.851v1.379h-3.851v1.345l3.947 0.006v1.403H41.189zm-2.163 3.618c0.375 0.133 0.682 0.37 0.826 0.568 0.238 0.33 0.273 0.638 0.28 1.234v1.34h-1.692v-0.846c0 -0.406 0.041 -1.008 -0.273 -1.323 -0.246 -0.242 -0.622 -0.3 -1.236 -0.3h-1.802v2.469h-1.694V21.706h3.892c0.854 0 1.475 0.036 2.028 0.319 0.532 0.308 0.867 0.73 0.867 1.501a1.895 1.895 0 0 1 -1.194 1.798m-0.953 -0.855c-0.226 0.128 -0.504 0.14 -0.832 0.14h-2.048v-1.518h2.075c0.3 0 0.601 0.006 0.804 0.122 0.218 0.11 0.349 0.319 0.349 0.608s-0.131 0.522 -0.349 0.648m15.217 0.43c0.329 0.326 0.504 0.736 0.504 1.432 0 1.454 -0.948 2.132 -2.648 2.132h-3.283V27.015h3.27c0.32 0 0.546 -0.041 0.689 -0.168 0.116 -0.104 0.199 -0.257 0.199 -0.441 0 -0.197 -0.09 -0.353 -0.206 -0.447 -0.129 -0.103 -0.306 -0.15 -0.6 -0.15 -1.577 -0.051 -3.55 0.047 -3.55 -2.091 0 -0.981 0.642 -2.012 2.41 -2.012h3.38v1.438h-3.092c-0.306 0 -0.506 0.011 -0.675 0.122 -0.184 0.11 -0.253 0.272 -0.253 0.486 0 0.255 0.157 0.428 0.369 0.503 0.178 0.059 0.369 0.076 0.656 0.076l0.907 0.024c0.915 0.021 1.543 0.173 1.925 0.543m6.689 -1.809h-3.072c-0.306 0 -0.51 0.011 -0.682 0.122 -0.178 0.11 -0.246 0.272 -0.246 0.486 0 0.255 0.15 0.428 0.368 0.503 0.178 0.059 0.369 0.076 0.649 0.076l0.913 0.024c0.922 0.022 1.537 0.173 1.913 0.544 0.069 0.051 0.11 0.11 0.157 0.168z\"\n    fill=\"#fff\"\n  />\n</svg>\n" }]
+        }] });
+
+class IconJcbComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconJcbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IconJcbComponent, isStandalone: true, selector: "icon-jcb", ngImport: i0, template: "<svg\n  version=\"1.1\"\n  id=\"Layer_1\"\n  xmlns:sketch=\"http://www.bohemiancoding.com/sketch/ns\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 0 56.25 35.325\"\n  enable-background=\"new 0 0 750 471\"\n  xml:space=\"preserve\"\n>\n  <title>Slice 1</title>\n  <desc>Created with Sketch.</desc>\n  <g>\n    <path\n      id=\"path3494\"\n      sketch:type=\"MSShapeGroup\"\n      fill=\"#FFFFFF\"\n      d=\"M46.293 26.007c0 3.121 -2.53 5.652 -5.652 5.652H9.957V9.318c0 -3.122 2.53 -5.653 5.652 -5.653h30.684v22.342z\"\n    />\n    <path\n      id=\"path3496_1_\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"824.7424\"\n      y1=\"333.7813\"\n      x2=\"825.7424\"\n      y2=\"333.7813\"\n      gradientTransform=\"matrix(132.8743 0 0 -323.0226 -109129.531 108054.602)\"\n      d=\"\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #007b40\" />\n      <stop offset=\"1\" style=\"stop-color: #55b330\" />\n    </path>\n    <path\n      id=\"path3496\"\n      sketch:type=\"MSShapeGroup\"\n      fill=\"url(#path3496_1_)\"\n      d=\"M36.289 18.153c0.876 0.019 1.758 -0.039 2.631 0.03 0.884 0.165 1.097 1.503 0.312 1.942 -0.536 0.289 -1.172 0.108 -1.753 0.158H36.289zm3.138 -2.411c0.195 0.687 -0.468 1.304 -1.13 1.21h-2.008c0.014 -0.648 -0.028 -1.352 0.02 -1.966 0.804 0.023 1.616 -0.046 2.416 0.036 0.343 0.086 0.631 0.369 0.701 0.72m4.832 -10.193c0.037 1.313 0.005 2.695 0.016 4.034 -0.002 5.445 0.005 10.89 -0.004 16.334 -0.035 2.041 -1.844 3.814 -3.87 3.854 -2.028 0.008 -4.057 0.001 -6.086 0.004v-8.231c2.21 -0.011 4.422 0.023 6.631 -0.017 1.025 -0.064 2.148 -0.741 2.195 -1.869 0.121 -1.133 -0.947 -1.916 -1.961 -2.04 -0.39 -0.01 -0.378 -0.114 0 -0.159 0.967 -0.209 1.727 -1.21 1.442 -2.212 -0.243 -1.054 -1.408 -1.462 -2.377 -1.46 -1.976 -0.013 -3.953 -0.002 -5.93 -0.006 0.013 -1.537 -0.027 -3.075 0.021 -4.611 0.157 -2.004 2.011 -3.656 4.009 -3.62q2.957 0 5.914 0\"\n    />\n    <path\n      id=\"path3498_1_\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"824.7551\"\n      y1=\"333.7822\"\n      x2=\"825.7484\"\n      y2=\"333.7822\"\n      gradientTransform=\"matrix(133.4307 0 0 -323.0203 -109887.688 108053.82)\"\n      d=\"\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #1d2970\" />\n      <stop offset=\"1\" style=\"stop-color: #006dba\" />\n    </path>\n    <path\n      id=\"path3498\"\n      sketch:type=\"MSShapeGroup\"\n      fill=\"url(#path3498_1_)\"\n      d=\"M11.981 9.378c0.05 -2.037 1.867 -3.796 3.89 -3.826 2.021 -0.006 4.042 -0.001 6.063 -0.003 -0.006 6.816 0.011 13.633 -0.008 20.449 -0.078 2.013 -1.874 3.738 -3.876 3.773 -2.025 0.007 -4.05 0.001 -6.074 0.003V21.266c1.967 0.465 4.029 0.662 6.036 0.354 1.199 -0.193 2.512 -0.782 2.918 -2.026 0.299 -1.064 0.131 -2.184 0.175 -3.277v-2.537h-3.472c-0.016 1.678 0.032 3.359 -0.025 5.034 -0.094 1.03 -1.114 1.685 -2.085 1.65 -1.205 0.013 -3.592 -0.873 -3.592 -0.873 -0.006 -3.144 0.035 -7.08 0.052 -10.213\"\n    />\n    <path\n      id=\"path3500_1_\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"824.7424\"\n      y1=\"333.7813\"\n      x2=\"825.741\"\n      y2=\"333.7813\"\n      gradientTransform=\"matrix(132.9583 0 0 -323.0276 -109347.922 108056.266)\"\n      d=\"\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #6e2b2f\" />\n      <stop offset=\"1\" style=\"stop-color: #e30138\" />\n    </path>\n    <path\n      id=\"path3500\"\n      sketch:type=\"MSShapeGroup\"\n      fill=\"url(#path3500_1_)\"\n      d=\"M23.229 14.804c-0.183 0.039 -0.037 -0.623 -0.084 -0.873 0.012 -1.586 -0.026 -3.174 0.021 -4.759 0.156 -2.012 2.024 -3.669 4.03 -3.622h5.908c-0.006 6.816 0.011 13.633 -0.008 20.449 -0.078 2.013 -1.874 3.737 -3.876 3.773 -2.025 0.008 -4.05 0.001 -6.075 0.003V20.453c1.383 1.135 3.262 1.311 4.985 1.314 1.299 0 2.59 -0.201 3.851 -0.5V19.559c-1.421 0.708 -3.093 1.158 -4.668 0.751 -1.099 -0.274 -1.897 -1.336 -1.879 -2.47 -0.127 -1.18 0.564 -2.425 1.723 -2.776 1.439 -0.451 3.008 -0.106 4.357 0.48 0.289 0.151 0.582 0.339 0.467 -0.144v-1.342c-2.256 -0.537 -4.658 -0.734 -6.925 -0.15 -0.656 0.185 -1.295 0.466 -1.828 0.897\"\n    />\n  </g>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconJcbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'icon-jcb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  version=\"1.1\"\n  id=\"Layer_1\"\n  xmlns:sketch=\"http://www.bohemiancoding.com/sketch/ns\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 0 56.25 35.325\"\n  enable-background=\"new 0 0 750 471\"\n  xml:space=\"preserve\"\n>\n  <title>Slice 1</title>\n  <desc>Created with Sketch.</desc>\n  <g>\n    <path\n      id=\"path3494\"\n      sketch:type=\"MSShapeGroup\"\n      fill=\"#FFFFFF\"\n      d=\"M46.293 26.007c0 3.121 -2.53 5.652 -5.652 5.652H9.957V9.318c0 -3.122 2.53 -5.653 5.652 -5.653h30.684v22.342z\"\n    />\n    <path\n      id=\"path3496_1_\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"824.7424\"\n      y1=\"333.7813\"\n      x2=\"825.7424\"\n      y2=\"333.7813\"\n      gradientTransform=\"matrix(132.8743 0 0 -323.0226 -109129.531 108054.602)\"\n      d=\"\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #007b40\" />\n      <stop offset=\"1\" style=\"stop-color: #55b330\" />\n    </path>\n    <path\n      id=\"path3496\"\n      sketch:type=\"MSShapeGroup\"\n      fill=\"url(#path3496_1_)\"\n      d=\"M36.289 18.153c0.876 0.019 1.758 -0.039 2.631 0.03 0.884 0.165 1.097 1.503 0.312 1.942 -0.536 0.289 -1.172 0.108 -1.753 0.158H36.289zm3.138 -2.411c0.195 0.687 -0.468 1.304 -1.13 1.21h-2.008c0.014 -0.648 -0.028 -1.352 0.02 -1.966 0.804 0.023 1.616 -0.046 2.416 0.036 0.343 0.086 0.631 0.369 0.701 0.72m4.832 -10.193c0.037 1.313 0.005 2.695 0.016 4.034 -0.002 5.445 0.005 10.89 -0.004 16.334 -0.035 2.041 -1.844 3.814 -3.87 3.854 -2.028 0.008 -4.057 0.001 -6.086 0.004v-8.231c2.21 -0.011 4.422 0.023 6.631 -0.017 1.025 -0.064 2.148 -0.741 2.195 -1.869 0.121 -1.133 -0.947 -1.916 -1.961 -2.04 -0.39 -0.01 -0.378 -0.114 0 -0.159 0.967 -0.209 1.727 -1.21 1.442 -2.212 -0.243 -1.054 -1.408 -1.462 -2.377 -1.46 -1.976 -0.013 -3.953 -0.002 -5.93 -0.006 0.013 -1.537 -0.027 -3.075 0.021 -4.611 0.157 -2.004 2.011 -3.656 4.009 -3.62q2.957 0 5.914 0\"\n    />\n    <path\n      id=\"path3498_1_\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"824.7551\"\n      y1=\"333.7822\"\n      x2=\"825.7484\"\n      y2=\"333.7822\"\n      gradientTransform=\"matrix(133.4307 0 0 -323.0203 -109887.688 108053.82)\"\n      d=\"\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #1d2970\" />\n      <stop offset=\"1\" style=\"stop-color: #006dba\" />\n    </path>\n    <path\n      id=\"path3498\"\n      sketch:type=\"MSShapeGroup\"\n      fill=\"url(#path3498_1_)\"\n      d=\"M11.981 9.378c0.05 -2.037 1.867 -3.796 3.89 -3.826 2.021 -0.006 4.042 -0.001 6.063 -0.003 -0.006 6.816 0.011 13.633 -0.008 20.449 -0.078 2.013 -1.874 3.738 -3.876 3.773 -2.025 0.007 -4.05 0.001 -6.074 0.003V21.266c1.967 0.465 4.029 0.662 6.036 0.354 1.199 -0.193 2.512 -0.782 2.918 -2.026 0.299 -1.064 0.131 -2.184 0.175 -3.277v-2.537h-3.472c-0.016 1.678 0.032 3.359 -0.025 5.034 -0.094 1.03 -1.114 1.685 -2.085 1.65 -1.205 0.013 -3.592 -0.873 -3.592 -0.873 -0.006 -3.144 0.035 -7.08 0.052 -10.213\"\n    />\n    <path\n      id=\"path3500_1_\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"824.7424\"\n      y1=\"333.7813\"\n      x2=\"825.741\"\n      y2=\"333.7813\"\n      gradientTransform=\"matrix(132.9583 0 0 -323.0276 -109347.922 108056.266)\"\n      d=\"\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #6e2b2f\" />\n      <stop offset=\"1\" style=\"stop-color: #e30138\" />\n    </path>\n    <path\n      id=\"path3500\"\n      sketch:type=\"MSShapeGroup\"\n      fill=\"url(#path3500_1_)\"\n      d=\"M23.229 14.804c-0.183 0.039 -0.037 -0.623 -0.084 -0.873 0.012 -1.586 -0.026 -3.174 0.021 -4.759 0.156 -2.012 2.024 -3.669 4.03 -3.622h5.908c-0.006 6.816 0.011 13.633 -0.008 20.449 -0.078 2.013 -1.874 3.737 -3.876 3.773 -2.025 0.008 -4.05 0.001 -6.075 0.003V20.453c1.383 1.135 3.262 1.311 4.985 1.314 1.299 0 2.59 -0.201 3.851 -0.5V19.559c-1.421 0.708 -3.093 1.158 -4.668 0.751 -1.099 -0.274 -1.897 -1.336 -1.879 -2.47 -0.127 -1.18 0.564 -2.425 1.723 -2.776 1.439 -0.451 3.008 -0.106 4.357 0.48 0.289 0.151 0.582 0.339 0.467 -0.144v-1.342c-2.256 -0.537 -4.658 -0.734 -6.925 -0.15 -0.656 0.185 -1.295 0.466 -1.828 0.897\"\n    />\n  </g>\n</svg>\n" }]
+        }] });
+
+class IconMastercardComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconMastercardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IconMastercardComponent, isStandalone: true, selector: "icon-mastercard", ngImport: i0, template: "<svg width=\"22\" height=\"22\" viewBox=\"0 -4.069 36.188 36.188\" xmlns=\"http://www.w3.org/2000/svg\">\n  <title>mastercard</title>\n  <g>\n    <path\n      d=\"M6.554 27.988v-1.864c0 -0.715 -0.435 -1.18 -1.149 -1.18 -0.375 0 -0.776 0.124 -1.056 0.525 -0.217 -0.342 -0.525 -0.525 -0.994 -0.525a1.055 1.055 0 0 0 -0.9 0.435v-0.375h-0.59v2.982h0.59v-1.706c0 -0.525 0.31 -0.776 0.745 -0.776s0.683 0.28 0.683 0.776v1.709h0.59v-1.709c0 -0.525 0.31 -0.776 0.745 -0.776s0.683 0.28 0.683 0.776v1.709Z\"\n    />\n\n    <g>\n      <path fill=\"#ff5f00\" d=\"M12.736 2.392H23.515V19.973H12.736V2.392z\" />\n      <path\n        d=\"M13.823 11.182a11.213 11.213 0 0 1 4.255 -8.791 11.182 11.182 0 1 0 0 17.581 11.213 11.213 0 0 1 -4.255 -8.791\"\n        fill=\"#eb001b\"\n      />\n      <path\n        d=\"M36.189 11.182a11.171 11.171 0 0 1 -18.075 8.791 11.207 11.207 0 0 0 0 -17.581 11.171 11.171 0 0 1 18.075 8.791\"\n        fill=\"#f79e1b\"\n      />\n    </g>\n  </g>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconMastercardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'icon-mastercard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg width=\"22\" height=\"22\" viewBox=\"0 -4.069 36.188 36.188\" xmlns=\"http://www.w3.org/2000/svg\">\n  <title>mastercard</title>\n  <g>\n    <path\n      d=\"M6.554 27.988v-1.864c0 -0.715 -0.435 -1.18 -1.149 -1.18 -0.375 0 -0.776 0.124 -1.056 0.525 -0.217 -0.342 -0.525 -0.525 -0.994 -0.525a1.055 1.055 0 0 0 -0.9 0.435v-0.375h-0.59v2.982h0.59v-1.706c0 -0.525 0.31 -0.776 0.745 -0.776s0.683 0.28 0.683 0.776v1.709h0.59v-1.709c0 -0.525 0.31 -0.776 0.745 -0.776s0.683 0.28 0.683 0.776v1.709Z\"\n    />\n\n    <g>\n      <path fill=\"#ff5f00\" d=\"M12.736 2.392H23.515V19.973H12.736V2.392z\" />\n      <path\n        d=\"M13.823 11.182a11.213 11.213 0 0 1 4.255 -8.791 11.182 11.182 0 1 0 0 17.581 11.213 11.213 0 0 1 -4.255 -8.791\"\n        fill=\"#eb001b\"\n      />\n      <path\n        d=\"M36.189 11.182a11.171 11.171 0 0 1 -18.075 8.791 11.207 11.207 0 0 0 0 -17.581 11.171 11.171 0 0 1 18.075 8.791\"\n        fill=\"#f79e1b\"\n      />\n    </g>\n  </g>\n</svg>\n" }]
+        }] });
+
+class IconVerveComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconVerveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IconVerveComponent, isStandalone: true, selector: "icon-verve", ngImport: i0, template: "<svg\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 -10.463 56.25 56.25\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <desc>Created with Sketch.</desc>\n  <defs />\n  <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <g id=\"verve\" fill-rule=\"nonzero\">\n      <path\n        id=\"Rectangle-path\"\n        fill=\"#00425F\"\n        x=\"0\"\n        y=\"0\"\n        width=\"750\"\n        height=\"471\"\n        rx=\"40\"\n        d=\"M3 0H53.25A3 3 0 0 1 56.25 3V32.325A3 3 0 0 1 53.25 35.325H3A3 3 0 0 1 0 32.325V3A3 3 0 0 1 3 0z\"\n      />\n      <path\n        id=\"Oval\"\n        fill=\"#EE312A\"\n        cx=\"156.26347\"\n        cy=\"215.5\"\n        r=\"115.26347\"\n        d=\"M20.365 16.162A8.645 8.645 0 0 1 11.72 24.807A8.645 8.645 0 0 1 3.075 16.162A8.645 8.645 0 0 1 20.365 16.162z\"\n      />\n      <path\n        d=\"M11.72 19.865c-1.933 -4.383 -3.351 -8.477 -3.351 -8.477H5.404s1.804 5.255 5.156 11.827h2.32c3.351 -6.572 5.156 -11.827 5.156 -11.827h-2.964s-1.418 4.094 -3.351 8.477\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n      <path\n        d=\"M53.103 19.32h-5.8s0.129 1.933 2.707 1.933c1.289 0 2.578 -0.387 2.578 -0.387l0.258 2.062s-1.289 0.516 -3.093 0.516c-2.578 0 -4.897 -1.289 -4.897 -4.897 0 -2.835 1.804 -4.64 4.382 -4.64 3.866 0 4.124 3.866 3.866 5.413m-3.995 -3.609c-1.675 0 -1.804 1.804 -1.804 1.804h3.609s-0.129 -1.804 -1.804 -1.804\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n      <path\n        d=\"m33.175 16.256 0.387 -2.062s-2.986 -0.906 -5.413 0.773v8.248h2.578l0 -6.702c1.031 -0.773 2.449 -0.258 2.449 -0.258\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n      <path\n        d=\"M26.131 19.32h-5.8s0.129 1.933 2.707 1.933c1.289 0 2.578 -0.387 2.578 -0.387l0.258 2.062s-1.289 0.516 -3.093 0.516c-2.578 0 -4.897 -1.289 -4.897 -4.897 0 -2.835 1.804 -4.64 4.382 -4.64 3.866 0 4.124 3.866 3.866 5.413m-3.995 -3.609c-1.675 0 -1.804 1.804 -1.804 1.804h3.609s-0.129 -1.804 -1.804 -1.804\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n      <path\n        d=\"M39.435 20.124a40.102 40.102 0 0 1 -1.933 -6.008l-2.577 0s1.289 4.976 3.48 9.099h2.062c2.191 -4.123 3.48 -9.098 3.48 -9.098H41.369a40.125 40.125 0 0 1 -1.933 6.006\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n    </g>\n  </g>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconVerveComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'icon-verve', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 -10.463 56.25 56.25\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n  <desc>Created with Sketch.</desc>\n  <defs />\n  <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <g id=\"verve\" fill-rule=\"nonzero\">\n      <path\n        id=\"Rectangle-path\"\n        fill=\"#00425F\"\n        x=\"0\"\n        y=\"0\"\n        width=\"750\"\n        height=\"471\"\n        rx=\"40\"\n        d=\"M3 0H53.25A3 3 0 0 1 56.25 3V32.325A3 3 0 0 1 53.25 35.325H3A3 3 0 0 1 0 32.325V3A3 3 0 0 1 3 0z\"\n      />\n      <path\n        id=\"Oval\"\n        fill=\"#EE312A\"\n        cx=\"156.26347\"\n        cy=\"215.5\"\n        r=\"115.26347\"\n        d=\"M20.365 16.162A8.645 8.645 0 0 1 11.72 24.807A8.645 8.645 0 0 1 3.075 16.162A8.645 8.645 0 0 1 20.365 16.162z\"\n      />\n      <path\n        d=\"M11.72 19.865c-1.933 -4.383 -3.351 -8.477 -3.351 -8.477H5.404s1.804 5.255 5.156 11.827h2.32c3.351 -6.572 5.156 -11.827 5.156 -11.827h-2.964s-1.418 4.094 -3.351 8.477\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n      <path\n        d=\"M53.103 19.32h-5.8s0.129 1.933 2.707 1.933c1.289 0 2.578 -0.387 2.578 -0.387l0.258 2.062s-1.289 0.516 -3.093 0.516c-2.578 0 -4.897 -1.289 -4.897 -4.897 0 -2.835 1.804 -4.64 4.382 -4.64 3.866 0 4.124 3.866 3.866 5.413m-3.995 -3.609c-1.675 0 -1.804 1.804 -1.804 1.804h3.609s-0.129 -1.804 -1.804 -1.804\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n      <path\n        d=\"m33.175 16.256 0.387 -2.062s-2.986 -0.906 -5.413 0.773v8.248h2.578l0 -6.702c1.031 -0.773 2.449 -0.258 2.449 -0.258\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n      <path\n        d=\"M26.131 19.32h-5.8s0.129 1.933 2.707 1.933c1.289 0 2.578 -0.387 2.578 -0.387l0.258 2.062s-1.289 0.516 -3.093 0.516c-2.578 0 -4.897 -1.289 -4.897 -4.897 0 -2.835 1.804 -4.64 4.382 -4.64 3.866 0 4.124 3.866 3.866 5.413m-3.995 -3.609c-1.675 0 -1.804 1.804 -1.804 1.804h3.609s-0.129 -1.804 -1.804 -1.804\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n      <path\n        d=\"M39.435 20.124a40.102 40.102 0 0 1 -1.933 -6.008l-2.577 0s1.289 4.976 3.48 9.099h2.062c2.191 -4.123 3.48 -9.098 3.48 -9.098H41.369a40.125 40.125 0 0 1 -1.933 6.006\"\n        id=\"Shape\"\n        fill=\"#FFFFFF\"\n      />\n    </g>\n  </g>\n</svg>\n" }]
+        }] });
+
+class IconVisaComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconVisaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IconVisaComponent, isStandalone: true, selector: "icon-visa", ngImport: i0, template: "<svg\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 0 56.25 35.325\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  aria-hidden=\"true\"\n>\n  <title>visa</title>\n  <g id=\"visa\">\n    <path\n      fill=\"#0E4595\"\n      d=\"m20.865 25.067 2.502 -14.682h4.002l-2.504 14.682z\"\n    />\n    <path\n      fill=\"#0E4595\"\n      d=\"M39.323 10.702c-0.793 -0.297 -2.035 -0.617 -3.587 -0.617 -3.954 0 -6.74 1.991 -6.764 4.845 -0.022 2.11 1.989 3.287 3.507 3.989 1.558 0.72 2.081 1.179 2.074 1.821 -0.01 0.984 -1.244 1.434 -2.394 1.434 -1.602 0 -2.453 -0.223 -3.767 -0.771l-0.516 -0.233 -0.562 3.287c0.935 0.41 2.663 0.765 4.458 0.783 4.207 0 6.938 -1.969 6.969 -5.016 0.015 -1.67 -1.051 -2.941 -3.36 -3.989 -1.399 -0.679 -2.255 -1.132 -2.246 -1.82 0 -0.61 0.725 -1.263 2.292 -1.263 1.309 -0.02 2.257 0.265 2.995 0.563l0.359 0.169z\"\n    />\n    <path\n      fill=\"#0E4595\"\n      d=\"M49.621 10.385h-3.092c-0.958 0 -1.675 0.261 -2.096 1.218L38.49 25.058h4.202s0.687 -1.809 0.842 -2.206c0.459 0 4.542 0.006 5.125 0.006 0.12 0.514 0.487 2.2 0.487 2.2h3.713zm-4.906 9.481c0.331 -0.846 1.595 -4.104 1.595 -4.104 -0.024 0.039 0.329 -0.85 0.531 -1.401l0.271 1.266s0.766 3.505 0.926 4.24h-3.322z\"\n    />\n    <path\n      fill=\"#0E4595\"\n      d=\"m3.441 10.385 -0.051 0.305c1.582 0.383 2.995 0.937 4.232 1.627l3.551 12.727 4.234 -0.005 6.3 -14.654h-4.239L13.55 20.397l-0.417 -2.035a6.6 6.6 0 0 0 -0.063 -0.189l-1.362 -6.549c-0.242 -0.93 -0.945 -1.207 -1.814 -1.24z\"\n    />\n  </g>\n</svg>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconVisaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'icon-visa', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 0 56.25 35.325\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  aria-hidden=\"true\"\n>\n  <title>visa</title>\n  <g id=\"visa\">\n    <path\n      fill=\"#0E4595\"\n      d=\"m20.865 25.067 2.502 -14.682h4.002l-2.504 14.682z\"\n    />\n    <path\n      fill=\"#0E4595\"\n      d=\"M39.323 10.702c-0.793 -0.297 -2.035 -0.617 -3.587 -0.617 -3.954 0 -6.74 1.991 -6.764 4.845 -0.022 2.11 1.989 3.287 3.507 3.989 1.558 0.72 2.081 1.179 2.074 1.821 -0.01 0.984 -1.244 1.434 -2.394 1.434 -1.602 0 -2.453 -0.223 -3.767 -0.771l-0.516 -0.233 -0.562 3.287c0.935 0.41 2.663 0.765 4.458 0.783 4.207 0 6.938 -1.969 6.969 -5.016 0.015 -1.67 -1.051 -2.941 -3.36 -3.989 -1.399 -0.679 -2.255 -1.132 -2.246 -1.82 0 -0.61 0.725 -1.263 2.292 -1.263 1.309 -0.02 2.257 0.265 2.995 0.563l0.359 0.169z\"\n    />\n    <path\n      fill=\"#0E4595\"\n      d=\"M49.621 10.385h-3.092c-0.958 0 -1.675 0.261 -2.096 1.218L38.49 25.058h4.202s0.687 -1.809 0.842 -2.206c0.459 0 4.542 0.006 5.125 0.006 0.12 0.514 0.487 2.2 0.487 2.2h3.713zm-4.906 9.481c0.331 -0.846 1.595 -4.104 1.595 -4.104 -0.024 0.039 0.329 -0.85 0.531 -1.401l0.271 1.266s0.766 3.505 0.926 4.24h-3.322z\"\n    />\n    <path\n      fill=\"#0E4595\"\n      d=\"m3.441 10.385 -0.051 0.305c1.582 0.383 2.995 0.937 4.232 1.627l3.551 12.727 4.234 -0.005 6.3 -14.654h-4.239L13.55 20.397l-0.417 -2.035a6.6 6.6 0 0 0 -0.063 -0.189l-1.362 -6.549c-0.242 -0.93 -0.945 -1.207 -1.814 -1.24z\"\n    />\n  </g>\n</svg>" }]
+        }] });
+
+class IconDiscoverComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconDiscoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IconDiscoverComponent, isStandalone: true, selector: "icon-discover", ngImport: i0, template: "<svg\n  fill=\"#000000\"\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 -0.45 2.7 2.7\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M2.52 1.8H0.18A0.18 0.18 0 0 1 0 1.62V0.18A0.18 0.18 0 0 1 0.18 0h2.34A0.18 0.18 0 0 1 2.7 0.18v1.44a0.18 0.18 0 0 1 -0.18 0.18M1.433 0.72a0.193 0.193 0 1 0 0 0.386 0.193 0.193 0 0 0 0 -0.386m0.175 0.011 0.153 0.369h0.038l0.155 -0.369h-0.076l-0.097 0.241 -0.096 -0.241h-0.076zm-0.898 0.256 -0.045 0.044c0.025 0.041 0.069 0.068 0.12 0.068l0.005 0h0q0.004 0 0.008 0c0.064 0 0.116 -0.052 0.116 -0.116v-0.003c0 -0.057 -0.024 -0.083 -0.103 -0.112 -0.042 -0.016 -0.054 -0.026 -0.054 -0.045 0 -0.023 0.022 -0.04 0.052 -0.04a0.073 0.073 0 0 1 0.056 0.029l0 0 0.037 -0.048a0.155 0.155 0 0 0 -0.104 -0.04h-0.002l-0.007 0c-0.057 0 -0.104 0.046 -0.105 0.103v0c0 0.05 0.022 0.075 0.088 0.099 0.019 0.006 0.035 0.013 0.05 0.021l-0.002 -0.001a0.043 0.043 0 0 1 0.021 0.037v0a0.051 0.051 0 0 1 -0.051 0.051l-0.004 0h0c-0.033 0 -0.062 -0.019 -0.075 -0.047l0 -0.001zm0.417 -0.264h-0.001a0.191 0.191 0 0 0 -0.134 0.055 0.187 0.187 0 0 0 0.132 0.32h0.002c0.032 0 0.062 -0.008 0.089 -0.021l-0.001 0.001v-0.082c-0.021 0.024 -0.051 0.039 -0.085 0.039l-0.004 0a0.117 0.117 0 0 1 -0.117 -0.124v0l0 -0.004c0 -0.065 0.052 -0.118 0.117 -0.119H1.125c0.035 0 0.066 0.016 0.088 0.04l0 0v-0.083a0.176 0.176 0 0 0 -0.086 -0.022h-0.001zm1.174 0.223h0.009l0.097 0.144h0.086l-0.113 -0.151a0.096 0.096 0 0 0 0.082 -0.102v0c0 -0.067 -0.046 -0.106 -0.127 -0.106h-0.104v0.359h0.07v-0.144zM1.986 0.731v0.359h0.199v-0.061H2.056v-0.097h0.124v-0.061H2.056v-0.08h0.129v-0.061zm-1.417 0v0.359h0.07V0.731zm-0.329 0v0.359h0.103q0.005 0 0.01 0a0.188 0.188 0 0 0 0.118 -0.042l0 0a0.181 0.181 0 0 0 0.065 -0.138v-0.002a0.178 0.178 0 0 0 -0.194 -0.178l0.001 0zm0.089 0.299h-0.019v-0.238h0.019a0.128 0.128 0 0 1 0.096 0.029l0 0c0.024 0.022 0.039 0.054 0.039 0.089v0.001c0 0.035 -0.015 0.067 -0.039 0.09l0 0a0.132 0.132 0 0 1 -0.097 0.029l0.001 0zm1.992 -0.133h-0.02v-0.109h0.022c0.044 0 0.067 0.018 0.067 0.053 0 0.036 -0.024 0.056 -0.069 0.056z\"\n  />\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconDiscoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'icon-discover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  fill=\"#000000\"\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 -0.45 2.7 2.7\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <path\n    d=\"M2.52 1.8H0.18A0.18 0.18 0 0 1 0 1.62V0.18A0.18 0.18 0 0 1 0.18 0h2.34A0.18 0.18 0 0 1 2.7 0.18v1.44a0.18 0.18 0 0 1 -0.18 0.18M1.433 0.72a0.193 0.193 0 1 0 0 0.386 0.193 0.193 0 0 0 0 -0.386m0.175 0.011 0.153 0.369h0.038l0.155 -0.369h-0.076l-0.097 0.241 -0.096 -0.241h-0.076zm-0.898 0.256 -0.045 0.044c0.025 0.041 0.069 0.068 0.12 0.068l0.005 0h0q0.004 0 0.008 0c0.064 0 0.116 -0.052 0.116 -0.116v-0.003c0 -0.057 -0.024 -0.083 -0.103 -0.112 -0.042 -0.016 -0.054 -0.026 -0.054 -0.045 0 -0.023 0.022 -0.04 0.052 -0.04a0.073 0.073 0 0 1 0.056 0.029l0 0 0.037 -0.048a0.155 0.155 0 0 0 -0.104 -0.04h-0.002l-0.007 0c-0.057 0 -0.104 0.046 -0.105 0.103v0c0 0.05 0.022 0.075 0.088 0.099 0.019 0.006 0.035 0.013 0.05 0.021l-0.002 -0.001a0.043 0.043 0 0 1 0.021 0.037v0a0.051 0.051 0 0 1 -0.051 0.051l-0.004 0h0c-0.033 0 -0.062 -0.019 -0.075 -0.047l0 -0.001zm0.417 -0.264h-0.001a0.191 0.191 0 0 0 -0.134 0.055 0.187 0.187 0 0 0 0.132 0.32h0.002c0.032 0 0.062 -0.008 0.089 -0.021l-0.001 0.001v-0.082c-0.021 0.024 -0.051 0.039 -0.085 0.039l-0.004 0a0.117 0.117 0 0 1 -0.117 -0.124v0l0 -0.004c0 -0.065 0.052 -0.118 0.117 -0.119H1.125c0.035 0 0.066 0.016 0.088 0.04l0 0v-0.083a0.176 0.176 0 0 0 -0.086 -0.022h-0.001zm1.174 0.223h0.009l0.097 0.144h0.086l-0.113 -0.151a0.096 0.096 0 0 0 0.082 -0.102v0c0 -0.067 -0.046 -0.106 -0.127 -0.106h-0.104v0.359h0.07v-0.144zM1.986 0.731v0.359h0.199v-0.061H2.056v-0.097h0.124v-0.061H2.056v-0.08h0.129v-0.061zm-1.417 0v0.359h0.07V0.731zm-0.329 0v0.359h0.103q0.005 0 0.01 0a0.188 0.188 0 0 0 0.118 -0.042l0 0a0.181 0.181 0 0 0 0.065 -0.138v-0.002a0.178 0.178 0 0 0 -0.194 -0.178l0.001 0zm0.089 0.299h-0.019v-0.238h0.019a0.128 0.128 0 0 1 0.096 0.029l0 0c0.024 0.022 0.039 0.054 0.039 0.089v0.001c0 0.035 -0.015 0.067 -0.039 0.09l0 0a0.132 0.132 0 0 1 -0.097 0.029l0.001 0zm1.992 -0.133h-0.02v-0.109h0.022c0.044 0 0.067 0.018 0.067 0.053 0 0.036 -0.024 0.056 -0.069 0.056z\"\n  />\n</svg>\n" }]
+        }] });
+
+class IconDinersComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconDinersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: IconDinersComponent, isStandalone: true, selector: "icon-diners", ngImport: i0, template: "<svg\n  version=\"1.1\"\n  id=\"Layer_1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 0 1.8 1.8\"\n  enable-background=\"new 0 0 24 24\"\n  xmlSpace=\"preserve\"\n>\n  <path\n    fill=\"#FAFAFA\"\n    d=\"M1.5 1.5H0.3c-0.083 0 -0.15 -0.068 -0.15 -0.15V0.45c0 -0.083 0.068 -0.15 0.15 -0.15h1.2c0.083 0 0.15 0.068 0.15 0.15v0.9c0 0.083 -0.068 0.15 -0.15 0.15\"\n  />\n  <path\n    opacity=\"0.12\"\n    fill=\"#020202\"\n    d=\"M1.5 0.3H0.3c-0.083 0 -0.15 0.068 -0.15 0.15v0.9c0 0.083 0.068 0.15 0.15 0.15h1.2c0.083 0 0.15 -0.068 0.15 -0.15V0.45c0 -0.083 -0.068 -0.15 -0.15 -0.15m0.075 1.05c0 0.045 -0.03 0.075 -0.075 0.075H0.3c-0.045 0 -0.075 -0.03 -0.075 -0.075V0.45c0 -0.045 0.03 -0.075 0.075 -0.075h1.2c0.045 0 0.075 0.03 0.075 0.075z\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    fill=\"#303F9F\"\n    d=\"M1.05 1.125h-0.3c-0.128 0 -0.225 -0.098 -0.225 -0.225s0.098 -0.225 0.225 -0.225h0.3c0.128 0 0.225 0.098 0.225 0.225s-0.098 0.225 -0.225 0.225\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    fill=\"#FFFFFF\"\n    d=\"M0.75 0.75c-0.083 0 -0.15 0.068 -0.15 0.15s0.068 0.15 0.15 0.15 0.15 -0.068 0.15 -0.15 -0.068 -0.15 -0.15 -0.15m0 0.225c-0.045 0 -0.075 -0.03 -0.075 -0.075s0.03 -0.075 0.075 -0.075 0.075 0.03 0.075 0.075 -0.03 0.075 -0.075 0.075\"\n  />\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconDinersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'icon-diners', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  version=\"1.1\"\n  id=\"Layer_1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n  width=\"22\"\n  height=\"22\"\n  viewBox=\"0 0 1.8 1.8\"\n  enable-background=\"new 0 0 24 24\"\n  xmlSpace=\"preserve\"\n>\n  <path\n    fill=\"#FAFAFA\"\n    d=\"M1.5 1.5H0.3c-0.083 0 -0.15 -0.068 -0.15 -0.15V0.45c0 -0.083 0.068 -0.15 0.15 -0.15h1.2c0.083 0 0.15 0.068 0.15 0.15v0.9c0 0.083 -0.068 0.15 -0.15 0.15\"\n  />\n  <path\n    opacity=\"0.12\"\n    fill=\"#020202\"\n    d=\"M1.5 0.3H0.3c-0.083 0 -0.15 0.068 -0.15 0.15v0.9c0 0.083 0.068 0.15 0.15 0.15h1.2c0.083 0 0.15 -0.068 0.15 -0.15V0.45c0 -0.083 -0.068 -0.15 -0.15 -0.15m0.075 1.05c0 0.045 -0.03 0.075 -0.075 0.075H0.3c-0.045 0 -0.075 -0.03 -0.075 -0.075V0.45c0 -0.045 0.03 -0.075 0.075 -0.075h1.2c0.045 0 0.075 0.03 0.075 0.075z\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    fill=\"#303F9F\"\n    d=\"M1.05 1.125h-0.3c-0.128 0 -0.225 -0.098 -0.225 -0.225s0.098 -0.225 0.225 -0.225h0.3c0.128 0 0.225 0.098 0.225 0.225s-0.098 0.225 -0.225 0.225\"\n  />\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    fill=\"#FFFFFF\"\n    d=\"M0.75 0.75c-0.083 0 -0.15 0.068 -0.15 0.15s0.068 0.15 0.15 0.15 0.15 -0.068 0.15 -0.15 -0.068 -0.15 -0.15 -0.15m0 0.225c-0.045 0 -0.075 -0.03 -0.075 -0.075s0.03 -0.075 0.075 -0.075 0.075 0.03 0.075 0.075 -0.03 0.075 -0.075 0.075\"\n  />\n</svg>\n" }]
+        }] });
+
+class CardTypeComponent {
+    cardType = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardTypeComponent, isStandalone: true, selector: "base-card-type", inputs: { cardType: "cardType" }, ngImport: i0, template: "@if (cardType) {\n  <div class=\"bg-white p-1 rounded border flex justify-center items-center text-center\">\n    @switch (cardType) {\n      @case ('americanexpress') {\n        <icon-amex />\n      }\n      @case ('mastercard') {\n        <icon-mastercard />\n      }\n      @case ('visa') {\n        <icon-visa />\n      }\n      @case ('discover') {\n        <icon-discover />\n      }\n      @case ('jcb') {\n        <icon-jcb />\n      }\n      @case ('verve') {\n        <icon-verve />\n      }\n      @case ('dinersclub') {\n        <icon-diners />\n      }\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: IconAmexComponent, selector: "icon-amex" }, { kind: "component", type: IconJcbComponent, selector: "icon-jcb" }, { kind: "component", type: IconMastercardComponent, selector: "icon-mastercard" }, { kind: "component", type: IconVerveComponent, selector: "icon-verve" }, { kind: "component", type: IconVisaComponent, selector: "icon-visa" }, { kind: "component", type: IconDiscoverComponent, selector: "icon-discover" }, { kind: "component", type: IconDinersComponent, selector: "icon-diners" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-card-type', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        IconAmexComponent,
+                        IconJcbComponent,
+                        IconMastercardComponent,
+                        IconVerveComponent,
+                        IconVisaComponent,
+                        IconDiscoverComponent,
+                        IconDinersComponent,
+                    ], template: "@if (cardType) {\n  <div class=\"bg-white p-1 rounded border flex justify-center items-center text-center\">\n    @switch (cardType) {\n      @case ('americanexpress') {\n        <icon-amex />\n      }\n      @case ('mastercard') {\n        <icon-mastercard />\n      }\n      @case ('visa') {\n        <icon-visa />\n      }\n      @case ('discover') {\n        <icon-discover />\n      }\n      @case ('jcb') {\n        <icon-jcb />\n      }\n      @case ('verve') {\n        <icon-verve />\n      }\n      @case ('dinersclub') {\n        <icon-diners />\n      }\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { cardType: [{
+                type: Input
+            }] } });
+
 class ResourceService {
     http;
     constructor(http) {
@@ -1916,7 +1924,7 @@ class CheckoutService {
         });
         const apiKey = {
             buzapay: 'api/v1/checkout/card-payment/validate-otp',
-            miden: '',
+            miden: 'api/v1/accrual/card/validate-otp',
         };
         return this.http.post(`${baseUrl}/${apiKey[caller]}`, rest, {
             headers,
@@ -1933,7 +1941,7 @@ class CheckoutService {
         });
         const apiKey = {
             buzapay: 'api/v1/checkout/card-payment/resend-otp',
-            miden: '',
+            miden: 'api/v1/accrual/card/resend-otp',
         };
         return this.http.post(`${baseUrl}/${apiKey[caller]}`, rest, {
             headers,
@@ -2093,7 +2101,7 @@ class PayByCardComponent {
         cardNo: new FormControl('', [Validators.required]),
         expireDate: new FormControl('', [Validators.required]),
         cvv: new FormControl('', [Validators.required]),
-        cardPin: new FormControl(''), // Only required for Verve cards
+        cardPin: new FormControl('', this.paymentObject.currency === 'NGN' ? [Validators.required] : []),
     });
     otpForm = new FormGroup({
         otp: new FormControl('', [Validators.required]),
@@ -2116,18 +2124,7 @@ class PayByCardComponent {
         return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
     }
     cardNumberInputHandler(event) {
-        this.cardType = cardType(event);
-        this.updatePinValidation();
-    }
-    updatePinValidation() {
-        const cardPinControl = this.payForm.get('cardPin');
-        if (this.cardType === 'Verve') {
-            cardPinControl?.setValidators([Validators.required]);
-        }
-        else {
-            cardPinControl?.clearValidators();
-        }
-        cardPinControl?.updateValueAndValidity();
+        this.cardType = cardTypeHandler(event);
     }
     async getAllCountries() {
         this.loadingCountries = true;
@@ -2342,7 +2339,7 @@ class PayByCardComponent {
                     cvv: this.payForm.value.cvv ?? '',
                     cardScheme: this.cardType,
                     nameOnCard: this.payForm.value.customerName ?? '',
-                    ...(this.cardType === 'Verve' && { pin: this.payForm.value.cardPin ?? '' }),
+                    ...(this.paymentObject.currency === 'NGN' && { pin: this.payForm.value.cardPin ?? '' }),
                 };
                 // Get billing details from the form control
                 const billingDetails = {
@@ -2593,7 +2590,7 @@ class PayByCardComponent {
         }).sort((a, b) => a.label.localeCompare(b.label));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, deps: [{ token: ResourceService }, { token: i0.ChangeDetectorRef }, { token: CheckoutService }, { token: EncryptService }, { token: i4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <!-- <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div> -->\n          }\n        </div>\n      </form>\n    }\n\n    <!-- Verve OTP Verification -->\n    @if (formIndex === 2) {\n      <form [formGroup]=\"otpForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"otp\"\n              label=\"OTP\"\n              [required]=\"true\"\n              [validationError]=\"getError('otp', 'otp', 'OTP') || ''\"\n            ></base-input>\n          </div>\n        </div>\n        <p class=\"text-primary text-sm mt-2\">\n          Didn't get OTP?\n          <span\n            [class]=\"isSendingOtp ? '' : 'underline cursor-pointer'\"\n            (click)=\"isSendingOtp ? null : resendOtp()\"\n            >{{ isSendingOtp ? 'Sending...' : 'Resend OTP' }}</span\n          >\n        </p>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex < 2) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex < 2) {\n        <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n          <base-button\n            [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isMakingPayment\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex === 2) {\n        <div class=\"w-full\">\n          <base-button\n            label=\"Validate OTP\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isValidatingOtp\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType", "showBottomText"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PhoneNumberInputComponent, selector: "base-phone-number-input", inputs: ["phoneCodeOptions", "value", "label", "required", "disabled", "loading", "validationError", "hint", "defaultCountryCode", "preventPaste", "showCopyIcon", "containerClassName", "inputClassName", "placeholder"], outputs: ["valueChange", "codeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", caller: "caller", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", onError: "onError" }, ngImport: i0, template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            >\n              <div slot=\"suffix\">\n                <base-card-type [cardType]=\"cardType.toLowerCase()\"></base-card-type>\n              </div>\n            </base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (paymentObject.currency === 'NGN') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n          }\n        </div>\n      </form>\n    }\n\n    <!-- Verve OTP Verification -->\n    @if (formIndex === 2) {\n      <form [formGroup]=\"otpForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"otp\"\n              label=\"OTP\"\n              [required]=\"true\"\n              [validationError]=\"getError('otp', 'otp', 'OTP') || ''\"\n            ></base-input>\n          </div>\n        </div>\n        <p class=\"text-primary text-sm mt-2\">\n          Didn't get OTP?\n          <span\n            [class]=\"isSendingOtp ? '' : 'underline cursor-pointer'\"\n            (click)=\"isSendingOtp ? null : resendOtp()\"\n            >{{ isSendingOtp ? 'Sending...' : 'Resend OTP' }}</span\n          >\n        </p>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex < 2) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex < 2) {\n        <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n          <base-button\n            [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isMakingPayment\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex === 2) {\n        <div class=\"w-full\">\n          <base-button\n            label=\"Validate OTP\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isValidatingOtp\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "caller", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon", "preventPaste", "showBottomText"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType", "showBottomText"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PhoneNumberInputComponent, selector: "base-phone-number-input", inputs: ["phoneCodeOptions", "value", "label", "required", "disabled", "loading", "validationError", "hint", "defaultCountryCode", "preventPaste", "showCopyIcon", "containerClassName", "inputClassName", "placeholder"], outputs: ["valueChange", "codeChange"] }, { kind: "component", type: CardTypeComponent, selector: "base-card-type", inputs: ["cardType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PayByCardComponent, decorators: [{
             type: Component,
@@ -2603,7 +2600,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SelectComponent,
                         ReactiveFormsModule,
                         PhoneNumberInputComponent,
-                    ], template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            ></base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (cardType === 'Verve') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n            <!-- <div class=\"text-sm text-blue-600 mb-4\">\n              <i class=\"fas fa-info-circle mr-1\"></i>\n              Pin is required for Verve cards\n            </div> -->\n          }\n        </div>\n      </form>\n    }\n\n    <!-- Verve OTP Verification -->\n    @if (formIndex === 2) {\n      <form [formGroup]=\"otpForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"otp\"\n              label=\"OTP\"\n              [required]=\"true\"\n              [validationError]=\"getError('otp', 'otp', 'OTP') || ''\"\n            ></base-input>\n          </div>\n        </div>\n        <p class=\"text-primary text-sm mt-2\">\n          Didn't get OTP?\n          <span\n            [class]=\"isSendingOtp ? '' : 'underline cursor-pointer'\"\n            (click)=\"isSendingOtp ? null : resendOtp()\"\n            >{{ isSendingOtp ? 'Sending...' : 'Resend OTP' }}</span\n          >\n        </p>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex < 2) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex < 2) {\n        <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n          <base-button\n            [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isMakingPayment\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex === 2) {\n        <div class=\"w-full\">\n          <base-button\n            label=\"Validate OTP\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isValidatingOtp\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+                        CardTypeComponent,
+                    ], template: "@if (threeDSOpen) {\n  <div class=\"fixed inset-0 z-50 flex items-center justify-center bg-white p-4\">\n    <iframe\n      title=\"Miden 3DS\"\n      [src]=\"threeDSIframeSrc\"\n      class=\"w-full h-full\"\n      sandbox=\"allow-forms allow-scripts allow-same-origin allow-top-navigation\"\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    <!-- Billing Details -->\n    @if (formIndex === 0) {\n      <form [formGroup]=\"billingForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"address1\"\n              label=\"Address Line 1\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"country\"\n              label=\"Select Country\"\n              [required]=\"true\"\n              [options]=\"countries\"\n              [loading]=\"loadingCountries\"\n              [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n              (onSelectChange)=\"getCountryStates($event)\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-select\n              formControlName=\"state\"\n              label=\"Select State\"\n              [required]=\"true\"\n              [options]=\"countryStates\"\n              [loading]=\"loadingStates\"\n              [validationError]=\"getError('billing', 'state', 'State') || ''\"\n            ></base-select>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"city\"\n              label=\"City\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'city', 'City') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2 sm:col-span-1\">\n            <base-input\n              formControlName=\"postalCode\"\n              label=\"Postal Code\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"emailAddress\"\n              label=\"Email\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n            ></base-input>\n          </div>\n\n          <div class=\"col-span-2\">\n            <base-phone-number-input\n              [value]=\"billingForm.get('phoneNumber')?.value ?? ''\"\n              [phoneCodeOptions]=\"phoneCodeOptions\"\n              [defaultCountryCode]=\"defaultCountryCode\"\n              label=\"Phone number\"\n              [preventPaste]=\"true\"\n              [required]=\"true\"\n              [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n              (codeChange)=\"onCodeChange($event)\"\n              (valueChange)=\"onPhoneChange($event)\"\n            ></base-phone-number-input>\n          </div>\n        </div>\n      </form>\n    }\n\n    <!-- Card Details -->\n    @if (formIndex === 1) {\n      <form [formGroup]=\"payForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"customerName\"\n              label=\"Card Name\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n            ></base-input>\n          </div>\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"cardNo\"\n              label=\"Card Number\"\n              [required]=\"true\"\n              mask=\"0000 0000 0000 0000 000\"\n              placeholder=\"0000 0000 0000 0000\"\n              [preventPaste]=\"true\"\n              [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n              (onInputChange)=\"cardNumberInputHandler($event)\"\n            >\n              <div slot=\"suffix\">\n                <base-card-type [cardType]=\"cardType.toLowerCase()\"></base-card-type>\n              </div>\n            </base-input>\n          </div>\n          <base-input\n            formControlName=\"expireDate\"\n            label=\"Expiry Date\"\n            [required]=\"true\"\n            mask=\"00/00\"\n            placeholder=\"00/00\"\n            [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n          ></base-input>\n          <base-input\n            formControlName=\"cvv\"\n            label=\"CVV\"\n            [required]=\"true\"\n            mask=\"000\"\n            placeholder=\"000\"\n            [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n          ></base-input>\n\n          @if (paymentObject.currency === 'NGN') {\n            <base-input\n              formControlName=\"cardPin\"\n              label=\"Card Pin\"\n              type=\"password\"\n              placeholder=\"0000\"\n              mask=\"0000\"\n              [required]=\"true\"\n              [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n            ></base-input>\n          }\n        </div>\n      </form>\n    }\n\n    <!-- Verve OTP Verification -->\n    @if (formIndex === 2) {\n      <form [formGroup]=\"otpForm\">\n        <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n          <div class=\"col-span-2\">\n            <base-input\n              formControlName=\"otp\"\n              label=\"OTP\"\n              [required]=\"true\"\n              [validationError]=\"getError('otp', 'otp', 'OTP') || ''\"\n            ></base-input>\n          </div>\n        </div>\n        <p class=\"text-primary text-sm mt-2\">\n          Didn't get OTP?\n          <span\n            [class]=\"isSendingOtp ? '' : 'underline cursor-pointer'\"\n            (click)=\"isSendingOtp ? null : resendOtp()\"\n            >{{ isSendingOtp ? 'Sending...' : 'Resend OTP' }}</span\n          >\n        </p>\n      </form>\n    }\n\n    <div class=\"flex items-center justify-between gap-4 mt-6 w-full\">\n      @if (formIndex < 2) {\n        <div class=\"w-1/2\">\n          <base-button\n            label=\"Previous\"\n            type=\"secondary\"\n            [caller]=\"caller\"\n            (onClick)=\"goBack()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex < 2) {\n        <div [class]=\"formIndex === 0 ? 'w-full' : 'w-1/2'\">\n          <base-button\n            [label]=\"formIndex === 0 ? 'Proceed' : 'Pay ' + formatAmountHandler\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isMakingPayment\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n      @if (formIndex === 2) {\n        <div class=\"w-full\">\n          <base-button\n            label=\"Validate OTP\"\n            type=\"primary\"\n            [caller]=\"caller\"\n            [loading]=\"isValidatingOtp\"\n            (onClick)=\"proceedHandler()\"\n          ></base-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: ResourceService }, { type: i0.ChangeDetectorRef }, { type: CheckoutService }, { type: EncryptService }, { type: i4.DomSanitizer }], propDecorators: { secretKey: [{
                 type: Input
             }], environment: [{
@@ -2742,9 +2740,10 @@ class PayByStableCoinComponent {
         this.loadingStableCoins = true;
         await this.resource.getStableCoins(this.environment, this.caller).subscribe({
             next: async (response) => {
+                const newResponse = this.caller === 'buzapay' ? response.data : response.stableCoins;
                 if (response?.isSuccessful) {
                     this.stableCoins =
-                        response.data?.map((c) => ({
+                        newResponse?.map((c) => ({
                             label: c.name,
                             value: c.name,
                         })) ?? [];
@@ -3112,5 +3111,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BZP_CONFIG, BZP_CORRELATION_ID, BackComponent, ButtonComponent, COUNTRIES, CardComponent, CardSchemes, CheckoutService, CircleCountdownComponent, CopyComponent, CurrencyAmountComponent, EncryptService, HintComponent, IconArrowSwapComponent, IconBuzapayIconComponent, IconCardsComponent, IconCheckCircleComponent, IconChevronDownComponent, IconChevronLeftComponent, IconChevronUpComponent, IconCloseComponent, IconCoinComponent, IconCopySuccessComponent, IconCourthouseComponent, IconLoaderComponent, IconLockComponent, IconMidenLogoComponent, IconQrCodeComponent, IconUsdcComponent, IconUsdtComponent, ImageComponent, InputComponent, InputErrorComponent, LabelInfoComponent, MidenPGAngular, PayByCardComponent, PayByStableCoinComponent, PayByTransferComponent, RadioGroupComponent, ResourceService, SelectComponent, SuccessComponent, apiBaseUrl, buildDeviceInformation, cardType, checkObjectTruthy, currencySign, detect, formatAmount, getBaseAppUrl, getBaseUrl, getQueryParams, getValidationErrorMessage, provideMidenPG, restrictToNumericKeys, toastConfig, truncateString, urlValidator };
+export { BZP_CONFIG, BZP_CORRELATION_ID, BackComponent, ButtonComponent, COUNTRIES, CardComponent, CheckoutService, CircleCountdownComponent, CopyComponent, CurrencyAmountComponent, EncryptService, HintComponent, IconArrowSwapComponent, IconBuzapayIconComponent, IconCardsComponent, IconCheckCircleComponent, IconChevronDownComponent, IconChevronLeftComponent, IconChevronUpComponent, IconCloseComponent, IconCoinComponent, IconCopySuccessComponent, IconCourthouseComponent, IconLoaderComponent, IconLockComponent, IconMidenLogoComponent, IconQrCodeComponent, IconUsdcComponent, IconUsdtComponent, ImageComponent, InputComponent, InputErrorComponent, LabelInfoComponent, MidenPGAngular, PayByCardComponent, PayByStableCoinComponent, PayByTransferComponent, RadioGroupComponent, ResourceService, SelectComponent, SuccessComponent, apiBaseUrl, buildDeviceInformation, cardTypeHandler, checkObjectTruthy, currencySign, formatAmount, getBaseAppUrl, getBaseUrl, getQueryParams, getValidationErrorMessage, provideMidenPG, restrictToNumericKeys, toastConfig, truncateString, urlValidator };
 //# sourceMappingURL=miden-npm-angular.mjs.map