@amwaljs/checkout-button 0.3.0 → 0.3.2

package/dist/collection/components/amwal-checkout-button/amwal-checkout-button.js

@@ -1,1954 +1,1780 @@
-import { h } from "@stencil/core";
-import "@ionic/core";
-import { TranslationUtils } from "../../lang/i18n";
-import { UAParser } from "ua-parser-js";
-import { modalController } from "@ionic/core";
+import { h } from '@stencil/core';
+import '@ionic/core';
+import { TranslationUtils } from '../../lang/i18n';
+import UAParser from "ua-parser-js";
+import { modalController } from '@ionic/core';
 // import amwalLogo from './assets/logo-white.svg';
 // import madaLogo from './assets/mada-light-2.svg';
-import applePayLogo from "./assets/Apple_Pay_logo.svg";
+import applePayLogo from './assets/Apple_Pay_logo.svg';
 // import visaLogo from './assets/Visa_Inc._logo.svg';
-import cardLogo from "./assets/card-logo.svg";
+import cardLogo from './assets/card-logo.svg';
 // import masterLogo from './assets/Mastercard-logo.svg';
-import parsePhoneNumber from "libphonenumber-js";
+import parsePhoneNumber from 'libphonenumber-js';
 const showBrandingCache = {};
 export class AmwalCheckoutButton {
-    constructor() {
-        var _a;
-        // private showBranding = false;
-        this.requirePopup = false;
-        this.showButton = this.debug;
-        this.hideIcons = true;
-        /**
-         * The country code of the merchant (e.g. SA)
-         */
-        this.countryCode = "SA";
-        /**
-         * the language of the plugin. supported languages are Arabic ("ar") and English ("en")
-         */
-        this.locale = "en";
-        /**
-         * the label of the button. Either checkout for final checkout or quicky-buy for per product buy
-         */
-        this.label = "Quick Checkout";
-        /**
-         * Dark Mode:
-         *  - on: turns on dark mode
-         *  - off: turns on light mode
-         *  - auto: use customer preference for dark mode
-         */
-        this.darkMode = "off";
-        /**
-         * disables the checkout button
-         */
-        this.disabled = false;
-        /**
-         * addressRequired specifies if shipping address is required or not ("true" or "false")
-         */
-        this.addressRequired = true;
-        /**
-         * showPaymentBrands to show supporeted brands under button values are ("true" or "false")
-         */
-        this.showPaymentBrands = false;
-        /**
-         * showDiscountRibbon to show discount ribbon values are ("true" or "false")
-         */
-        this.showDiscountRibbon = false;
-        /**
-         * street2Required specifies if street 2 is required or not ("true" or "false"). Can only be true if addressRequired is true.
-         */
-        this.street2Required = false;
-        /**
-         * emailRequired specifies if email address is required or not ("true" or "false"). Can only be true if addressRequired is true.
-         */
-        this.emailRequired = true;
-        /**
-         * addressHandshake specifies if address event and ack is activated ("true" or "false")
-         */
-        this.addressHandshake = false;
-        /**
-         * enableDynamicShippingDetails specifies if shipping countries, states and cities will load dynamically or prefilled in the parameters
-         */
-        this.enableDynamicShippingDetails = false;
-        /**
-         * sendExtraAddressFields specifies if extra address fields are sent in amwalAddressUpdate event
-         */
-        this.sendExtraAddressFields = false;
-        /**
-         * shippingMethods an array of shipping methods
-         */
-        this.shippingMethods = [];
-        /**
-         * taxes specifies any additional taxes
-         */
-        this.taxes = 0;
-        /**
-         * discount specifies any discount to be applied
-         */
-        this.discount = 0;
-        /**
-         * fees specifies any fees to be applied
-         */
-        this.fees = 0;
-        /**
-         * uniqueRef a boolean to enforce the uniqueness of refId
-         */
-        this.uniqueRef = false;
-        /**
-         * onlyShowBankInstallment specifies if only bank installments should be shown
-         */
-        this.onlyShowBankInstallment = false;
-        /**
-         * enableAppleCheckout specifies if Apple Checkout is enabled
-         */
-        this.enableAppleCheckout = false;
-        /**
-         * debug flag for verbose printing of debug messages
-         */
-        this.debug = false;
-        /**
-         * debug flag for verbose printing of debug messages
-         */
-        this.showContinueShoppingButton = false;
-        /**
-         * enable triggering a pre pay event to do final task such as order creation
-         */
-        this.enablePrePayTrigger = false;
-        /**
-         * enable triggering a pre checkout click event to do initial tasks such as adding items to carts
-         */
-        this.enablePreCheckoutTrigger = false;
-        /**
-         * Number of installments
-         */
-        this.installmentsCount = 6;
-        /**
-         *  * timelineStyle specifies the style of the timeline in the checkout modal.
-         */
-        this.timelineStyle = 'default';
-        /**
-         *  * timelineFooterText specifies the text to be displayed in the footer of the timeline in the checkout modal.
-         *
-         */
-        this.footerMessage = '';
-        this.waitingForPreCheckoutTriggerAck = false;
-        this.waitingForPrePayTriggerAck = false;
-        this.agent = new UAParser(((_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.userAgent) || '').getResult();
-        this.paymentSuccessful = false;
-        this.orderId = "";
-        this.internallyDisabled = false;
-        this.prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-        this.waitingForAddressAck = false;
-        this.waitingForAddressCountryAck = false;
-        this.waitingForAddressStateAck = false;
+  constructor() {
+    // private showBranding = false;
+    this.requirePopup = false;
+    this.showButton = this.debug;
+    this.waitingForPreCheckoutTriggerAck = false;
+    this.waitingForPrePayTriggerAck = false;
+    this.agent = new UAParser(window.navigator.userAgent).getResult();
+    this.prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    this.waitingForAddressAck = false;
+    this.waitingForAddressCountryAck = false;
+    this.waitingForAddressStateAck = false;
+    this.hideIcons = true;
+    this.merchantId = undefined;
+    this.installmentOptionsUrl = undefined;
+    this.amount = undefined;
+    this.countryCode = "SA";
+    this.locale = "en";
+    this.label = "Quick Checkout";
+    this.darkMode = "off";
+    this.disabled = false;
+    this.addressRequired = true;
+    this.showPaymentBrands = false;
+    this.showDiscountRibbon = false;
+    this.initialAddress = undefined;
+    this.allowedAddressCountries = undefined;
+    this.allowedAddressStates = undefined;
+    this.allowedAddressCities = undefined;
+    this.street2Required = false;
+    this.emailRequired = true;
+    this.initialEmail = undefined;
+    this.initialFirstName = undefined;
+    this.initialLastName = undefined;
+    this.initialPhoneNumber = undefined;
+    this.addressHandshake = false;
+    this.enableDynamicShippingDetails = false;
+    this.sendExtraAddressFields = false;
+    this.shippingMethods = [];
+    this.taxes = 0;
+    this.discount = 0;
+    this.discountDescription = undefined;
+    this.fees = 0;
+    this.feesDescription = undefined;
+    this.refId = undefined;
+    this.uniqueRef = false;
+    this.onlyShowBankInstallment = false;
+    this.enableAppleCheckout = false;
+    this.apiUrl = undefined;
+    this.payUrl = undefined;
+    this.debug = false;
+    this.showContinueShoppingButton = false;
+    this.enablePrePayTrigger = false;
+    this.enablePreCheckoutTrigger = false;
+    this.postcodeOptionalCountries = undefined;
+    this.installmentsCount = 6;
+    this.timelineStyle = 'default';
+    this.footerMessage = '';
+    this.result = undefined;
+    this.paymentSuccessful = false;
+    this.orderId = "";
+    this.dark = undefined;
+    this.internallyDisabled = false;
+  }
+  /**
+   * Get the backend URL - uses custom apiUrl prop if provided, otherwise falls back to process.env.BACKEND_URL
+   */
+  getApiUrl() {
+    return this.apiUrl || (typeof process !== 'undefined' ? process.env.BACKEND_URL : null) || 'https://backend.sa.amwal.tech';
+  }
+  /**
+   * Get the payment page URL - uses custom payUrl prop if provided, otherwise falls back to process.env.PAY_URL
+   */
+  getPayUrl() {
+    return this.payUrl || (typeof process !== 'undefined' ? process.env.PAY_URL : null) || 'https://pay.sa.amwal.tech';
+  }
+  prePayCheckoutAckHandler(event) {
+    this.debugMsg("Pre Checkout Trigger Ack Received");
+    this.debugMsg("Current Amount: ", this.amount);
+    this.debugMsg("Current Taxes: ", this.taxes);
+    this.debugMsg("Current Discount: ", this.discount);
+    this.debugMsg("Current Fees: ", this.fees);
+    this.debugMsg("Order Details: ", event.detail);
+    event.detail.locale = this.locale;
+    if (this.waitingForPreCheckoutTriggerAck) {
+      this.waitingForPreCheckoutTriggerAck = false;
+      this.createTransaction(Object.assign({}, event.detail));
     }
-    /**
-     * Get the backend URL - uses custom apiUrl prop if provided, otherwise falls back to process.env.BACKEND_URL
-     */
-    getApiUrl() {
-        return this.apiUrl || (typeof process !== 'undefined' ? process.env.BACKEND_URL : null) || 'https://backend.sa.amwal.tech';
+    else {
+      this.debugMsg("Error: Unexpected or repeated amwalPreCheckoutTriggerAck");
     }
-    /**
-     * Get the payment page URL - uses custom payUrl prop if provided, otherwise falls back to process.env.PAY_URL
-     */
-    getPayUrl() {
-        return this.payUrl || (typeof process !== 'undefined' ? process.env.PAY_URL : null) || 'https://pay.sa.amwal.tech';
+  }
+  prePayCheckoutErrorHandler(event) {
+    this.debugMsg(`Pre Checkout Trigger Error Received: ${event.detail}`);
+    if (this.waitingForPreCheckoutTriggerAck) {
+      this.waitingForPreCheckoutTriggerAck = false;
+      this.orderError = event.detail;
+      this.sendOrderDetails();
     }
-    prePayCheckoutAckHandler(event) {
-        this.debugMsg("Pre Checkout Trigger Ack Received");
-        this.debugMsg("Current Amount: ", this.amount);
-        this.debugMsg("Current Taxes: ", this.taxes);
-        this.debugMsg("Current Discount: ", this.discount);
-        this.debugMsg("Current Fees: ", this.fees);
-        this.debugMsg("Order Details: ", event.detail);
-        event.detail.locale = this.locale;
-        if (this.waitingForPreCheckoutTriggerAck) {
-            this.waitingForPreCheckoutTriggerAck = false;
-            this.createTransaction(Object.assign({}, event.detail));
-        }
-        else {
-            this.debugMsg("Error: Unexpected or repeated amwalPreCheckoutTriggerAck");
-        }
+    else {
+      this.debugMsg("Error: Unexpected or repeated amwalPreCheckoutTriggerError");
     }
-    prePayCheckoutErrorHandler(event) {
-        this.debugMsg(`Pre Checkout Trigger Error Received: ${event.detail}`);
-        if (this.waitingForPreCheckoutTriggerAck) {
-            this.waitingForPreCheckoutTriggerAck = false;
-            this.orderError = event.detail;
-            this.sendOrderDetails();
-        }
-        else {
-            this.debugMsg("Error: Unexpected or repeated amwalPreCheckoutTriggerError");
-        }
+  }
+  prePayTriggerAckHandler(event) {
+    var _a;
+    this.debugMsg("Pre Pay Trigger Ack Received");
+    this.debugMsg("Current Shipping Methods: ", this.shippingMethods);
+    this.debugMsg("Current Taxes: ", this.taxes);
+    this.debugMsg("Current Discount: ", this.discount);
+    this.debugMsg("Current Fees: ", this.fees);
+    if (this.waitingForPrePayTriggerAck) {
+      this.waitingForPrePayTriggerAck = false;
+      (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign({ type: 'pre-pay-trigger-ack', shippingMethods: this.shippingMethods, taxes: this.taxes, discount: this.discount, discountDescription: this.discountDescription, fees: this.fees, feesDescription: this.feesDescription, amount: this.amount }, event.detail), '*');
     }
-    prePayTriggerAckHandler(event) {
-        var _a;
-        this.debugMsg("Pre Pay Trigger Ack Received");
-        this.debugMsg("Current Shipping Methods: ", this.shippingMethods);
-        this.debugMsg("Current Taxes: ", this.taxes);
-        this.debugMsg("Current Discount: ", this.discount);
-        this.debugMsg("Current Fees: ", this.fees);
-        if (this.waitingForPrePayTriggerAck) {
-            this.waitingForPrePayTriggerAck = false;
-            (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign({ type: 'pre-pay-trigger-ack', shippingMethods: this.shippingMethods, taxes: this.taxes, discount: this.discount, discountDescription: this.discountDescription, fees: this.fees, feesDescription: this.feesDescription, amount: this.amount }, event.detail), '*');
-        }
-        else {
-            this.debugMsg("Error: Unexpected or repeated amwalPrePayTriggerAck");
-        }
+    else {
+      this.debugMsg("Error: Unexpected or repeated amwalPrePayTriggerAck");
     }
-    prePayTriggerErrorHandler(event) {
-        var _a;
-        this.debugMsg("Pre Pay Trigger Error Received");
-        if (this.waitingForPrePayTriggerAck) {
-            this.waitingForPrePayTriggerAck = false;
-            (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign({ type: 'pre-pay-trigger-error' }, event.detail), '*');
-        }
-        else {
-            this.debugMsg("Error: Unexpected or repeated amwalPrePayTriggerError");
-        }
+  }
+  prePayTriggerErrorHandler(event) {
+    var _a;
+    this.debugMsg("Pre Pay Trigger Error Received");
+    if (this.waitingForPrePayTriggerAck) {
+      this.waitingForPrePayTriggerAck = false;
+      (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign({ type: 'pre-pay-trigger-error' }, event.detail), '*');
     }
-    parseMyArrayProp(newValue, _oldValue) {
-        const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-        if (Array.isArray(newVal)) {
-            this.debugMsg("Setting shippingMethods to:", newVal);
-            this.shippingMethods = newVal;
-        }
-        else {
-            this.debugMsg("Failed to set shippingMethods to:", newVal);
-        }
+    else {
+      this.debugMsg("Error: Unexpected or repeated amwalPrePayTriggerError");
     }
-    parseInitiaalAddressProp(newValue, _oldValue) {
-        this.initialAddress = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+  }
+  parseMyArrayProp(newValue, _oldValue) {
+    const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    if (Array.isArray(newVal)) {
+      this.debugMsg("Setting shippingMethods to:", newVal);
+      this.shippingMethods = newVal;
     }
-    parseAllowedAddressCountries(newValue, _oldValue) {
-        const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-        if (Array.isArray(newVal)) {
-            this.debugMsg("Setting allowedAddressCountries to:", newVal);
-            this.allowedAddressCountries = newVal;
-        }
-        else {
-            this.debugMsg("Failed to set allowedAddressCountries to:", newValue);
-        }
+    else {
+      this.debugMsg("Failed to set shippingMethods to:", newVal);
     }
-    parsepostcodeOptionalCountries(newValue, _oldValue) {
-        const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-        if (Array.isArray(newVal)) {
-            this.debugMsg("Setting postcodeOptionalCountries to:", newVal);
-            this.postcodeOptionalCountries = newVal;
-        }
-        else {
-            this.debugMsg("Failed to set postcodeOptionalCountries to:", newValue);
-        }
+  }
+  parseInitiaalAddressProp(newValue, _oldValue) {
+    this.initialAddress = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+  }
+  parseAllowedAddressCountries(newValue, _oldValue) {
+    const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    if (Array.isArray(newVal)) {
+      this.debugMsg("Setting allowedAddressCountries to:", newVal);
+      this.allowedAddressCountries = newVal;
     }
-    parseAllowedAddressStates(newValue, _oldValue) {
-        const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-        if (newVal) {
-            this.debugMsg("Setting allowedAddressStates to:", newVal);
-            this.allowedAddressStates = newVal;
-        }
-        else {
-            this.debugMsg("Failed to set allowedAddressStates to:", newValue);
-        }
+    else {
+      this.debugMsg("Failed to set allowedAddressCountries to:", newValue);
     }
-    parseAllowedAddressCities(newValue, _oldValue) {
-        const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-        if (newVal) {
-            this.debugMsg("Setting allowedAddressCities to:", newVal);
-            this.allowedAddressCities = newVal;
-        }
-        else {
-            this.debugMsg("Failed to set allowedAddressCities to:", newValue);
-        }
+  }
+  parsepostcodeOptionalCountries(newValue, _oldValue) {
+    const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    if (Array.isArray(newVal)) {
+      this.debugMsg("Setting postcodeOptionalCountries to:", newVal);
+      this.postcodeOptionalCountries = newVal;
     }
-    async updateLocale(newValue) {
-        this.locale = newValue;
-        this.t = await TranslationUtils.useTranslation(this.locale);
+    else {
+      this.debugMsg("Failed to set postcodeOptionalCountries to:", newValue);
     }
-    validateDiscount(newValue, _oldValue) {
-        const isNumber = typeof newValue === 'number';
-        if (isNumber) {
-            if (newValue >= this.amount) {
-                throw new Error('Discount must be less than amount field');
-            }
-        }
-        else {
-            throw new Error('Discount has to be a number');
-        }
+  }
+  parseAllowedAddressStates(newValue, _oldValue) {
+    const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    if (newVal) {
+      this.debugMsg("Setting allowedAddressStates to:", newVal);
+      this.allowedAddressStates = newVal;
     }
-    validateFees(newValue, _oldValue) {
-        const isNumber = typeof newValue === 'number';
-        if (!isNumber) {
-            throw new Error('Fees has to be a number');
-        }
+    else {
+      this.debugMsg("Failed to set allowedAddressStates to:", newValue);
     }
-    toggleDark(matches) {
-        this.dark = this.darkMode == 'on' || (this.darkMode == 'auto' && matches);
+  }
+  parseAllowedAddressCities(newValue, _oldValue) {
+    const newVal = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    if (newVal) {
+      this.debugMsg("Setting allowedAddressCities to:", newVal);
+      this.allowedAddressCities = newVal;
     }
-    debugMsg(...args) {
-        if (this.debug) {
-            console.log(...args);
-        }
+    else {
+      this.debugMsg("Failed to set allowedAddressCities to:", newValue);
     }
-    async componentWillLoad() {
-        var _a, _b, _c, _d;
-        // https://w3c.github.io/webauthn/#dom-publickeycredential-isconditionalmediationavailable
-        const cacheKey = `${this.merchantId}-${this.countryCode}`;
-        let config = showBrandingCache[cacheKey];
-        if (!config) {
-            try {
-                const fromSession = sessionStorage.getItem('amwal-showbrand-' + cacheKey);
-                if (fromSession) {
-                    config = JSON.parse(fromSession);
-                }
-            }
-            catch (e) {
-                console.log(e);
-            }
-        }
-        if (!config) {
-            try {
-                const response = await fetch(`${this.getApiUrl()}/showbrand/`, {
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Amwal': this.merchantId,
-                    }
-                });
-                if (response.ok) {
-                    config = await response.json();
-                    showBrandingCache[cacheKey] = config;
-                    try {
-                        sessionStorage.setItem('amwal-showbrand-' + cacheKey, JSON.stringify(config));
-                    }
-                    catch (e) {
-                        console.log(e);
-                    }
-                }
-            }
-            catch (e) {
-                console.log(e);
-            }
-        }
-        if (config) {
-            // this.showBranding = config.SHOW_BRANDING;
-            this.requirePopup = config.REQUIRE_POPUP && (window.top !== window.self);
-            this.showButton = true;
-        }
-        const publickeycredential = window === null || window === void 0 ? void 0 : window.PublicKeyCredential;
-        const isConditionalMediationAvailable = publickeycredential === null || publickeycredential === void 0 ? void 0 : publickeycredential.isConditionalMediationAvailable;
-        const browserSupportsWebauthnAutofill = isConditionalMediationAvailable ? await isConditionalMediationAvailable() : false;
-        const browserName = (_b = (_a = this.agent) === null || _a === void 0 ? void 0 : _a.browser) === null || _b === void 0 ? void 0 : _b.name;
-        const osName = (_d = (_c = this.agent) === null || _c === void 0 ? void 0 : _c.os) === null || _d === void 0 ? void 0 : _d.name;
-        const firefoxOnMac = browserName === "Firefox" && osName == "Mac OS";
-        const chromeOnNonIOS = ((browserName === "Chrome" || browserName === "Edge") && osName !== "iOS");
-        const supportedBrowsers = ["Chrome", "Edge", "Firefox", "Safari"];
-        const mobileOnSocialMediaBrowsers = (osName === "iOS" || osName === "Android") && !supportedBrowsers.includes(browserName);
-        //const useAppleCheckout = this.enableAppleCheckout && this.isApplePaySupported()
-        this.useModal = !this.requirePopup && !this.isApplePaySupported() &&
-            (browserSupportsWebauthnAutofill
-                || chromeOnNonIOS
-                || firefoxOnMac
-                || mobileOnSocialMediaBrowsers);
-        this.toggleDark(this.prefersDark.matches);
-        this.prefersDark.addEventListener('change', (e) => this.toggleDark(e.matches));
-        this.t = await TranslationUtils.useTranslation(this.locale);
-        this.shippingMethods = JSON.parse(this.el.getAttribute('shipping-methods'));
-        this.initialAddress = JSON.parse(this.el.getAttribute('initial-address'));
-        this.allowedAddressCountries = JSON.parse(this.el.getAttribute('allowed-address-countries'));
-        this.postcodeOptionalCountries = JSON.parse(this.el.getAttribute('postcode-optional-countries'));
-        this.allowedAddressStates = JSON.parse(this.el.getAttribute('allowed-address-states'));
-        this.allowedAddressCities = JSON.parse(this.el.getAttribute('allowed-address-cities'));
+  }
+  async updateLocale(newValue) {
+    this.locale = newValue;
+    this.t = await TranslationUtils.useTranslation(this.locale);
+  }
+  validateDiscount(newValue, _oldValue) {
+    const isNumber = typeof newValue === 'number';
+    if (isNumber) {
+      if (newValue >= this.amount) {
+        throw new Error('Discount must be less than amount field');
+      }
     }
-    componentDidLoad() {
-        this.computeHideIcons(this.el.offsetWidth);
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        this.resizeObserver = new ResizeObserver(entries => entries.forEach(entry => {
-            this.computeHideIcons(entry.contentRect.width);
-        }));
-        this.resizeObserver.observe(this.el.querySelector('ion-button').shadowRoot.querySelector('button'));
+    else {
+      throw new Error('Discount has to be a number');
     }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
+  }
+  validateFees(newValue, _oldValue) {
+    const isNumber = typeof newValue === 'number';
+    if (!isNumber) {
+      throw new Error('Fees has to be a number');
     }
-    sendOrderDetails() {
-        if (this.payWindow && !this.paymentSuccessful) {
-            if (this.orderError) {
-                this.payWindow.postMessage(Object.assign({ type: 'amwal-order-error' }, this.orderError), '*');
-            }
-            else if (this.orderId) {
-                const orderDetails = {
-                    type: 'amwal-order-id',
-                    id: this.orderId,
-                    darkMode: this.darkMode,
-                    lang: this.locale,
-                    addressRequired: this.addressRequired,
-                    street2Required: this.street2Required,
-                    emailRequired: this.emailRequired,
-                    addressHandshake: this.addressHandshake,
-                    sendExtraAddressFields: this.sendExtraAddressFields,
-                    enableDynamicShippingDetails: this.enableDynamicShippingDetails,
-                    enablePrePayTrigger: this.enablePrePayTrigger,
-                    shippingMethods: this.shippingMethods,
-                    taxes: this.taxes,
-                    discount: this.discount,
-                    discountDescription: this.discountDescription,
-                    fees: this.fees,
-                    feesDescription: this.feesDescription,
-                    initialEmail: this.initialEmail,
-                    initialFirstName: this.initialFirstName,
-                    initialLastName: this.initialLastName,
-                    initialPhoneNumber: this.initialPhoneNumber,
-                    initialAddress: this.initialAddress,
-                    allowedAddressCountries: this.allowedAddressCountries,
-                    allowedAddressStates: this.allowedAddressStates,
-                    allowedAddressCities: this.allowedAddressCities,
-                    installmentOptionsUrl: this.installmentOptionsUrl,
-                    postcodeOptionalCountries: this.postcodeOptionalCountries,
-                    onlyShowBankInstallment: this.onlyShowBankInstallment,
-                    enableAppleCheckout: this.enableAppleCheckout
-                };
-                this.payWindow.postMessage(orderDetails, '*');
-                this.debugMsg("Sent Order details: ", orderDetails);
-            }
-        }
+  }
+  toggleDark(matches) {
+    this.dark = this.darkMode == 'on' || (this.darkMode == 'auto' && matches);
+  }
+  debugMsg(...args) {
+    if (this.debug) {
+      console.log(...args);
     }
-    async createTransaction(orderDetails = undefined) {
-        var _a, _b, _c, _d;
-        try {
-            let client_phone_number = undefined;
-            try {
-                const parsedNumber = parsePhoneNumber(this.initialPhoneNumber, this.countryCode);
-                if (parsedNumber && parsedNumber.isValid()) {
-                    client_phone_number = parsedNumber.number;
-                }
-            }
-            catch (err) {
-                console.log(err);
-            }
-            const modalLang = (_b = (_a = orderDetails === null || orderDetails === void 0 ? void 0 : orderDetails.locale) !== null && _a !== void 0 ? _a : this.locale) !== null && _b !== void 0 ? _b : 'en';
-            const payload = Object.assign(Object.assign(Object.assign({ merchantID: this.merchantId, amount: this.amount, taxes: this.taxes, discount: this.discount, fees: this.fees, installmentOptionsUrl: this.installmentOptionsUrl, client_email: this.initialEmail, client_first_name: this.initialFirstName, client_last_name: this.initialLastName, client_phone_number, trx_lang: modalLang, address_details: this.initialAddress }, (orderDetails ? {
-                order_details: orderDetails
-            } : undefined)), (((_c = this.shippingMethods) === null || _c === void 0 ? void 0 : _c.length) == 1 ? {
-                shipping: this.shippingMethods[0].price,
-                shipping_details: this.shippingMethods[0]
-            } : undefined)), (this.refId ? { refId: this.refId, uniqueRef: this.uniqueRef } : undefined));
-            const response = await fetch(`${this.getApiUrl()}/transactions/`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Amwal': this.merchantId,
-                },
-                body: JSON.stringify(Object.assign({}, payload))
-            });
-            this.result = await response.json();
-            if (!response.ok) {
-                throw (_d = this.result.detail) !== null && _d !== void 0 ? _d : response.statusText;
-            }
-            this.orderId = this.result.id;
+  }
+  async componentWillLoad() {
+    // https://w3c.github.io/webauthn/#dom-publickeycredential-isconditionalmediationavailable
+    const cacheKey = `${this.merchantId}-${this.countryCode}`;
+    let config = showBrandingCache[cacheKey];
+    if (!config) {
+      try {
+        const fromSession = sessionStorage.getItem('amwal-showbrand-' + cacheKey);
+        if (fromSession) {
+          config = JSON.parse(fromSession);
         }
-        catch (e) {
+      }
+      catch (e) {
+        console.log(e);
+      }
+    }
+    if (!config) {
+      try {
+        const response = await fetch(`${this.getApiUrl()}/showbrand/`, {
+          headers: {
+            'Content-Type': 'application/json',
+            'Amwal': this.merchantId,
+          }
+        });
+        if (response.ok) {
+          config = await response.json();
+          showBrandingCache[cacheKey] = config;
+          try {
+            sessionStorage.setItem('amwal-showbrand-' + cacheKey, JSON.stringify(config));
+          }
+          catch (e) {
             console.log(e);
-            this.orderError = {
-                description: e.toString(),
-            };
+          }
         }
-        this.sendOrderDetails();
+      }
+      catch (e) {
+        console.log(e);
+      }
     }
-    async handleCheckout() {
-        var _a;
-        this.orderId = undefined;
-        this.orderError = undefined;
-        this.internallyDisabled = true;
-        if (this.useModal) {
-            await this.presentModal();
-        }
-        else {
-            this.openPopup();
-            document.body.classList.add("amwal-overlay-active");
-            const overlayElement = this.el.querySelector('#amwal-overlay-id');
-            if (overlayElement && overlayElement.nodeType === Node.ELEMENT_NODE) {
-                document.body.appendChild(overlayElement);
-            }
-            const timer = setInterval(() => {
-                var _a;
-                // all popup urls shouldn't have "Cross-Origin-Opener-Policy" header set otherwise window.closed will be true
-                // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy
-                if ((_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.closed) {
-                    try {
-                        document.body.classList.remove("amwal-overlay-active");
-                        const overlayElementInBody = document.querySelector('body > #amwal-overlay-id');
-                        const templateContainer = this.el.querySelector('#amwal-overlay-template');
-                        if (overlayElementInBody && templateContainer) {
-                            const overlayElement = document.body.removeChild(overlayElementInBody);
-                            if (overlayElement && overlayElement.nodeType === Node.ELEMENT_NODE) {
-                                templateContainer.appendChild(overlayElement);
-                            }
-                        }
-                        this.sendDismissEvent();
-                    }
-                    catch (err) {
-                        console.log(err);
-                    }
-                    finally {
-                        clearInterval(timer);
-                    }
-                }
-            }, 200);
-        }
-        (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ type: "amwal-lang", lang: this.locale }, '*');
-        if (this.enablePreCheckoutTrigger) {
-            this.waitingForPreCheckoutTriggerAck = true;
-            this.amwalPreCheckoutTrigger.emit();
+    if (config) {
+      // this.showBranding = config.SHOW_BRANDING;
+      this.requirePopup = config.REQUIRE_POPUP && (window.top !== window.self);
+      this.showButton = true;
+    }
+    try {
+      this.t = await TranslationUtils.useTranslation(this.locale);
+    }
+    catch (e) {
+      console.error('Failed to initialize translation:', e);
+    }
+    const publickeycredential = window === null || window === void 0 ? void 0 : window.PublicKeyCredential;
+    const isConditionalMediationAvailable = publickeycredential === null || publickeycredential === void 0 ? void 0 : publickeycredential.isConditionalMediationAvailable;
+    const browserSupportsWebauthnAutofill = isConditionalMediationAvailable ? await isConditionalMediationAvailable() : false;
+    const browserName = this.agent.browser.name;
+    const osName = this.agent.os.name;
+    const firefoxOnMac = browserName === "Firefox" && osName == "Mac OS";
+    const chromeOnNonIOS = ((browserName === "Chrome" || browserName === "Edge") && osName !== "iOS");
+    const supportedBrowsers = ["Chrome", "Edge", "Firefox", "Safari"];
+    const mobileOnSocialMediaBrowsers = (osName === "iOS" || osName === "Android") && !supportedBrowsers.includes(browserName);
+    //const useAppleCheckout = this.enableAppleCheckout && this.isApplePaySupported()
+    this.useModal = !this.requirePopup && !this.isApplePaySupported() &&
+      (browserSupportsWebauthnAutofill
+        || chromeOnNonIOS
+        || firefoxOnMac
+        || mobileOnSocialMediaBrowsers);
+    this.toggleDark(this.prefersDark.matches);
+    this.prefersDark.addEventListener('change', (e) => this.toggleDark(e.matches));
+    this.t = await TranslationUtils.useTranslation(this.locale);
+    this.shippingMethods = JSON.parse(this.el.getAttribute('shipping-methods'));
+    this.initialAddress = JSON.parse(this.el.getAttribute('initial-address'));
+    this.allowedAddressCountries = JSON.parse(this.el.getAttribute('allowed-address-countries'));
+    this.postcodeOptionalCountries = JSON.parse(this.el.getAttribute('postcode-optional-countries'));
+    this.allowedAddressStates = JSON.parse(this.el.getAttribute('allowed-address-states'));
+    this.allowedAddressCities = JSON.parse(this.el.getAttribute('allowed-address-cities'));
+  }
+  componentDidLoad() {
+    this.computeHideIcons(this.el.offsetWidth);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    this.resizeObserver = new ResizeObserver(entries => entries.forEach(entry => {
+      this.computeHideIcons(entry.contentRect.width);
+    }));
+    this.resizeObserver.observe(this.el.querySelector('ion-button').shadowRoot.querySelector('button'));
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  sendOrderDetails() {
+    if (this.payWindow && !this.paymentSuccessful) {
+      if (this.orderError) {
+        this.payWindow.postMessage(Object.assign({ type: 'amwal-order-error' }, this.orderError), '*');
+      }
+      else if (this.orderId) {
+        const orderDetails = {
+          type: 'amwal-order-id',
+          id: this.orderId,
+          darkMode: this.darkMode,
+          lang: this.locale,
+          addressRequired: this.addressRequired,
+          street2Required: this.street2Required,
+          emailRequired: this.emailRequired,
+          addressHandshake: this.addressHandshake,
+          sendExtraAddressFields: this.sendExtraAddressFields,
+          enableDynamicShippingDetails: this.enableDynamicShippingDetails,
+          enablePrePayTrigger: this.enablePrePayTrigger,
+          shippingMethods: this.shippingMethods,
+          taxes: this.taxes,
+          discount: this.discount,
+          discountDescription: this.discountDescription,
+          fees: this.fees,
+          feesDescription: this.feesDescription,
+          initialEmail: this.initialEmail,
+          initialFirstName: this.initialFirstName,
+          initialLastName: this.initialLastName,
+          initialPhoneNumber: this.initialPhoneNumber,
+          initialAddress: this.initialAddress,
+          allowedAddressCountries: this.allowedAddressCountries,
+          allowedAddressStates: this.allowedAddressStates,
+          allowedAddressCities: this.allowedAddressCities,
+          installmentOptionsUrl: this.installmentOptionsUrl,
+          postcodeOptionalCountries: this.postcodeOptionalCountries,
+          onlyShowBankInstallment: this.onlyShowBankInstallment,
+          enableAppleCheckout: this.enableAppleCheckout
+        };
+        this.payWindow.postMessage(orderDetails, '*');
+        this.debugMsg("Sent Order details: ", orderDetails);
+      }
+    }
+  }
+  async createTransaction(orderDetails = undefined) {
+    var _a, _b, _c, _d;
+    try {
+      let client_phone_number = undefined;
+      try {
+        const parsedNumber = parsePhoneNumber(this.initialPhoneNumber, this.countryCode);
+        if (parsedNumber && parsedNumber.isValid()) {
+          client_phone_number = parsedNumber.number;
         }
-        else {
-            this.createTransaction();
+      }
+      catch (err) {
+        console.log(err);
+      }
+      const modalLang = (_b = (_a = orderDetails === null || orderDetails === void 0 ? void 0 : orderDetails.locale) !== null && _a !== void 0 ? _a : this.locale) !== null && _b !== void 0 ? _b : 'en';
+      const payload = Object.assign(Object.assign(Object.assign({ merchantID: this.merchantId, amount: this.amount, taxes: this.taxes, discount: this.discount, fees: this.fees, installmentOptionsUrl: this.installmentOptionsUrl, client_email: this.initialEmail, client_first_name: this.initialFirstName, client_last_name: this.initialLastName, client_phone_number, trx_lang: modalLang, address_details: this.initialAddress }, (orderDetails ? {
+        order_details: orderDetails
+      } : undefined)), (((_c = this.shippingMethods) === null || _c === void 0 ? void 0 : _c.length) == 1 ? {
+        shipping: this.shippingMethods[0].price,
+        shipping_details: this.shippingMethods[0]
+      } : undefined)), (this.refId ? { refId: this.refId, uniqueRef: this.uniqueRef } : undefined));
+      const response = await fetch(`${this.getApiUrl()}/transactions/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Amwal': this.merchantId,
+        },
+        body: JSON.stringify(Object.assign({}, payload))
+      });
+      this.result = await response.json();
+      if (!response.ok) {
+        throw (_d = this.result.detail) !== null && _d !== void 0 ? _d : response.statusText;
+      }
+      this.orderId = this.result.id;
+    }
+    catch (e) {
+      console.log(e);
+      this.orderError = {
+        description: e.toString(),
+      };
+    }
+    this.sendOrderDetails();
+  }
+  async handleCheckout() {
+    var _a;
+    this.orderId = undefined;
+    this.orderError = undefined;
+    this.internallyDisabled = true;
+    if (this.useModal) {
+      await this.presentModal();
+    }
+    else {
+      this.openPopup();
+      document.body.classList.add("amwal-overlay-active");
+      document.body.appendChild(this.el.querySelector('#amwal-overlay-id'));
+      const timer = setInterval(() => {
+        var _a;
+        // all popup urls shouldn't have "Cross-Origin-Opener-Policy" header set otherwise window.closed will be true
+        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy
+        if ((_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.closed) {
+          try {
+            document.body.classList.remove("amwal-overlay-active");
+            const overlayElement = document.body.removeChild(document.querySelector('body > #amwal-overlay-id'));
+            this.el.querySelector('#amwal-overlay-template').appendChild(overlayElement);
+            this.sendDismissEvent();
+          }
+          catch (err) {
+            console.log(err);
+          }
+          finally {
+            clearInterval(timer);
+          }
         }
+      }, 200);
+    }
+    (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ type: "amwal-lang", lang: this.locale }, '*');
+    if (this.enablePreCheckoutTrigger) {
+      this.waitingForPreCheckoutTriggerAck = true;
+      this.amwalPreCheckoutTrigger.emit();
     }
-    async presentModal() {
-        const div = document.createElement('div');
-        div.innerHTML = `
+    else {
+      this.createTransaction();
+    }
+  }
+  async presentModal() {
+    const div = document.createElement('div');
+    div.innerHTML = `
     <iframe
       name="amwal-pay" allow="publickey-credentials-get; geolocation; payment"
       style="flex: 1; border: none;"
       src=${this.getPayUrl()}
       />
     `;
-        this.checkoutModalEl = await modalController.create({
-            component: div,
-            canDismiss: false,
-        });
-        await this.checkoutModalEl.present();
-        const iframeEl = document.getElementsByTagName("iframe").namedItem("amwal-pay");
-        this.payWindow = iframeEl === null || iframeEl === void 0 ? void 0 : iframeEl.contentWindow;
+    this.checkoutModalEl = await modalController.create({
+      component: div,
+      canDismiss: false,
+    });
+    await this.checkoutModalEl.present();
+    const iframeEl = document.getElementsByTagName("iframe").namedItem("amwal-pay");
+    this.payWindow = iframeEl === null || iframeEl === void 0 ? void 0 : iframeEl.contentWindow;
+  }
+  setSuccess(success) {
+    this.paymentSuccessful = success;
+    if (this.paymentSuccessful) {
+      this.amwalCheckoutSuccess.emit({
+        orderId: this.orderId,
+      });
     }
-    setSuccess(success) {
-        this.paymentSuccessful = success;
-        if (this.paymentSuccessful) {
-            this.amwalCheckoutSuccess.emit({
-                orderId: this.orderId,
-            });
-        }
-    }
-    async dismissModal() {
-        if (this.checkoutModalEl) {
-            this.checkoutModalEl.canDismiss = true;
-            await modalController.dismiss();
-            this.checkoutModalEl = undefined;
-        }
-        this.sendDismissEvent();
+  }
+  async dismissModal() {
+    if (this.checkoutModalEl) {
+      this.checkoutModalEl.canDismiss = true;
+      await modalController.dismiss();
+      this.checkoutModalEl = undefined;
     }
-    async sendDismissEvent() {
-        if (this.orderId && !this.paymentSuccessful) {
-            try {
-                const response = await fetch(`${this.getApiUrl()}/transactions/${this.orderId}`);
-                const order = await response.json();
-                this.setSuccess(order.status === 'success');
-            }
-            catch (error) {
-                console.error(error);
-            }
-            ;
-        }
-        this.internallyDisabled = false;
-        this.amwalDismissed.emit({
-            orderId: this.orderId,
-            paymentSuccessful: this.paymentSuccessful
-        });
-        this.orderId = "";
-        this.paymentSuccessful = false;
+    this.sendDismissEvent();
+  }
+  async sendDismissEvent() {
+    if (this.orderId && !this.paymentSuccessful) {
+      try {
+        const response = await fetch(`${this.getApiUrl()}/transactions/${this.orderId}`);
+        const order = await response.json();
+        this.setSuccess(order.status === 'success');
+      }
+      catch (error) {
+        console.error(error);
+      }
+      ;
     }
-    payWindowMessageHandler(ev) {
-        var _a, _b;
-        let match = true;
-        try {
-            const message = JSON.parse(ev.data);
-            if (message.sender === "MF-3DSecure") {
-                const url = message.url;
-                if (url) {
-                    this.payWindow.location.href = url;
-                    return;
-                }
-            }
-        }
-        catch (error) {
-            //console.log(error);
-        }
-        if (ev.data == 'query-dark-mode') {
-            (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
-                type: 'dark-mode',
-                darkMode: this.darkMode,
-            }, '*');
-        }
-        else if (ev.data == 'query-lang') {
-            (_b = this.payWindow) === null || _b === void 0 ? void 0 : _b.postMessage({
-                type: 'lang',
-                lang: this.locale,
-                showContinueShoppingButton: this.showContinueShoppingButton,
-            }, '*');
-        }
-        else if (ev.data == 'query-amwal-order-id') {
-            this.sendOrderDetails();
-        }
-        else if (ev.data === 'dismiss') {
-            this.dismissModal();
-        }
-        else if (this.orderId) {
-            //following messages result in emitted events. to avoid duplicate event firing, only button with orderId is triggered
-            if (ev.data === 'paymentSuccessful') {
-                this.setSuccess(true);
-            }
-            else if (ev.data === 'updateOrderOnPaymentsuccess') {
-                this.updateOrderOnPaymentsuccess.emit({
-                    orderId: this.orderId,
-                });
-            }
-            else if (ev.data.type === 'address-country-update') {
-                this.waitingForAddressCountryAck = true;
-                this.amwalAddressCountryUpdate.emit(Object.assign({}, ev.data));
-            }
-            else if (ev.data.type === 'address-state-update') {
-                this.waitingForAddressStateAck = true;
-                this.amwalAddressStateUpdate.emit(Object.assign({}, ev.data));
-            }
-            else if (ev.data.type == 'amwal-address-update') {
-                this.waitingForAddressAck = true;
-                this.amwalAddressUpdate.emit(Object.assign(Object.assign({}, ev.data.address), { orderId: this.orderId }));
-            }
-            else if (ev.data.type == 'amwal-pre-pay-trigger') {
-                this.waitingForPrePayTriggerAck = true;
-                this.amwalPrePayTrigger.emit(ev.data.transactionDetails);
-            }
-            else {
-                match = false;
-            }
-        }
-        else {
-            match = false;
-        }
-        if (match) {
-            this.debugMsg(ev);
+    this.internallyDisabled = false;
+    this.amwalDismissed.emit({
+      orderId: this.orderId,
+      paymentSuccessful: this.paymentSuccessful
+    });
+    this.orderId = "";
+    this.paymentSuccessful = false;
+  }
+  payWindowMessageHandler(ev) {
+    var _a, _b;
+    let match = true;
+    try {
+      const message = JSON.parse(ev.data);
+      if (message.sender === "MF-3DSecure") {
+        const url = message.url;
+        if (url) {
+          this.payWindow.location.href = url;
+          return;
         }
+      }
     }
-    addressAckHandler() {
-        var _a;
-        this.debugMsg("Address Ack Received");
-        this.debugMsg("Current Shipping Methods: ", this.shippingMethods);
-        this.debugMsg("Current Taxes: ", this.taxes);
-        this.debugMsg("Current Discount: ", this.discount);
-        this.debugMsg("Current Fees: ", this.fees);
-        if (this.waitingForAddressAck) {
-            this.waitingForAddressAck = false;
-            (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
-                type: 'amwal-address-ack',
-                shippingMethods: this.shippingMethods,
-                taxes: this.taxes,
-                discount: this.discount,
-                discountDescription: this.discountDescription,
-                fees: this.fees,
-                feesDescription: this.feesDescription,
-                amount: this.amount,
-            }, '*');
-        }
-        else {
-            this.debugMsg("Error: Unexpected or repeated amwalAddressAck");
-        }
+    catch (error) {
+      //console.log(error);
     }
-    addressTriggerErrorHandler(event) {
-        var _a;
-        this.debugMsg("Address Trigger Error Received");
-        if (this.waitingForAddressAck) {
-            this.waitingForAddressAck = false;
-            (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign({ type: 'amwal-address-trigger-error' }, event.detail), '*');
-        }
-        else {
-            this.debugMsg("Error: Unexpected or repeated amwalAddressTriggerError");
-        }
+    if (ev.data == 'query-dark-mode') {
+      (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+        type: 'dark-mode',
+        darkMode: this.darkMode,
+      }, '*');
     }
-    addressCountryAckHandler() {
-        var _a;
-        if (this.waitingForAddressCountryAck) {
-            this.waitingForAddressCountryAck = false;
-            (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
-                type: 'amwal-address-country-ack',
-                allowedAddressStates: this.allowedAddressStates,
-            }, '*');
-        }
-        else {
-            this.debugMsg("Error: Unexpected or repeated amwalAddressCountryAck");
-        }
+    else if (ev.data == 'query-lang') {
+      (_b = this.payWindow) === null || _b === void 0 ? void 0 : _b.postMessage({
+        type: 'lang',
+        lang: this.locale,
+        showContinueShoppingButton: this.showContinueShoppingButton,
+      }, '*');
     }
-    addressStateAckHandler() {
-        var _a;
-        if (this.waitingForAddressStateAck) {
-            this.waitingForAddressStateAck = false;
-            (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
-                type: 'amwal-address-state-ack',
-                allowedAddressCities: this.allowedAddressCities,
-            }, '*');
-        }
-        else {
-            this.debugMsg("Error: Unexpected or repeated amwalAddressStateAck");
-        }
+    else if (ev.data == 'query-amwal-order-id') {
+      this.sendOrderDetails();
     }
-    openPopup() {
-        var _a;
-        (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.close();
-        const popupWidth = 500;
-        const popupHeight = 860;
-        const popupLeft = window.screenLeft + (screen.width - popupWidth) / 2;
-        const popupTop = window.screenTop + (screen.height - popupHeight) / 4;
-        const strWindowFeatures = `modal=yes, width=${popupWidth}, height=${popupHeight}, top=${popupTop}, left=${popupLeft}`;
-        this.payWindow = window.open(this.getPayUrl(), 'amwal-pay', strWindowFeatures);
-        this.payWindow.focus();
+    else if (ev.data === 'dismiss') {
+      this.dismissModal();
     }
-    checkBrowserType() {
-        var _a, _b;
-        return ((_b = (_a = this.agent) === null || _a === void 0 ? void 0 : _a.browser) === null || _b === void 0 ? void 0 : _b.name) || 'Unknown';
+    else if (this.orderId) {
+      //following messages result in emitted events. to avoid duplicate event firing, only button with orderId is triggered
+      if (ev.data === 'paymentSuccessful') {
+        this.setSuccess(true);
+      }
+      else if (ev.data === 'updateOrderOnPaymentsuccess') {
+        this.updateOrderOnPaymentsuccess.emit({
+          orderId: this.orderId,
+        });
+      }
+      else if (ev.data.type === 'address-country-update') {
+        this.waitingForAddressCountryAck = true;
+        this.amwalAddressCountryUpdate.emit(Object.assign({}, ev.data));
+      }
+      else if (ev.data.type === 'address-state-update') {
+        this.waitingForAddressStateAck = true;
+        this.amwalAddressStateUpdate.emit(Object.assign({}, ev.data));
+      }
+      else if (ev.data.type == 'amwal-address-update') {
+        this.waitingForAddressAck = true;
+        this.amwalAddressUpdate.emit(Object.assign(Object.assign({}, ev.data.address), { orderId: this.orderId }));
+      }
+      else if (ev.data.type == 'amwal-pre-pay-trigger') {
+        this.waitingForPrePayTriggerAck = true;
+        this.amwalPrePayTrigger.emit(ev.data.transactionDetails);
+      }
+      else {
+        match = false;
+      }
     }
-    isApplePaySupported() {
-        var _a;
-        // const osName = this.agent.os.name;
-        // const browserName = this.agent.browser.name;
-        // console.log('browserName ', browserName, ' / osName ', osName)
-        // return osName && browserName && (osName === 'iOS' || osName === 'Mac OS' || osName === 'iPadOS') && (browserName === 'Safari' || browserName === 'Chrome');
-        try {
-            return (_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePayments();
-        }
-        catch (e) {
-            console.error(e);
-        }
-        return false;
+    else {
+      match = false;
     }
-    computeHideIcons(buttonWidth) {
-        if (buttonWidth) {
-            const ribbonShown = this.showDiscountRibbon && this.discount > 0 && this.amount > 0;
-            const appleMaxWidth = ribbonShown ? 270 : 220;
-            const nonAppleMaxWidth = ribbonShown ? 220 : 170;
-            const newHideIcons = buttonWidth < (this.isApplePaySupported() ? appleMaxWidth : nonAppleMaxWidth);
-            if (this.hideIcons !== newHideIcons) {
-                this.hideIcons = newHideIcons;
-            }
-        }
+    if (match) {
+      this.debugMsg(ev);
     }
-    formatNumber(value) {
-        return Number(value.toFixed(2));
+  }
+  addressAckHandler() {
+    var _a;
+    this.debugMsg("Address Ack Received");
+    this.debugMsg("Current Shipping Methods: ", this.shippingMethods);
+    this.debugMsg("Current Taxes: ", this.taxes);
+    this.debugMsg("Current Discount: ", this.discount);
+    this.debugMsg("Current Fees: ", this.fees);
+    if (this.waitingForAddressAck) {
+      this.waitingForAddressAck = false;
+      (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+        type: 'amwal-address-ack',
+        shippingMethods: this.shippingMethods,
+        taxes: this.taxes,
+        discount: this.discount,
+        discountDescription: this.discountDescription,
+        fees: this.fees,
+        feesDescription: this.feesDescription,
+        amount: this.amount,
+      }, '*');
     }
-    getNetAmount() {
-        var _a, _b, _c;
-        const netAmount = this.amount + ((_a = this.taxes) !== null && _a !== void 0 ? _a : 0) + ((_b = this.fees) !== null && _b !== void 0 ? _b : 0) - ((_c = this.discount) !== null && _c !== void 0 ? _c : 0);
-        return this.formatNumber(netAmount);
+    else {
+      this.debugMsg("Error: Unexpected or repeated amwalAddressAck");
     }
-    render() {
-        var _a, _b;
-        return [
-            h("div", { key: 'b76ac6db910ab50712e99980b6eac68fb878b0ac' }, h("link", { key: 'a12ae0412721f6fe7a1dca35b8ce984379c4120b', href: 'https://fonts.googleapis.com/css?family=Cairo', rel: 'stylesheet' }), this.paymentSuccessful ?
-                h("center", null, h("ion-text", null, this.t("Your Payment has been processed successfully!")), ",", h("div", { style: { width: '40px', height: '40px', margin: '10px' }, class: this.paymentSuccessful ? undefined : 'hidden' }, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 50 50", style: { "enable-background": "new 0 0 50 50;" } }, h("circle", { style: { fill: "#25AE88" }, cx: "25", cy: "25", r: "25" }), h("polyline", { style: {
-                        fill: 'none',
-                        stroke: '#FFFFFF',
-                        'stroke-width': '2',
-                        'stroke-linecap': 'round',
-                        'stroke-linejoin': 'round',
-                        'stroke-miterlimit': '10'
-                    }, points: "38,15 22,33 12,25" }))))
-                :
-                    h("center", { hidden: !this.showButton }, h("amwal-installments-timeline", { "enable-installments": this.onlyShowBankInstallment, "installments-count": this.installmentsCount, locale: this.locale, amount: this.getNetAmount(), "timeline-style": this.timelineStyle, "footer-message": this.footerMessage }), h("ion-button", { class: `amwal-checkout-button`, color: "dark", onClick: () => this.handleCheckout(), disabled: this.disabled || this.internallyDisabled }, !this.hideIcons && this.showDiscountRibbon && this.discount > 0 && this.amount > 0 &&
-                        h("div", { class: 'ribbon' }, h("span", { class: 'ribbon-text' }, this.t("OFF"), " ", h("br", null), this.formatNumber((this.discount / (this.amount + ((_a = this.taxes) !== null && _a !== void 0 ? _a : 0) + ((_b = this.fees) !== null && _b !== void 0 ? _b : 0))) * 100) + '%')), h("div", { class: 'payment-brand-class', slot: this.locale === 'ar' ? "start" : "end" }, h("div", null, this.isApplePaySupported() && h("img", { width: 63, src: applePayLogo }), h("img", { width: 60, src: cardLogo }))), this.locale === 'ar' && h("div", { class: "vl" }), h("div", { class: 'button-text' }, this.t(this.label), " "), this.locale === 'en' && h("div", { class: "vl" })))),
-            h("template", { key: 'fe6b3cffd28c8c2a9695ad2387103a9b660f00a5', id: "amwal-overlay-template" }, h("div", { key: 'f31222335364ea7575f04a91c33e16bc06e2e7fb', class: "amwal-overlay", id: "amwal-overlay-id" }, h("div", { key: 'f4c5c1d989b2cea17b6a944ab0c9a9f5958943c5', class: "amwal-overlay-container" }, h("span", { key: 'dc6bf122ed72c8593d77b24554ed42d519bc911f', class: "amwal-overlay-close", onClick: () => { var _a; return (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.close(); } }, "\u2715"), h("p", { key: '99ad5d36b214d269f8ed1cd95d58bfdcb2f83d10' }, this.t("Don't see your checkout window?")), h("a", { key: '261cfe1e083c451e01ee0a3cd4d2529c80582e2d', role: "button", class: "amwal-overlay-button", onClick: () => {
-                    if (this.checkBrowserType() === 'Safari' || !this.payWindow) {
-                        this.openPopup();
-                    }
-                    else {
-                        this.payWindow.focus();
-                    }
-                } }, this.t("Click here")))))
-        ];
+  }
+  addressTriggerErrorHandler(event) {
+    var _a;
+    this.debugMsg("Address Trigger Error Received");
+    if (this.waitingForAddressAck) {
+      this.waitingForAddressAck = false;
+      (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign({ type: 'amwal-address-trigger-error' }, event.detail), '*');
     }
-    static get is() { return "amwal-checkout-button"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["amwal-checkout-button.css"]
-        };
+    else {
+      this.debugMsg("Error: Unexpected or repeated amwalAddressTriggerError");
     }
-    static get styleUrls() {
-        return {
-            "$": ["amwal-checkout-button.css"]
-        };
+  }
+  addressCountryAckHandler() {
+    var _a;
+    if (this.waitingForAddressCountryAck) {
+      this.waitingForAddressCountryAck = false;
+      (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+        type: 'amwal-address-country-ack',
+        allowedAddressStates: this.allowedAddressStates,
+      }, '*');
     }
-    static get properties() {
-        return {
-            "merchantId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "merchantId is the key to use obtained from https://merchant.sa.amwal.tech"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "merchant-id"
-            },
-            "installmentOptionsUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The installment options url is URL for the checkout page in the merchant website"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "installment-options-url"
-            },
-            "amount": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The amount of money to charge the customer"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "amount"
-            },
-            "countryCode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CountryCode",
-                    "resolved": "\"AC\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TA\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"",
-                    "references": {
-                        "CountryCode": {
-                            "location": "import",
-                            "path": "libphonenumber-js",
-                            "id": "node_modules::CountryCode"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The country code of the merchant (e.g. SA)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "country-code",
-                "defaultValue": "\"SA\""
-            },
-            "locale": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "the language of the plugin. supported languages are Arabic (\"ar\") and English (\"en\")"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "locale",
-                "defaultValue": "\"en\""
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"Quick Checkout\" | \"Bank Installments\" | \"Pay with Apple Pay\"",
-                    "resolved": "\"Bank Installments\" | \"Pay with Apple Pay\" | \"Quick Checkout\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "the label of the button. Either checkout for final checkout or quicky-buy for per product buy"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "\"Quick Checkout\""
-            },
-            "darkMode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"on\" | \"off\" | \"auto\"",
-                    "resolved": "\"auto\" | \"off\" | \"on\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Dark Mode:\n - on: turns on dark mode\n - off: turns on light mode\n - auto: use customer preference for dark mode"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dark-mode",
-                "defaultValue": "\"off\""
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "disables the checkout button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "addressRequired": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "addressRequired specifies if shipping address is required or not (\"true\" or \"false\")"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "address-required",
-                "defaultValue": "true"
-            },
-            "showPaymentBrands": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "showPaymentBrands to show supporeted brands under button values are (\"true\" or \"false\")"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-payment-brands",
-                "defaultValue": "false"
-            },
-            "showDiscountRibbon": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "showDiscountRibbon to show discount ribbon values are (\"true\" or \"false\")"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-discount-ribbon",
-                "defaultValue": "false"
-            },
-            "initialAddress": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "IAddress",
-                    "resolved": "IAddress",
-                    "references": {
-                        "IAddress": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::IAddress"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "initialAddress specifies a default address, Country field is country code (two letter ISO country code)"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "allowedAddressCountries": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "allowedAddressCountries specifies an array of allowed countries for the address"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "allowedAddressStates": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{ [index: string]: StateSpecs }",
-                    "resolved": "{ [index: string]: StateSpecs; }",
-                    "references": {
-                        "StateSpecs": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::StateSpecs"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "allowedAddressStates specifies an array of allowed states for the address example {\"SA\":{\"XX1\":\"State 1\",\"XX2\":\"State 2\"},\"US\":{\"US1\":\"State 1\",\"US2\":\"State 2\"}}"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "allowedAddressCities": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{ [index: string]: CitySpecs }",
-                    "resolved": "{ [index: string]: CitySpecs; }",
-                    "references": {
-                        "CitySpecs": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::CitySpecs"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "allowedAddressCities specifies an array of allowed states for the address example {\"SA\":{\"XX1\":[\"Riady\",\"Afif\"],\"XX2\":[\"Jeddah\",\"Makkah\"]},\"US\":{\"US1\":[\"San Jose\",\"San Francisco\"],\"US2\":[\"New york\"]}}"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "street2Required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "street2Required specifies if street 2 is required or not (\"true\" or \"false\"). Can only be true if addressRequired is true."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "street2-required",
-                "defaultValue": "false"
-            },
-            "emailRequired": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "emailRequired specifies if email address is required or not (\"true\" or \"false\"). Can only be true if addressRequired is true."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "email-required",
-                "defaultValue": "true"
-            },
-            "initialEmail": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "initialEmail specifies a default email"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "initial-email"
-            },
-            "initialFirstName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "initialFirstName specifies a default first name"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "initial-first-name"
-            },
-            "initialLastName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "initialLastName specifies a default last name"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "initial-last-name"
-            },
-            "initialPhoneNumber": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "initialPhone specifies a default phone number"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "initial-phone-number"
-            },
-            "addressHandshake": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "addressHandshake specifies if address event and ack is activated (\"true\" or \"false\")"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "address-handshake",
-                "defaultValue": "false"
-            },
-            "enableDynamicShippingDetails": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "enableDynamicShippingDetails specifies if shipping countries, states and cities will load dynamically or prefilled in the parameters"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "enable-dynamic-shipping-details",
-                "defaultValue": "false"
-            },
-            "sendExtraAddressFields": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "sendExtraAddressFields specifies if extra address fields are sent in amwalAddressUpdate event"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "send-extra-address-fields",
-                "defaultValue": "false"
-            },
-            "shippingMethods": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "IShippingMethod[]",
-                    "resolved": "IShippingMethod[]",
-                    "references": {
-                        "IShippingMethod": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::IShippingMethod"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "shippingMethods an array of shipping methods"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "taxes": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "taxes specifies any additional taxes"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "taxes",
-                "defaultValue": "0"
-            },
-            "discount": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "discount specifies any discount to be applied"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "discount",
-                "defaultValue": "0"
-            },
-            "discountDescription": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "discountDescription provides description for the discount"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "discount-description"
-            },
-            "fees": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "fees specifies any fees to be applied"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "fees",
-                "defaultValue": "0"
-            },
-            "feesDescription": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "feesDescription provides description for the fees"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "fees-description"
-            },
-            "refId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "refId an identifier to be included in the payment transaction"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ref-id"
-            },
-            "uniqueRef": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "uniqueRef a boolean to enforce the uniqueness of refId"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "unique-ref",
-                "defaultValue": "false"
-            },
-            "onlyShowBankInstallment": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "onlyShowBankInstallment specifies if only bank installments should be shown"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "only-show-bank-installment",
-                "defaultValue": "false"
-            },
-            "enableAppleCheckout": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "enableAppleCheckout specifies if Apple Checkout is enabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "enable-apple-checkout",
-                "defaultValue": "false"
-            },
-            "apiUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom api URL (optional). If not provided, uses process.env.BACKEND_URL\nExample: 'https://qa.amwal.dev'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "api-url"
-            },
-            "payUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom payment page URL (optional). If not provided, uses process.env.PAY_URL\nExample: 'https://pay.amwal.dev'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "pay-url"
-            },
-            "debug": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "debug flag for verbose printing of debug messages"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "debug",
-                "defaultValue": "false"
-            },
-            "showContinueShoppingButton": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "debug flag for verbose printing of debug messages"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-continue-shopping-button",
-                "defaultValue": "false"
-            },
-            "enablePrePayTrigger": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "enable triggering a pre pay event to do final task such as order creation"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "enable-pre-pay-trigger",
-                "defaultValue": "false"
-            },
-            "enablePreCheckoutTrigger": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "enable triggering a pre checkout click event to do initial tasks such as adding items to carts"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "enable-pre-checkout-trigger",
-                "defaultValue": "false"
-            },
-            "postcodeOptionalCountries": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "enable postal code required option"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "installmentsCount": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Number of installments"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "installments-count",
-                "defaultValue": "6"
-            },
-            "timelineStyle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'default' | 'simple'",
-                    "resolved": "\"default\" | \"simple\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "* timelineStyle specifies the style of the timeline in the checkout modal."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "timeline-style",
-                "defaultValue": "'default'"
-            },
-            "footerMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "* timelineFooterText specifies the text to be displayed in the footer of the timeline in the checkout modal."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "footer-message",
-                "defaultValue": "''"
-            }
-        };
+    else {
+      this.debugMsg("Error: Unexpected or repeated amwalAddressCountryAck");
     }
-    static get states() {
-        return {
-            "hideIcons": {},
-            "result": {},
-            "paymentSuccessful": {},
-            "orderId": {},
-            "dark": {},
-            "internallyDisabled": {}
-        };
+  }
+  addressStateAckHandler() {
+    var _a;
+    if (this.waitingForAddressStateAck) {
+      this.waitingForAddressStateAck = false;
+      (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+        type: 'amwal-address-state-ack',
+        allowedAddressCities: this.allowedAddressCities,
+      }, '*');
     }
-    static get events() {
-        return [{
-                "method": "amwalCheckoutSuccess",
-                "name": "amwalCheckoutSuccess",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "amwalCheckoutSuccess is a dom event fired on success of payment. the event has orderId field which can be used\nto lookup transaction status at https://backend.sa.amwal.tech"
-                },
-                "complexType": {
-                    "original": "AmwalCheckoutStatus",
-                    "resolved": "AmwalCheckoutStatus",
-                    "references": {
-                        "AmwalCheckoutStatus": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::AmwalCheckoutStatus"
-                        }
-                    }
-                }
-            }, {
-                "method": "updateOrderOnPaymentsuccess",
-                "name": "updateOrderOnPaymentsuccess",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "updateOrderOnPaymentsuccess is a dom event fired on success of payment. the event has orderId field which can be used\nto lookup transaction status at https://backend.sa.amwal.tech"
-                },
-                "complexType": {
-                    "original": "AmwalCheckoutStatus",
-                    "resolved": "AmwalCheckoutStatus",
-                    "references": {
-                        "AmwalCheckoutStatus": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::AmwalCheckoutStatus"
-                        }
-                    }
-                }
-            }, {
-                "method": "amwalDismissed",
-                "name": "amwalDismissed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "amwalDismissed is a dom event fired when the amwal modal or popup window is dismissed, event.detail indicates if it's successfull or not (boolean)"
-                },
-                "complexType": {
-                    "original": "AmwalDismissalStatus",
-                    "resolved": "AmwalDismissalStatus",
-                    "references": {
-                        "AmwalDismissalStatus": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::AmwalDismissalStatus"
-                        }
-                    }
-                }
-            }, {
-                "method": "amwalAddressUpdate",
-                "name": "amwalAddressUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "amwalAddressUpdate is a dom event fired on address selection."
-                },
-                "complexType": {
-                    "original": "IAddress",
-                    "resolved": "IAddress",
-                    "references": {
-                        "IAddress": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::IAddress"
-                        }
-                    }
-                }
-            }, {
-                "method": "amwalAddressCountryUpdate",
-                "name": "amwalAddressCountryUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "amwalAddressCountryUpdate is a dom event fired on address country selection."
-                },
-                "complexType": {
-                    "original": "ICountry",
-                    "resolved": "ICountry",
-                    "references": {
-                        "ICountry": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::ICountry"
-                        }
-                    }
-                }
-            }, {
-                "method": "amwalAddressStateUpdate",
-                "name": "amwalAddressStateUpdate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "amwalAddressStateUpdate is a dom event fired on address country selection."
-                },
-                "complexType": {
-                    "original": "IState",
-                    "resolved": "IState",
-                    "references": {
-                        "IState": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::IState"
-                        }
-                    }
-                }
-            }, {
-                "method": "amwalPrePayTrigger",
-                "name": "amwalPrePayTrigger",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "amwalPrePayTrigger is a dom event fired once payment button is clicked before payment is processed. It is\nenabled if enablePrePayTrigger is set. It waits for either amwalPrePayTriggerAck or amwalPrePayTriggerError\nevents to be sent back before proceeding to payment or aborting respectively."
-                },
-                "complexType": {
-                    "original": "ITransactionDetails",
-                    "resolved": "ITransactionDetails",
-                    "references": {
-                        "ITransactionDetails": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::ITransactionDetails"
-                        }
-                    }
-                }
-            }, {
-                "method": "amwalPreCheckoutTrigger",
-                "name": "amwalPreCheckoutTrigger",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "amwalPreCheckoutTrigger is a dom event fired once amwal checkout button is clicked before a transaction is created. It is\nenabled if enablePreCheckoutTrigger is set. It waits for either amwalPreCheckoutTriggerAck or amwalPreCheckoutTriggerError\nevents to be sent back before proceeding with the normal checkout flow."
-                },
-                "complexType": {
-                    "original": "ITransactionDetails",
-                    "resolved": "ITransactionDetails",
-                    "references": {
-                        "ITransactionDetails": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx",
-                            "id": "src/components/amwal-checkout-button/amwal-checkout-button.tsx::ITransactionDetails"
-                        }
-                    }
-                }
-            }];
+    else {
+      this.debugMsg("Error: Unexpected or repeated amwalAddressStateAck");
     }
