npm - mmpay-browser-sdk - Versions diffs - 1.0.3 → 1.0.5 - Mend

mmpay-browser-sdk 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -1,151 +1,179 @@
-# Supa JavaScript SDK
+# MyanMyanPay No-code SDK
 ## 💳 Introduction
-Welcome to the **Supa JavaScript SDK**! This library provides a secure and seamless way to integrate QR Code and Bank Redirect payments into any e-commerce checkout flow.
+Welcome to the **MyanMyanPay No Code SDK**! This library provides a secure and seamless way to integrate QR Code and Bank Redirect payments into any e-commerce checkout flow.
 Developed using **TypeScript**, the SDK offers a clean, type-safe interface and handles complex tasks like API communication, UI rendering, and asynchronous payment status polling automatically.
 ---
 ## 🛠️ Installation
-The Supa SDK is distributed as a single JavaScript file, ready for direct inclusion.
+The MyanMyanPay SDK is distributed as a single JavaScript file, ready for direct inclusion.
 ### Step 1: Include the SDK
 Embed the following `<script>` tag into the `<head>` or before the closing `</body>` tag of your checkout page.
 ```html
-<script src="https://browser.myanmyanpay.com/v1/sdk.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/dist/mmpay-sdk.js"></script>
 ```
-### Step 2: Set up the Payment Container
-Create a simple HTML element where the SDK will render the payment-specific UI (the QR code and redirect link).
-```html
-<div id="mmpay-checkout-widget"> </div>
-```
 ---
 ## 🚀 Usage
-The `MMQRMerchant` class provides two distinct methods to suit different integration needs.
+The `MMPaySDK` class provides two distinct methods to suit different integration needs.
+#### **Example Implementation**
+```javascript
+const MMPayApp = new MMPaySDK('pk_live_YOUR_KEY', {
+    baseUrl:  'https://xxx.myanmyanpay.com', // Sign up with us and ask our team
+    environment:  'sandbox',
+    merchantName:  'Your Shop Name',
+});
+```
 ### 1. `showPaymentModal()` (Recommended: UI + Polling)
 This is the easiest way to integrate. This method **initiates the transaction**, **renders the UI** (QR code/Redirect link) into your container, and automatically **polls your gateway** for payment completion status, executing a callback when the payment is final.
 #### **Method Signature**
 ```typescript
-showPaymentModal(
-    containerId: string,
-    paymentData: PaymentData,
-    onComplete: (result: PaymentResult) => void
-): Promise<void>
+showPaymentModal(paymentData: PaymentData): Promise<CreatePaymentResponse>
 ```
 #### **Example Implementation**
 ```javascript
-document.getElementById('place-order-button').addEventListener('click', () => {
-    const MMPay = new MMPaySDK('pk_live_YOUR_PUBLISHABLE_KEY');
-    const paymentDetails = {
-        amount: 50000,
-        orderId: 'ORD-' + new Date().getTime(),
-        callbackUrl: 'https://your-merchant-site.com/payment-confirmation' // Redirect URL after mobile payment
-    };
-    MMPay.showPaymentModal(
-        'mmpay-checkout-widget', // ID of the container element
-        paymentDetails,
-        (result) => {
-            // This callback fires ONLY after the payment is completed, failed, or expired.
-            if (result.success) {
-                console.log(`Payment confirmed! Transaction ID: ${result.transactionId}`);
-                // Redirect user to the success page
-                window.location.href = `/thank-you?txn=${result.transactionId}`;
-            } else {
-                console.error(`Payment failed: ${result.message}`);
-                // Update the UI to show the failure message
-                document.getElementById('mmpay-checkout-widget').innerHTML = `Payment failed: ${result.message}`;
-            }
-        }
-    );
+MMPayApp.showPaymentModal({
+    amount: 50000,
+    orderId: 'ORD-' + new Date().getTime(),
+    callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
+}, (result) => {
+    if (result.success) {
+        console.log('Transaction ID: ' + result.transactionId);
+    } else {
+        console.error('Failed: ' + result.message);
+    }
 });
 ```
-### 2. `createPaymentRequest()` (Advanced: JSON Only)
-Use this method if you need to build a fully **custom user interface** or if you are only initiating the request from the client and handling polling/UI on your server. This method returns the raw QR/Redirect URLs in JSON format.
-#### **Method Signature**
-```typescript
-createPaymentRequest(paymentData: PaymentData): Promise<CreatePaymentResponse>
+#### ** All Together Implementation**
+```html
+<script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/dist/mmpay-sdk.js"></script>
 ```
-#### **Example Implementation**
 ```javascript
