@mmpay/browser 0.0.0-stage → 1.3.1

package/src/index.ts

@@ -0,0 +1,490 @@
+import {MMPayAPI} from './api';
+import {PaymentStatusWatcher} from './stream';
+import {
+  ICreatePaymentRequestParams,
+  ICreatePaymentResponse,
+  IModalEventResult,
+  IPaymentShowRequestParams,
+  IPollingRequest,
+  IPollingResponse,
+  MMPayLanguage,
+  MMPayTerminalStatus,
+  MMPayTransport,
+  SDKOptions
+} from './types';
+import {MMPayUI, MMPayUIHandlers} from './ui';
+
+const MIN_LOADING_MS = 400;
+
+export class MMPaySDK {
+  private POLL_INTERVAL_MS: number;
+  private TIMEOUT_SECONDS: number = 900;
+  private readonly CACHE_KEY: string = 'mmpay_pending_tx';
+  private environment: 'sandbox' | 'production';
+  private transport: MMPayTransport;
+  protected merchantName: string;
+  private onCompleteCallback: ((result: IModalEventResult) => void) | null = null;
+  private statusWatcher: PaymentStatusWatcher | null = null;
+  private countdownIntervalId: number | undefined = undefined;
+  private pendingApiResponse: any | null = null;
+  private pendingPaymentPayload: any | null = null;
+  private flowId: number = 0;
+  private settled: boolean = true;
+  private cancelling: boolean = false;
+  private creating: boolean = false;
+  protected api: MMPayAPI;
+  protected ui: MMPayUI;
+
+  constructor(publishableKey: string, options: SDKOptions = {}) {
+    if (!publishableKey) {
+      throw new Error("A Publishable Key is required to initialize [MMPaySDK].");
+    }
+    if (publishableKey.includes('pk_test')) {
+      this.environment = 'sandbox';
+    } else if (publishableKey.includes('pk_live')) {
+      this.environment = 'production';
+    } else {
+      this.environment = options.environment || 'production';
+    }
+    const baseUrl = options.baseUrl || 'https://bbapi.myanmyanpay.com';
+    this.merchantName = options.merchantName || 'MyanMyanPay';
+    this.POLL_INTERVAL_MS = options.pollInterval || 5000;
+    this.transport = options.transport || 'auto';
+    if (typeof options.timeoutSeconds === 'number' && isFinite(options.timeoutSeconds)) {
+      // The server expires an unpaid order after 15 minutes, so the countdown
+      // can be shortened but not extended.
+      this.TIMEOUT_SECONDS = Math.min(900, Math.max(60, Math.floor(options.timeoutSeconds)));
+    }
+    this.api = new MMPayAPI(baseUrl, this.environment, publishableKey);
+    this.ui = new MMPayUI({
+      mode: options.design?.mode || 'light',
+      color: options.design?.color
+    }, options.language);
+    if (typeof window !== 'undefined') {
+      this._checkAndAutoResume();
+    }
+  }
+
+  /**
+   * Switches the modal language. Works at any time, including while a payment
+   * is on screen, and is remembered for the shopper's next visit.
+   */
+  public setLanguage(language: MMPayLanguage | 'my'): void {
+    this.ui.setLanguage(language);
+  }
+
+  public getLanguage(): MMPayLanguage {
+    return this.ui.getLanguage();
+  }
+
+  public async showPaymentModal(
+    params: ICreatePaymentRequestParams,
+    onComplete: (result: IModalEventResult) => void
+  ): Promise<void> {
+    // A second call while an order is still being created (double click) must
+    // not create a second order.
+    if (this.creating) {
+      this.onCompleteCallback = onComplete;
+      return;
+    }
+    const flowId = this._beginFlow(onComplete);
+    this.creating = true;
+    this.ui.showLoading({
+      merchantName: this.merchantName,
+      orderId: params.orderId,
+      amount: params.amount
+    }, this._getUiHandlers());
+    try {
+      const startTime = Date.now();
+      if (await this._showUnfinishedOrder(flowId, startTime)) return;
+      if (flowId !== this.flowId) return;
+      const tokenNonce = new Date().getTime().toString() + '_create';
+      const tokenResponse = await this.api.createToken({
+        amount: params.amount,
+        orderId: params.orderId,
+        nonce: tokenNonce
+      });
+      if (flowId !== this.flowId) return;
+      this.api.setToken(tokenResponse.token);
+      const apiResponse: any = await this.api.createPayment({...params, nonce: tokenNonce});
+      await this._holdLoading(startTime);
+      if (flowId !== this.flowId) return;
+      const actualRefId = apiResponse?.vendorQrRefId || apiResponse?.transactionRefId;
+      if (apiResponse && apiResponse.qr && actualRefId) {
+        apiResponse.vendorQrRefId = actualRefId;
+        this.pendingPaymentPayload = {...params, tokenNonce};
+        this.pendingApiResponse = apiResponse;
+        const expireAt = Date.now() + (this.TIMEOUT_SECONDS * 1000);
+        this._writeCache({
+          payload: {amount: apiResponse.amount, orderId: params.orderId, nonce: tokenNonce + '_poll'},
+          apiResponse: apiResponse,
+          expireAt: expireAt,
+          token: this.api.getToken(),
+          environment: this.environment
+        });
+        this._showQr(apiResponse, params.orderId);
+        this._startStatusWatch({orderId: params.orderId, nonce: tokenNonce + '_poll'});
+        this._startCountdown(params.orderId, expireAt);
+        this._triggerEvent({
+          created: true,
+          orderId: params.orderId,
+          vendorQrRefId: actualRefId,
+          amount: params.amount
+        });
+      } else {
+        throw new Error("Invalid API Response: Missing QR Data.");
+      }
+    } catch (error: any) {
+      if (flowId !== this.flowId) return;
+      this._failFlow(params.orderId, error, params.amount);
+    } finally {
+      if (flowId === this.flowId) this.creating = false;
+    }
+  }
+
+  /**
+   * Spam guard: while the shopper has an order that is not paid, cancelled or
+   * expired, a new one is not created. The unfinished order is shown again
+   * instead. The server is asked first, so an order that finished in the
+   * meantime does not block a new one.
+   */
+  private async _showUnfinishedOrder(flowId: number, startTime: number): Promise<boolean> {
+    const cached = this._readCache();
+    if (!cached) return false;
+    if (cached.environment !== this.environment || Date.now() >= cached.expireAt) {
+      this._clearCache();
+      return false;
+    }
+    this.api.setToken(cached.token);
+    try {
+      const response = await this.api.pollPayment({orderId: cached.payload.orderId, nonce: cached.payload.nonce});
+      await this._holdLoading(startTime);
+      if (flowId !== this.flowId) return true;
+      if ((response.status || '').toUpperCase() === 'PENDING') {
+        this._resumePaymentState(cached.apiResponse, cached.payload, cached.expireAt);
+        return true;
+      }
+    } catch (error) {
+      if (flowId !== this.flowId) return true;
+    }
+    this.api.setToken(null);
+    this._clearCache();
+    return false;
+  }
+
+  public async pay(orderId: string, onComplete: (result: IModalEventResult) => void): Promise<void> {
+    const flowId = this._beginFlow(onComplete);
+    const cached = this._readCache();
+    if (cached) {
+      if (cached.environment === this.environment && Date.now() < cached.expireAt && cached.payload?.orderId === orderId) {
+        this.api.setToken(cached.token);
+        this._resumePaymentState(cached.apiResponse, cached.payload, cached.expireAt);
+        return;
+      }
+      this._clearCache();
+    }
+    this.ui.showLoading({merchantName: this.merchantName, orderId}, this._getUiHandlers());
+    const showPayload: IPaymentShowRequestParams = {orderId, nonce: new Date().getTime().toString() + '_show'};
+    const expireAt = Date.now() + (this.TIMEOUT_SECONDS * 1000);
+    try {
+      const startTime = Date.now();
+      const tokenNonce = new Date().getTime().toString() + '_read';
+      const tokenResponse = await this.api.createToken({orderId, nonce: tokenNonce});
+      if (flowId !== this.flowId) return;
+      this.api.setToken(tokenResponse.token);
+      const apiResponse: any = await this.api.showPayment(showPayload);
+      await this._holdLoading(startTime);
+      if (flowId !== this.flowId) return;
+      if (apiResponse) {
+        const status = (apiResponse.status || '').toUpperCase();
+        const actualRefId = apiResponse.vendorQrRefId || apiResponse.transactionRefId;
+        if (status !== 'PENDING') {
+          const terminalStatus: MMPayTerminalStatus =
+            status === 'SUCCESS' || status === 'CANCELLED' || status === 'EXPIRED' ? status : 'FAILED';
+          this._finish(terminalStatus, {
+            orderId: apiResponse.orderId || orderId,
+            amount: apiResponse.amount,
+            vendorQrRefId: actualRefId
+          }, {
+            // Kept as before: a non-pending status the modal has no screen for
+            // (REFUNDED) shows the failed screen without reporting `failed`.
+            failed: status === 'FAILED'
+          });
+          return;
+        }
+        if (apiResponse.qr && actualRefId) {
+          const mappedPaymentResponse: ICreatePaymentResponse = {...apiResponse, vendorQrRefId: actualRefId};
+          const mappedPaymentPayload = {amount: apiResponse.amount, orderId: apiResponse.orderId, nonce: showPayload.nonce};
+          this._writeCache({
+            payload: mappedPaymentPayload,
+            apiResponse: mappedPaymentResponse,
+            expireAt: expireAt,
+            token: this.api.getToken(),
+            environment: this.environment
+          });
+          this._resumePaymentState(mappedPaymentResponse, mappedPaymentPayload, expireAt);
+          return;
+        }
+      }
+      throw new Error("Invalid API Response: Missing QR Data.");
+    } catch (error: any) {
+      if (flowId !== this.flowId) return;
+      this._failFlow(orderId || 'N/A', error);
+    }
+  }
+
+  /**
+   * Starts a fresh flow. Anything still running from an earlier call is
+   * stopped, and its late responses are ignored through `flowId`.
+   */
+  private _beginFlow(onComplete: (result: IModalEventResult) => void): number {
+    this._stopTimers();
+    this.onCompleteCallback = onComplete;
+    this.pendingApiResponse = null;
+    this.pendingPaymentPayload = null;
+    this.settled = false;
+    this.cancelling = false;
+    this.creating = false;
+    return ++this.flowId;
+  }
+
+  /** Keeps the loading state up briefly so a fast response does not flicker. */
+  private async _holdLoading(startTime: number): Promise<void> {
+    const elapsed = Date.now() - startTime;
+    if (elapsed < MIN_LOADING_MS) {
+      await new Promise(resolve => setTimeout(resolve, MIN_LOADING_MS - elapsed));
+    }
+  }
+
+  private _showQr(apiResponse: any, orderId: string): void {
+    this.ui.showQr({
+      merchantName: this.merchantName,
+      orderId,
+      amount: apiResponse.amount,
+      vendorQrRefId: apiResponse.vendorQrRefId,
+      qr: apiResponse.qr
+    }, this._getUiHandlers());
+  }
+
+  private _failFlow(orderId: string, error: any, amount?: number): void {
+    this._stopTimers();
+    this.settled = true;
+    this.api.setToken(null);
+    this.ui.showResult('FAILED', {
+      orderId,
+      messageKey: 'message.ERROR',
+      detail: error?.message || 'Error occurred.'
+    }, this._getUiHandlers());
+    this._triggerEvent(amount === undefined ? {failed: true, orderId} : {failed: true, orderId, amount});
+  }
+
+  /**
+   * Single exit for every finished payment, whichever source reported it
+   * first (socket, polling or the countdown), so the result screen and the
+   * merchant callback fire exactly once.
+   */
+  private _finish(
+    status: MMPayTerminalStatus,
+    info: {orderId: string; amount?: number; vendorQrRefId?: string},
+    overrides: {failed?: boolean; messageKey?: string} = {}
+  ): void {
+    if (this.settled) return;
+    this.settled = true;
+    this._stopTimers();
+    this._clearCache();
+    this.api.setToken(null);
+    this.ui.showResult(status, {
+      orderId: info.orderId,
+      messageKey: overrides.messageKey || 'message.' + status,
+      ref: status === 'SUCCESS' ? (info.vendorQrRefId || 'N/A') : undefined
+    }, this._getUiHandlers());
+    this._triggerEvent({
+      success: status === 'SUCCESS',
+      failed: overrides.failed !== undefined ? overrides.failed : status === 'FAILED',
+      expired: status === 'EXPIRED',
+      cancelled: status === 'CANCELLED',
+      amount: info.amount,
+      orderId: info.orderId,
+      vendorQrRefId: info.vendorQrRefId
+    });
+  }
+
+  protected _getUiHandlers(): MMPayUIHandlers {
+    return {
+      onCloseRequest: () => this.ui.showCancelConfirmation(),
+      onCancelConfirm: () => {
+        this._cancelPendingPayment();
+      },
+      onDismiss: () => {
+        this._clearCache();
+        this._cleanup();
+      }
+    };
+  }
+
+  private async _cancelPendingPayment(): Promise<void> {
+    if (this.cancelling) return;
+    this.cancelling = true;
+    const flowId = this.flowId;
+    const pending = this.pendingPaymentPayload;
+    if (pending && !this.settled) {
+      this.ui.setCancelBusy(true);
+      try {
+        await this.api.cancelPayment({
+          orderId: pending.orderId,
+          nonce: new Date().getTime().toString() + '_cancel'
+        });
+        if (flowId === this.flowId && !this.settled) {
+          this._triggerEvent({
+            cancelled: true,
+            orderId: pending.orderId,
+            amount: pending.amount
+          });
+        }
+      } catch (e) { }
+    }
+    // A result that arrived while the cancel request was in flight is already
+    // on screen. Leave it there instead of closing over it.
+    if (flowId !== this.flowId || this.settled) return;
+    this.settled = true;
+    this._clearCache();
+    this._cleanup();
+  }
+
+  protected _triggerEvent(eventData: IModalEventResult): void {
+    if (this.onCompleteCallback) {
+      try {
+        this.onCompleteCallback(eventData);
+      } catch (e) { }
+    }
+  }
+
+  private _stopTimers(): void {
+    if (this.statusWatcher) {
+      this.statusWatcher.stop();
+      this.statusWatcher = null;
+    }
+    if (this.countdownIntervalId !== undefined) {
+      window.clearInterval(this.countdownIntervalId);
+      this.countdownIntervalId = undefined;
+    }
+  }
+
+  protected _cleanup(): void {
+    this._stopTimers();
+    this.ui.close();
+  }
+
+  protected _clearCache(): void {
+    try {
+      localStorage.removeItem(this.CACHE_KEY);
+    } catch (e) { }
+  }
+
+  private _readCache(): any | null {
+    try {
+      const cachedData = localStorage.getItem(this.CACHE_KEY);
+      if (!cachedData) return null;
+      const parsed = JSON.parse(cachedData);
+      if (parsed && parsed.payload && parsed.apiResponse && typeof parsed.expireAt === 'number') {
+        return parsed;
+      }
+    } catch (e) { }
+    this._clearCache();
+    return null;
+  }
+
+  private _writeCache(data: object): void {
+    try {
+      localStorage.setItem(this.CACHE_KEY, JSON.stringify(data));
+    } catch (e) { }
+  }
+
+  private _checkAndAutoResume(): void {
+    const cached = this._readCache();
+    if (!cached) return;
+    if (cached.environment !== this.environment || Date.now() >= cached.expireAt) {
+      this._clearCache();
+      return;
+    }
+    const start = () => {
+      // The merchant may already have started a payment by the time the page
+      // finished loading.
+      if (this.flowId !== 0) return;
+      this.flowId++;
+      this.settled = false;
+      this.cancelling = false;
+      this.api.setToken(cached.token);
+      this._resumePaymentState(cached.apiResponse, cached.payload, cached.expireAt);
+    };
+    if (document.body) {
+      start();
+    } else {
+      document.addEventListener('DOMContentLoaded', start);
+    }
+  }
+
+  private _resumePaymentState(apiResponse: any, payload: any, expireAt: number): void {
+    this.pendingPaymentPayload = payload;
+    this.pendingApiResponse = apiResponse;
+    const actualRefId = apiResponse.vendorQrRefId || apiResponse.transactionRefId;
+    apiResponse.vendorQrRefId = actualRefId;
+    this._showQr(apiResponse, payload.orderId);
+    this._startStatusWatch({orderId: payload.orderId, nonce: payload.nonce});
+    this._startCountdown(payload.orderId, expireAt);
+    this._triggerEvent({
+      created: true,
+      orderId: payload.orderId,
+      amount: payload.amount,
+      vendorQrRefId: actualRefId
+    });
+  }
+
+  protected _startStatusWatch(payload: IPollingRequest): void {
+    if (this.statusWatcher) this.statusWatcher.stop();
+    const flowId = this.flowId;
+    this.statusWatcher = new PaymentStatusWatcher(this.api, payload, {
+      transport: this.transport,
+      pollInterval: this.POLL_INTERVAL_MS,
+      onStatus: (response: IPollingResponse) => {
+        if (flowId !== this.flowId) return;
+        const status = (response.status || '').toUpperCase();
+        if (status === 'SUCCESS' || status === 'FAILED' || status === 'EXPIRED' || status === 'CANCELLED') {
+          this._finish(status, {
+            orderId: response.orderId || payload.orderId,
+            amount: response.amount || this.pendingPaymentPayload?.amount,
+            vendorQrRefId: response.vendorQrRefId || response.transactionRefId
+          });
+        }
+      },
+      onConnectionChange: state => {
+        if (flowId === this.flowId) this.ui.setConnectionState(state);
+      }
+    });
+    this.statusWatcher.start();
+  }
+
+  protected _startCountdown(orderId: string, expireAt: number): void {
+    if (this.countdownIntervalId !== undefined) window.clearInterval(this.countdownIntervalId);
+    const flowId = this.flowId;
+    const update = () => {
+      if (flowId !== this.flowId) return;
+      const remaining = Math.max(0, Math.floor((expireAt - Date.now()) / 1000));
+      this.ui.setCountdown(remaining);
+      if (remaining <= 0) {
+        this._finish('EXPIRED', {
+          orderId,
+          amount: this.pendingPaymentPayload?.amount
+        }, {messageKey: 'message.TIMEOUT'});
+      }
+    };
+    update();
+    if (!this.settled) {
+      this.countdownIntervalId = window.setInterval(update, 1000);
+    }
+  }
+}
+
+if (typeof window !== 'undefined') {
+  (window as any).MMPaySDK = MMPaySDK;
+}

