@mmpay/browser 0.0.0-stage → 1.3.0

package/dist/esm/index.js

@@ -0,0 +1,1768 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var REQUEST_TIMEOUT_MS = 20000;
+var MMPayApiError = /** @class */ (function (_super) {
+    __extends(MMPayApiError, _super);
+    function MMPayApiError(message, status) {
+        var _this = _super.call(this, message) || this;
+        _this.name = 'MMPayApiError';
+        _this.status = status;
+        Object.setPrototypeOf(_this, MMPayApiError.prototype);
+        return _this;
+    }
+    return MMPayApiError;
+}(Error));
+var MMPayAPI = /** @class */ (function () {
+    function MMPayAPI(baseUrl, environment, publishableKey) {
+        this.tokenKey = null;
+        this.baseUrl = baseUrl.replace(/\/+$/, '');
+        this.environment = environment;
+        this.publishableKey = publishableKey;
+    }
+    MMPayAPI.prototype.setToken = function (token) {
+        this.tokenKey = token;
+    };
+    MMPayAPI.prototype.getToken = function () {
+        return this.tokenKey;
+    };
+    MMPayAPI.prototype.call = function (endpoint_1) {
+        return __awaiter(this, arguments, void 0, function (endpoint, data) {
+            var headers, controller, timeoutId, response, errorText, error_1;
+            if (data === void 0) { data = {}; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        headers = {
+                            'Content-Type': 'application/json',
+                            'Authorization': "Bearer ".concat(this.publishableKey)
+                        };
+                        if (this.tokenKey) {
+                            headers['X-MMPay-Btoken'] = this.tokenKey;
+                        }
+                        controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+                        timeoutId = controller ? setTimeout(function () { return controller.abort(); }, REQUEST_TIMEOUT_MS) : undefined;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 6, 7, 8]);
+                        return [4 /*yield*/, fetch("".concat(this.baseUrl).concat(endpoint), {
+                                method: 'POST',
+                                headers: headers,
+                                body: JSON.stringify(data),
+                                signal: controller ? controller.signal : undefined
+                            })];
+                    case 2:
+                        response = _a.sent();
+                        if (!!response.ok) return [3 /*break*/, 4];
+                        return [4 /*yield*/, response.text()];
+                    case 3:
+                        errorText = _a.sent();
+                        throw new MMPayApiError("API Error (".concat(response.status, "): ").concat(response.statusText, ". Details: ").concat(errorText), response.status);
+                    case 4: return [4 /*yield*/, response.json()];
+                    case 5: return [2 /*return*/, _a.sent()];
+                    case 6:
+                        error_1 = _a.sent();
+                        if (error_1 && error_1.name === 'AbortError') {
+                            throw new MMPayApiError('Request timed out. Please check your connection.', 0);
+                        }
+                        throw error_1;
+                    case 7:
+                        if (timeoutId !== undefined)
+                            clearTimeout(timeoutId);
+                        return [7 /*endfinally*/];
+                    case 8: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MMPayAPI.prototype.createToken = function (payload) {
+        return __awaiter(this, void 0, void 0, function () {
+            var endpoint;
+            return __generator(this, function (_a) {
+                endpoint = "/xpayments/".concat(this.environment, "-token-request");
+                return [2 /*return*/, this.call(endpoint, payload)];
+            });
+        });
+    };
+    MMPayAPI.prototype.showPayment = function (payload) {
+        return __awaiter(this, void 0, void 0, function () {
+            var endpoint;
+            return __generator(this, function (_a) {
+                endpoint = "/xpayments/".concat(this.environment, "-payment-show");
+                return [2 /*return*/, this.call(endpoint, payload)];
+            });
+        });
+    };
+    MMPayAPI.prototype.cancelPayment = function (payload) {
+        return __awaiter(this, void 0, void 0, function () {
+            var endpoint;
+            return __generator(this, function (_a) {
+                endpoint = "/xpayments/".concat(this.environment, "-payment-cancel");
+                return [2 /*return*/, this.call(endpoint, payload)];
+            });
+        });
+    };
+    MMPayAPI.prototype.createPayment = function (payload) {
+        return __awaiter(this, void 0, void 0, function () {
+            var endpoint;
+            return __generator(this, function (_a) {
+                endpoint = "/xpayments/".concat(this.environment, "-payment-create");
+                return [2 /*return*/, this.call(endpoint, payload)];
+            });
+        });
+    };
+    MMPayAPI.prototype.pollPayment = function (payload) {
+        return __awaiter(this, void 0, void 0, function () {
+            var endpoint;
+            return __generator(this, function (_a) {
+                endpoint = "/xpayments/".concat(this.environment, "-payment-polling");
+                return [2 /*return*/, this.call(endpoint, payload)];
+            });
+        });
+    };
+    /**
+     * A WebSocket handshake cannot carry the publishable key or session token,
+     * so the authenticated API issues a short-lived, single-use ticket for it.
+     */
+    MMPayAPI.prototype.createStreamTicket = function (payload) {
+        return __awaiter(this, void 0, void 0, function () {
+            var endpoint;
+            return __generator(this, function (_a) {
+                endpoint = "/xpayments/".concat(this.environment, "-payment-stream-ticket");
+                return [2 /*return*/, this.call(endpoint, payload)];
+            });
+        });
+    };
+    MMPayAPI.prototype.getStreamUrl = function (ticket) {
+        var socketBase = this.baseUrl.replace(/^http/i, 'ws');
+        return "".concat(socketBase, "/xpayments/").concat(this.environment, "-payment-stream?ticket=").concat(encodeURIComponent(ticket));
+    };
+    return MMPayAPI;
+}());
+
+var MAX_SOCKET_FAILURES = 3;
+var SILENCE_TIMEOUT_MS = 45000;
+var MAX_RECONNECT_DELAY_MS = 10000;
+var MIN_POLL_INTERVAL_MS = 2000;
+var CLOSE_SESSION_EXPIRED = 4408;
+var CLOSE_TOO_MANY_CONNECTIONS = 4429;
+/**
+ * Watches one payment until the owner calls `stop()`.
+ *
+ * Status is pushed over a WebSocket. If a socket cannot be established or keeps
+ * dropping (old server, blocking proxy), the watcher quietly degrades to the
+ * HTTP polling endpoint, so a payment is never left unobserved.
+ */
+var PaymentStatusWatcher = /** @class */ (function () {
+    function PaymentStatusWatcher(api, payload, options) {
+        var _this = this;
+        this.api = api;
+        this.payload = payload;
+        this.options = options;
+        this.socket = null;
+        this.stopped = false;
+        this.connecting = false;
+        this.usingPolling = false;
+        this.socketFailures = 0;
+        this.pollIntervalId = undefined;
+        this.reconnectTimeoutId = undefined;
+        this.silenceTimeoutId = undefined;
+        this.onWake = function () { return _this.wake(); };
+        this.onVisibility = function () {
+            if (document.visibilityState === 'visible')
+                _this.wake();
+        };
+    }
+    PaymentStatusWatcher.prototype.start = function () {
+        // Shoppers leave to pay in their banking app; a backgrounded tab may have
+        // its socket frozen, so re-check the moment they come back.
+        document.addEventListener('visibilitychange', this.onVisibility);
+        window.addEventListener('online', this.onWake);
+        window.addEventListener('pageshow', this.onWake);
+        this.checkNow();
+        if (this.options.transport !== 'polling' && typeof WebSocket !== 'undefined') {
+            this.connect();
+        }
+        else {
+            this.startPolling();
+        }
+    };
+    PaymentStatusWatcher.prototype.stop = function () {
+        this.stopped = true;
+        document.removeEventListener('visibilitychange', this.onVisibility);
+        window.removeEventListener('online', this.onWake);
+        window.removeEventListener('pageshow', this.onWake);
+        window.clearInterval(this.pollIntervalId);
+        window.clearTimeout(this.reconnectTimeoutId);
+        window.clearTimeout(this.silenceTimeoutId);
+        this.closeSocket();
+    };
+    PaymentStatusWatcher.prototype.checkNow = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, this.api.pollPayment(this.payload)];
+                    case 1:
+                        response = _a.sent();
+                        if (!this.stopped)
+                            this.options.onStatus(response);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _a.sent();
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PaymentStatusWatcher.prototype.wake = function () {
+        if (this.stopped)
+            return;
+        this.checkNow();
+        if (this.usingPolling || this.connecting)
+            return;
+        if (!this.socket || this.socket.readyState > 1) {
+            window.clearTimeout(this.reconnectTimeoutId);
+            this.connect();
+        }
+    };
+    PaymentStatusWatcher.prototype.connect = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var ticket, error_2, status_1, socket;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.stopped || this.usingPolling || this.connecting)
+                            return [2 /*return*/];
+                        this.connecting = true;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.api.createStreamTicket(this.payload)];
+                    case 2:
+                        ticket = (_a.sent()).ticket;
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_2 = _a.sent();
+                        this.connecting = false;
+                        status_1 = error_2 instanceof MMPayApiError ? error_2.status : 0;
+                        // The server does not offer the stream, or refuses this session.
+                        if (status_1 >= 400 && status_1 < 500 && status_1 !== 429) {
+                            this.startPolling();
+                        }
+                        else {
+                            this.handleSocketFailure();
+                        }
+                        return [2 /*return*/];
+                    case 4:
+                        this.connecting = false;
+                        if (this.stopped)
+                            return [2 /*return*/];
+                        try {
+                            socket = new WebSocket(this.api.getStreamUrl(ticket));
+                        }
+                        catch (error) {
+                            this.handleSocketFailure();
+                            return [2 /*return*/];
+                        }
+                        this.socket = socket;
+                        this.armSilenceTimer();
+                        socket.onmessage = function (event) {
+                            if (socket !== _this.socket || _this.stopped)
+                                return;
+                            // Only a message proves the stream works end to end.
+                            _this.socketFailures = 0;
+                            _this.armSilenceTimer();
+                            _this.notifyConnection('live');
+                            var message = _this.parseMessage(event.data);
+                            if (message && message.type === 'status' && _this.isOwnStatus(message.data)) {
+                                _this.options.onStatus(message.data);
+                            }
+                        };
+                        socket.onclose = function (event) {
+                            if (socket !== _this.socket || _this.stopped)
+                                return;
+                            _this.socket = null;
+                            window.clearTimeout(_this.silenceTimeoutId);
+                            if (event.code === CLOSE_SESSION_EXPIRED)
+                                return;
+                            if (event.code === CLOSE_TOO_MANY_CONNECTIONS) {
+                                _this.startPolling();
+                                return;
+                            }
+                            _this.handleSocketFailure();
+                        };
+                        socket.onerror = function () { };
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PaymentStatusWatcher.prototype.parseMessage = function (data) {
+        if (typeof data !== 'string')
+            return null;
+        try {
+            return JSON.parse(data);
+        }
+        catch (error) {
+            return null;
+        }
+    };
+    PaymentStatusWatcher.prototype.isOwnStatus = function (data) {
+        return !!data && typeof data.status === 'string' && data.orderId === this.payload.orderId;
+    };
+    PaymentStatusWatcher.prototype.handleSocketFailure = function () {
+        var _this = this;
+        if (this.stopped || this.usingPolling)
+            return;
+        this.socketFailures++;
+        this.checkNow();
+        if (this.socketFailures >= MAX_SOCKET_FAILURES && this.options.transport !== 'websocket') {
+            this.startPolling();
+            return;
+        }
+        this.notifyConnection('reconnecting');
+        var backoff = Math.min(MAX_RECONNECT_DELAY_MS, 1000 * Math.pow(2, this.socketFailures - 1));
+        var delay = backoff / 2 + Math.random() * (backoff / 2);
+        window.clearTimeout(this.reconnectTimeoutId);
+        this.reconnectTimeoutId = window.setTimeout(function () { return _this.connect(); }, delay);
+    };
+    PaymentStatusWatcher.prototype.armSilenceTimer = function () {
+        var _this = this;
+        window.clearTimeout(this.silenceTimeoutId);
+        this.silenceTimeoutId = window.setTimeout(function () {
+            // The server sends a heartbeat every 20 seconds. Silence means the
+            // connection is dead even if the browser has not noticed yet.
+            var socket = _this.socket;
+            _this.socket = null;
+            if (socket)
+                _this.discard(socket);
+            _this.handleSocketFailure();
+        }, SILENCE_TIMEOUT_MS);
+    };
+    PaymentStatusWatcher.prototype.startPolling = function () {
+        var _this = this;
+        if (this.stopped || this.usingPolling)
+            return;
+        this.usingPolling = true;
+        window.clearTimeout(this.reconnectTimeoutId);
+        window.clearTimeout(this.silenceTimeoutId);
+        this.closeSocket();
+        this.notifyConnection('live');
+        var interval = Math.max(MIN_POLL_INTERVAL_MS, this.options.pollInterval);
+        this.pollIntervalId = window.setInterval(function () { return _this.checkNow(); }, interval);
+    };
+    PaymentStatusWatcher.prototype.closeSocket = function () {
+        var socket = this.socket;
+        this.socket = null;
+        if (socket)
+            this.discard(socket);
+    };
+    PaymentStatusWatcher.prototype.discard = function (socket) {
+        socket.onmessage = null;
+        socket.onclose = null;
+        socket.onerror = null;
+        try {
+            socket.close();
+        }
+        catch (error) { }
+    };
+    PaymentStatusWatcher.prototype.notifyConnection = function (state) {
+        if (this.options.onConnectionChange)
+            this.options.onConnectionChange(state);
+    };
+    return PaymentStatusWatcher;
+}());
+
+var LANGUAGE_STORAGE_KEY = 'mmpay_lang';
+var en = {
+    'loading.title': 'Connecting',
+    'loading.subtitle': 'Setting up a secure connection...',
+    'qr.scanHint': 'Scan with any MMQR banking app',
+    'qr.poweredBy': 'Payment powered by MyanMyanPay',
+    'qr.orderId': 'Order ID',
+    'qr.refNo': 'MMQR Ref No',
+    'qr.download': 'Download QR Code',
+    'qr.waiting': 'Waiting for payment',
+    'qr.reconnecting': 'Reconnecting...',
+    'qr.loadFailed': 'The QR code could not be displayed.',
+    'qr.retry': 'Try again',
+    'cancel.title': 'Cancel Transaction?',
+    'cancel.body': 'If you haven\'t paid yet, you can safely cancel this process.',
+    'cancel.confirm': 'Stop Process',
+    'cancel.back': 'Go Back',
+    'status.SUCCESS': 'Success',
+    'status.CANCELLED': 'Cancelled',
+    'status.EXPIRED': 'Expired',
+    'status.FAILED': 'Failed',
+    'message.SUCCESS': 'Payment successful.',
+    'message.CANCELLED': 'Payment cancelled.',
+    'message.EXPIRED': 'Payment expired.',
+    'message.FAILED': 'Payment failed.',
+    'message.TIMEOUT': 'Time expired.',
+    'message.ERROR': 'Something went wrong while starting the payment.',
+    'message.ref': 'Ref: {ref}',
+    'action.close': 'Close',
+    'action.language': 'Language'
+};
+var mm = {
+    'loading.title': 'ချိတ်ဆက်နေပါသည်',
+    'loading.subtitle': 'လုံခြုံရေး စနစ်ဖြင့် ချိတ်ဆက်နေပါသည်...',
+    'qr.poweredBy': 'MyanMyanPay ဖြင့် ပေးချေပါ',
+    'qr.orderId': 'အော်ဒါနံပါတ်',
+    'qr.refNo': 'ရည်ညွှန်းနံပါတ်',
+    'qr.download': 'QR ဒေါင်းလုဒ်လုပ်မည်',
+    'cancel.title': 'လုပ်ငန်းစဉ်ကို ပယ်ဖျက်မည်လား?',
+    'cancel.body': 'ငွေမပေးချေရသေးပါက လုပ်ငန်းစဉ်ကို ဘေးကင်းစွာ ပယ်ဖျက်နိုင်ပါသည်။',
+    'cancel.confirm': 'ရပ်တန့်မည်',
+    'cancel.back': 'နောက်သို့',
+    'status.SUCCESS': 'အောင်မြင်ပါသည်',
+    'status.CANCELLED': 'ပယ်ဖျက်လိုက်ပါသည်',
+    'status.EXPIRED': 'သက်တမ်းကုန်သွားပါပြီ',
+    'status.FAILED': 'မအောင်မြင်ပါ',
+    'message.SUCCESS': 'ငွေပေးချေမှု အောင်မြင်ပါပြီ။',
+    'message.CANCELLED': 'ငွေပေးချေမှုကို ပယ်ဖျက်လိုက်ပါသည်။',
+    'message.EXPIRED': 'ငွေပေးချေမှု သက်တမ်းကုန်သွားပါပြီ။',
+    'message.FAILED': 'ငွေပေးချေမှု မအောင်မြင်ပါ။',
+    'message.TIMEOUT': 'သတ်မှတ်ချိန်ကုန်သွားပါပြီ။',
+    'message.ERROR': 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။',
+    'message.ref': 'ရည်ညွှန်းနံပါတ်: {ref}',
+    'action.close': 'ပိတ်မည်',
+    'action.language': 'ဘာသာစကား',
+    // Added in 1.3.0 for the new screens. Everything above was already shipped.
+    'qr.scanHint': 'MMQR လက်ခံသော မည်သည့်ဘဏ်အက်ပ်ဖြင့်မဆို စကင်ဖတ်ပါ',
+    'qr.waiting': 'ငွေပေးချေမှုကို စောင့်ဆိုင်းနေပါသည်',
+    'qr.reconnecting': 'ပြန်လည်ချိတ်ဆက်နေပါသည်...',
+    'qr.loadFailed': 'QR ကုဒ်ကို ပြသ၍မရပါ။',
+    'qr.retry': 'ထပ်မံကြိုးစားမည်'
+};
+var dictionaries = { en: en, mm: mm };
+function normalizeLanguage(value) {
+    if (typeof value !== 'string')
+        return null;
+    var code = value.toLowerCase();
+    if (code === 'mm' || code === 'my' || code.indexOf('my-') === 0)
+        return 'mm';
+    if (code === 'en' || code.indexOf('en-') === 0)
+        return 'en';
+    return null;
+}
+/**
+ * A missing translation falls back to English so a screen can never render
+ * blank text, whichever language is selected.
+ */
+function translate(language, key, params) {
+    var text = dictionaries[language][key] || en[key] || key;
+    if (params) {
+        Object.keys(params).forEach(function (name) {
+            text = text.split('{' + name + '}').join(params[name]);
+        });
+    }
+    return text;
+}
+/**
+ * The shopper's own choice wins, then the merchant's configured language, then
+ * the browser language.
+ */
+function resolveInitialLanguage(preferred) {
+    var stored = null;
+    try {
+        stored = window.localStorage.getItem(LANGUAGE_STORAGE_KEY);
+    }
+    catch (e) { }
+    var browser = typeof navigator !== 'undefined' ? navigator.language : undefined;
+    return normalizeLanguage(stored) || normalizeLanguage(preferred) || normalizeLanguage(browser) || 'en';
+}
+function rememberLanguage(language) {
+    try {
+        window.localStorage.setItem(LANGUAGE_STORAGE_KEY, language);
+    }
+    catch (e) { }
+}
+
+/**
+ * MyanMyanPay logo (256px PNG from myanmyanpay.com/mmp-logo.png), embedded so
+ * the loading screen shows it instantly instead of waiting on another request.
+ */
+var MMPAY_LOGO_DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAHlBMVEX///8AAAADAwNFRUVjY2NTU1MuLi7n5+e9vb2BgYFUuDMdAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAE90lEQVR4nO2d2XbCMAxE5yokhf//4R5atrCEYIckMLoPfeiJVTPIrm3JijBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHle2jlLcZmlWAqPjzvaY1dmI5AYLomjK6uPzQkxmaV4Cg2aqUbXdpqqsyFMsIEDQ/xd2Wfk4dD7ppDM0sAFH+te3Zni1NZmhOAYKuqtunb67SASTVuIAqBGjquq3mKMBEhlKAEkQp6QHkEFDOAQd249dx3W5oEqwytOAc0IzuQdAOCfCKoZJWbxRgLMMCtC8YWpkAuHsAh98+/MJeFOC5oTUKEIPPvyDAGEMrFCCIpr1Pc9i2jxNglKEVCsDm8a7mp2W0ADFoaHN4ZnUCBBsN0f4/9FyAZ4b+FFifAEEM72p/YrQHjDK0PgHawW7fPvVAgOebjOun1iLA5km/N2MFGGcoBVB6wIEcAsTCh6Kd4xzA+Vj871z6st9td6atEWDI0OICxKkLN8uX8zn1pZ8UCDBkaHEBOISGtqf162W/T5u3WgEeGlpeAPYxzfYYnTT0AHp7V0sB2HvoqYeWApxJAUgPUA6BAzkH4LEO6JFzAPeX8JsaD9iseS9wheFusE8KQHqA/IZAxClX19IDovez8YoL7InNdrttjwKYRYY4HQpubw8EBkJ6XxMbJDimKe2OHRgT1B2VHzBs6FGreQWIc4rvn0/+n440m/u8lh8AIwwtL0Bzs/tzzxDBPkfIOUtsLJkn2H6jB+wepHTdy/IazhV+lBx2hzXlCpeRN0aISZVMDyhBlJJDAPs5oPO+N8iEFz4/8uYolWPg4u5w1N0drvknwEpuj9cZik+sH0C/25MZmlUAav50//Mv1AmyhogwR5gjzBHmqLL96KOwm6Oxdxl6EVW1dv83GOYLoZhqKRyfuRSOyTZDlRWZltsMba23wzHhgUidoSyk1OSpcCwyBJpKz824ABkY4UsiQ7tm/uDoraEFBWjcw+NNJkgE7h7A4bdPtu1ZSIk3pMktX1O0OX6U+RIlLzKKj3maKxBgMyLDdYJCSo8ydRcWIGZNlr7J1V5cgJg3Xf6vZXvO1rcrpLTn+YT5xYWUrm/seAowASpumQKQHqAcAiPqH23eU0hp3XNA9/4iKqsX4N0FFFYvAO4ewP1+pwCkByiHwHRzwJIpMrH8HLDe3WA3iwC9an6G64D4TyypSxDhcz3gqqLnugRo319U9bqm67oEmKWISr+qr6EAzbWhFKAEUUp6ADkE1B+6ZoWUorD+0dcUUop8yUrz4mt24stfs0O+aIm/r+YeJRkizwyt0AOwzxFyzhIbSxZSar/RA3bN/C9dXVWucBmZLs/XpMuXkQKQHsBHD4GurttZSInPvjlK7ZXfi7vDdYWUqm5Pq7zpvuMTFVKKOkPLhMb4j04WXfpvun5Ms6YQwWLB0T0V0fl+04rPUJkhoKrW9jVEvgBhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc1IAzPkF8CT7lTTnMu0AAAAASUVORK5CYII=';
+
+/**
+ * Styles live inside the modal's shadow root, so the merchant page's CSS
+ * cannot restyle the payment modal and these rules cannot leak out.
+ */
+var MMPAY_STYLES = "\n.mmp-root, .mmp-root *, .mmp-root *::before, .mmp-root *::after { box-sizing: border-box; }\n.mmp-root {\n  --mmp-card: #ffffff;\n  --mmp-text: #1d1d1f;\n  --mmp-sub: #6e6e73;\n  --mmp-border: rgba(0, 0, 0, 0.08);\n  --mmp-chip: #f2f2f5;\n  --mmp-chip-active: #ffffff;\n  --mmp-chip-hover: #e5e5ea;\n  --mmp-panel: #f7f7f9;\n  --mmp-skeleton: #e9e9ee;\n  --mmp-skeleton-shine: #f6f6f9;\n  --mmp-accent: #2c2c2e;\n  --mmp-accent-text: #ffffff;\n  --mmp-success: #1f9d55;\n  --mmp-success-bg: #e6f6ec;\n  --mmp-danger: #d93025;\n  --mmp-danger-bg: #fce8e6;\n  --mmp-warn: #c26a00;\n  --mmp-warn-bg: #fff3e0;\n  --mmp-card-blur: none;\n  position: absolute; top: 0; right: 0; bottom: 0; left: 0;\n  display: flex; align-items: center; justify-content: center;\n  padding: 16px; overflow-y: auto;\n  background: rgba(0, 0, 0, 0.45);\n  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);\n  font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Segoe UI\", Roboto, Helvetica, Arial, \"Padauk\", \"Myanmar Text\", \"Noto Sans Myanmar\", sans-serif;\n  font-size: 16px; line-height: 1.4; font-weight: 400; font-style: normal;\n  letter-spacing: normal; text-align: center; text-transform: none; white-space: normal;\n  color: var(--mmp-text); direction: ltr;\n  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;\n  animation: mmp-fade 0.2s ease;\n}\n.mmp-root.mmp-dark {\n  --mmp-card: #1c1c1e;\n  --mmp-text: #f5f5f7;\n  --mmp-sub: rgba(235, 235, 245, 0.62);\n  --mmp-border: rgba(255, 255, 255, 0.12);\n  --mmp-chip: #2c2c2e;\n  --mmp-chip-active: #636366;\n  --mmp-chip-hover: #3a3a3c;\n  --mmp-panel: #2c2c2e;\n  --mmp-skeleton: #2c2c2e;\n  --mmp-skeleton-shine: #3a3a3c;\n  --mmp-accent: #ffffff;\n  --mmp-accent-text: #000000;\n  --mmp-success: #34c759;\n  --mmp-success-bg: rgba(52, 199, 89, 0.18);\n  --mmp-danger: #ff6259;\n  --mmp-danger-bg: rgba(255, 69, 58, 0.18);\n  --mmp-warn: #ffa733;\n  --mmp-warn-bg: rgba(255, 149, 0, 0.18);\n}\n.mmp-root.mmp-translucent { --mmp-card: rgba(255, 255, 255, 0.78); --mmp-card-blur: blur(20px); }\n.mmp-root.mmp-dark.mmp-translucent { --mmp-card: rgba(28, 28, 30, 0.78); }\n.mmp-root[data-lang=\"mm\"] { line-height: 1.75; }\n\n.mmp-card {\n  position: relative; display: flex; flex-direction: column;\n  width: 100%; max-width: 372px; max-height: 100%; margin: auto;\n  overflow-x: hidden; overflow-y: auto;\n  background: var(--mmp-card);\n  -webkit-backdrop-filter: var(--mmp-card-blur); backdrop-filter: var(--mmp-card-blur);\n  border-radius: 24px;\n  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--mmp-border);\n  outline: none;\n  animation: mmp-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.mmp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0 14px; flex-shrink: 0; }\n.mmp-lang { display: inline-flex; gap: 2px; padding: 3px; background: var(--mmp-chip); border: 1px solid var(--mmp-border); border-radius: 11px; }\n.mmp-lang button {\n  margin: 0; padding: 5px 11px; min-width: 40px; border: none; border-radius: 8px; background: transparent;\n  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--mmp-sub); cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease;\n}\n.mmp-lang button[aria-pressed=\"true\"] { background: var(--mmp-chip-active); color: var(--mmp-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }\n.mmp-close {\n  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0;\n  border: none; border-radius: 50%; background: var(--mmp-chip); color: var(--mmp-sub); cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease;\n}\n.mmp-close:hover { background: var(--mmp-chip-hover); color: var(--mmp-text); }\n.mmp-close[hidden] { display: flex; visibility: hidden; }\n.mmp-root button:focus-visible { outline: 2px solid var(--mmp-text); outline-offset: 2px; }\n\n.mmp-screen { display: flex; flex-direction: column; align-items: center; padding: 6px 22px 22px 22px; animation: mmp-screen-in 0.28s ease; }\n.mmp-brand { display: flex; align-items: center; justify-content: center; height: 36px; margin-bottom: 10px; }\n.mmp-brand img { display: block; height: 36px; width: auto; max-width: 160px; object-fit: contain; }\n.mmp-merchant { max-width: 100%; font-size: 15px; font-weight: 500; color: var(--mmp-sub); overflow-wrap: anywhere; }\n.mmp-amount { display: flex; align-items: baseline; justify-content: center; gap: 6px; min-height: 36px; margin: 2px 0 14px 0; }\n.mmp-amount-value { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }\n.mmp-amount-currency { font-size: 14px; font-weight: 600; letter-spacing: 0.5px; color: var(--mmp-sub); }\n\n.mmp-qr {\n  position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  width: 228px; height: 228px; padding: 12px; background: #ffffff; border-radius: 18px;\n  border: 1px solid var(--mmp-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); overflow: hidden;\n}\n.mmp-qr canvas { display: block; width: 100% !important; height: 100% !important; animation: mmp-qr-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }\n.mmp-qr-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: 100%; height: 100%; }\n.mmp-loader-logo { display: block; width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); animation: mmp-pulse 2.2s ease-in-out infinite; }\n.mmp-loader-track { position: relative; width: 120px; height: 3px; border-radius: 3px; background: #ececf1; overflow: hidden; }\n.mmp-loader-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: #1d1d1f; animation: mmp-sweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }\n.mmp-qr-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px; font-size: 13px; color: #6e6e73; }\n.mmp-qr-error button {\n  margin: 0; padding: 7px 14px; border: 1px solid #d2d2d7; border-radius: 10px; background: #ffffff;\n  font: inherit; font-size: 13px; font-weight: 600; color: #1d1d1f; cursor: pointer;\n}\n\n.mmp-caption { min-height: 44px; margin: 14px 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }\n.mmp-caption-title { font-size: 15px; font-weight: 600; }\n.mmp-caption-title::after { content: \"\"; display: inline-block; width: 1.2em; text-align: left; animation: mmp-ellipsis 1.4s steps(4, end) infinite; }\n.mmp-caption-sub { font-size: 13px; color: var(--mmp-sub); }\n.mmp-hint { font-size: 13px; color: var(--mmp-sub); }\n\n.mmp-status-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px 0; }\n.mmp-waiting, .mmp-timer {\n  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;\n  font-size: 13px; font-weight: 600; background: var(--mmp-panel); border: 1px solid var(--mmp-border); color: var(--mmp-sub);\n}\n.mmp-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mmp-success); flex-shrink: 0; }\n.mmp-dot::after { content: \"\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: inherit; animation: mmp-ping 1.6s ease-out infinite; }\n.mmp-waiting[data-state=\"reconnecting\"] .mmp-dot { background: var(--mmp-warn); }\n.mmp-timer { font-variant-numeric: tabular-nums; color: var(--mmp-text); }\n.mmp-timer svg { width: 13px; height: 13px; fill: currentColor; }\n.mmp-timer[data-urgent=\"true\"] { color: var(--mmp-danger); background: var(--mmp-danger-bg); border-color: transparent; }\n\n.mmp-details { width: 100%; padding: 12px 14px; margin-bottom: 14px; background: var(--mmp-panel); border: 1px solid var(--mmp-border); border-radius: 14px; }\n.mmp-detail { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; font-size: 13px; color: var(--mmp-sub); }\n.mmp-detail + .mmp-detail { margin-top: 6px; }\n.mmp-detail > span:first-child { flex-shrink: 0; text-align: left; }\n.mmp-detail strong { font-weight: 600; color: var(--mmp-text); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n.mmp-skeleton {\n  display: inline-block; height: 14px; border-radius: 7px;\n  background: linear-gradient(90deg, var(--mmp-skeleton) 25%, var(--mmp-skeleton-shine) 50%, var(--mmp-skeleton) 75%);\n  background-size: 200% 100%; animation: mmp-shimmer 1.4s linear infinite;\n}\n\n.mmp-btn {\n  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin: 0; padding: 12px 20px;\n  border: 1px solid transparent; border-radius: 14px; background: var(--mmp-accent); color: var(--mmp-accent-text);\n  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);\n  transition: transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease;\n}\n.mmp-btn:hover { filter: brightness(1.08); }\n.mmp-btn:active { transform: scale(0.98); }\n.mmp-btn:disabled { opacity: 0.45; cursor: default; filter: none; transform: none; box-shadow: none; }\n.mmp-btn svg { width: 18px; height: 18px; flex-shrink: 0; }\n.mmp-btn-secondary { background: transparent; color: var(--mmp-text); border-color: var(--mmp-border); box-shadow: none; }\n.mmp-btn-secondary:hover { background: var(--mmp-chip); filter: none; }\n.mmp-btn-danger { background: var(--mmp-danger-bg); color: var(--mmp-danger); box-shadow: none; }\n.mmp-btn[data-busy=\"true\"]::before {\n  content: \"\"; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;\n  animation: mmp-spin 0.7s linear infinite;\n}\n.mmp-powered { margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--mmp-sub); }\n\n.mmp-sheet {\n  position: absolute; top: 52px; right: 0; bottom: 0; left: 0; z-index: 2;\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  padding: 12px 22px 24px 22px; background: var(--mmp-card); border-radius: 0 0 24px 24px; overflow-y: auto;\n  animation: mmp-sheet-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.mmp-root.mmp-translucent .mmp-sheet { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }\n.mmp-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 10px auto 18px auto; border-radius: 50%; flex-shrink: 0; animation: mmp-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }\n.mmp-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }\n.mmp-icon svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: mmp-draw 0.5s 0.2s ease forwards; }\n.mmp-icon[data-tone=\"success\"] { background: var(--mmp-success-bg); color: var(--mmp-success); }\n.mmp-icon[data-tone=\"danger\"] { background: var(--mmp-danger-bg); color: var(--mmp-danger); }\n.mmp-icon[data-tone=\"warn\"] { background: var(--mmp-warn-bg); color: var(--mmp-warn); }\n.mmp-title { margin: 0 0 10px 0; font-size: 22px; font-weight: 700; line-height: inherit; color: var(--mmp-text); }\n.mmp-pill { display: inline-block; max-width: 100%; padding: 6px 12px; margin-bottom: 14px; background: var(--mmp-panel); border: 1px solid var(--mmp-border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--mmp-sub); overflow-wrap: anywhere; }\n.mmp-text { margin: 0 0 6px 0; font-size: 15px; color: var(--mmp-sub); overflow-wrap: anywhere; }\n.mmp-detail-text { max-width: 100%; max-height: 84px; margin: 4px 0 0 0; overflow-y: auto; font-size: 12px; line-height: 1.4; color: var(--mmp-sub); opacity: 0.85; overflow-wrap: anywhere; }\n.mmp-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 18px; }\n\n@keyframes mmp-fade { from { opacity: 0; } to { opacity: 1; } }\n@keyframes mmp-rise { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }\n@keyframes mmp-screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes mmp-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }\n@keyframes mmp-qr-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }\n@keyframes mmp-pulse { 0%, 100% { opacity: 0.88; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }\n@keyframes mmp-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }\n@keyframes mmp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }\n@keyframes mmp-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }\n@keyframes mmp-spin { to { transform: rotate(360deg); } }\n@keyframes mmp-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }\n@keyframes mmp-draw { to { stroke-dashoffset: 0; } }\n@keyframes mmp-ellipsis { 0% { content: \"\"; } 25% { content: \".\"; } 50% { content: \"..\"; } 75% { content: \"...\"; } }\n\n@media (max-width: 380px) {\n  .mmp-root { padding: 10px; }\n  .mmp-screen { padding: 6px 16px 18px 16px; }\n  .mmp-qr { width: 204px; height: 204px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .mmp-root, .mmp-root *, .mmp-root *::before, .mmp-root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }\n  .mmp-icon svg path { stroke-dashoffset: 0; }\n  .mmp-loader-bar { width: 100%; opacity: 0.25; }\n}\n";
+
+var HOST_ID = 'mmpay-full-modal';
+var FONT_LINK_ID = 'mmpay-font-padauk';
+var LOGO_URL = 'https://motephoe.com/images/mmqr.webp';
+var QR_RENDER_SIZE = 480;
+// Pinned builds of node-qrcode 1.5.1. The integrity hashes make the browser
+// refuse a file that was altered on the CDN, which matters because the QR
+// decides where the shopper's money goes.
+var QR_LIBRARY_SOURCES = [
+    {
+        url: 'https://cdnjs.cloudflare.com/ajax/libs/qrcode/1.5.1/qrcode.min.js',
+        integrity: 'sha512-PEhlWBZBrQL7flpJPY8lXx8tIN7HWX912GzGhFTDqA3iWFrakVH3lVHomCoU9BhfKzgxfEk6EG2C3xej+9srOQ=='
+    },
+    {
+        url: 'https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.js',
+        integrity: 'sha512-hAz8pxm1kva4chZWPXQhGehvvlIj1Loka653sQXoYHNj4sgSukoR3ZKyHEOT7kFGVW17wUqD9CbKeviIJ2XFKQ=='
+    }
+];
+var ICONS = {
+    close: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>',
+    clock: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>',
+    download: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v11m0 0l-4-4m4 4l4-4M5 19h14"/></svg>',
+    success: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>',
+    failed: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>',
+    expired: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 7v5l3 2M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+    cancelled: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.6 5.6l12.8 12.8M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v4m0 4h.01M10.3 4.3L2.6 17.5A2 2 0 004.3 20.5h15.4a2 2 0 001.7-3L13.7 4.3a2 2 0 00-3.4 0z"/></svg>'
+};
+function h(tag, attributes) {
+    var children = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        children[_i - 2] = arguments[_i];
+    }
+    var element = document.createElement(tag);
+    if (attributes) {
+        Object.keys(attributes).forEach(function (name) { return element.setAttribute(name, attributes[name]); });
+    }
+    children.forEach(function (child) {
+        if (child === null || child === undefined || child === false)
+            return;
+        element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+    });
+    return element;
+}
+/** Static, trusted SVG markup only. Never pass merchant or server data here. */
+function icon(name, className) {
+    var wrapper = h('span', className ? { class: className } : null);
+    wrapper.style.display = 'inline-flex';
+    wrapper.innerHTML = ICONS[name];
+    return wrapper;
+}
+function isQrLibrary(candidate) {
+    return !!candidate && typeof candidate.toCanvas === 'function';
+}
+var qrLibraryPromise = null;
+function loadQrLibrary() {
+    if (qrLibraryPromise)
+        return qrLibraryPromise;
+    var pending = new Promise(function (resolve, reject) {
+        var globalScope = window;
+        if (isQrLibrary(globalScope.QRCode)) {
+            resolve(globalScope.QRCode);
+            return;
+        }
+        // The merchant page may have its own, different `QRCode` global. Put it
+        // back after loading ours instead of deleting it.
+        var hadGlobal = 'QRCode' in globalScope;
+        var previousGlobal = globalScope.QRCode;
+        var index = 0;
+        var loadNext = function () {
+            if (index >= QR_LIBRARY_SOURCES.length) {
+                reject(new Error('QR library could not be loaded.'));
+                return;
+            }
+            var source = QR_LIBRARY_SOURCES[index++];
+            var script = document.createElement('script');
+            script.src = source.url;
+            script.integrity = source.integrity;
+            script.crossOrigin = 'anonymous';
+            script.async = true;
+            script.onload = function () {
+                var library = globalScope.QRCode;
+                if (hadGlobal)
+                    globalScope.QRCode = previousGlobal;
+                if (isQrLibrary(library)) {
+                    resolve(library);
+                }
+                else {
+                    loadNext();
+                }
+            };
+            script.onerror = function () {
+                if (script.parentNode)
+                    script.parentNode.removeChild(script);
+                loadNext();
+            };
+            document.head.appendChild(script);
+        };
+        loadNext();
+    });
+    qrLibraryPromise = pending;
+    pending.catch(function () {
+        if (qrLibraryPromise === pending)
+            qrLibraryPromise = null;
+    });
+    return pending;
+}
+function resolveAccent(color) {
+    if (!color)
+        return null;
+    var value = color.trim();
+    var hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value);
+    if (hex) {
+        var digits = hex[1];
+        if (digits.length === 3)
+            digits = digits[0] + digits[0] + digits[1] + digits[1] + digits[2] + digits[2];
+        var red = parseInt(digits.substr(0, 2), 16);
+        var green = parseInt(digits.substr(2, 2), 16);
+        var blue = parseInt(digits.substr(4, 2), 16);
+        var brightness = (red * 299 + green * 587 + blue * 114) / 1000;
+        return { background: value, text: brightness > 165 ? '#000000' : '#ffffff' };
+    }
+    // Anything else must look like a plain CSS colour, so a configured value
+    // cannot smuggle extra CSS into the modal.
+    if (/^[a-z]{3,30}$/i.test(value) || /^(rgb|hsl)a?\([0-9.,%\s/]+\)$/i.test(value)) {
+        return { background: value, text: '#ffffff' };
+    }
+    return null;
+}
+var MMPayUI = /** @class */ (function () {
+    function MMPayUI(design, preferredLanguage) {
+        var _this = this;
+        this.handlers = null;
+        this.mode = 'closed';
+        this.host = null;
+        this.root = null;
+        this.card = null;
+        this.screen = null;
+        this.sheet = null;
+        this.closeButton = null;
+        this.frameBindings = [];
+        this.screenBindings = [];
+        this.sheetBindings = [];
+        this.payment = null;
+        this.paymentParts = null;
+        this.countdownText = null;
+        this.timerBadge = null;
+        this.waitingBadge = null;
+        this.waitingBinding = null;
+        this.qrCanvas = null;
+        this.previousBodyOverflow = null;
+        this.previousFocus = null;
+        this.onKeyDown = function (event) { return _this.handleKeyDown(event); };
+        this.design = design || {};
+        this.language = typeof window !== 'undefined' ? resolveInitialLanguage(preferredLanguage) : 'en';
+    }
+    MMPayUI.prototype.getLanguage = function () {
+        return this.language;
+    };
+    /**
+     * The language is state of the UI, not of a screen, so it survives every
+     * screen change and is applied to whatever is rendered next.
+     */
+    MMPayUI.prototype.setLanguage = function (language, remember) {
+        if (remember === void 0) { remember = true; }
+        var next = normalizeLanguage(language);
+        if (!next)
+            return;
+        this.language = next;
+        if (remember)
+            rememberLanguage(next);
+        this.applyLanguage();
+    };
+    MMPayUI.prototype.isOpen = function () {
+        return this.mode !== 'closed';
+    };
+    MMPayUI.prototype.showLoading = function (view, handlers) {
+        this.handlers = handlers;
+        this.mount();
+        this.mode = 'loading';
+        this.renderPaymentScreen(view);
+        this.setCloseVisible(false);
+    };
+    MMPayUI.prototype.showQr = function (view, handlers) {
+        this.handlers = handlers;
+        this.mount();
+        // Coming from the loading state of the same order, only the placeholders
+        // are filled in, so the card does not jump or flash.
+        if (this.mode !== 'loading' || !this.payment || this.payment.orderId !== view.orderId || !this.paymentParts) {
+            this.renderPaymentScreen(view);
+        }
+        this.mode = 'qr';
+        this.payment = view;
+        this.fillPayment(view);
+        this.setCloseVisible(true);
+    };
+    MMPayUI.prototype.showResult = function (status, view, handlers) {
+        this.handlers = handlers;
+        this.mount();
+        this.mode = 'result';
+        this.payment = null;
+        this.paymentParts = null;
+        this.removeSheet();
+        var tone = status === 'SUCCESS' ? 'success' : (status === 'CANCELLED' ? 'warn' : 'danger');
+        var iconName = status === 'SUCCESS' ? 'success' : (status === 'CANCELLED' ? 'cancelled' : (status === 'EXPIRED' ? 'expired' : 'failed'));
+        var bindings = [];
+        var badge = icon(iconName, 'mmp-icon');
+        badge.setAttribute('data-tone', tone);
+        badge.style.display = '';
+        var screen = h('div', { class: 'mmp-screen', 'aria-live': 'polite' }, badge, h('h2', { class: 'mmp-title', id: 'mmp-dialog-title' }, this.text(bindings, 'status.' + status)), h('div', { class: 'mmp-pill' }, 'ID: ' + view.orderId), h('p', { class: 'mmp-text' }, this.text(bindings, view.messageKey)), view.ref ? h('p', { class: 'mmp-text' }, this.text(bindings, 'message.ref', { ref: view.ref })) : null, view.detail ? h('p', { class: 'mmp-detail-text' }, view.detail) : null, h('div', { class: 'mmp-actions' }, h('button', { class: 'mmp-btn', type: 'button', 'data-action': 'dismiss' }, this.text(bindings, 'action.close'))));
+        this.swapScreen(screen, bindings);
+        this.setCloseVisible(true);
+        this.focusFirst(screen);
+    };
+    MMPayUI.prototype.showCancelConfirmation = function () {
+        if (!this.card || this.sheet || this.mode !== 'qr')
+            return;
+        var bindings = [];
+        var badge = icon('warning', 'mmp-icon');
+        badge.setAttribute('data-tone', 'warn');
+        badge.style.display = '';
+        var sheet = h('div', { class: 'mmp-sheet', role: 'alertdialog', 'aria-modal': 'true' }, badge, h('h2', { class: 'mmp-title' }, this.text(bindings, 'cancel.title')), h('p', { class: 'mmp-text' }, this.text(bindings, 'cancel.body')), h('div', { class: 'mmp-actions' }, h('button', { class: 'mmp-btn mmp-btn-danger', type: 'button', 'data-action': 'cancel-confirm' }, this.text(bindings, 'cancel.confirm')), h('button', { class: 'mmp-btn mmp-btn-secondary', type: 'button', 'data-action': 'cancel-back' }, this.text(bindings, 'cancel.back'))));
+        this.sheet = sheet;
+        this.sheetBindings = bindings;
+        this.card.appendChild(sheet);
+        this.setCloseVisible(false);
+        var back = sheet.querySelector('[data-action="cancel-back"]');
+        if (back)
+            back.focus();
+    };
+    MMPayUI.prototype.hideCancelConfirmation = function () {
+        this.removeSheet();
+    };
+    MMPayUI.prototype.setCancelBusy = function (busy) {
+        if (!this.sheet)
+            return;
+        var buttons = this.sheet.querySelectorAll('button');
+        for (var i = 0; i < buttons.length; i++) {
+            buttons[i].disabled = busy;
+            if (buttons[i].getAttribute('data-action') === 'cancel-confirm') {
+                buttons[i].setAttribute('data-busy', busy ? 'true' : 'false');
+            }
+        }
+    };
+    MMPayUI.prototype.setCountdown = function (remainingSeconds) {
+        if (!this.countdownText || !this.timerBadge)
+            return;
+        var minutes = Math.floor(remainingSeconds / 60);
+        var seconds = remainingSeconds % 60;
+        this.countdownText.textContent = (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+        this.timerBadge.setAttribute('data-urgent', remainingSeconds <= 60 ? 'true' : 'false');
+    };
+    MMPayUI.prototype.setConnectionState = function (state) {
+        if (!this.waitingBadge || !this.waitingBinding)
+            return;
+        if (this.waitingBadge.getAttribute('data-state') === state)
+            return;
+        this.waitingBadge.setAttribute('data-state', state);
+        this.waitingBinding.key = state === 'live' ? 'qr.waiting' : 'qr.reconnecting';
+        this.applyBinding(this.waitingBinding);
+    };
+    MMPayUI.prototype.close = function () {
+        if (this.host && this.host.parentNode) {
+            this.host.parentNode.removeChild(this.host);
+        }
+        if (this.mode !== 'closed') {
+            document.removeEventListener('keydown', this.onKeyDown, true);
+            if (this.previousBodyOverflow !== null) {
+                document.body.style.overflow = this.previousBodyOverflow;
+                this.previousBodyOverflow = null;
+            }
+            var previous = this.previousFocus;
+            if (previous && typeof previous.focus === 'function' && document.contains(previous)) {
+                try {
+                    previous.focus();
+                }
+                catch (e) { }
+            }
+        }
+        this.mode = 'closed';
+        this.host = this.root = this.card = null;
+        this.screen = this.sheet = null;
+        this.closeButton = null;
+        this.payment = null;
+        this.paymentParts = null;
+        this.countdownText = this.timerBadge = this.waitingBadge = null;
+        this.waitingBinding = null;
+        this.qrCanvas = null;
+        this.previousFocus = null;
+        this.frameBindings = [];
+        this.screenBindings = [];
+        this.sheetBindings = [];
+        this.handlers = null;
+    };
+    MMPayUI.prototype.mount = function () {
+        var _this = this;
+        if (this.host && this.host.parentNode)
+            return;
+        var stale = document.getElementById(HOST_ID);
+        if (stale && stale.parentNode)
+            stale.parentNode.removeChild(stale);
+        var host = document.createElement('div');
+        host.id = HOST_ID;
+        host.style.cssText = 'all: initial; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2147483000; display: block;';
+        var container = typeof host.attachShadow === 'function' ? host.attachShadow({ mode: 'open' }) : host;
+        var style = document.createElement('style');
+        style.textContent = MMPAY_STYLES;
+        container.appendChild(style);
+        var mode = this.design.mode || 'light';
+        var prefersDark = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        var isDark = mode === 'auto' ? prefersDark : mode.indexOf('dark') !== -1;
+        var root = h('div', { class: 'mmp-root' + (isDark ? ' mmp-dark' : '') + (mode.indexOf('translucent') !== -1 ? ' mmp-translucent' : '') });
+        var accent = resolveAccent(this.design.color);
+        if (accent) {
+            root.style.setProperty('--mmp-accent', accent.background);
+            root.style.setProperty('--mmp-accent-text', accent.text);
+        }
+        this.frameBindings = [];
+        var languageGroup = h('div', { class: 'mmp-lang', role: 'group' }, h('button', { type: 'button', 'data-action': 'language', 'data-language': 'en', lang: 'en' }, 'EN'), h('button', { type: 'button', 'data-action': 'language', 'data-language': 'mm', lang: 'my' }, 'မြန်မာ'));
+        this.frameBindings.push({ node: languageGroup, key: 'action.language', attribute: 'aria-label' });
+        var closeButton = h('button', { class: 'mmp-close', type: 'button', 'data-action': 'close' });
+        closeButton.appendChild(icon('close'));
+        this.frameBindings.push({ node: closeButton, key: 'action.close', attribute: 'aria-label' });
+        var card = h('div', { class: 'mmp-card', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'mmp-dialog-title', tabindex: '-1' }, h('div', { class: 'mmp-topbar' }, languageGroup, closeButton));
+        root.appendChild(card);
+        container.appendChild(root);
+        root.addEventListener('click', function (event) { return _this.handleClick(event); });
+        this.host = host;
+        this.root = root;
+        this.card = card;
+        this.closeButton = closeButton;
+        this.screen = null;
+        this.previousFocus = document.activeElement;
+        this.previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        document.body.appendChild(host);
+        document.addEventListener('keydown', this.onKeyDown, true);
+        this.ensureFont();
+        this.applyLanguage();
+        card.focus();
+    };
+    MMPayUI.prototype.renderPaymentScreen = function (view) {
+        this.removeSheet();
+        var bindings = [];
+        var logo = h('img', { src: LOGO_URL, alt: 'MMQR', decoding: 'async' });
+        logo.onerror = function () {
+            logo.style.display = 'none';
+        };
+        var amount = h('div', { class: 'mmp-amount' });
+        var qrBox = h('div', { class: 'mmp-qr' });
+        var caption = h('div', { class: 'mmp-caption', 'aria-live': 'polite' });
+        var statusRow = h('div', { class: 'mmp-status-row' });
+        var refValue = h('strong');
+        var download = h('button', { class: 'mmp-btn', type: 'button', 'data-action': 'download' }, icon('download'), this.text(bindings, 'qr.download'));
+        download.disabled = true;
+        var screen = h('div', { class: 'mmp-screen' }, h('div', { class: 'mmp-brand' }, logo), h('div', { class: 'mmp-merchant', id: 'mmp-dialog-title' }, view.merchantName), amount, qrBox, caption, statusRow, h('div', { class: 'mmp-details' }, h('div', { class: 'mmp-detail' }, h('span', null, this.text(bindings, 'qr.orderId')), h('strong', null, view.orderId)), h('div', { class: 'mmp-detail' }, h('span', null, this.text(bindings, 'qr.refNo')), refValue)), download, h('div', { class: 'mmp-powered' }, this.text(bindings, 'qr.poweredBy')));
+        this.payment = view;
+        this.paymentParts = { amount: amount, qrBox: qrBox, caption: caption, statusRow: statusRow, refValue: refValue, download: download };
+        this.countdownText = this.timerBadge = this.waitingBadge = null;
+        this.waitingBinding = null;
+        this.qrCanvas = null;
+        this.swapScreen(screen, bindings);
+        this.setAmount(view.amount);
+        this.showQrPlaceholder();
+        refValue.appendChild(h('span', { class: 'mmp-skeleton', style: 'width: 110px;' }));
+        caption.appendChild(h('div', { class: 'mmp-caption-title' }, this.text(this.screenBindings, 'loading.title')));
+        caption.appendChild(h('div', { class: 'mmp-caption-sub' }, this.text(this.screenBindings, 'loading.subtitle')));
+        statusRow.style.visibility = 'hidden';
+        statusRow.appendChild(h('span', { class: 'mmp-timer' }, '00:00'));
+    };
+    MMPayUI.prototype.fillPayment = function (view) {
+        var parts = this.paymentParts;
+        if (!parts)
+            return;
+        this.setAmount(view.amount);
+        parts.refValue.textContent = view.vendorQrRefId || '-';
+        this.clear(parts.caption);
+        parts.caption.appendChild(h('div', { class: 'mmp-hint' }, this.text(this.screenBindings, 'qr.scanHint')));
+        this.clear(parts.statusRow);
+        parts.statusRow.style.visibility = '';
+        var waitingText = this.text(this.screenBindings, 'qr.waiting');
+        this.waitingBinding = this.screenBindings[this.screenBindings.length - 1];
+        this.waitingBadge = h('span', { class: 'mmp-waiting', 'data-state': 'live', role: 'status' }, h('span', { class: 'mmp-dot' }), waitingText);
+        this.countdownText = h('span', null, '--:--');
+        this.timerBadge = h('span', { class: 'mmp-timer', 'data-urgent': 'false' }, icon('clock'), this.countdownText);
+        parts.statusRow.appendChild(this.waitingBadge);
+        parts.statusRow.appendChild(this.timerBadge);
+        this.renderQr();
+    };
+    MMPayUI.prototype.setAmount = function (amount) {
+        var parts = this.paymentParts;
+        if (!parts)
+            return;
+        this.clear(parts.amount);
+        if (typeof amount === 'number' && isFinite(amount)) {
+            var formatted = amount.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+            parts.amount.appendChild(h('span', { class: 'mmp-amount-value' }, formatted));
+            parts.amount.appendChild(h('span', { class: 'mmp-amount-currency' }, 'MMK'));
+        }
+        else {
+            parts.amount.appendChild(h('span', { class: 'mmp-skeleton', style: 'width: 150px; height: 26px; border-radius: 9px;' }));
+        }
+    };
+    MMPayUI.prototype.showQrPlaceholder = function () {
+        var parts = this.paymentParts;
+        if (!parts)
+            return;
+        this.clear(parts.qrBox);
+        var logo = h('img', { class: 'mmp-loader-logo', src: MMPAY_LOGO_DATA_URI, alt: 'MyanMyanPay' });
+        parts.qrBox.appendChild(h('div', { class: 'mmp-qr-placeholder' }, logo, h('div', { class: 'mmp-loader-track', 'aria-hidden': 'true' }, h('div', { class: 'mmp-loader-bar' }))));
+    };
+    MMPayUI.prototype.renderQr = function () {
+        var _this = this;
+        var parts = this.paymentParts;
+        var view = this.payment;
+        if (!parts || !view || !view.qr)
+            return;
+        var qrData = view.qr;
+        var isCurrent = function () { return _this.paymentParts === parts && _this.payment === view; };
+        var fail = function () {
+            if (!isCurrent())
+                return;
+            _this.qrCanvas = null;
+            parts.download.disabled = true;
+            _this.clear(parts.qrBox);
+            // The bindings of an earlier failed attempt point at removed nodes.
+            _this.screenBindings = _this.screenBindings.filter(function (binding) { return binding.key !== 'qr.loadFailed' && binding.key !== 'qr.retry'; });
+            parts.qrBox.appendChild(h('div', { class: 'mmp-qr-error', role: 'alert' }, _this.text(_this.screenBindings, 'qr.loadFailed'), h('button', { type: 'button', 'data-action': 'retry-qr' }, _this.text(_this.screenBindings, 'qr.retry'))));
+        };
+        loadQrLibrary().then(function (library) {
+            if (!isCurrent())
+                return;
+            var canvas = document.createElement('canvas');
+            library.toCanvas(canvas, qrData, {
+                width: QR_RENDER_SIZE,
+                margin: 1,
+                color: { dark: '#000000', light: '#ffffff' },
+                errorCorrectionLevel: 'M'
+            }, function (error) {
+                if (error) {
+                    fail();
+                    return;
+                }
+                if (!isCurrent())
+                    return;
+                canvas.setAttribute('role', 'img');
+                canvas.setAttribute('aria-label', 'MMQR');
+                _this.clear(parts.qrBox);
+                parts.qrBox.appendChild(canvas);
+                _this.qrCanvas = canvas;
+                parts.download.disabled = false;
+            });
+        }).catch(fail);
+    };
+    MMPayUI.prototype.downloadQr = function () {
+        if (!this.qrCanvas || !this.payment)
+            return;
+        try {
+            var link = document.createElement('a');
+            link.href = this.qrCanvas.toDataURL('image/png');
+            link.download = 'MMPay-QR-' + this.payment.orderId.replace(/[^a-zA-Z0-9_-]/g, '') + '.png';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        catch (e) { }
+    };
+    MMPayUI.prototype.handleClick = function (event) {
+        var target = event.target;
+        while (target && target !== this.root && !(target.getAttribute && target.getAttribute('data-action'))) {
+            target = target.parentNode;
+        }
+        if (!target || target === this.root || !this.handlers)
+            return;
+        if (target.disabled)
+            return;
+        var action = target.getAttribute('data-action');
+        if (action === 'language') {
+            this.setLanguage(target.getAttribute('data-language') || 'en');
+        }
+        else if (action === 'close') {
+            this.requestClose();
+        }
+        else if (action === 'dismiss') {
+            this.handlers.onDismiss();
+        }
+        else if (action === 'cancel-confirm') {
+            this.handlers.onCancelConfirm();
+        }
+        else if (action === 'cancel-back') {
+            this.hideCancelConfirmation();
+        }
+        else if (action === 'download') {
+            this.downloadQr();
+        }
+        else if (action === 'retry-qr') {
+            this.showQrPlaceholder();
+            this.renderQr();
+        }
+    };
+    MMPayUI.prototype.requestClose = function () {
+        if (!this.handlers)
+            return;
+        if (this.mode === 'result') {
+            this.handlers.onDismiss();
+        }
+        else if (this.mode === 'qr') {
+            this.handlers.onCloseRequest();
+        }
+    };
+    MMPayUI.prototype.handleKeyDown = function (event) {
+        if (this.mode === 'closed')
+            return;
+        if (event.key === 'Escape' || event.key === 'Esc') {
+            event.stopPropagation();
+            if (this.sheet) {
+                var confirm_1 = this.sheet.querySelector('[data-action="cancel-confirm"]');
+                if (!confirm_1 || !confirm_1.disabled)
+                    this.hideCancelConfirmation();
+            }
+            else {
+                this.requestClose();
+            }
+            return;
+        }
+        if (event.key !== 'Tab' || !this.card)
+            return;
+        // Keep keyboard focus inside the modal while it is open.
+        var scope = this.sheet || this.card;
+        var candidates = scope.querySelectorAll('button');
+        var focusable = [];
+        for (var i = 0; i < candidates.length; i++) {
+            var button = candidates[i];
+            if (!button.disabled && !button.hidden)
+                focusable.push(button);
+        }
+        if (focusable.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        var shadow = this.host && this.host.shadowRoot;
+        var active = (shadow ? shadow.activeElement : document.activeElement);
+        var index = active ? focusable.indexOf(active) : -1;
+        event.preventDefault();
+        var nextIndex = event.shiftKey
+            ? (index <= 0 ? focusable.length - 1 : index - 1)
+            : (index === -1 || index === focusable.length - 1 ? 0 : index + 1);
+        focusable[nextIndex].focus();
+    };
+    MMPayUI.prototype.swapScreen = function (screen, bindings) {
+        if (!this.card)
+            return;
+        if (this.screen && this.screen.parentNode)
+            this.screen.parentNode.removeChild(this.screen);
+        this.card.appendChild(screen);
+        this.screen = screen;
+        this.screenBindings = bindings;
+    };
+    MMPayUI.prototype.removeSheet = function () {
+        if (this.sheet && this.sheet.parentNode)
+            this.sheet.parentNode.removeChild(this.sheet);
+        var hadSheet = !!this.sheet;
+        this.sheet = null;
+        this.sheetBindings = [];
+        if (hadSheet && this.card && this.mode !== 'closed') {
+            this.setCloseVisible(true);
+            this.card.focus();
+        }
+    };
+    MMPayUI.prototype.setCloseVisible = function (visible) {
+        if (this.closeButton)
+            this.closeButton.hidden = !visible;
+    };
+    MMPayUI.prototype.focusFirst = function (scope) {
+        var button = scope.querySelector('button');
+        if (button)
+            button.focus();
+    };
+    MMPayUI.prototype.clear = function (element) {
+        while (element.firstChild)
+            element.removeChild(element.firstChild);
+    };
+    /** Creates a text node holder that is re-translated whenever the language changes. */
+    MMPayUI.prototype.text = function (bindings, key, params) {
+        var node = h('span');
+        var binding = { node: node, key: key, params: params };
+        bindings.push(binding);
+        this.applyBinding(binding);
+        return node;
+    };
+    MMPayUI.prototype.applyBinding = function (binding) {
+        var value = translate(this.language, binding.key, binding.params);
+        if (binding.attribute) {
+            binding.node.setAttribute(binding.attribute, value);
+        }
+        else {
+            binding.node.textContent = value;
+        }
+    };
+    MMPayUI.prototype.applyLanguage = function () {
+        var _this = this;
+        if (!this.root)
+            return;
+        this.root.setAttribute('data-lang', this.language);
+        this.root.setAttribute('lang', this.language === 'mm' ? 'my' : 'en');
+        var toggles = this.root.querySelectorAll('[data-action="language"]');
+        for (var i = 0; i < toggles.length; i++) {
+            toggles[i].setAttribute('aria-pressed', toggles[i].getAttribute('data-language') === this.language ? 'true' : 'false');
+        }
+        this.frameBindings.forEach(function (binding) { return _this.applyBinding(binding); });
+        this.screenBindings.forEach(function (binding) { return _this.applyBinding(binding); });
+        this.sheetBindings.forEach(function (binding) { return _this.applyBinding(binding); });
+    };
+    /** Web fonts must be declared in the page itself to be usable inside a shadow root. */
+    MMPayUI.prototype.ensureFont = function () {
+        if (document.getElementById(FONT_LINK_ID))
+            return;
+        var link = document.createElement('link');
+        link.id = FONT_LINK_ID;
+        link.rel = 'stylesheet';
+        link.href = 'https://fonts.googleapis.com/css2?family=Padauk:wght@400;700&display=swap';
+        document.head.appendChild(link);
+    };
+    return MMPayUI;
+}());
+
+var MIN_LOADING_MS = 400;
+var MMPaySDK = /** @class */ (function () {
+    function MMPaySDK(publishableKey, options) {
+        if (options === void 0) { options = {}; }
+        var _a, _b;
+        this.TIMEOUT_SECONDS = 900;
+        this.CACHE_KEY = 'mmpay_pending_tx';
+        this.onCompleteCallback = null;
+        this.statusWatcher = null;
+        this.countdownIntervalId = undefined;
+        this.pendingApiResponse = null;
+        this.pendingPaymentPayload = null;
+        this.flowId = 0;
+        this.settled = true;
+        this.cancelling = false;
+        this.creating = false;
+        if (!publishableKey) {
+            throw new Error("A Publishable Key is required to initialize [MMPaySDK].");
+        }
+        if (publishableKey.includes('pk_test')) {
+            this.environment = 'sandbox';
+        }
+        else if (publishableKey.includes('pk_live')) {
+            this.environment = 'production';
+        }
+        else {
+            this.environment = options.environment || 'production';
+        }
+        var baseUrl = options.baseUrl || 'https://bbapi.myanmyanpay.com';
+        this.merchantName = options.merchantName || 'MyanMyanPay';
+        this.POLL_INTERVAL_MS = options.pollInterval || 5000;
+        this.transport = options.transport || 'auto';
+        if (typeof options.timeoutSeconds === 'number' && isFinite(options.timeoutSeconds)) {
+            // The server expires an unpaid order after 15 minutes, so the countdown
+            // can be shortened but not extended.
+            this.TIMEOUT_SECONDS = Math.min(900, Math.max(60, Math.floor(options.timeoutSeconds)));
+        }
+        this.api = new MMPayAPI(baseUrl, this.environment, publishableKey);
+        this.ui = new MMPayUI({
+            mode: ((_a = options.design) === null || _a === void 0 ? void 0 : _a.mode) || 'light',
+            color: (_b = options.design) === null || _b === void 0 ? void 0 : _b.color
+        }, options.language);
+        if (typeof window !== 'undefined') {
+            this._checkAndAutoResume();
+        }
+    }
+    /**
+     * Switches the modal language. Works at any time, including while a payment
+     * is on screen, and is remembered for the shopper's next visit.
+     */
+    MMPaySDK.prototype.setLanguage = function (language) {
+        this.ui.setLanguage(language);
+    };
+    MMPaySDK.prototype.getLanguage = function () {
+        return this.ui.getLanguage();
+    };
+    MMPaySDK.prototype.showPaymentModal = function (params, onComplete) {
+        return __awaiter(this, void 0, void 0, function () {
+            var flowId, startTime, tokenNonce, tokenResponse, apiResponse, actualRefId, expireAt, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // A second call while an order is still being created (double click) must
+                        // not create a second order.
+                        if (this.creating) {
+                            this.onCompleteCallback = onComplete;
+                            return [2 /*return*/];
+                        }
+                        flowId = this._beginFlow(onComplete);
+                        this.creating = true;
+                        this.ui.showLoading({
+                            merchantName: this.merchantName,
+                            orderId: params.orderId,
+                            amount: params.amount
+                        }, this._getUiHandlers());
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 6, 7, 8]);
+                        startTime = Date.now();
+                        return [4 /*yield*/, this._showUnfinishedOrder(flowId, startTime)];
+                    case 2:
+                        if (_a.sent())
+                            return [2 /*return*/];
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/];
+                        tokenNonce = new Date().getTime().toString() + '_create';
+                        return [4 /*yield*/, this.api.createToken({
+                                amount: params.amount,
+                                orderId: params.orderId,
+                                nonce: tokenNonce
+                            })];
+                    case 3:
+                        tokenResponse = _a.sent();
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/];
+                        this.api.setToken(tokenResponse.token);
+                        return [4 /*yield*/, this.api.createPayment(__assign(__assign({}, params), { nonce: tokenNonce }))];
+                    case 4:
+                        apiResponse = _a.sent();
+                        return [4 /*yield*/, this._holdLoading(startTime)];
+                    case 5:
+                        _a.sent();
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/];
+                        actualRefId = (apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.vendorQrRefId) || (apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.transactionRefId);
+                        if (apiResponse && apiResponse.qr && actualRefId) {
+                            apiResponse.vendorQrRefId = actualRefId;
+                            this.pendingPaymentPayload = __assign(__assign({}, params), { tokenNonce: tokenNonce });
+                            this.pendingApiResponse = apiResponse;
+                            expireAt = Date.now() + (this.TIMEOUT_SECONDS * 1000);
+                            this._writeCache({
+                                payload: { amount: apiResponse.amount, orderId: params.orderId, nonce: tokenNonce + '_poll' },
+                                apiResponse: apiResponse,
+                                expireAt: expireAt,
+                                token: this.api.getToken(),
+                                environment: this.environment
+                            });
+                            this._showQr(apiResponse, params.orderId);
+                            this._startStatusWatch({ orderId: params.orderId, nonce: tokenNonce + '_poll' });
+                            this._startCountdown(params.orderId, expireAt);
+                            this._triggerEvent({
+                                created: true,
+                                orderId: params.orderId,
+                                vendorQrRefId: actualRefId,
+                                amount: params.amount
+                            });
+                        }
+                        else {
+                            throw new Error("Invalid API Response: Missing QR Data.");
+                        }
+                        return [3 /*break*/, 8];
+                    case 6:
+                        error_1 = _a.sent();
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/];
+                        this._failFlow(params.orderId, error_1, params.amount);
+                        return [3 /*break*/, 8];
+                    case 7:
+                        if (flowId === this.flowId)
+                            this.creating = false;
+                        return [7 /*endfinally*/];
+                    case 8: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Spam guard: while the shopper has an order that is not paid, cancelled or
+     * expired, a new one is not created. The unfinished order is shown again
+     * instead. The server is asked first, so an order that finished in the
+     * meantime does not block a new one.
+     */
+    MMPaySDK.prototype._showUnfinishedOrder = function (flowId, startTime) {
+        return __awaiter(this, void 0, void 0, function () {
+            var cached, response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        cached = this._readCache();
+                        if (!cached)
+                            return [2 /*return*/, false];
+                        if (cached.environment !== this.environment || Date.now() >= cached.expireAt) {
+                            this._clearCache();
+                            return [2 /*return*/, false];
+                        }
+                        this.api.setToken(cached.token);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 4, , 5]);
+                        return [4 /*yield*/, this.api.pollPayment({ orderId: cached.payload.orderId, nonce: cached.payload.nonce })];
+                    case 2:
+                        response = _a.sent();
+                        return [4 /*yield*/, this._holdLoading(startTime)];
+                    case 3:
+                        _a.sent();
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/, true];
+                        if ((response.status || '').toUpperCase() === 'PENDING') {
+                            this._resumePaymentState(cached.apiResponse, cached.payload, cached.expireAt);
+                            return [2 /*return*/, true];
+                        }
+                        return [3 /*break*/, 5];
+                    case 4:
+                        _a.sent();
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/, true];
+                        return [3 /*break*/, 5];
+                    case 5:
+                        this.api.setToken(null);
+                        this._clearCache();
+                        return [2 /*return*/, false];
+                }
+            });
+        });
+    };
+    MMPaySDK.prototype.pay = function (orderId, onComplete) {
+        return __awaiter(this, void 0, void 0, function () {
+            var flowId, cached, showPayload, expireAt, startTime, tokenNonce, tokenResponse, apiResponse, status_1, actualRefId, terminalStatus, mappedPaymentResponse, mappedPaymentPayload, error_3;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        flowId = this._beginFlow(onComplete);
+                        cached = this._readCache();
+                        if (cached) {
+                            if (cached.environment === this.environment && Date.now() < cached.expireAt && ((_a = cached.payload) === null || _a === void 0 ? void 0 : _a.orderId) === orderId) {
+                                this.api.setToken(cached.token);
+                                this._resumePaymentState(cached.apiResponse, cached.payload, cached.expireAt);
+                                return [2 /*return*/];
+                            }
+                            this._clearCache();
+                        }
+                        this.ui.showLoading({ merchantName: this.merchantName, orderId: orderId }, this._getUiHandlers());
+                        showPayload = { orderId: orderId, nonce: new Date().getTime().toString() + '_show' };
+                        expireAt = Date.now() + (this.TIMEOUT_SECONDS * 1000);
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 5, , 6]);
+                        startTime = Date.now();
+                        tokenNonce = new Date().getTime().toString() + '_read';
+                        return [4 /*yield*/, this.api.createToken({ orderId: orderId, nonce: tokenNonce })];
+                    case 2:
+                        tokenResponse = _b.sent();
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/];
+                        this.api.setToken(tokenResponse.token);
+                        return [4 /*yield*/, this.api.showPayment(showPayload)];
+                    case 3:
+                        apiResponse = _b.sent();
+                        return [4 /*yield*/, this._holdLoading(startTime)];
+                    case 4:
+                        _b.sent();
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/];
+                        if (apiResponse) {
+                            status_1 = (apiResponse.status || '').toUpperCase();
+                            actualRefId = apiResponse.vendorQrRefId || apiResponse.transactionRefId;
+                            if (status_1 !== 'PENDING') {
+                                terminalStatus = status_1 === 'SUCCESS' || status_1 === 'CANCELLED' || status_1 === 'EXPIRED' ? status_1 : 'FAILED';
+                                this._finish(terminalStatus, {
+                                    orderId: apiResponse.orderId || orderId,
+                                    amount: apiResponse.amount,
+                                    vendorQrRefId: actualRefId
+                                }, {
+                                    // Kept as before: a non-pending status the modal has no screen for
+                                    // (REFUNDED) shows the failed screen without reporting `failed`.
+                                    failed: status_1 === 'FAILED'
+                                });
+                                return [2 /*return*/];
+                            }
+                            if (apiResponse.qr && actualRefId) {
+                                mappedPaymentResponse = __assign(__assign({}, apiResponse), { vendorQrRefId: actualRefId });
+                                mappedPaymentPayload = { amount: apiResponse.amount, orderId: apiResponse.orderId, nonce: showPayload.nonce };
+                                this._writeCache({
+                                    payload: mappedPaymentPayload,
+                                    apiResponse: mappedPaymentResponse,
+                                    expireAt: expireAt,
+                                    token: this.api.getToken(),
+                                    environment: this.environment
+                                });
+                                this._resumePaymentState(mappedPaymentResponse, mappedPaymentPayload, expireAt);
+                                return [2 /*return*/];
+                            }
+                        }
+                        throw new Error("Invalid API Response: Missing QR Data.");
+                    case 5:
+                        error_3 = _b.sent();
+                        if (flowId !== this.flowId)
+                            return [2 /*return*/];
+                        this._failFlow(orderId || 'N/A', error_3);
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Starts a fresh flow. Anything still running from an earlier call is
+     * stopped, and its late responses are ignored through `flowId`.
+     */
+    MMPaySDK.prototype._beginFlow = function (onComplete) {
+        this._stopTimers();
+        this.onCompleteCallback = onComplete;
+        this.pendingApiResponse = null;
+        this.pendingPaymentPayload = null;
+        this.settled = false;
+        this.cancelling = false;
+        this.creating = false;
+        return ++this.flowId;
+    };
+    /** Keeps the loading state up briefly so a fast response does not flicker. */
+    MMPaySDK.prototype._holdLoading = function (startTime) {
+        return __awaiter(this, void 0, void 0, function () {
+            var elapsed;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        elapsed = Date.now() - startTime;
+                        if (!(elapsed < MIN_LOADING_MS)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, MIN_LOADING_MS - elapsed); })];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MMPaySDK.prototype._showQr = function (apiResponse, orderId) {
+        this.ui.showQr({
+            merchantName: this.merchantName,
+            orderId: orderId,
+            amount: apiResponse.amount,
+            vendorQrRefId: apiResponse.vendorQrRefId,
+            qr: apiResponse.qr
+        }, this._getUiHandlers());
+    };
+    MMPaySDK.prototype._failFlow = function (orderId, error, amount) {
+        this._stopTimers();
+        this.settled = true;
+        this.api.setToken(null);
+        this.ui.showResult('FAILED', {
+            orderId: orderId,
+            messageKey: 'message.ERROR',
+            detail: (error === null || error === void 0 ? void 0 : error.message) || 'Error occurred.'
+        }, this._getUiHandlers());
+        this._triggerEvent(amount === undefined ? { failed: true, orderId: orderId } : { failed: true, orderId: orderId, amount: amount });
+    };
+    /**
+     * Single exit for every finished payment, whichever source reported it
+     * first (socket, polling or the countdown), so the result screen and the
+     * merchant callback fire exactly once.
+     */
+    MMPaySDK.prototype._finish = function (status, info, overrides) {
+        if (overrides === void 0) { overrides = {}; }
+        if (this.settled)
+            return;
+        this.settled = true;
+        this._stopTimers();
+        this._clearCache();
+        this.api.setToken(null);
+        this.ui.showResult(status, {
+            orderId: info.orderId,
+            messageKey: overrides.messageKey || 'message.' + status,
+            ref: status === 'SUCCESS' ? (info.vendorQrRefId || 'N/A') : undefined
+        }, this._getUiHandlers());
+        this._triggerEvent({
+            success: status === 'SUCCESS',
+            failed: overrides.failed !== undefined ? overrides.failed : status === 'FAILED',
+            expired: status === 'EXPIRED',
+            cancelled: status === 'CANCELLED',
+            amount: info.amount,
+            orderId: info.orderId,
+            vendorQrRefId: info.vendorQrRefId
+        });
+    };
+    MMPaySDK.prototype._getUiHandlers = function () {
+        var _this = this;
+        return {
+            onCloseRequest: function () { return _this.ui.showCancelConfirmation(); },
+            onCancelConfirm: function () {
+                _this._cancelPendingPayment();
+            },
+            onDismiss: function () {
+                _this._clearCache();
+                _this._cleanup();
+            }
+        };
+    };
+    MMPaySDK.prototype._cancelPendingPayment = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var flowId, pending;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.cancelling)
+                            return [2 /*return*/];
+                        this.cancelling = true;
+                        flowId = this.flowId;
+                        pending = this.pendingPaymentPayload;
+                        if (!(pending && !this.settled)) return [3 /*break*/, 4];
+                        this.ui.setCancelBusy(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.api.cancelPayment({
+                                orderId: pending.orderId,
+                                nonce: new Date().getTime().toString() + '_cancel'
+                            })];
+                    case 2:
+                        _a.sent();
+                        if (flowId === this.flowId && !this.settled) {
+                            this._triggerEvent({
+                                cancelled: true,
+                                orderId: pending.orderId,
+                                amount: pending.amount
+                            });
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 4:
+                        // A result that arrived while the cancel request was in flight is already
+                        // on screen. Leave it there instead of closing over it.
+                        if (flowId !== this.flowId || this.settled)
+                            return [2 /*return*/];
+                        this.settled = true;
+                        this._clearCache();
+                        this._cleanup();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MMPaySDK.prototype._triggerEvent = function (eventData) {
+        if (this.onCompleteCallback) {
+            try {
+                this.onCompleteCallback(eventData);
+            }
+            catch (e) { }
+        }
+    };
+    MMPaySDK.prototype._stopTimers = function () {
+        if (this.statusWatcher) {
+            this.statusWatcher.stop();
+            this.statusWatcher = null;
+        }
+        if (this.countdownIntervalId !== undefined) {
+            window.clearInterval(this.countdownIntervalId);
+            this.countdownIntervalId = undefined;
+        }
+    };
+    MMPaySDK.prototype._cleanup = function () {
+        this._stopTimers();
+        this.ui.close();
+    };
+    MMPaySDK.prototype._clearCache = function () {
+        try {
+            localStorage.removeItem(this.CACHE_KEY);
+        }
+        catch (e) { }
+    };
+    MMPaySDK.prototype._readCache = function () {
+        try {
+            var cachedData = localStorage.getItem(this.CACHE_KEY);
+            if (!cachedData)
+                return null;
+            var parsed = JSON.parse(cachedData);
+            if (parsed && parsed.payload && parsed.apiResponse && typeof parsed.expireAt === 'number') {
+                return parsed;
+            }
+        }
+        catch (e) { }
+        this._clearCache();
+        return null;
+    };
+    MMPaySDK.prototype._writeCache = function (data) {
+        try {
+            localStorage.setItem(this.CACHE_KEY, JSON.stringify(data));
+        }
+        catch (e) { }
+    };
+    MMPaySDK.prototype._checkAndAutoResume = function () {
+        var _this = this;
+        var cached = this._readCache();
+        if (!cached)
+            return;
+        if (cached.environment !== this.environment || Date.now() >= cached.expireAt) {
+            this._clearCache();
+            return;
+        }
+        var start = function () {
+            // The merchant may already have started a payment by the time the page
+            // finished loading.
+            if (_this.flowId !== 0)
+                return;
+            _this.flowId++;
+            _this.settled = false;
+            _this.cancelling = false;
+            _this.api.setToken(cached.token);
+            _this._resumePaymentState(cached.apiResponse, cached.payload, cached.expireAt);
+        };
+        if (document.body) {
+            start();
+        }
+        else {
+            document.addEventListener('DOMContentLoaded', start);
+        }
+    };
+    MMPaySDK.prototype._resumePaymentState = function (apiResponse, payload, expireAt) {
+        this.pendingPaymentPayload = payload;
+        this.pendingApiResponse = apiResponse;
+        var actualRefId = apiResponse.vendorQrRefId || apiResponse.transactionRefId;
+        apiResponse.vendorQrRefId = actualRefId;
+        this._showQr(apiResponse, payload.orderId);
+        this._startStatusWatch({ orderId: payload.orderId, nonce: payload.nonce });
+        this._startCountdown(payload.orderId, expireAt);
+        this._triggerEvent({
+            created: true,
+            orderId: payload.orderId,
+            amount: payload.amount,
+            vendorQrRefId: actualRefId
+        });
+    };
+    MMPaySDK.prototype._startStatusWatch = function (payload) {
+        var _this = this;
+        if (this.statusWatcher)
+            this.statusWatcher.stop();
+        var flowId = this.flowId;
+        this.statusWatcher = new PaymentStatusWatcher(this.api, payload, {
+            transport: this.transport,
+            pollInterval: this.POLL_INTERVAL_MS,
+            onStatus: function (response) {
+                var _a;
+                if (flowId !== _this.flowId)
+                    return;
+                var status = (response.status || '').toUpperCase();
+                if (status === 'SUCCESS' || status === 'FAILED' || status === 'EXPIRED' || status === 'CANCELLED') {
+                    _this._finish(status, {
+                        orderId: response.orderId || payload.orderId,
+                        amount: response.amount || ((_a = _this.pendingPaymentPayload) === null || _a === void 0 ? void 0 : _a.amount),
+                        vendorQrRefId: response.vendorQrRefId || response.transactionRefId
+                    });
+                }
+            },
+            onConnectionChange: function (state) {
+                if (flowId === _this.flowId)
+                    _this.ui.setConnectionState(state);
+            }
+        });
+        this.statusWatcher.start();
+    };
+    MMPaySDK.prototype._startCountdown = function (orderId, expireAt) {
+        var _this = this;
+        if (this.countdownIntervalId !== undefined)
+            window.clearInterval(this.countdownIntervalId);
+        var flowId = this.flowId;
+        var update = function () {
+            var _a;
+            if (flowId !== _this.flowId)
+                return;
+            var remaining = Math.max(0, Math.floor((expireAt - Date.now()) / 1000));
+            _this.ui.setCountdown(remaining);
+            if (remaining <= 0) {
+                _this._finish('EXPIRED', {
+                    orderId: orderId,
+                    amount: (_a = _this.pendingPaymentPayload) === null || _a === void 0 ? void 0 : _a.amount
+                }, { messageKey: 'message.TIMEOUT' });
+            }
+        };
+        update();
+        if (!this.settled) {
+            this.countdownIntervalId = window.setInterval(update, 1000);
+        }
+    };
+    return MMPaySDK;
+}());
+if (typeof window !== 'undefined') {
+    window.MMPaySDK = MMPaySDK;
+}
+
+export { MMPaySDK };