-    static get methods() {
-        return {
-            "dismissModal": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
+  }
+  openPopup() {
+    var _a;
+    (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.close();
+    const popupWidth = 500;
+    const popupHeight = 860;
+    const popupLeft = window.screenLeft + (screen.width - popupWidth) / 2;
+    const popupTop = window.screenTop + (screen.height - popupHeight) / 4;
+    const strWindowFeatures = `modal=yes, width=${popupWidth}, height=${popupHeight}, top=${popupTop}, left=${popupLeft}`;
+    this.payWindow = window.open(this.getPayUrl(), 'amwal-pay', strWindowFeatures);
+    this.payWindow.focus();
+  }
+  checkBrowserType() {
+    return this.agent.browser.name;
+  }
+  isApplePaySupported() {
+    var _a;
+    // const osName = this.agent.os.name;
+    // const browserName = this.agent.browser.name;
+    // console.log('browserName ', browserName, ' / osName ', osName)
+    // return osName && browserName && (osName === 'iOS' || osName === 'Mac OS' || osName === 'iPadOS') && (browserName === 'Safari' || browserName === 'Chrome');
+    try {
+      return (_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePayments();
     }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "shippingMethods",
-                "methodName": "parseMyArrayProp"
-            }, {
-                "propName": "initialAddress",
-                "methodName": "parseInitiaalAddressProp"
-            }, {
-                "propName": "allowedAddressCountries",
-                "methodName": "parseAllowedAddressCountries"
-            }, {
-                "propName": "postcodeOptionalCountries",
-                "methodName": "parsepostcodeOptionalCountries"
-            }, {
-                "propName": "allowedAddressStates",
-                "methodName": "parseAllowedAddressStates"
-            }, {
-                "propName": "allowedAddressCities",
-                "methodName": "parseAllowedAddressCities"
-            }, {
-                "propName": "locale",
-                "methodName": "updateLocale"
-            }, {
-                "propName": "discount",
-                "methodName": "validateDiscount"
-            }, {
-                "propName": "fees",
-                "methodName": "validateFees"
-            }];
+    catch (e) {
+      console.error(e);
     }
-    static get listeners() {
-        return [{
-                "name": "amwalPreCheckoutTriggerAck",
-                "method": "prePayCheckoutAckHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "amwalPreCheckoutTriggerError",
-                "method": "prePayCheckoutErrorHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "amwalPrePayTriggerAck",
-                "method": "prePayTriggerAckHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "amwalPrePayTriggerError",
-                "method": "prePayTriggerErrorHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "message",
-                "method": "payWindowMessageHandler",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "amwalAddressAck",
-                "method": "addressAckHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "amwalAddressTriggerError",
-                "method": "addressTriggerErrorHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "amwalAddressCountryAck",
-                "method": "addressCountryAckHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "amwalAddressStateAck",
-                "method": "addressStateAckHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
+    return false;
+  }
+  computeHideIcons(buttonWidth) {
+    if (buttonWidth) {
+      const ribbonShown = this.showDiscountRibbon && this.discount > 0 && this.amount > 0;
+      const appleMaxWidth = ribbonShown ? 270 : 220;
+      const nonAppleMaxWidth = ribbonShown ? 220 : 170;
+      const newHideIcons = buttonWidth < (this.isApplePaySupported() ? appleMaxWidth : nonAppleMaxWidth);
+      if (this.hideIcons !== newHideIcons) {
+        this.hideIcons = newHideIcons;
+      }
     }
+  }
+  formatNumber(value) {
+    return Number(value.toFixed(2));
+  }
+  getNetAmount() {
+    var _a, _b, _c;
+    const netAmount = this.amount + ((_a = this.taxes) !== null && _a !== void 0 ? _a : 0) + ((_b = this.fees) !== null && _b !== void 0 ? _b : 0) - ((_c = this.discount) !== null && _c !== void 0 ? _c : 0);
+    return this.formatNumber(netAmount);
+  }
+  render() {
+    var _a, _b;
+    return [
+      h("div", null, h("link", { href: 'https://fonts.googleapis.com/css?family=Cairo', rel: 'stylesheet' }), this.paymentSuccessful ?
+        h("center", null, h("ion-text", null, this.t("Your Payment has been processed successfully!")), ",", h("div", { style: { width: '40px', height: '40px', margin: '10px' }, class: this.paymentSuccessful ? undefined : 'hidden' }, h("svg", { version: "1.1", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 50 50", style: { "enable-background": "new 0 0 50 50;" } }, h("circle", { style: { fill: "#25AE88" }, cx: "25", cy: "25", r: "25" }), h("polyline", { style: {
+            fill: 'none',
+            stroke: '#FFFFFF',
+            'stroke-width': '2',
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round',
+            'stroke-miterlimit': '10'
+          }, points: "38,15 22,33 12,25" }))))
+        :
+          h("center", { hidden: !this.showButton }, h("amwal-installments-timeline", { "enable-installments": this.onlyShowBankInstallment, "installments-count": this.installmentsCount, locale: this.locale, amount: this.getNetAmount(), "timeline-style": this.timelineStyle, "footer-message": this.footerMessage }), h("ion-button", { class: `amwal-checkout-button`, color: "dark", onClick: () => this.handleCheckout(), disabled: this.disabled || this.internallyDisabled }, !this.hideIcons && this.showDiscountRibbon && this.discount > 0 && this.amount > 0 &&
+            h("div", { class: 'ribbon' }, h("span", { class: 'ribbon-text' }, this.t("OFF"), " ", h("br", null), this.formatNumber((this.discount / (this.amount + ((_a = this.taxes) !== null && _a !== void 0 ? _a : 0) + ((_b = this.fees) !== null && _b !== void 0 ? _b : 0))) * 100) + '%')), h("div", { class: 'payment-brand-class', slot: this.locale === 'ar' ? "start" : "end" }, h("div", null, this.isApplePaySupported() && h("img", { width: 63, src: applePayLogo }), h("img", { width: 60, src: cardLogo }))), this.locale === 'ar' && h("div", { class: "vl" }), h("div", { class: 'button-text' }, this.t(this.label), " "), this.locale === 'en' && h("div", { class: "vl" })))),
+      h("template", { id: "amwal-overlay-template" }, h("div", { class: "amwal-overlay", id: "amwal-overlay-id" }, h("div", { class: "amwal-overlay-container" }, h("span", { class: "amwal-overlay-close", onClick: () => { var _a; return (_a = this.payWindow) === null || _a === void 0 ? void 0 : _a.close(); } }, "\u2715"), h("p", null, this.t("Don't see your checkout window?")), h("a", { role: "button", class: "amwal-overlay-button", onClick: () => {
+          if (this.checkBrowserType() === 'Safari' || !this.payWindow) {
+            this.openPopup();
+          }
+          else {
+            this.payWindow.focus();
+          }
+        } }, this.t("Click here")))))
+    ];
+  }
+  static get is() { return "amwal-checkout-button"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["amwal-checkout-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["amwal-checkout-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "merchantId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "merchantId is the key to use obtained from https://merchant.sa.amwal.tech"
+        },
+        "attribute": "merchant-id",
+        "reflect": false
+      },
+      "installmentOptionsUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The installment options url is URL for the checkout page in the merchant website"
+        },
+        "attribute": "installment-options-url",
+        "reflect": false
+      },
+      "amount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The amount of money to charge the customer"
+        },
+        "attribute": "amount",
+        "reflect": false
+      },
+      "countryCode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CountryCode",
+          "resolved": "\"AC\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TA\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"",
+          "references": {
+            "CountryCode": {
+              "location": "import",
+              "path": "libphonenumber-js"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The country code of the merchant (e.g. SA)"
+        },
+        "attribute": "country-code",
+        "reflect": false,
+        "defaultValue": "\"SA\""
+      },
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "the language of the plugin. supported languages are Arabic (\"ar\") and English (\"en\")"
+        },
+        "attribute": "locale",
+        "reflect": false,
+        "defaultValue": "\"en\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"Quick Checkout\" | \"Bank Installments\" | \"Pay with Apple Pay\"",
+          "resolved": "\"Bank Installments\" | \"Pay with Apple Pay\" | \"Quick Checkout\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "the label of the button. Either checkout for final checkout or quicky-buy for per product buy"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"Quick Checkout\""
+      },
+      "darkMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"on\" | \"off\" | \"auto\"",
+          "resolved": "\"auto\" | \"off\" | \"on\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Dark Mode:\n - on: turns on dark mode\n - off: turns on light mode\n - auto: use customer preference for dark mode"
+        },
+        "attribute": "dark-mode",
+        "reflect": false,
+        "defaultValue": "\"off\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "disables the checkout button"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "addressRequired": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "addressRequired specifies if shipping address is required or not (\"true\" or \"false\")"
+        },
+        "attribute": "address-required",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showPaymentBrands": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "showPaymentBrands to show supporeted brands under button values are (\"true\" or \"false\")"
+        },
+        "attribute": "show-payment-brands",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showDiscountRibbon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "showDiscountRibbon to show discount ribbon values are (\"true\" or \"false\")"
+        },
+        "attribute": "show-discount-ribbon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "initialAddress": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IAddress",
+          "resolved": "IAddress",
+          "references": {
+            "IAddress": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "initialAddress specifies a default address, Country field is country code (two letter ISO country code)"
+        }
+      },
+      "allowedAddressCountries": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "allowedAddressCountries specifies an array of allowed countries for the address"
+        }
+      },
+      "allowedAddressStates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ [index: string]: StateSpecs }",
+          "resolved": "{ [index: string]: StateSpecs; }",
+          "references": {
+            "StateSpecs": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "allowedAddressStates specifies an array of allowed states for the address example {\"SA\":{\"XX1\":\"State 1\",\"XX2\":\"State 2\"},\"US\":{\"US1\":\"State 1\",\"US2\":\"State 2\"}}"
+        }
+      },
+      "allowedAddressCities": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ [index: string]: CitySpecs }",
+          "resolved": "{ [index: string]: CitySpecs; }",
+          "references": {
+            "CitySpecs": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "allowedAddressCities specifies an array of allowed states for the address example {\"SA\":{\"XX1\":[\"Riady\",\"Afif\"],\"XX2\":[\"Jeddah\",\"Makkah\"]},\"US\":{\"US1\":[\"San Jose\",\"San Francisco\"],\"US2\":[\"New york\"]}}"
+        }
+      },
+      "street2Required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "street2Required specifies if street 2 is required or not (\"true\" or \"false\"). Can only be true if addressRequired is true."
+        },
+        "attribute": "street2-required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "emailRequired": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "emailRequired specifies if email address is required or not (\"true\" or \"false\"). Can only be true if addressRequired is true."
+        },
+        "attribute": "email-required",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "initialEmail": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "initialEmail specifies a default email"
+        },
+        "attribute": "initial-email",
+        "reflect": false
+      },
+      "initialFirstName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "initialFirstName specifies a default first name"
+        },
+        "attribute": "initial-first-name",
+        "reflect": false
+      },
+      "initialLastName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "initialLastName specifies a default last name"
+        },
+        "attribute": "initial-last-name",
+        "reflect": false
+      },
+      "initialPhoneNumber": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "initialPhone specifies a default phone number"
+        },
+        "attribute": "initial-phone-number",
+        "reflect": false
+      },
+      "addressHandshake": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "addressHandshake specifies if address event and ack is activated (\"true\" or \"false\")"
+        },
+        "attribute": "address-handshake",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableDynamicShippingDetails": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "enableDynamicShippingDetails specifies if shipping countries, states and cities will load dynamically or prefilled in the parameters"
+        },
+        "attribute": "enable-dynamic-shipping-details",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "sendExtraAddressFields": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "sendExtraAddressFields specifies if extra address fields are sent in amwalAddressUpdate event"
+        },
+        "attribute": "send-extra-address-fields",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "shippingMethods": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IShippingMethod[]",
+          "resolved": "IShippingMethod[]",
+          "references": {
+            "IShippingMethod": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "shippingMethods an array of shipping methods"
+        },
+        "defaultValue": "[]"
+      },
+      "taxes": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "taxes specifies any additional taxes"
+        },
+        "attribute": "taxes",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "discount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "discount specifies any discount to be applied"
+        },
+        "attribute": "discount",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "discountDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "discountDescription provides description for the discount"
+        },
+        "attribute": "discount-description",
+        "reflect": false
+      },
+      "fees": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "fees specifies any fees to be applied"
+        },
+        "attribute": "fees",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "feesDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "feesDescription provides description for the fees"
+        },
+        "attribute": "fees-description",
+        "reflect": false
+      },
+      "refId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "refId an identifier to be included in the payment transaction"
+        },
+        "attribute": "ref-id",
+        "reflect": false
+      },
+      "uniqueRef": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "uniqueRef a boolean to enforce the uniqueness of refId"
+        },
+        "attribute": "unique-ref",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "onlyShowBankInstallment": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "onlyShowBankInstallment specifies if only bank installments should be shown"
+        },
+        "attribute": "only-show-bank-installment",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableAppleCheckout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "enableAppleCheckout specifies if Apple Checkout is enabled"
+        },
+        "attribute": "enable-apple-checkout",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "apiUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Custom api URL (optional). If not provided, uses process.env.BACKEND_URL\nExample: 'https://qa.amwal.dev'"
+        },
+        "attribute": "api-url",
+        "reflect": false
+      },
+      "payUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Custom payment page URL (optional). If not provided, uses process.env.PAY_URL\nExample: 'https://pay.amwal.dev'"
+        },
+        "attribute": "pay-url",
+        "reflect": false
+      },
+      "debug": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "debug flag for verbose printing of debug messages"
+        },
+        "attribute": "debug",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showContinueShoppingButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "debug flag for verbose printing of debug messages"
+        },
+        "attribute": "show-continue-shopping-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enablePrePayTrigger": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "enable triggering a pre pay event to do final task such as order creation"
+        },
+        "attribute": "enable-pre-pay-trigger",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enablePreCheckoutTrigger": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "enable triggering a pre checkout click event to do initial tasks such as adding items to carts"
+        },
+        "attribute": "enable-pre-checkout-trigger",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "postcodeOptionalCountries": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "enable postal code required option"
+        }
+      },
+      "installmentsCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number of installments"
+        },
+        "attribute": "installments-count",
+        "reflect": false,
+        "defaultValue": "6"
+      },
+      "timelineStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'simple'",
+          "resolved": "\"default\" | \"simple\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "* timelineStyle specifies the style of the timeline in the checkout modal."
+        },
+        "attribute": "timeline-style",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "footerMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "* timelineFooterText specifies the text to be displayed in the footer of the timeline in the checkout modal."
+        },
+        "attribute": "footer-message",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hideIcons": {},
+      "result": {},
+      "paymentSuccessful": {},
+      "orderId": {},
+      "dark": {},
+      "internallyDisabled": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "amwalCheckoutSuccess",
+        "name": "amwalCheckoutSuccess",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "amwalCheckoutSuccess is a dom event fired on success of payment. the event has orderId field which can be used\nto lookup transaction status at https://backend.sa.amwal.tech"
+        },
+        "complexType": {
+          "original": "AmwalCheckoutStatus",
+          "resolved": "AmwalCheckoutStatus",
+          "references": {
+            "AmwalCheckoutStatus": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "updateOrderOnPaymentsuccess",
+        "name": "updateOrderOnPaymentsuccess",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "updateOrderOnPaymentsuccess is a dom event fired on success of payment. the event has orderId field which can be used\nto lookup transaction status at https://backend.sa.amwal.tech"
+        },
+        "complexType": {
+          "original": "AmwalCheckoutStatus",
+          "resolved": "AmwalCheckoutStatus",
+          "references": {
+            "AmwalCheckoutStatus": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "amwalDismissed",
+        "name": "amwalDismissed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "amwalDismissed is a dom event fired when the amwal modal or popup window is dismissed, event.detail indicates if it's successfull or not (boolean)"
+        },
+        "complexType": {
+          "original": "AmwalDismissalStatus",
+          "resolved": "AmwalDismissalStatus",
+          "references": {
+            "AmwalDismissalStatus": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "amwalAddressUpdate",
+        "name": "amwalAddressUpdate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "amwalAddressUpdate is a dom event fired on address selection."
+        },
+        "complexType": {
+          "original": "IAddress",
+          "resolved": "IAddress",
+          "references": {
+            "IAddress": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "amwalAddressCountryUpdate",
+        "name": "amwalAddressCountryUpdate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "amwalAddressCountryUpdate is a dom event fired on address country selection."
+        },
+        "complexType": {
+          "original": "ICountry",
+          "resolved": "ICountry",
+          "references": {
+            "ICountry": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "amwalAddressStateUpdate",
+        "name": "amwalAddressStateUpdate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "amwalAddressStateUpdate is a dom event fired on address country selection."
+        },
+        "complexType": {
+          "original": "IState",
+          "resolved": "IState",
+          "references": {
+            "IState": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "amwalPrePayTrigger",
+        "name": "amwalPrePayTrigger",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "amwalPrePayTrigger is a dom event fired once payment button is clicked before payment is processed. It is\nenabled if enablePrePayTrigger is set. It waits for either amwalPrePayTriggerAck or amwalPrePayTriggerError\nevents to be sent back before proceeding to payment or aborting respectively."
+        },
+        "complexType": {
+          "original": "ITransactionDetails",
+          "resolved": "ITransactionDetails",
+          "references": {
+            "ITransactionDetails": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "amwalPreCheckoutTrigger",
+        "name": "amwalPreCheckoutTrigger",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "amwalPreCheckoutTrigger is a dom event fired once amwal checkout button is clicked before a transaction is created. It is\nenabled if enablePreCheckoutTrigger is set. It waits for either amwalPreCheckoutTriggerAck or amwalPreCheckoutTriggerError\nevents to be sent back before proceeding with the normal checkout flow."
+        },
+        "complexType": {
+          "original": "ITransactionDetails",
+          "resolved": "ITransactionDetails",
+          "references": {
+            "ITransactionDetails": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-checkout-button/amwal-checkout-button.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "dismissModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "shippingMethods",
+        "methodName": "parseMyArrayProp"
+      }, {
+        "propName": "initialAddress",
+        "methodName": "parseInitiaalAddressProp"
+      }, {
+        "propName": "allowedAddressCountries",
+        "methodName": "parseAllowedAddressCountries"
+      }, {
+        "propName": "postcodeOptionalCountries",
+        "methodName": "parsepostcodeOptionalCountries"
+      }, {
+        "propName": "allowedAddressStates",
+        "methodName": "parseAllowedAddressStates"
+      }, {
+        "propName": "allowedAddressCities",
+        "methodName": "parseAllowedAddressCities"
+      }, {
+        "propName": "locale",
+        "methodName": "updateLocale"
+      }, {
+        "propName": "discount",
+        "methodName": "validateDiscount"
+      }, {
+        "propName": "fees",
+        "methodName": "validateFees"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "amwalPreCheckoutTriggerAck",
+        "method": "prePayCheckoutAckHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "amwalPreCheckoutTriggerError",
+        "method": "prePayCheckoutErrorHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "amwalPrePayTriggerAck",
+        "method": "prePayTriggerAckHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "amwalPrePayTriggerError",
+        "method": "prePayTriggerErrorHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "message",
+        "method": "payWindowMessageHandler",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "amwalAddressAck",
+        "method": "addressAckHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "amwalAddressTriggerError",
+        "method": "addressTriggerErrorHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "amwalAddressCountryAck",
+        "method": "addressCountryAckHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "amwalAddressStateAck",
+        "method": "addressStateAckHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }