mmpay-browser-sdk 1.0.3 → 1.0.4

package/dist/cjs/index.d.ts

@@ -1,46 +1,45 @@
-export interface PaymentData {
+export interface ICreatePaymentRequest {
     amount: number;
     currency: string;
     orderId: string;
     callbackUrl?: string;
+    nonce?: string;
 }
-export interface CreatePaymentResponse {
+export interface ICreatePaymentResponse {
     _id: string;
     amount: number;
     orderId: string;
     currency: string;
-    transactionId: string;
+    transactionRefId: string;
     qr: string;
     url: string;
 }
-export interface PollingResponse {
-    _id: string;
-    appId: string;
+export interface ICreateTokenRequest {
+    amount: number;
+    currency: string;
+    orderId: string;
+    callbackUrl?: string;
+    nonce?: string;
+}
+export interface ICreateTokenResponse {
     orderId: string;
+    token: string;
+}
+export interface IPollingRequest {
     amount: number;
     currency: string;
-    method?: string;
-    vendor?: string;
+    orderId: string;
     callbackUrl?: string;
-    callbackUrlStatus?: 'PENDING' | 'SUCCESS' | 'FAILED';
-    callbackAt?: Date;
-    disbursementStatus?: 'NONE' | 'PENDING' | 'COMPLETED' | 'FAILED' | 'CANCELLED';
-    disburseAt?: Date;
-    items: {
-        name: string;
-        amount: number;
-        quantity: number;
-    }[];
-    merchantId: string;
+    nonce?: string;
+}
+export interface IPollingResponse {
+    orderId: string;
+    transactionRefId: string;
     status: 'PENDING' | 'SUCCESS' | 'FAILED' | 'EXPIRED';
-    createdAt: Date;
-    transactionRefId?: string;
-    qr?: string;
-    redirectUrl?: string;
 }
 export interface PolliongResult {
     success: boolean;
-    transaction: PollingResponse;
+    transaction: IPollingResponse;
 }
 export interface SDKOptions {
     pollInterval?: number;
@@ -50,6 +49,7 @@ export interface SDKOptions {
 }
 export declare class MMPaySDK {
     private POLL_INTERVAL_MS;
+    private tokenKey;
     private publishableKey;
     private baseUrl;
     private merchantName;
@@ -68,29 +68,45 @@ export declare class MMPaySDK {
      * @returns
      */
     private _callApi;
+    /**
+     * createTokenRequest
+     * @param {ICreateTokenRequest} payload
+     * @param {number} payload.amount
+     * @param {string} payload.currency
+     * @param {string} payload.orderId
+     * @param {string} payload.nonce
+     * @param {string} payload.callbackUrl
+     * @returns {Promise<ICreateTokenResponse>}
+     */
+    createTokenRequest(payload: ICreateTokenRequest): Promise<ICreateTokenResponse>;
     /**
      * createPaymentRequest
-     * @param {PaymentData} payload
-     * @returns
+     * @param {ICreatePaymentRequest} payload
+     * @param {number} payload.amount
+     * @param {string} payload.currency
+     * @param {string} payload.orderId
+     * @param {string} payload.nonce
+     * @param {string} payload.callbackUrl
+     * @returns {Promise<ICreatePaymentResponse>}
+     */
+    createPaymentRequest(payload: ICreatePaymentRequest): Promise<ICreatePaymentResponse>;
+    /**
+     * showPaymentModal
+     * @param {CreatePaymentRequest} payload
+     * @param {Function} onComplete
      */
-    createPaymentRequest(payload: PaymentData): Promise<CreatePaymentResponse>;
+    showPaymentModal(payload: ICreatePaymentRequest, onComplete: (result: PolliongResult) => void): Promise<void>;
     /**
      * _createAndRenderModal
      * @param {string} contentHtml
-     * @param isTerminal
+     * @param {boolean} isTerminal
      * @returns
      */
     private _createAndRenderModal;
-    /**
-     * showPaymentModal
-     * @param {PaymentData} payload
-     * @param {Function} onComplete
-     */
-    showPaymentModal(payload: PaymentData, onComplete: (result: PolliongResult) => void): Promise<void>;
     /**
      * _renderQrModalContent
-     * @param {CreatePaymentResponse} apiResponse
-     * @param {PaymentData} payload
+     * @param {ICreatePaymentResponse} apiResponse
+     * @param {CreatePaymentRequest} payload
      * @param {string} merchantName
      */
     private _renderQrModalContent;
@@ -122,7 +138,12 @@ export declare class MMPaySDK {
     private _injectQrScript;
     /**
      * _startPolling
-     * @param {string} _id
+     * @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;

package/dist/cjs/index.js

@@ -26,12 +26,20 @@ class MMPaySDK {
      * @returns
      */
     async _callApi(endpoint, data = {}) {
+        let config = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.publishableKey}`
+        };
+        if (this.tokenKey) {
+            config = {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.publishableKey}`,
+                'X-MMPay-Btoken': `${this.tokenKey}`
+            };
+        }
         const response = await fetch(`${this.baseUrl}${endpoint}`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${this.publishableKey}`
-            },
+            headers: config,
             body: JSON.stringify(data)
         });
         if (!response.ok) {
@@ -40,10 +48,37 @@ class MMPaySDK {
         }
         return response.json();
     }
+    /**
+     * createTokenRequest
+     * @param {ICreateTokenRequest} 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 createTokenRequest(payload) {
+        try {
+            const endpoint = this.environment === 'sandbox'
+                ? '/xpayments/sandbox-token-request'
+                : '/xpayments/production-token-request';
+            return await this._callApi(endpoint, payload);
+        }
+        catch (error) {
+            console.error("Token request failed:", error);
+            throw error;
+        }
+    }
     /**
      * createPaymentRequest
-     * @param {PaymentData} payload
-     * @returns
+     * @param {ICreatePaymentRequest} 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 createPaymentRequest(payload) {
         try {
@@ -57,10 +92,39 @@ class MMPaySDK {
             throw error;
         }
     }
+    /**
+     * showPaymentModal
+     * @param {CreatePaymentRequest} payload
+     * @param {Function} onComplete
+     */
+    async showPaymentModal(payload, onComplete) {
+        const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
+        this._createAndRenderModal(initialContent, false);
+        this.onCompleteCallback = onComplete;
+        try {
+            payload.nonce = new Date().getTime().toString() + '_mmp';
+            const tokenResponse = await this.createTokenRequest(payload);
+            this.tokenKey = tokenResponse.token;
+            const apiResponse = await this.createPaymentRequest(payload);
+            if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
+                this.pendingApiResponse = apiResponse;
+                this.pendingPaymentPayload = payload;
+                this._renderQrModalContent(apiResponse, payload, this.merchantName);
+                this._startPolling(payload, onComplete);
+            }
+            else {
+                this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
+            }
+        }
+        catch (error) {
+            this.tokenKey = null;
+            this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
+        }
+    }
     /**
      * _createAndRenderModal
      * @param {string} contentHtml
-     * @param isTerminal
+     * @param {boolean} isTerminal
      * @returns
      */
     _createAndRenderModal(contentHtml, isTerminal = false) {
@@ -172,36 +236,10 @@ class MMPaySDK {
         document.body.style.overflow = 'hidden'; // FIX: Prevent body scroll when modal is open
         return overlay;
     }
-    /**
-     * showPaymentModal
-     * @param {PaymentData} payload
-     * @param {Function} onComplete
-     */
-    async showPaymentModal(payload, onComplete) {
-        const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
-        this._createAndRenderModal(initialContent, false);
-        this.onCompleteCallback = onComplete;
-        try {
-            const apiResponse = await this.createPaymentRequest(payload);
-            if (apiResponse && apiResponse.qr && apiResponse.transactionId) {
-                this.pendingApiResponse = apiResponse;
-                this.pendingPaymentPayload = payload;
-                this._renderQrModalContent(apiResponse, payload, this.merchantName);
-                this._startPolling(apiResponse._id, onComplete);
-            }
-            else {
-                this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
-            }
-        }
-        catch (error) {
-            // Myanmar translation for "Error during payment initiation. See console."
-            this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
-        }
-    }
     /**
      * _renderQrModalContent
-     * @param {CreatePaymentResponse} apiResponse
-     * @param {PaymentData} payload
+     * @param {ICreatePaymentResponse} apiResponse
+     * @param {CreatePaymentRequest} payload
      * @param {string} merchantName
      */
     _renderQrModalContent(apiResponse, payload, merchantName) {
@@ -273,7 +311,7 @@ class MMPaySDK {
               <span class="mmpay-text-myanmar">မှာယူမှုနံပါတ်:</span> <strong>${apiResponse.orderId}</strong>
           </div>
           <div class="mmpay-detail">
-              <span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionId}</strong>
+              <span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionRefId}</strong>
           </div>
 
           <p class="mmpay-warning mmpay-text-myanmar">
@@ -428,10 +466,15 @@ class MMPaySDK {
     }
     /**
      * _startPolling
-     * @param {string} _id
+     * @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(_id, onComplete) {
+    async _startPolling(payload, onComplete) {
         if (this.pollIntervalId !== undefined) {
             window.clearInterval(this.pollIntervalId);
         }
@@ -440,7 +483,7 @@ class MMPaySDK {
                 const endpoint = this.environment === 'sandbox'
                     ? '/xpayments/sandbox-payment-polling'
                     : '/xpayments/production-payment-polling';
-                const response = await this._callApi(endpoint, { _id: _id });
+                const response = await this._callApi(endpoint, payload);
                 const status = (response.status || '').toUpperCase();
                 if (status === 'SUCCESS' || status === 'FAILED' || status === 'EXPIRED') {
                     window.clearInterval(this.pollIntervalId);
@@ -451,6 +494,7 @@ class MMPaySDK {
                         `ငွေပေးချေမှု ${status === 'FAILED' ? 'မအောင်မြင်ပါ' : 'သက်တမ်းကုန်သွားပါပြီ'}.`;
                     this._showTerminalMessage(response.orderId || 'N/A', status, message);
                     if (onComplete) {
+                        this.tokenKey = null;
                         onComplete({ success: success, transaction: response });
                     }
                     return;

package/dist/esm/index.d.ts

@@ -1,46 +1,45 @@
-export interface PaymentData {
+export interface ICreatePaymentRequest {
     amount: number;
     currency: string;
     orderId: string;
     callbackUrl?: string;
+    nonce?: string;
 }
-export interface CreatePaymentResponse {
+export interface ICreatePaymentResponse {
     _id: string;
     amount: number;
     orderId: string;
     currency: string;
-    transactionId: string;
+    transactionRefId: string;
     qr: string;
     url: string;
 }
-export interface PollingResponse {
-    _id: string;
-    appId: string;
+export interface ICreateTokenRequest {
+    amount: number;
+    currency: string;
+    orderId: string;
+    callbackUrl?: string;
+    nonce?: string;
+}
+export interface ICreateTokenResponse {
     orderId: string;
+    token: string;
+}
+export interface IPollingRequest {
     amount: number;
     currency: string;
-    method?: string;
-    vendor?: string;
+    orderId: string;
     callbackUrl?: string;
-    callbackUrlStatus?: 'PENDING' | 'SUCCESS' | 'FAILED';
-    callbackAt?: Date;
-    disbursementStatus?: 'NONE' | 'PENDING' | 'COMPLETED' | 'FAILED' | 'CANCELLED';
-    disburseAt?: Date;
-    items: {
-        name: string;
-        amount: number;
-        quantity: number;
-    }[];
-    merchantId: string;
+    nonce?: string;
+}
+export interface IPollingResponse {
+    orderId: string;
+    transactionRefId: string;
     status: 'PENDING' | 'SUCCESS' | 'FAILED' | 'EXPIRED';
-    createdAt: Date;
-    transactionRefId?: string;
-    qr?: string;
-    redirectUrl?: string;
 }
 export interface PolliongResult {
     success: boolean;
-    transaction: PollingResponse;
+    transaction: IPollingResponse;
 }
 export interface SDKOptions {
     pollInterval?: number;
@@ -50,6 +49,7 @@ export interface SDKOptions {
 }
 export declare class MMPaySDK {
     private POLL_INTERVAL_MS;
+    private tokenKey;
     private publishableKey;
     private baseUrl;
     private merchantName;
@@ -68,29 +68,45 @@ export declare class MMPaySDK {
      * @returns
      */
     private _callApi;
+    /**
+     * createTokenRequest
+     * @param {ICreateTokenRequest} payload
+     * @param {number} payload.amount
+     * @param {string} payload.currency
+     * @param {string} payload.orderId
+     * @param {string} payload.nonce
+     * @param {string} payload.callbackUrl
+     * @returns {Promise<ICreateTokenResponse>}
+     */
+    createTokenRequest(payload: ICreateTokenRequest): Promise<ICreateTokenResponse>;
     /**
      * createPaymentRequest
-     * @param {PaymentData} payload
-     * @returns
+     * @param {ICreatePaymentRequest} payload
+     * @param {number} payload.amount
+     * @param {string} payload.currency
+     * @param {string} payload.orderId
+     * @param {string} payload.nonce
+     * @param {string} payload.callbackUrl
+     * @returns {Promise<ICreatePaymentResponse>}
+     */
+    createPaymentRequest(payload: ICreatePaymentRequest): Promise<ICreatePaymentResponse>;
+    /**
+     * showPaymentModal
+     * @param {CreatePaymentRequest} payload
+     * @param {Function} onComplete
      */
-    createPaymentRequest(payload: PaymentData): Promise<CreatePaymentResponse>;
+    showPaymentModal(payload: ICreatePaymentRequest, onComplete: (result: PolliongResult) => void): Promise<void>;
     /**
      * _createAndRenderModal
      * @param {string} contentHtml
-     * @param isTerminal
+     * @param {boolean} isTerminal
      * @returns
      */
     private _createAndRenderModal;
-    /**
-     * showPaymentModal
-     * @param {PaymentData} payload
-     * @param {Function} onComplete
-     */
-    showPaymentModal(payload: PaymentData, onComplete: (result: PolliongResult) => void): Promise<void>;
     /**
      * _renderQrModalContent
-     * @param {CreatePaymentResponse} apiResponse
-     * @param {PaymentData} payload
+     * @param {ICreatePaymentResponse} apiResponse
+     * @param {CreatePaymentRequest} payload
      * @param {string} merchantName
      */
     private _renderQrModalContent;
@@ -122,7 +138,12 @@ export declare class MMPaySDK {
     private _injectQrScript;
     /**
      * _startPolling
-     * @param {string} _id
+     * @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;

package/dist/esm/index.js

@@ -23,12 +23,20 @@ export class MMPaySDK {
      * @returns
      */
     async _callApi(endpoint, data = {}) {
+        let config = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.publishableKey}`
+        };
+        if (this.tokenKey) {
+            config = {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.publishableKey}`,
+                'X-MMPay-Btoken': `${this.tokenKey}`
+            };
+        }
         const response = await fetch(`${this.baseUrl}${endpoint}`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${this.publishableKey}`
-            },
+            headers: config,
             body: JSON.stringify(data)
         });
         if (!response.ok) {
@@ -37,10 +45,37 @@ export class MMPaySDK {
         }
         return response.json();
     }
+    /**
+     * createTokenRequest
+     * @param {ICreateTokenRequest} 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 createTokenRequest(payload) {
+        try {
+            const endpoint = this.environment === 'sandbox'
+                ? '/xpayments/sandbox-token-request'
+                : '/xpayments/production-token-request';
+            return await this._callApi(endpoint, payload);
+        }
+        catch (error) {
+            console.error("Token request failed:", error);
+            throw error;
+        }
+    }
     /**
      * createPaymentRequest
-     * @param {PaymentData} payload
-     * @returns
+     * @param {ICreatePaymentRequest} 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 createPaymentRequest(payload) {
         try {
@@ -54,10 +89,39 @@ export class MMPaySDK {
             throw error;
         }
     }
+    /**
+     * showPaymentModal
+     * @param {CreatePaymentRequest} payload
+     * @param {Function} onComplete
+     */
+    async showPaymentModal(payload, onComplete) {
+        const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
+        this._createAndRenderModal(initialContent, false);
+        this.onCompleteCallback = onComplete;
+        try {
+            payload.nonce = new Date().getTime().toString() + '_mmp';
+            const tokenResponse = await this.createTokenRequest(payload);
+            this.tokenKey = tokenResponse.token;
+            const apiResponse = await this.createPaymentRequest(payload);
+            if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
+                this.pendingApiResponse = apiResponse;
+                this.pendingPaymentPayload = payload;
+                this._renderQrModalContent(apiResponse, payload, this.merchantName);
+                this._startPolling(payload, onComplete);
+            }
+            else {
+                this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
+            }
+        }
+        catch (error) {
+            this.tokenKey = null;
+            this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
+        }
+    }
     /**
      * _createAndRenderModal
      * @param {string} contentHtml
-     * @param isTerminal
+     * @param {boolean} isTerminal
      * @returns
      */
     _createAndRenderModal(contentHtml, isTerminal = false) {
@@ -169,36 +233,10 @@ export class MMPaySDK {
         document.body.style.overflow = 'hidden'; // FIX: Prevent body scroll when modal is open
         return overlay;
     }
-    /**
-     * showPaymentModal
-     * @param {PaymentData} payload
-     * @param {Function} onComplete
-     */
-    async showPaymentModal(payload, onComplete) {
-        const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
-        this._createAndRenderModal(initialContent, false);
-        this.onCompleteCallback = onComplete;
-        try {
-            const apiResponse = await this.createPaymentRequest(payload);
-            if (apiResponse && apiResponse.qr && apiResponse.transactionId) {
-                this.pendingApiResponse = apiResponse;
-                this.pendingPaymentPayload = payload;
-                this._renderQrModalContent(apiResponse, payload, this.merchantName);
-                this._startPolling(apiResponse._id, onComplete);
-            }
-            else {
-                this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
-            }
-        }
-        catch (error) {
-            // Myanmar translation for "Error during payment initiation. See console."
-            this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
-        }
-    }
     /**
      * _renderQrModalContent
-     * @param {CreatePaymentResponse} apiResponse
-     * @param {PaymentData} payload
+     * @param {ICreatePaymentResponse} apiResponse
+     * @param {CreatePaymentRequest} payload
      * @param {string} merchantName
      */
     _renderQrModalContent(apiResponse, payload, merchantName) {
@@ -270,7 +308,7 @@ export class MMPaySDK {
               <span class="mmpay-text-myanmar">မှာယူမှုနံပါတ်:</span> <strong>${apiResponse.orderId}</strong>
           </div>
           <div class="mmpay-detail">
-              <span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionId}</strong>
+              <span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionRefId}</strong>
           </div>
 
           <p class="mmpay-warning mmpay-text-myanmar">
@@ -425,10 +463,15 @@ export class MMPaySDK {
     }
     /**
      * _startPolling
-     * @param {string} _id
+     * @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(_id, onComplete) {
+    async _startPolling(payload, onComplete) {
         if (this.pollIntervalId !== undefined) {
             window.clearInterval(this.pollIntervalId);
         }
@@ -437,7 +480,7 @@ export class MMPaySDK {
                 const endpoint = this.environment === 'sandbox'
                     ? '/xpayments/sandbox-payment-polling'
                     : '/xpayments/production-payment-polling';
-                const response = await this._callApi(endpoint, { _id: _id });
+                const response = await this._callApi(endpoint, payload);
                 const status = (response.status || '').toUpperCase();
                 if (status === 'SUCCESS' || status === 'FAILED' || status === 'EXPIRED') {
                     window.clearInterval(this.pollIntervalId);
@@ -448,6 +491,7 @@ export class MMPaySDK {
                         `ငွေပေးချေမှု ${status === 'FAILED' ? 'မအောင်မြင်ပါ' : 'သက်တမ်းကုန်သွားပါပြီ'}.`;
                     this._showTerminalMessage(response.orderId || 'N/A', status, message);
                     if (onComplete) {
+                        this.tokenKey = null;
                         onComplete({ success: success, transaction: response });
                     }
                     return;

package/dist/mmpay-sdk.js

@@ -29,12 +29,20 @@
        * @returns
        */
       async _callApi(endpoint, data = {}) {
+          let config = {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${this.publishableKey}`
+          };
+          if (this.tokenKey) {
+              config = {
+                  'Content-Type': 'application/json',
+                  'Authorization': `Bearer ${this.publishableKey}`,
+                  'X-MMPay-Btoken': `${this.tokenKey}`
+              };
+          }
           const response = await fetch(`${this.baseUrl}${endpoint}`, {
               method: 'POST',
-              headers: {
-                  'Content-Type': 'application/json',
-                  'Authorization': `Bearer ${this.publishableKey}`
-              },
+              headers: config,
               body: JSON.stringify(data)
           });
           if (!response.ok) {
@@ -43,10 +51,37 @@
           }
           return response.json();
       }
+      /**
+       * createTokenRequest
+       * @param {ICreateTokenRequest} 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 createTokenRequest(payload) {
+          try {
+              const endpoint = this.environment === 'sandbox'
+                  ? '/xpayments/sandbox-token-request'
+                  : '/xpayments/production-token-request';
+              return await this._callApi(endpoint, payload);
+          }
+          catch (error) {
+              console.error("Token request failed:", error);
+              throw error;
+          }
+      }
       /**
        * createPaymentRequest
-       * @param {PaymentData} payload
-       * @returns
+       * @param {ICreatePaymentRequest} 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 createPaymentRequest(payload) {
           try {
@@ -60,10 +95,39 @@
               throw error;
           }
       }
+      /**
+       * showPaymentModal
+       * @param {CreatePaymentRequest} payload
+       * @param {Function} onComplete
+       */
+      async showPaymentModal(payload, onComplete) {
+          const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
+          this._createAndRenderModal(initialContent, false);
+          this.onCompleteCallback = onComplete;
+          try {
+              payload.nonce = new Date().getTime().toString() + '_mmp';
+              const tokenResponse = await this.createTokenRequest(payload);
+              this.tokenKey = tokenResponse.token;
+              const apiResponse = await this.createPaymentRequest(payload);
+              if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
+                  this.pendingApiResponse = apiResponse;
+                  this.pendingPaymentPayload = payload;
+                  this._renderQrModalContent(apiResponse, payload, this.merchantName);
+                  this._startPolling(payload, onComplete);
+              }
+              else {
+                  this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
+              }
+          }
+          catch (error) {
+              this.tokenKey = null;
+              this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
+          }
+      }
       /**
        * _createAndRenderModal
        * @param {string} contentHtml
-       * @param isTerminal
+       * @param {boolean} isTerminal
        * @returns
        */
       _createAndRenderModal(contentHtml, isTerminal = false) {
@@ -175,36 +239,10 @@
           document.body.style.overflow = 'hidden'; // FIX: Prevent body scroll when modal is open
           return overlay;
       }
-      /**
-       * showPaymentModal
-       * @param {PaymentData} payload
-       * @param {Function} onComplete
-       */
-      async showPaymentModal(payload, onComplete) {
-          const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
-          this._createAndRenderModal(initialContent, false);
-          this.onCompleteCallback = onComplete;
-          try {
-              const apiResponse = await this.createPaymentRequest(payload);
-              if (apiResponse && apiResponse.qr && apiResponse.transactionId) {
-                  this.pendingApiResponse = apiResponse;
-                  this.pendingPaymentPayload = payload;
-                  this._renderQrModalContent(apiResponse, payload, this.merchantName);
-                  this._startPolling(apiResponse._id, onComplete);
-              }
-              else {
-                  this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
-              }
-          }
-          catch (error) {
-              // Myanmar translation for "Error during payment initiation. See console."
-              this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
-          }
-      }
       /**
        * _renderQrModalContent
-       * @param {CreatePaymentResponse} apiResponse
-       * @param {PaymentData} payload
+       * @param {ICreatePaymentResponse} apiResponse
+       * @param {CreatePaymentRequest} payload
        * @param {string} merchantName
        */
       _renderQrModalContent(apiResponse, payload, merchantName) {
@@ -276,7 +314,7 @@
               <span class="mmpay-text-myanmar">မှာယူမှုနံပါတ်:</span> <strong>${apiResponse.orderId}</strong>
           </div>
           <div class="mmpay-detail">
-              <span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionId}</strong>
+              <span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionRefId}</strong>
           </div>
 
           <p class="mmpay-warning mmpay-text-myanmar">
@@ -431,10 +469,15 @@
       }
       /**
        * _startPolling
-       * @param {string} _id
+       * @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(_id, onComplete) {
+      async _startPolling(payload, onComplete) {
           if (this.pollIntervalId !== undefined) {
               window.clearInterval(this.pollIntervalId);
           }
@@ -443,7 +486,7 @@
                   const endpoint = this.environment === 'sandbox'
                       ? '/xpayments/sandbox-payment-polling'
                       : '/xpayments/production-payment-polling';
-                  const response = await this._callApi(endpoint, { _id: _id });
+                  const response = await this._callApi(endpoint, payload);
                   const status = (response.status || '').toUpperCase();
                   if (status === 'SUCCESS' || status === 'FAILED' || status === 'EXPIRED') {
                       window.clearInterval(this.pollIntervalId);
@@ -454,6 +497,7 @@
                           `ငွေပေးချေမှု ${status === 'FAILED' ? 'မအောင်မြင်ပါ' : 'သက်တမ်းကုန်သွားပါပြီ'}.`;
                       this._showTerminalMessage(response.orderId || 'N/A', status, message);
                       if (onComplete) {
+                          this.tokenKey = null;
                           onComplete({ success: success, transaction: response });
                       }
                       return;

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.3",
+  "version": "1.0.4",
   "description": "JavaScript SDK for integrating the MMQR Merchant and Redirect payment gateway",
   "keywords": [
     "MMQR",

package/src/index.ts

@@ -1,42 +1,45 @@
-export interface PaymentData {
+export interface ICreatePaymentRequest {
   amount: number;
   currency: string;
   orderId: string;
   callbackUrl?: string;
+  nonce?: string;
 }
-export interface CreatePaymentResponse {
+export interface ICreatePaymentResponse {
   _id: string;
   amount: number;
   orderId: string;
   currency: string;
-  transactionId: string;
+  transactionRefId: string;
   qr: string;
   url: string;
 }
-export interface PollingResponse {
-  _id: string;
-  appId: string;
+export interface ICreateTokenRequest {
+  amount: number;
+  currency: string;
   orderId: string;
+  callbackUrl?: string;
+  nonce?: string;
+}
+export interface ICreateTokenResponse {
+  orderId: string;
+  token: string;
+}
+export interface IPollingRequest {
   amount: number;
   currency: string;
-  method?: string;
-  vendor?: string;
+  orderId: string;
   callbackUrl?: string;
-  callbackUrlStatus?: 'PENDING' | 'SUCCESS' | 'FAILED';
-  callbackAt?: Date;
-  disbursementStatus?: 'NONE' | 'PENDING' | 'COMPLETED' | 'FAILED' | 'CANCELLED';
-  disburseAt?: Date;
-  items: {name: string, amount: number, quantity: number}[];
-  merchantId: string;
+  nonce?: string;
+}
+export interface IPollingResponse {
+  orderId: string;
+  transactionRefId: string;
   status: 'PENDING' | 'SUCCESS' | 'FAILED' | 'EXPIRED';
-  createdAt: Date;
-  transactionRefId?: string;
-  qr?: string;
-  redirectUrl?: string;
 }
 export interface PolliongResult {
   success: boolean;
-  transaction: PollingResponse;
+  transaction: IPollingResponse;
 }
 export interface SDKOptions {
   pollInterval?: number;
@@ -57,6 +60,7 @@ declare const window: Window & {
 export class MMPaySDK {
 
   private POLL_INTERVAL_MS: number;
+  private tokenKey: string;
   private publishableKey: string;
   private baseUrl: string;
   private merchantName: string;
@@ -66,8 +70,8 @@ export class MMPaySDK {
   private overlayElement: HTMLDivElement | null = null;
 
   // Properties to store pending data for re-rendering after cancel attempt
-  private pendingApiResponse: CreatePaymentResponse | null = null;
-  private pendingPaymentPayload: PaymentData | null = null;
+  private pendingApiResponse: ICreatePaymentResponse | null = null;
+  private pendingPaymentPayload: ICreatePaymentRequest | null = null;
 
   private readonly QR_SIZE: number = 300;
 
@@ -88,12 +92,20 @@ export class MMPaySDK {
    * @returns
    */
   private async _callApi<T>(endpoint: string, data: object = {}): Promise<T> {
+    let config: any = {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${this.publishableKey}`
+    }
+    if (this.tokenKey) {
+      config = {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${this.publishableKey}`,
+        'X-MMPay-Btoken': `${this.tokenKey}`
+      }
+    }
     const response = await fetch(`${this.baseUrl}${endpoint}`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${this.publishableKey}`
-      },
+      headers: config,
       body: JSON.stringify(data)
     });
     if (!response.ok) {
@@ -102,27 +114,82 @@ export class MMPaySDK {
     }
     return response.json() as Promise<T>;
   }
+  /**
+   * createTokenRequest
+   * @param {ICreateTokenRequest} 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 createTokenRequest(payload: ICreateTokenRequest): Promise<ICreateTokenResponse> {
+    try {
+      const endpoint = this.environment === 'sandbox'
+        ? '/xpayments/sandbox-token-request'
+        : '/xpayments/production-token-request';
+      return await this._callApi<ICreateTokenResponse>(endpoint, payload);
+    } catch (error) {
+      console.error("Token request failed:", error);
+      throw error;
+    }
+  }
   /**
    * createPaymentRequest
-   * @param {PaymentData} payload
-   * @returns
+   * @param {ICreatePaymentRequest} 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 createPaymentRequest(payload: PaymentData): Promise<CreatePaymentResponse> {
+  async createPaymentRequest(payload: ICreatePaymentRequest): Promise<ICreatePaymentResponse> {
     try {
       const endpoint = this.environment === 'sandbox'
         ? '/xpayments/sandbox-payment-create'
         : '/xpayments/production-payment-create';
-
-      return await this._callApi<CreatePaymentResponse>(endpoint, payload);
+      return await this._callApi<ICreatePaymentResponse>(endpoint, payload);
     } catch (error) {
       console.error("Payment request failed:", error);
       throw error;
     }
   }
+  /**
+   * showPaymentModal
+   * @param {CreatePaymentRequest} payload
+   * @param {Function} onComplete
+   */
+  public async showPaymentModal(
+    payload: ICreatePaymentRequest,
+    onComplete: (result: PolliongResult) => void
+  ): Promise<void> {
+    const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
+    this._createAndRenderModal(initialContent, false);
+    this.onCompleteCallback = onComplete;
+    try {
+      payload.nonce = new Date().getTime().toString() + '_mmp';
+      const tokenResponse = await this.createTokenRequest(payload);
+      this.tokenKey = tokenResponse.token as string;
+      const apiResponse = await this.createPaymentRequest(payload);
+      if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
+        this.pendingApiResponse = apiResponse;
+        this.pendingPaymentPayload = payload;
+        this._renderQrModalContent(apiResponse, payload, this.merchantName);
+        this._startPolling(payload, onComplete);
+      } else {
+        this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
+      }
+    } catch (error) {
+      this.tokenKey = null;
+      this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
+    }
+  }
   /**
    * _createAndRenderModal
    * @param {string} contentHtml
-   * @param isTerminal
+   * @param {boolean} isTerminal
    * @returns
    */
   private _createAndRenderModal(contentHtml: string, isTerminal: boolean = false): HTMLDivElement {
@@ -233,40 +300,13 @@ export class MMPaySDK {
     document.body.style.overflow = 'hidden'; // FIX: Prevent body scroll when modal is open
     return overlay;
   }
-  /**
-   * showPaymentModal
-   * @param {PaymentData} payload
-   * @param {Function} onComplete
-   */
-  public async showPaymentModal(
-    payload: PaymentData,
-    onComplete: (result: PolliongResult) => void
-  ): Promise<void> {
-    const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
-    this._createAndRenderModal(initialContent, false);
-    this.onCompleteCallback = onComplete;
-    try {
-      const apiResponse = await this.createPaymentRequest(payload);
-      if (apiResponse && apiResponse.qr && apiResponse.transactionId) {
-        this.pendingApiResponse = apiResponse;
-        this.pendingPaymentPayload = payload;
-        this._renderQrModalContent(apiResponse, payload, this.merchantName);
-        this._startPolling(apiResponse._id, onComplete);
-      } else {
-        this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
-      }
-    } catch (error) {
-      // Myanmar translation for "Error during payment initiation. See console."
-      this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
-    }
-  }
   /**
    * _renderQrModalContent
-   * @param {CreatePaymentResponse} apiResponse
-   * @param {PaymentData} payload
+   * @param {ICreatePaymentResponse} apiResponse
+   * @param {CreatePaymentRequest} payload
    * @param {string} merchantName
    */
-  private _renderQrModalContent(apiResponse: CreatePaymentResponse, payload: PaymentData, merchantName: string): void {
+  private _renderQrModalContent(apiResponse: ICreatePaymentResponse, payload: ICreatePaymentRequest, merchantName: string): void {
     const qrData = apiResponse.qr;
     const amountDisplay = `${apiResponse.amount.toFixed(2)} ${apiResponse.currency}`;
     const qrCanvasId = 'mmpayQrCanvas';
@@ -333,7 +373,7 @@ export class MMPaySDK {
               <span class="mmpay-text-myanmar">မှာယူမှုနံပါတ်:</span> <strong>${apiResponse.orderId}</strong>
           </div>
           <div class="mmpay-detail">
-              <span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionId}</strong>
+              <span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionRefId}</strong>
           </div>
 
           <p class="mmpay-warning mmpay-text-myanmar">
@@ -486,10 +526,15 @@ export class MMPaySDK {
   }
   /**
    * _startPolling
-   * @param {string} _id
+   * @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 async _startPolling(_id: string, onComplete: (result: PolliongResult) => void): Promise<void> {
+  private async _startPolling(payload: IPollingRequest, onComplete: (result: PolliongResult) => void): Promise<void> {
     if (this.pollIntervalId !== undefined) {
       window.clearInterval(this.pollIntervalId);
     }
@@ -499,7 +544,7 @@ export class MMPaySDK {
           ? '/xpayments/sandbox-payment-polling'
           : '/xpayments/production-payment-polling';
 
-        const response = await this._callApi<PollingResponse>(endpoint, {_id: _id});
+        const response = await this._callApi<IPollingResponse>(endpoint, payload);
         const status = (response.status || '').toUpperCase();
         if (status === 'SUCCESS' || status === 'FAILED' || status === 'EXPIRED') {
           window.clearInterval(this.pollIntervalId);
@@ -512,7 +557,8 @@ export class MMPaySDK {
           this._showTerminalMessage(response.orderId || 'N/A', status as 'SUCCESS' | 'FAILED' | 'EXPIRED', message);
 
           if (onComplete) {
-            onComplete({success: success, transaction: response as PollingResponse});
+            this.tokenKey = null;
+            onComplete({success: success, transaction: response as IPollingResponse});
           }
           return;
         }

package/test/home.html

@@ -1,4 +1,5 @@
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,6 +13,7 @@
             display: flex;
             justify-content: center;
         }
+
         .container {
             display: flex;
             flex-direction: column;
@@ -19,12 +21,15 @@
             max-width: 1000px;
             width: 100%;
         }
+
         @media (min-width: 768px) {
             .container {
                 flex-direction: row;
             }
         }
-        .order-summary, .payment-area {
+
+        .order-summary,
+        .payment-area {
             background-color: #ffffff;
             padding: 25px;
             border-radius: 10px;
@@ -32,6 +37,7 @@
             flex: 1;
             min-height: 450px;
         }
+
         h2 {
             color: #2c3e50;
             border-bottom: 2px solid #ecf0f1;
@@ -40,6 +46,7 @@
             font-size: 1.5rem;
             font-weight: 700;
         }
+
         .item-list div {
             display: flex;
             justify-content: space-between;
@@ -47,9 +54,11 @@
             border-bottom: 1px dashed #ecf0f1;
             color: #7f8c8d;
         }
+
         .item-list div:last-child {
             border-bottom: none;
         }
+
         .total {
             margin-top: 20px;
             padding-top: 15px;
@@ -60,6 +69,7 @@
             display: flex;
             justify-content: space-between;
         }
+
         .checkout-button {
             width: 100%;
             background-color: #2ecc71;
@@ -74,10 +84,12 @@
             margin-top: 20px;
             box-shadow: 0 2px 5px rgba(46, 204, 113, 0.4);
         }
+
         .checkout-button:hover {
             background-color: #27ae60;
             box-shadow: 0 4px 8px rgba(39, 174, 96, 0.6);
         }
+
         .payment-status {
             margin-top: 20px;
             padding: 15px;
@@ -89,10 +101,19 @@
             max-height: 200px;
             overflow-y: auto;
         }
-        .success { color: #28a745; font-weight: bold; }
-        .failure { color: #dc3545; font-weight: bold; }
+
+        .success {
+            color: #28a745;
+            font-weight: bold;
+        }
+
+        .failure {
+            color: #dc3545;
+            font-weight: bold;
+        }
     </style>
 </head>
+
 <body>
 
     <div class="container">
@@ -115,7 +136,8 @@
         <div class="payment-area">
             <h2>💳 Payment Details</h2>
             <div id="payment-container">
-                <p style="color: #6c757d; padding: 20px;">Click the "Pay Securely" button to initialize the transaction and display the MMPay QR code.</p>
+                <p style="color: #6c757d; padding: 20px;">Click the "Pay Securely" button to initialize the transaction
+                    and display the MMPay QR code.</p>
             </div>
             <div class="payment-status" id="result-container">
                 Awaiting transaction polling result...
@@ -123,9 +145,26 @@
         </div>
     </div>
 
-    <!-- The external SDK file is loaded here -->
-    <!-- <script src="../dist/mmpay-sdk.js"></script> -->
-    <script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/mmpay-browser-sdk/master/dist/mmpay-sdk.js"></script>
+    <script src="../dist/mmpay-sdk.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/dist/mmpay-sdk.js"></script> -->
+    <!-- <script>
+        const PUBLISHABLE_KEY = 'pk_test_504013d7294ea1f6ecf4a2a0d38c31e0788286ef1b8ccacecf2a9b2809e23341';
+        const sdk = new MMPaySDK(PUBLISHABLE_KEY, {
+            baseUrl: 'https://supapay.ecgedms.com',
+            environment: 'sandbox',
+            merchantName: 'Fastify E-Shop',
+            pollInterval: 5000
+        });
+        await sdk.showPaymentModal({
+            amount: parseFloat(finalAmount.toFixed(2)),
+            currency: mockOrder.currency,
+            orderId: 'FSTY' + Date.now(),
+            callbackUrl: 'https://your.backend.com/api/mmpay/webhook'
+        },(result) => {
+            const resultContainer = document.getElementById(RESULT_CONTAINER_ID);
+            // DO your logic
+        });
+    </script> -->
 
     <!-- Client-Side Application Logic -->
     <script>
@@ -217,16 +256,8 @@
                     currency: mockOrder.currency,
                     orderId: 'FSTY' + Date.now(),
                     callbackUrl: 'https://your-fastify-backend.com/api/mmpay/webhook'
-                },(result) => {
-                    const resultContainer = document.getElementById(RESULT_CONTAINER_ID);
-                    document.getElementById(PAY_BUTTON_ID).disabled = false;
-                    if (result.success) {
-                        resultContainer.innerHTML = '<span class="success">✅ PAYMENT SUCCESSFUL!</span><br><br>' + JSON.stringify(result.transaction, null, 2);
-                        document.getElementById(CONTAINER_ID).innerHTML = '<div style="color: #2ecc71; font-size: 1.5rem; font-weight: bold; padding: 50px 0;">Transaction Complete! Thank you for your order!</div>';
-                    } else {
-                        resultContainer.innerHTML = '<span class="failure">❌ PAYMENT FAILED / EXPIRED.</span><br><br>' + JSON.stringify(result.transaction, null, 2);
-                        document.getElementById(CONTAINER_ID).innerHTML = '<div style="color: #e74c3c; font-size: 1.5rem; font-weight: bold; padding: 50px 0;">Transaction Failed. Please try again.</div>';
-                    }
+                }, (result) => {
+
                 });
 
             } catch (error) {
@@ -240,4 +271,5 @@
         window.onload = renderOrderSummary;
     </script>
 </body>
+
 </html>