mmpay-browser-sdk 1.0.6 → 1.0.8

package/README.md

@@ -39,6 +39,7 @@ showPaymentModal(paymentData: PaymentData): Promise<CreatePaymentResponse>
 MMPayApp.showPaymentModal({
     amount: 50000,
     orderId: 'ORD-' + new Date().getTime(),
+    customMessage: 'Your custom message here', // Optional
     callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
 }, (result) => {
     if (result.success) {
@@ -65,6 +66,7 @@ const MMPayApp = new MMPaySDK('pk_live_YOUR_KEY', {
 MMPayApp.showPaymentModal({
     amount: 50000,
     orderId: 'ORD-' + new Date().getTime(),
+    customMessage: 'Your custom message here', // Optional
     callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
 }, (result) => {
     if (result.success) {
@@ -88,6 +90,7 @@ createPayment(paymentData: PaymentData): Promise<CreatePaymentResponse>
 MMPayApp.createPayment({
     amount: 50000,
     orderId: 'ORD-' + new Date().getTime(),
+    customMessage: 'Your custom message here', // Optional
     callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
 }).then((result) => {
     if (result.qr) {
@@ -153,12 +156,14 @@ export class MMPayService {
      * @param {number} amount
      * @param {string} orderId
      * @param {string} callbackUrl
+     * @param {string} customMessage
      */
-    modalPay(amount: number, orderId: string, callbackUrl?: string) {
+    modalPay(amount: number, orderId: string, callbackUrl?: string, customMessage?: string) {
         this.mmpay.showPaymentModal({
             amount,
             orderId,
             callbackUrl,
+            customMessage,
         }, (result: ModalResponse) => {
             if (result.success) {
                 console.log('Redirect Some where');
@@ -169,12 +174,14 @@ export class MMPayService {
      * @param {number} amount
      * @param {string} orderId
      * @param {string} callbackUrl
+     * @param {string} customMessage
      */
-    pay(amount: number, orderId: string, callbackUrl?: string) {
+    pay(amount: number, orderId: string, callbackUrl?: string, customMessage?: string) {
         this.mmpay.createPayment({
             amount,
             orderId,
             callbackUrl,
+            customMessage,
         })
         .then((result: PayResponse) => {
             if (result.qr) {

package/dist/cjs/index.d.ts

@@ -1,14 +1,24 @@
-export interface ICorePayParams {
+export interface SDKOptions {
+    pollInterval?: number;
+    environment?: 'sandbox' | 'production';
+    baseUrl?: string;
+    merchantName?: string;
+}
+export interface ICreateTokenRequestParams {
     amount: number;
     orderId: string;
-    callbackUrl?: string;
+    nonce?: string;
+}
+export interface ICreateTokenResponse {
+    orderId: string;
+    token: string;
 }
 export interface ICreatePaymentRequestParams {
     amount: number;
-    currency?: string;
     orderId: string;
     callbackUrl?: string;
     nonce?: string;
+    customMessage?: string;
 }
 export interface ICreatePaymentResponse {
     _id: string;
@@ -18,17 +28,6 @@ export interface ICreatePaymentResponse {
     transactionRefId: string;
     qr: string;
 }
-export interface ICreateTokenRequestParams {
-    amount: number;
-    currency?: string;
-    orderId: string;
-    callbackUrl?: string;
-    nonce?: string;
-}
-export interface ICreateTokenResponse {
-    orderId: string;
-    token: string;
-}
 export interface IPollingRequest {
     amount: number;
     currency?: string;
@@ -45,12 +44,6 @@ export interface PolliongResult {
     success: boolean;
     transaction: IPollingResponse;
 }
-export interface SDKOptions {
-    pollInterval?: number;
-    environment?: 'sandbox' | 'production';
-    baseUrl?: string;
-    merchantName?: string;
-}
 export declare class MMPaySDK {
     private POLL_INTERVAL_MS;
     private tokenKey;
@@ -59,113 +52,26 @@ export declare class MMPaySDK {
     private merchantName;
     private environment;
     private pollIntervalId;
+    private countdownIntervalId;
     private onCompleteCallback;
     private overlayElement;
     private pendingApiResponse;
     private pendingPaymentPayload;
     private readonly QR_SIZE;
-    /**
-     * constructor
-     * @param publishableKey
-     * @param options
-     */
+    private readonly TIMEOUT_SECONDS;
     constructor(publishableKey: string, options?: SDKOptions);
-    /**
-     * _callApi
-     * @param endpoint
-     * @param data
-     * @returns
-     */
     private _callApi;
-    /**
-     * _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>}
-     */
     private _callApiTokenRequest;
-    /**
-     * _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>}
-     */
     private _callApiPaymentRequest;
-    /**
-     * createPayment
-     * @param {ICorePayParams} params
-     * @param {number} params.amount
-     * @param {string} params.orderId
-     * @param {string} params.callbackUrl
-     * @returns {Promise<ICreatePaymentResponse>}
-     */
-    createPayment(params: ICorePayParams): Promise<ICreatePaymentResponse>;
-    /**
-     * showPaymentModal
-     * @param {ICorePayParams} params
-     * @param {number} params.amount
-     * @param {string} params.orderId
-     * @param {string} params.callbackUrl
-     * @param {Function} onComplete
-     */
-    showPaymentModal(params: ICorePayParams, onComplete: (result: PolliongResult) => void): Promise<void>;
-    /**
-     * _createAndRenderModal
-     * @param {string} contentHtml
-     * @param {boolean} isTerminal
-     * @returns
-     */
+    createPayment(params: ICreatePaymentRequestParams): Promise<ICreatePaymentResponse>;
+    showPaymentModal(params: ICreatePaymentRequestParams, onComplete: (result: PolliongResult) => void): Promise<void>;
     private _createAndRenderModal;
-    /**
-     * _renderQrModalContent
-     * @param {ICreatePaymentResponse} apiResponse
-     * @param {CreatePaymentRequest} payload
-     * @param {string} merchantName
-     */
     private _renderQrModalContent;
-    /**
-     * _showTerminalMessage
-     * @param {string} orderId
-     * @param {string} status
-     * @param {string} message
-     */
     private _showTerminalMessage;
-    /**
-     * _showCancelConfirmationModal
-     */
     private _showCancelConfirmationModal;
-    /**
-     * _reRenderPendingModalInstance
-     */
     private _reRenderPendingModalInstance;
-    /**
-     * Cleans up the modal and stops polling.
-     * @param {boolean} restoreBodyScroll
-     */
     private _cleanupModal;
-    /**
-     * _injectQrScript
-     * @param {string} qrData
-     * @param {string} qrCanvasId
-     */
     private _injectQrScript;
-    /**
-     * _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
-     */
     private _startPolling;
+    private _startCountdown;
 }

package/dist/cjs/index.js

@@ -2,18 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MMPaySDK = void 0;
 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].");
         }
@@ -23,12 +20,6 @@ class MMPaySDK {
         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',
@@ -52,16 +43,6 @@ class MMPaySDK {
         }
         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'
@@ -74,16 +55,6 @@ class MMPaySDK {
             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'
@@ -96,61 +67,55 @@ class MMPaySDK {
             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 ဒေတာ မရရှိပါ။');
@@ -158,15 +123,9 @@ class MMPaySDK {
         }
         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');
@@ -200,7 +159,6 @@ class MMPaySDK {
               width: 100%;
               padding: 20px 0;
           }
-          /* Card Base Styles */
           .mmpay-card {
             background: #ffffff;
             border-radius: 16px;
@@ -272,15 +230,9 @@ class MMPaySDK {
         };
         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`;
@@ -307,7 +259,7 @@ class MMPaySDK {
       <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; }
@@ -316,10 +268,28 @@ class MMPaySDK {
         .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"/>
@@ -334,6 +304,14 @@ class MMPaySDK {
               ${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">
@@ -366,17 +344,11 @@ class MMPaySDK {
         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;
@@ -388,7 +360,6 @@ class MMPaySDK {
                   </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">
@@ -412,16 +383,17 @@ class MMPaySDK {
             </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="
@@ -443,11 +415,8 @@ class MMPaySDK {
             </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);
@@ -457,15 +426,15 @@ class MMPaySDK {
             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;
@@ -476,11 +445,6 @@ class MMPaySDK {
         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";
@@ -503,16 +467,6 @@ class MMPaySDK {
         };
         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);
@@ -546,7 +500,29 @@ class MMPaySDK {
         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);
+    }
 }
 exports.MMPaySDK = MMPaySDK;
-// Make the SDK class and its instance methods accessible globally
 window.MMPaySDK = MMPaySDK;