mmpay-browser-sdk 1.0.6 → 1.0.8

package/dist/mmpay-sdk.js

@@ -5,18 +5,15 @@
 })(this, (function (exports) { 'use strict';
 
   class MMPaySDK {
-      /**
-       * constructor
-       * @param publishableKey
-       * @param options
-       */
       constructor(publishableKey, options = {}) {
           this.pollIntervalId = undefined;
+          this.countdownIntervalId = undefined;
           this.onCompleteCallback = null;
           this.overlayElement = null;
           this.pendingApiResponse = null;
           this.pendingPaymentPayload = null;
           this.QR_SIZE = 290;
+          this.TIMEOUT_SECONDS = 300;
           if (!publishableKey) {
               throw new Error("A Publishable Key is required to initialize [MMPaySDK].");
           }
@@ -26,12 +23,6 @@
           this.merchantName = options.merchantName || 'Your Merchant';
           this.POLL_INTERVAL_MS = options.pollInterval || 5000;
       }
-      /**
-       * _callApi
-       * @param endpoint
-       * @param data
-       * @returns
-       */
       async _callApi(endpoint, data = {}) {
           let config = {
               'Content-Type': 'application/json',
@@ -55,16 +46,6 @@
           }
           return response.json();
       }
-      /**
-       * _callApiTokenRequest
-       * @param {ICreateTokenRequestParams} payload
-       * @param {number} payload.amount
-       * @param {string} payload.currency
-       * @param {string} payload.orderId
-       * @param {string} payload.nonce
-       * @param {string} payload.callbackUrl
-       * @returns {Promise<ICreateTokenResponse>}
-       */
       async _callApiTokenRequest(payload) {
           try {
               const endpoint = this.environment === 'sandbox'
@@ -77,16 +58,6 @@
               throw error;
           }
       }
-      /**
-       * _callApiPaymentRequest
-       * @param {ICreatePaymentRequestParams} payload
-       * @param {number} payload.amount
-       * @param {string} payload.currency
-       * @param {string} payload.orderId
-       * @param {string} payload.nonce
-       * @param {string} payload.callbackUrl
-       * @returns {Promise<ICreatePaymentResponse>}
-       */
       async _callApiPaymentRequest(payload) {
           try {
               const endpoint = this.environment === 'sandbox'
@@ -99,61 +70,55 @@
               throw error;
           }
       }
-      /**
-       * createPayment
-       * @param {ICorePayParams} params
-       * @param {number} params.amount
-       * @param {string} params.orderId
-       * @param {string} params.callbackUrl
-       * @returns {Promise<ICreatePaymentResponse>}
-       */
       async createPayment(params) {
-          const payload = {
+          const tokenPayload = {
+              amount: params.amount,
+              orderId: params.orderId,
+              nonce: new Date().getTime().toString() + '_mmp'
+          };
+          const paymentPayload = {
               amount: params.amount,
               orderId: params.orderId,
               callbackUrl: params.callbackUrl,
-              currency: 'MMK',
+              customMessage: params.customMessage,
               nonce: new Date().getTime().toString() + '_mmp'
           };
           try {
-              const tokenResponse = await this._callApiTokenRequest(payload);
+              const tokenResponse = await this._callApiTokenRequest(tokenPayload);
               this.tokenKey = tokenResponse.token;
-              const apiResponse = await this._callApiPaymentRequest(payload);
-              return apiResponse;
+              return await this._callApiPaymentRequest(paymentPayload);
           }
           catch (error) {
               console.error("Payment request failed:", error);
               throw error;
           }
       }
-      /**
-       * showPaymentModal
-       * @param {ICorePayParams} params
-       * @param {number} params.amount
-       * @param {string} params.orderId
-       * @param {string} params.callbackUrl
-       * @param {Function} onComplete
-       */
       async showPaymentModal(params, onComplete) {
           const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
           this._createAndRenderModal(initialContent, false);
           this.onCompleteCallback = onComplete;
-          const payload = {
+          const tokenPayload = {
+              amount: params.amount,
+              orderId: params.orderId,
+              nonce: new Date().getTime().toString() + '_mmp'
+          };
+          const paymentPayload = {
               amount: params.amount,
               orderId: params.orderId,
               callbackUrl: params.callbackUrl,
-              currency: 'MMK',
+              customMessage: params.customMessage,
               nonce: new Date().getTime().toString() + '_mmp'
           };
           try {
-              const tokenResponse = await this._callApiTokenRequest(payload);
+              const tokenResponse = await this._callApiTokenRequest(tokenPayload);
               this.tokenKey = tokenResponse.token;
-              const apiResponse = await this._callApiPaymentRequest(payload);
+              const apiResponse = await this._callApiPaymentRequest(paymentPayload);
               if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
                   this.pendingApiResponse = apiResponse;
-                  this.pendingPaymentPayload = payload;
-                  this._renderQrModalContent(apiResponse, payload, this.merchantName);
-                  this._startPolling(payload, onComplete);
+                  this.pendingPaymentPayload = paymentPayload;
+                  this._renderQrModalContent(apiResponse, paymentPayload, this.merchantName);
+                  this._startPolling(paymentPayload, onComplete);
+                  this._startCountdown(paymentPayload.orderId);
               }
               else {
                   this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
@@ -161,15 +126,9 @@
           }
           catch (error) {
               this.tokenKey = null;
-              this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
+              this._showTerminalMessage(paymentPayload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
           }
       }
-      /**
-       * _createAndRenderModal
-       * @param {string} contentHtml
-       * @param {boolean} isTerminal
-       * @returns
-       */
       _createAndRenderModal(contentHtml, isTerminal = false) {
           this._cleanupModal(false);
           const overlay = document.createElement('div');
@@ -203,7 +162,6 @@
               width: 100%;
               padding: 20px 0;
           }
-          /* Card Base Styles */
           .mmpay-card {
             background: #ffffff;
             border-radius: 16px;
@@ -275,15 +233,9 @@
           };
           window.MMPayReRenderModal = () => this._reRenderPendingModalInstance();
           overlay.innerHTML += `<div class="mmpay-overlay-content">${contentHtml}</div>`;
-          document.body.style.overflow = 'hidden'; // FIX: Prevent body scroll when modal is open
+          document.body.style.overflow = 'hidden';
           return overlay;
       }
-      /**
-       * _renderQrModalContent
-       * @param {ICreatePaymentResponse} apiResponse
-       * @param {CreatePaymentRequest} payload
-       * @param {string} merchantName
-       */
       _renderQrModalContent(apiResponse, payload, merchantName) {
           const qrData = apiResponse.qr;
           const amountDisplay = `${apiResponse.amount.toFixed(2)} MMK`;
@@ -310,7 +262,7 @@
       <style>
         .mmpay-card { max-width: 350px; padding: 16px; }
         .mmpay-header { color: #1f2937; font-size: 1rem; font-weight: bold; margin-bottom: 8px; }
-        .mmpay-qr-container { padding: 0; margin: 10px auto; display: inline-block; line-height: 0; width: 300px; height: 300px; }
+        .mmpay-qr-container { padding: 0; margin: 5px auto 10px auto; display: inline-block; line-height: 0; width: 300px; height: 300px; }
         #${qrCanvasId} { display: block; background: white; border-radius: 8px; width: 100%; height: 100%; }
         .mmpay-amount { font-size: 1.2rem; font-weight: 800; color: #1f2937; margin: 0; }
         .mmpay-separator { border-top: 1px solid #f3f4f6; margin: 12px 0; }
@@ -319,10 +271,28 @@
         .mmpay-detail span { text-align: left; }
         .mmpay-secure-text { color: #757575; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
         .mmpay-warning { font-size: 0.75rem; color: #9ca3af; font-weight: 500; margin-top: 12px; line-height: 1.5; }
+
+        .mmpay-timer-badge {
+            background-color: #fef2f2;
+            color: #b91c1c;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-weight: 700;
+            font-size: 0.85rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            margin: 8px 0;
+            border: 1px solid #fee2e2;
+        }
+        .mmpay-timer-icon {
+            width: 14px;
+            height: 14px;
+            fill: currentColor;
+        }
       </style>
 
       <div class="mmpay-card">
-          <!-- Close Button - Triggers Confirmation Modal -->
           <button class="mmpay-close-btn" onclick="MMPayCloseModal(false)">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                   <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
@@ -337,6 +307,14 @@
               ${merchantName} သို့ပေးချေပါ
           </div>
 
+          <div class="mmpay-timer-badge" id="mmpay-timer-badge">
+             <svg class="mmpay-timer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+               <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>
+             <span id="mmpay-countdown-text">05:00</span>
+          </div>
+
           <div class="mmpay-amount">${amountDisplay}</div>
 
           <div class="mmpay-qr-container">
@@ -369,17 +347,11 @@
           this._createAndRenderModal(qrContentHtml, false);
           this._injectQrScript(qrData, qrCanvasId);
       }
-      /**
-       * _showTerminalMessage
-       * @param {string} orderId
-       * @param {string} status
-       * @param {string} message
-       */
       _showTerminalMessage(orderId, status, message) {
           this._cleanupModal(true);
-          const successColor = '#10b981'; // Tailwind Green 500
-          const failureColor = '#ef4444'; // Tailwind Red 500
-          const expiredColor = '#f59e0b'; // Tailwind Amber 500
+          const successColor = '#10b981';
+          const failureColor = '#ef4444';
+          const expiredColor = '#f59e0b';
           let color;
           let iconSvg;
           let statusText;
@@ -391,7 +363,6 @@
                   </svg>`;
           }
           else {
-              // Shared icon for FAILED and EXPIRED (X mark)
               color = status === 'FAILED' ? failureColor : expiredColor;
               statusText = status === 'FAILED' ? 'မအောင်မြင်' : 'သက်တမ်းကုန်';
               iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="${color}" viewBox="0 0 16 16">
@@ -415,16 +386,17 @@
             </button>
         </div>
     `;
-          this._createAndRenderModal(content, true); // Set isTerminal=true so the close button always forces cleanup
+          this._createAndRenderModal(content, true);
       }
-      /**
-       * _showCancelConfirmationModal
-       */
       _showCancelConfirmationModal() {
           if (this.pollIntervalId !== undefined) {
               window.clearInterval(this.pollIntervalId);
               this.pollIntervalId = undefined;
           }
+          if (this.countdownIntervalId !== undefined) {
+              window.clearInterval(this.countdownIntervalId);
+              this.countdownIntervalId = undefined;
+          }
           this._cleanupModal(false);
           const content = `
         <div class="mmpay-card mmpay-terminal-card" style="
@@ -446,11 +418,8 @@
             </div>
         </div>
     `;
-          this._createAndRenderModal(content, false); // Set isTerminal=false so the close button calls MMPayCloseModal(true)
+          this._createAndRenderModal(content, false);
       }
-      /**
-       * _reRenderPendingModalInstance
-       */
       _reRenderPendingModalInstance() {
           if (this.pendingApiResponse && this.pendingPaymentPayload && this.onCompleteCallback) {
               this._cleanupModal(true);
@@ -460,15 +429,15 @@
               this._cleanupModal(true);
           }
       }
-      /**
-       * Cleans up the modal and stops polling.
-       * @param {boolean} restoreBodyScroll
-       */
       _cleanupModal(restoreBodyScroll) {
           if (this.pollIntervalId !== undefined) {
               window.clearInterval(this.pollIntervalId);
               this.pollIntervalId = undefined;
           }
+          if (this.countdownIntervalId !== undefined) {
+              window.clearInterval(this.countdownIntervalId);
+              this.countdownIntervalId = undefined;
+          }
           if (this.overlayElement && this.overlayElement.parentNode) {
               this.overlayElement.parentNode.removeChild(this.overlayElement);
               this.overlayElement = null;
@@ -479,11 +448,6 @@
           delete window.MMPayCloseModal;
           delete window.MMPayReRenderModal;
       }
-      /**
-       * _injectQrScript
-       * @param {string} qrData
-       * @param {string} qrCanvasId
-       */
       _injectQrScript(qrData, qrCanvasId) {
           const script = document.createElement('script');
           script.src = "https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js";
@@ -506,16 +470,6 @@
           };
           document.head.appendChild(script);
       }
-      /**
-       * _startPolling
-       * @param {IPollingRequest} payload
-       * @param {number} payload.amount
-       * @param {string} payload.currency
-       * @param {string} payload.orderId
-       * @param {string} payload.nonce
-       * @param {string} payload.callbackUrl
-       * @param {Function} onComplete
-       */
       async _startPolling(payload, onComplete) {
           if (this.pollIntervalId !== undefined) {
               window.clearInterval(this.pollIntervalId);
@@ -549,8 +503,30 @@
           checkStatus();
           this.pollIntervalId = window.setInterval(checkStatus, this.POLL_INTERVAL_MS);
       }
+      _startCountdown(orderId) {
+          if (this.countdownIntervalId !== undefined) {
+              window.clearInterval(this.countdownIntervalId);
+          }
+          let remaining = this.TIMEOUT_SECONDS;
+          const timerElement = document.getElementById('mmpay-countdown-text');
+          const updateDisplay = () => {
+              if (!timerElement)
+                  return;
+              const minutes = Math.floor(remaining / 60);
+              const seconds = remaining % 60;
+              timerElement.innerText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+          };
+          this.countdownIntervalId = window.setInterval(() => {
+              remaining--;
+              updateDisplay();
+              if (remaining <= 0) {
+                  window.clearInterval(this.countdownIntervalId);
+                  this.countdownIntervalId = undefined;
+                  this._showTerminalMessage(orderId, 'EXPIRED', 'သတ်မှတ်ချိန်ကုန်သွားပါပြီ။');
+              }
+          }, 1000);
+      }
   }
-  // Make the SDK class and its instance methods accessible globally
   window.MMPaySDK = MMPaySDK;
 
   exports.MMPaySDK = MMPaySDK;

package/dist/mmpay-sdk.js.map

@@ -1 +1 @@
-{"version":3,"file":"mmpay-sdk.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"mmpay-sdk.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mmpay-browser-sdk",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "JavaScript SDK for integrating the MMQR Merchant and Redirect payment gateway",
   "keywords": [
     "MMQR",