-document.getElementById('get-qr-data').addEventListener('click', async () => {
-    const Supa = new MMQRMerchant('pk_live_YOUR_PUBLISHABLE_KEY');
-    const paymentDetails = {
-        amount: 100.00,
-        currency: 'USD',
-        orderId: 'CUST-API-' + Date.now()
-    };
-    try {
-        const response = await Supa.createPaymentRequest(paymentDetails);
-        if (response.success) {
-            console.log('Transaction initiated:', response.transactionId);
-            console.log('QR Code URL:', response.qrCodeUrl);
-            // Use response.qrCodeUrl and response.redirectUrl to build your custom UI
-        } else {
-            console.error('Initiation failed:', response.error);
-        }
-    } catch (error) {
-        console.error("API call error:", error);
+const MMPayApp = new MMPaySDK('pk_live_YOUR_KEY', {
+    baseUrl:  'https://xxx.myanmyanpay.com', // Sign up with us and ask our team
+    environment:  'sandbox',
+    merchantName:  'Your Shop Name',
+});
+MMPayApp.showPaymentModal({
+    amount: 50000,
+    orderId: 'ORD-' + new Date().getTime(),
+    callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
+}, (result) => {
+    if (result.success) {
+        console.log('Redirect Some where');
     }
 });
 ```
----
-## 🧪 Testing and Environments
-The SDK supports easy and secure switching between Sandbox (Test) and Production (Live) environments.
-### Environment Configuration
-The environment is set during SDK initialization using the `options` object.
-| Option | Value | API Base URL | Key Type | Purpose |
-| :--- | :--- | :--- | :--- | :--- |
-| `environment` | `'production'` (Default) | `https://api.Supa.com/v1` | `pk_live_...` | Live transactions with real money. |
-| `environment` | `'sandbox'` | `https://sandbox.api.Supa.com/v1` | `pk_test_...` | Testing and development (no money exchanged). |
+### 2. `createPayment()` (Advanced: JSON Only)
+Use this method if you need to build a fully **custom user interface** or if you are only initiating the request from the client and handling polling/UI on your server. This method returns MMQR string in JSON format.
+#### **Method Signature**
+```typescript
+createPayment(paymentData: PaymentData): Promise<CreatePaymentResponse>
+```
-### Example: Sandbox Initialization
-Always use **Sandbox Mode** with your **Test Publishable Key** (`pk_test_...`) for development.
+#### **Example Implementation**
 ```javascript
-// Test key and environment must match!
-const SupaTest = new MMQRMerchant('pk_test_XYZ789', {
-    environment: 'sandbox', // <-- Activates the test API URL
-    pollInterval: 2000      // Optional: change polling frequency (default is 3000ms)
+MMPayApp.createPayment({
+    amount: 50000,
+    orderId: 'ORD-' + new Date().getTime(),
+    callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
+}).then((result) => {
+    if (result.qr) {
+        console.log('Transaction ID: ' + result.qr);
+    }
 });
-// Now call methods on the test instance
-SupaTest.showPaymentModal(/* ... */);
 ```
----
-## 🧑‍💻 Development & Contribution
-If you are modifying the SDK code itself (`MMQRMerchant.ts`), use the following commands.
-### Dependencies
-Ensure you have Node.js and TypeScript installed globally or locally:
-```bash
-npm install typescript --save-dev
-```
-### Build Command
+### 3. Angular Framework Implementation
-Use the defined script to compile the TypeScript source into the final JavaScript file for distribution.
+#### **Example Implementation**
+```typescript
+import {Injectable} from '@angular/core';
+interface PayResponse {
+    _id: string;
+    amount: number;
+    orderId: string;
+    currency?: string;
+    transactionRefId: string;
+    qr: string;
+}
+interface ModalResponse {
+    success: boolean,
+    transaction: {
+        orderId: string;
+        transactionRefId: string;
+        status: 'PENDING' | 'SUCCESS' | 'FAILED' | 'EXPIRED';
+    }
+}
+@Injectable({
+  providedIn: 'root'
+})
+export class MMPayService {
+    mmpay: any;
+    constructor() {
+        const MMPaySDK = (window as any).MMPaySDK;
+        if (!MMPaySDK) {
+            console.error('SDK not loaded attached to window');
+            return;
+        }
+        this.mmpay = new MMPaySDK('pk_test_123', {
+            baseUrl:  'https://xxx.myanmyanpay.com', // Sign up with us and ask our tea
+            environment: 'sandbox',
+            merchantName: 'Test Shop'
+        });
+    }
+    /**
+     * @param {number} amount
+     * @param {string} orderId
+     * @param {string} callbackUrl
+     */
+    modalPay(amount: number, orderId: string, callbackUrl?: string) {
+        this.mmpay.showPaymentModal({
+            amount,
+            orderId,
+            callbackUrl,
+        }, (result: ModalResponse) => {
+            if (result.success) {
+                console.log('Redirect Some where');
+            }
+        });
+    }
+    /**
+     * @param {number} amount
+     * @param {string} orderId
+     * @param {string} callbackUrl
+     */
+    pay(amount: number, orderId: string, callbackUrl?: string) {
+        this.mmpay.createPayment({
+            amount,
+            orderId,
+            callbackUrl,
+        })
+        .then((result: PayResponse) => {
+            if (result.qr) {
+                console.log('Transaction ID: ' + result.qr);
+            }
+        });
+    }
+}
-```bash
-npm run build
 ```
-This command cleans the old output and compiles `MMQRMerchant.ts` into `dist/MMQRMerchant.js`.

package/dist/cjs/index.d.ts CHANGED Viewed

@@ -1,46 +1,49 @@
-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;
@@ -50,6 +53,7 @@ export interface SDKOptions {
 }
 export declare class MMPaySDK {
     private POLL_INTERVAL_MS;
+    private tokenKey;
     private publishableKey;
     private baseUrl;
     private merchantName;
@@ -60,6 +64,11 @@ export declare class MMPaySDK {
     private pendingApiResponse;
     private pendingPaymentPayload;
     private readonly QR_SIZE;
+    /**
+     * constructor
+     * @param publishableKey
+     * @param options
+     */
     constructor(publishableKey: string, options?: SDKOptions);
     /**
      * _callApi
@@ -69,28 +78,56 @@ export declare class MMPaySDK {
      */
     private _callApi;
     /**
-     * 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>}
      */
-    createPaymentRequest(payload: PaymentData): Promise<CreatePaymentResponse>;
+    private _callApiTokenRequest;
     /**
-     * _createAndRenderModal
-     * @param {string} contentHtml
-     * @param isTerminal
-     * @returns
+     * _callApiPaymentRequest
+     * @param {ICreatePaymentRequestParams} payload
+     * @param {number} payload.amount
+     * @param {string} payload.currency
+     * @param {string} payload.orderId
+     * @param {string} payload.nonce
+     * @param {string} payload.callbackUrl
+     * @returns {Promise<ICreatePaymentResponse>}
      */
-    private _createAndRenderModal;
+    private _callApiPaymentRequest;
+    /**
+     * createPayment
+     * @param {ICorePayParams} params
+     * @param {number} params.amount
+     * @param {string} params.orderId
+     * @param {string} params.callbackUrl
+     * @returns {Promise<ICreatePaymentResponse>}
+     */
+    createPayment(params: ICorePayParams): Promise<ICreatePaymentResponse>;
     /**
      * showPaymentModal
-     * @param {PaymentData} payload
+     * @param {ICorePayParams} params
+     * @param {number} params.amount
+     * @param {string} params.orderId
+     * @param {string} params.callbackUrl
      * @param {Function} onComplete
      */
-    showPaymentModal(payload: PaymentData, onComplete: (result: PolliongResult) => void): Promise<void>;
+    showPaymentModal(params: ICorePayParams, onComplete: (result: PolliongResult) => void): Promise<void>;
+    /**
+     * _createAndRenderModal
+     * @param {string} contentHtml
+     * @param {boolean} isTerminal
+     * @returns
+     */
+    private _createAndRenderModal;
     /**
      * _renderQrModalContent
-     * @param {CreatePaymentResponse} apiResponse
-     * @param {PaymentData} payload
+     * @param {ICreatePaymentResponse} apiResponse
+     * @param {CreatePaymentRequest} payload
      * @param {string} merchantName
      */
     private _renderQrModalContent;
@@ -111,7 +148,7 @@ export declare class MMPaySDK {
     private _reRenderPendingModalInstance;
     /**
      * Cleans up the modal and stops polling.
-     * @param restoreBodyScroll
+     * @param {boolean} restoreBodyScroll
      */
     private _cleanupModal;
     /**
@@ -122,7 +159,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;