package/src/logo.ts

@@ -0,0 +1,5 @@
+/**
+ * MyanMyanPay logo (256px PNG from myanmyanpay.com/mmp-logo.png), embedded so
+ * the loading screen shows it instantly instead of waiting on another request.
+ */
+export const MMPAY_LOGO_DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAHlBMVEX///8AAAADAwNFRUVjY2NTU1MuLi7n5+e9vb2BgYFUuDMdAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAE90lEQVR4nO2d2XbCMAxE5yokhf//4R5atrCEYIckMLoPfeiJVTPIrm3JijBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHle2jlLcZmlWAqPjzvaY1dmI5AYLomjK6uPzQkxmaV4Cg2aqUbXdpqqsyFMsIEDQ/xd2Wfk4dD7ppDM0sAFH+te3Zni1NZmhOAYKuqtunb67SASTVuIAqBGjquq3mKMBEhlKAEkQp6QHkEFDOAQd249dx3W5oEqwytOAc0IzuQdAOCfCKoZJWbxRgLMMCtC8YWpkAuHsAh98+/MJeFOC5oTUKEIPPvyDAGEMrFCCIpr1Pc9i2jxNglKEVCsDm8a7mp2W0ADFoaHN4ZnUCBBsN0f4/9FyAZ4b+FFifAEEM72p/YrQHjDK0PgHawW7fPvVAgOebjOun1iLA5km/N2MFGGcoBVB6wIEcAsTCh6Kd4xzA+Vj871z6st9td6atEWDI0OICxKkLN8uX8zn1pZ8UCDBkaHEBOISGtqf162W/T5u3WgEeGlpeAPYxzfYYnTT0AHp7V0sB2HvoqYeWApxJAUgPUA6BAzkH4LEO6JFzAPeX8JsaD9iseS9wheFusE8KQHqA/IZAxClX19IDovez8YoL7InNdrttjwKYRYY4HQpubw8EBkJ6XxMbJDimKe2OHRgT1B2VHzBs6FGreQWIc4rvn0/+n440m/u8lh8AIwwtL0Bzs/tzzxDBPkfIOUtsLJkn2H6jB+wepHTdy/IazhV+lBx2hzXlCpeRN0aISZVMDyhBlJJDAPs5oPO+N8iEFz4/8uYolWPg4u5w1N0drvknwEpuj9cZik+sH0C/25MZmlUAav50//Mv1AmyhogwR5gjzBHmqLL96KOwm6Oxdxl6EVW1dv83GOYLoZhqKRyfuRSOyTZDlRWZltsMba23wzHhgUidoSyk1OSpcCwyBJpKz824ABkY4UsiQ7tm/uDoraEFBWjcw+NNJkgE7h7A4bdPtu1ZSIk3pMktX1O0OX6U+RIlLzKKj3maKxBgMyLDdYJCSo8ydRcWIGZNlr7J1V5cgJg3Xf6vZXvO1rcrpLTn+YT5xYWUrm/seAowASpumQKQHqAcAiPqH23eU0hp3XNA9/4iKqsX4N0FFFYvAO4ewP1+pwCkByiHwHRzwJIpMrH8HLDe3WA3iwC9an6G64D4TyypSxDhcz3gqqLnugRo319U9bqm67oEmKWISr+qr6EAzbWhFKAEUUp6ADkE1B+6ZoWUorD+0dcUUop8yUrz4mt24stfs0O+aIm/r+YeJRkizwyt0AOwzxFyzhIbSxZSar/RA3bN/C9dXVWucBmZLs/XpMuXkQKQHsBHD4GurttZSInPvjlK7ZXfi7vDdYWUqm5Pq7zpvuMTFVKKOkPLhMb4j04WXfpvun5Ms6YQwWLB0T0V0fl+04rPUJkhoKrW9jVEvgBhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc4Q5whxhjjBHmCPMEeYIc1IAzPkF8CT7lTTnMu0AAAAASUVORK5CYII=';