mmpay-browser-sdk 1.0.3 → 1.0.5

package/src/index.ts

@@ -1,42 +1,50 @@
-export interface PaymentData {
+export interface ICorePayParams {
   amount: number;
-  currency: string;
   orderId: string;
   callbackUrl?: string;
 }
-export interface CreatePaymentResponse {
+
+export interface ICreatePaymentRequestParams {
+  amount: number;
+  currency?: string;
+  orderId: string;
+  callbackUrl?: string;
+  nonce?: string;
+}
+export interface ICreatePaymentResponse {
   _id: string;
   amount: number;
   orderId: string;
-  currency: string;
-  transactionId: string;
+  currency?: string;
+  transactionRefId: string;
   qr: string;
-  url: string;
 }
-export interface PollingResponse {
-  _id: string;
-  appId: 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;
-  method?: string;
-  vendor?: string;
+  currency?: 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 +65,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;
@@ -65,12 +74,16 @@ export class MMPaySDK {
   private onCompleteCallback: ((result: PolliongResult) => void) | null = null;
   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: ICreatePaymentRequestParams | null = null;
 
-  private readonly QR_SIZE: number = 300;
+  private readonly QR_SIZE: number = 290;
 
+  /**
+   * constructor
+   * @param publishableKey
+   * @param options
+   */
   constructor(publishableKey: string, options: SDKOptions = {}) {
     if (!publishableKey) {
       throw new Error("A Publishable Key is required to initialize [MMPaySDK].");
@@ -79,7 +92,7 @@ export class MMPaySDK {
     this.environment = options.environment || 'production';
     this.baseUrl = options.baseUrl || 'https://api.mm-pay.com';
     this.merchantName = options.merchantName || 'Your Merchant';
-    this.POLL_INTERVAL_MS = options.pollInterval || 3000;
+    this.POLL_INTERVAL_MS = options.pollInterval || 5000;
   }
   /**
    * _callApi
@@ -88,12 +101,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) {
@@ -103,26 +124,125 @@ export class MMPaySDK {
     return response.json() as Promise<T>;
   }
   /**
-   * createPaymentRequest
-   * @param {PaymentData} payload
-   * @returns
+   * _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 async _callApiTokenRequest(payload: ICreateTokenRequestParams): 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;
+    }
+  }
+  /**
+   * _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 createPaymentRequest(payload: PaymentData): Promise<CreatePaymentResponse> {
+  private async _callApiPaymentRequest(payload: ICreatePaymentRequestParams): Promise<ICreatePaymentResponse> {
     try {
       const endpoint = this.environment === 'sandbox'
         ? '/xpayments/sandbox-payment-create'
         : '/xpayments/production-payment-create';
+      return await this._callApi<ICreatePaymentResponse>(endpoint, payload);
+    } catch (error) {
+      console.error("Payment request failed:", error);
+      throw error;
+    }
+  }
 
-      return await this._callApi<CreatePaymentResponse>(endpoint, payload);
+
+
+  /**
+   * createPayment
+   * @param {ICorePayParams} params
+   * @param {number} params.amount
+   * @param {string} params.orderId
+   * @param {string} params.callbackUrl
+   * @returns {Promise<ICreatePaymentResponse>}
+   */
+  public async createPayment(params: ICorePayParams): Promise<ICreatePaymentResponse> {
+    const payload: ICreatePaymentRequestParams = {
+      amount: params.amount,
+      orderId: params.orderId,
+      callbackUrl: params.callbackUrl,
+      currency: 'MMK',
+      nonce: new Date().getTime().toString() + '_mmp'
+    }
+    try {
+      const tokenResponse = await this._callApiTokenRequest(payload);
+      this.tokenKey = tokenResponse.token as string;
+      const apiResponse = await this._callApiPaymentRequest(payload);
+      return apiResponse
     } 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
+   */
+  public async showPaymentModal(
+    params: ICorePayParams,
+    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;
+    const payload: ICreatePaymentRequestParams = {
+      amount: params.amount,
+      orderId: params.orderId,
+      callbackUrl: params.callbackUrl,
+      currency: 'MMK',
+      nonce: new Date().getTime().toString() + '_mmp'
+    }
+
+    try {
+      const tokenResponse = await this._callApiTokenRequest(payload);
+      this.tokenKey = tokenResponse.token as string;
+      const apiResponse = await this._callApiPaymentRequest(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 {
@@ -134,7 +254,6 @@ export class MMPaySDK {
     const style = document.createElement('style');
     style.innerHTML = `
           @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Padauk:wght@400;700&display=swap');
-
           #mmpay-full-modal {
             position: fixed;
             top: 0;
@@ -233,42 +352,15 @@ 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: ICreatePaymentRequestParams, merchantName: string): void {
     const qrData = apiResponse.qr;
-    const amountDisplay = `${apiResponse.amount.toFixed(2)} ${apiResponse.currency}`;
+    const amountDisplay = `${apiResponse.amount.toFixed(2)} MMK`;
     const qrCanvasId = 'mmpayQrCanvas';
     const orderId = payload.orderId;
     window.MMPayDownloadQR = function () {
@@ -333,7 +425,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">
@@ -441,7 +533,7 @@ export class MMPaySDK {
   }
   /**
    * Cleans up the modal and stops polling.
-   * @param restoreBodyScroll
+   * @param {boolean} restoreBodyScroll
    */
   private _cleanupModal(restoreBodyScroll: boolean): void {
     if (this.pollIntervalId !== undefined) {
@@ -486,10 +578,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 +596,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 +609,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,7 @@
         </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>
 
     <!-- Client-Side Application Logic -->
     <script>
@@ -140,11 +160,11 @@
         const mockOrder = {
             currency: 'MMK',
             items: [
-                { name: "Fastify T-Shirt", price: 25000, qty: 1 },
-                { name: "Node.js Dev Sticker Pack", price: 10000, qty: 3 },
-                { name: "TypeScript Handbook (Digital)", price: 18000, qty: 1 }
+                { name: "Fastify T-Shirt", price: 500, qty: 1 },
+                { name: "Node.js Dev Sticker Pack", price: 500, qty: 3 },
+                { name: "TypeScript Handbook (Digital)", price: 500, qty: 1 }
             ],
-            shipping: 2500,
+            shipping: 500,
             taxRate: 0.08
         };
 
@@ -207,26 +227,17 @@
             try {
 
                 const sdk = new MMPaySDK(PUBLISHABLE_KEY, {
-                    baseUrl: 'https://supapay.ecgedms.com',
+                    baseUrl: 'https://ezapi.myanmyanpay.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-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 +251,5 @@
         window.onload = renderOrderSummary;
     </script>
 </body>
+
 </html>