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
  1. package/README.md +130 -102
  2. package/dist/cjs/index.d.ts +84 -42
  3. package/dist/cjs/index.js +130 -47
  4. package/dist/esm/index.d.ts +84 -42
  5. package/dist/esm/index.js +130 -47
  6. package/dist/mmpay-sdk.js +130 -47
  7. package/dist/mmpay-sdk.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/index.ts +174 -76
  10. package/test/home.html +35 -23
package/README.md CHANGED
@@ -1,151 +1,179 @@
1
- # Supa JavaScript SDK
1
+ # MyanMyanPay No-code SDK
2
2
  ## 💳 Introduction
3
- 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.
3
+ 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.
4
4
  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.
5
5
 
6
6
  ---
7
7
 
8
8
  ## 🛠️ Installation
9
- The Supa SDK is distributed as a single JavaScript file, ready for direct inclusion.
9
+ The MyanMyanPay SDK is distributed as a single JavaScript file, ready for direct inclusion.
10
10
 
11
11
  ### Step 1: Include the SDK
12
12
  Embed the following `<script>` tag into the `<head>` or before the closing `</body>` tag of your checkout page.
13
13
  ```html
14
- <script src="https://browser.myanmyanpay.com/v1/sdk.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/dist/mmpay-sdk.js"></script>
15
15
  ```
16
-
17
- ### Step 2: Set up the Payment Container
18
- Create a simple HTML element where the SDK will render the payment-specific UI (the QR code and redirect link).
19
- ```html
20
- <div id="mmpay-checkout-widget"> </div>
21
- ```
22
-
23
16
  ---
24
-
25
17
  ## 🚀 Usage
26
- The `MMQRMerchant` class provides two distinct methods to suit different integration needs.
18
+ The `MMPaySDK` class provides two distinct methods to suit different integration needs.
19
+
20
+ #### **Example Implementation**
21
+ ```javascript
22
+ const MMPayApp = new MMPaySDK('pk_live_YOUR_KEY', {
23
+ baseUrl: 'https://xxx.myanmyanpay.com', // Sign up with us and ask our team
24
+ environment: 'sandbox',
25
+ merchantName: 'Your Shop Name',
26
+ });
27
+ ```
27
28
 
28
29
  ### 1. `showPaymentModal()` (Recommended: UI + Polling)
29
30
  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.
30
31
 
31
32
  #### **Method Signature**
32
33
  ```typescript
33
- showPaymentModal(
34
- containerId: string,
35
- paymentData: PaymentData,
36
- onComplete: (result: PaymentResult) => void
37
- ): Promise<void>
34
+ showPaymentModal(paymentData: PaymentData): Promise<CreatePaymentResponse>
38
35
  ```
39
36
 
40
37
  #### **Example Implementation**
41
38
  ```javascript
42
- document.getElementById('place-order-button').addEventListener('click', () => {
43
- const MMPay = new MMPaySDK('pk_live_YOUR_PUBLISHABLE_KEY');
44
- const paymentDetails = {
45
- amount: 50000,
46
- orderId: 'ORD-' + new Date().getTime(),
47
- callbackUrl: 'https://your-merchant-site.com/payment-confirmation' // Redirect URL after mobile payment
48
- };
49
- MMPay.showPaymentModal(
50
- 'mmpay-checkout-widget', // ID of the container element
51
- paymentDetails,
52
- (result) => {
53
- // This callback fires ONLY after the payment is completed, failed, or expired.
54
- if (result.success) {
55
- console.log(`Payment confirmed! Transaction ID: ${result.transactionId}`);
56
- // Redirect user to the success page
57
- window.location.href = `/thank-you?txn=${result.transactionId}`;
58
- } else {
59
- console.error(`Payment failed: ${result.message}`);
60
- // Update the UI to show the failure message
61
- document.getElementById('mmpay-checkout-widget').innerHTML = `Payment failed: ${result.message}`;
62
- }
63
- }
64
- );
39
+ MMPayApp.showPaymentModal({
40
+ amount: 50000,
41
+ orderId: 'ORD-' + new Date().getTime(),
42
+ callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
43
+ }, (result) => {
44
+ if (result.success) {
45
+ console.log('Transaction ID: ' + result.transactionId);
46
+ } else {
47
+ console.error('Failed: ' + result.message);
48
+ }
65
49
  });
66
50
  ```
67
51
 
68
- ### 2. `createPaymentRequest()` (Advanced: JSON Only)
69
- 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.
70
52
 
71
- #### **Method Signature**
72
- ```typescript
73
- createPaymentRequest(paymentData: PaymentData): Promise<CreatePaymentResponse>
53
+ #### ** All Together Implementation**
54
+
55
+ ```html
56
+ <script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/dist/mmpay-sdk.js"></script>
74
57
  ```
75
58
 
76
- #### **Example Implementation**
77
59
  ```javascript
78
- document.getElementById('get-qr-data').addEventListener('click', async () => {
79
- const Supa = new MMQRMerchant('pk_live_YOUR_PUBLISHABLE_KEY');
80
- const paymentDetails = {
81
- amount: 100.00,
82
- currency: 'USD',
83
- orderId: 'CUST-API-' + Date.now()
84
- };
85
- try {
86
- const response = await Supa.createPaymentRequest(paymentDetails);
87
-
88
- if (response.success) {
89
- console.log('Transaction initiated:', response.transactionId);
90
- console.log('QR Code URL:', response.qrCodeUrl);
91
- // Use response.qrCodeUrl and response.redirectUrl to build your custom UI
92
- } else {
93
- console.error('Initiation failed:', response.error);
94
- }
95
- } catch (error) {
96
- console.error("API call error:", error);
60
+ const MMPayApp = new MMPaySDK('pk_live_YOUR_KEY', {
61
+ baseUrl: 'https://xxx.myanmyanpay.com', // Sign up with us and ask our team
62
+ environment: 'sandbox',
63
+ merchantName: 'Your Shop Name',
64
+ });
65
+ MMPayApp.showPaymentModal({
66
+ amount: 50000,
67
+ orderId: 'ORD-' + new Date().getTime(),
68
+ callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
69
+ }, (result) => {
70
+ if (result.success) {
71
+ console.log('Redirect Some where');
97
72
  }
98
73
  });
99
74
  ```
100
75
 
101
- ---
102
-
103
- ## 🧪 Testing and Environments
104
- The SDK supports easy and secure switching between Sandbox (Test) and Production (Live) environments.
105
76
 
106
77
 
107
- ### Environment Configuration
108
- The environment is set during SDK initialization using the `options` object.
109
- | Option | Value | API Base URL | Key Type | Purpose |
110
- | :--- | :--- | :--- | :--- | :--- |
111
- | `environment` | `'production'` (Default) | `https://api.Supa.com/v1` | `pk_live_...` | Live transactions with real money. |
112
- | `environment` | `'sandbox'` | `https://sandbox.api.Supa.com/v1` | `pk_test_...` | Testing and development (no money exchanged). |
78
+ ### 2. `createPayment()` (Advanced: JSON Only)
79
+ 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.
113
80
 
81
+ #### **Method Signature**
82
+ ```typescript
83
+ createPayment(paymentData: PaymentData): Promise<CreatePaymentResponse>
84
+ ```
114
85
 
115
- ### Example: Sandbox Initialization
116
- Always use **Sandbox Mode** with your **Test Publishable Key** (`pk_test_...`) for development.
86
+ #### **Example Implementation**
117
87
  ```javascript
118
- // Test key and environment must match!
119
- const SupaTest = new MMQRMerchant('pk_test_XYZ789', {
120
- environment: 'sandbox', // <-- Activates the test API URL
121
- pollInterval: 2000 // Optional: change polling frequency (default is 3000ms)
88
+ MMPayApp.createPayment({
89
+ amount: 50000,
90
+ orderId: 'ORD-' + new Date().getTime(),
91
+ callbackUrl: 'https://yoursite.com/confirmation' // Optional [Default callback input in our console will be called if no specified]
92
+ }).then((result) => {
93
+ if (result.qr) {
94
+ console.log('Transaction ID: ' + result.qr);
95
+ }
122
96
  });
123
-
124
- // Now call methods on the test instance
125
- SupaTest.showPaymentModal(/* ... */);
126
97
  ```
127
98
 
128
- ---
129
-
130
-
131
- ## 🧑‍💻 Development & Contribution
132
- If you are modifying the SDK code itself (`MMQRMerchant.ts`), use the following commands.
133
99
 
134
100
 
135
- ### Dependencies
136
- Ensure you have Node.js and TypeScript installed globally or locally:
137
101
 
138
102
 
139
- ```bash
140
- npm install typescript --save-dev
141
- ```
142
-
143
- ### Build Command
103
+ ### 3. Angular Framework Implementation
144
104
 
145
- Use the defined script to compile the TypeScript source into the final JavaScript file for distribution.
105
+ #### **Example Implementation**
106
+ ```typescript
107
+ import {Injectable} from '@angular/core';
108
+
109
+ interface PayResponse {
110
+ _id: string;
111
+ amount: number;
112
+ orderId: string;
113
+ currency?: string;
114
+ transactionRefId: string;
115
+ qr: string;
116
+ }
117
+
118
+ interface ModalResponse {
119
+ success: boolean,
120
+ transaction: {
121
+ orderId: string;
122
+ transactionRefId: string;
123
+ status: 'PENDING' | 'SUCCESS' | 'FAILED' | 'EXPIRED';
124
+ }
125
+ }
126
+
127
+ @Injectable({
128
+ providedIn: 'root'
129
+ })
130
+ export class MMPayService {
131
+ mmpay: any;
132
+ constructor() {
133
+ const MMPaySDK = (window as any).MMPaySDK;
134
+ if (!MMPaySDK) {
135
+ console.error('SDK not loaded attached to window');
136
+ return;
137
+ }
138
+ this.mmpay = new MMPaySDK('pk_test_123', {
139
+ baseUrl: 'https://xxx.myanmyanpay.com', // Sign up with us and ask our tea
140
+ environment: 'sandbox',
141
+ merchantName: 'Test Shop'
142
+ });
143
+ }
144
+ /**
145
+ * @param {number} amount
146
+ * @param {string} orderId
147
+ * @param {string} callbackUrl
148
+ */
149
+ modalPay(amount: number, orderId: string, callbackUrl?: string) {
150
+ this.mmpay.showPaymentModal({
151
+ amount,
152
+ orderId,
153
+ callbackUrl,
154
+ }, (result: ModalResponse) => {
155
+ if (result.success) {
156
+ console.log('Redirect Some where');
157
+ }
158
+ });
159
+ }
160
+ /**
161
+ * @param {number} amount
162
+ * @param {string} orderId
163
+ * @param {string} callbackUrl
164
+ */
165
+ pay(amount: number, orderId: string, callbackUrl?: string) {
166
+ this.mmpay.createPayment({
167
+ amount,
168
+ orderId,
169
+ callbackUrl,
170
+ })
171
+ .then((result: PayResponse) => {
172
+ if (result.qr) {
173
+ console.log('Transaction ID: ' + result.qr);
174
+ }
175
+ });
176
+ }
177
+ }
146
178
 
147
- ```bash
148
- npm run build
149
179
  ```
150
-
151
- This command cleans the old output and compiles `MMQRMerchant.ts` into `dist/MMQRMerchant.js`.
package/dist/cjs/index.d.ts CHANGED
@@ -1,46 +1,49 @@
1
- export interface PaymentData {
1
+ export interface ICorePayParams {
2
2
  amount: number;
3
- currency: string;
4
3
  orderId: string;
5
4
  callbackUrl?: string;
6
5
  }
7
- export interface CreatePaymentResponse {
6
+ export interface ICreatePaymentRequestParams {
7
+ amount: number;
8
+ currency?: string;
9
+ orderId: string;
10
+ callbackUrl?: string;
11
+ nonce?: string;
12
+ }
13
+ export interface ICreatePaymentResponse {
8
14
  _id: string;
9
15
  amount: number;
10
16
  orderId: string;
11
- currency: string;
12
- transactionId: string;
17
+ currency?: string;
18
+ transactionRefId: string;
13
19
  qr: string;
14
- url: string;
15
20
  }
16
- export interface PollingResponse {
17
- _id: string;
18
- appId: string;
21
+ export interface ICreateTokenRequestParams {
22
+ amount: number;
23
+ currency?: string;
24
+ orderId: string;
25
+ callbackUrl?: string;
26
+ nonce?: string;
27
+ }
28
+ export interface ICreateTokenResponse {
19
29
  orderId: string;
30
+ token: string;
31
+ }
32
+ export interface IPollingRequest {
20
33
  amount: number;
21
- currency: string;
22
- method?: string;
23
- vendor?: string;
34
+ currency?: string;
35
+ orderId: string;
24
36
  callbackUrl?: string;
25
- callbackUrlStatus?: 'PENDING' | 'SUCCESS' | 'FAILED';
26
- callbackAt?: Date;
27
- disbursementStatus?: 'NONE' | 'PENDING' | 'COMPLETED' | 'FAILED' | 'CANCELLED';
28
- disburseAt?: Date;
29
- items: {
30
- name: string;
31
- amount: number;
32
- quantity: number;
33
- }[];
34
- merchantId: string;
37
+ nonce?: string;
38
+ }
39
+ export interface IPollingResponse {
40
+ orderId: string;
41
+ transactionRefId: string;
35
42
  status: 'PENDING' | 'SUCCESS' | 'FAILED' | 'EXPIRED';
36
- createdAt: Date;
37
- transactionRefId?: string;
38
- qr?: string;
39
- redirectUrl?: string;
40
43
  }
41
44
  export interface PolliongResult {
42
45
  success: boolean;
43
- transaction: PollingResponse;
46
+ transaction: IPollingResponse;
44
47
  }
45
48
  export interface SDKOptions {
46
49
  pollInterval?: number;
@@ -50,6 +53,7 @@ export interface SDKOptions {
50
53
  }
51
54
  export declare class MMPaySDK {
52
55
  private POLL_INTERVAL_MS;
56
+ private tokenKey;
53
57
  private publishableKey;
54
58
  private baseUrl;
55
59
  private merchantName;
@@ -60,6 +64,11 @@ export declare class MMPaySDK {
60
64
  private pendingApiResponse;
61
65
  private pendingPaymentPayload;
62
66
  private readonly QR_SIZE;
67
+ /**
68
+ * constructor
69
+ * @param publishableKey
70
+ * @param options
71
+ */
63
72
  constructor(publishableKey: string, options?: SDKOptions);
64
73
  /**
65
74
  * _callApi
@@ -69,28 +78,56 @@ export declare class MMPaySDK {
69
78
  */
70
79
  private _callApi;
71
80
  /**
72
- * createPaymentRequest
73
- * @param {PaymentData} payload
74
- * @returns
81
+ * _callApiTokenRequest
82
+ * @param {ICreateTokenRequestParams} payload
83
+ * @param {number} payload.amount
84
+ * @param {string} payload.currency
85
+ * @param {string} payload.orderId
86
+ * @param {string} payload.nonce
87
+ * @param {string} payload.callbackUrl
88
+ * @returns {Promise<ICreateTokenResponse>}
75
89
  */
76
- createPaymentRequest(payload: PaymentData): Promise<CreatePaymentResponse>;
90
+ private _callApiTokenRequest;
77
91
  /**
78
- * _createAndRenderModal
79
- * @param {string} contentHtml
80
- * @param isTerminal
81
- * @returns
92
+ * _callApiPaymentRequest
93
+ * @param {ICreatePaymentRequestParams} payload
94
+ * @param {number} payload.amount
95
+ * @param {string} payload.currency
96
+ * @param {string} payload.orderId
97
+ * @param {string} payload.nonce
98
+ * @param {string} payload.callbackUrl
99
+ * @returns {Promise<ICreatePaymentResponse>}
82
100
  */
83
- private _createAndRenderModal;
101
+ private _callApiPaymentRequest;
102
+ /**
103
+ * createPayment
104
+ * @param {ICorePayParams} params
105
+ * @param {number} params.amount
106
+ * @param {string} params.orderId
107
+ * @param {string} params.callbackUrl
108
+ * @returns {Promise<ICreatePaymentResponse>}
109
+ */
110
+ createPayment(params: ICorePayParams): Promise<ICreatePaymentResponse>;
84
111
  /**
85
112
  * showPaymentModal
86
- * @param {PaymentData} payload
113
+ * @param {ICorePayParams} params
114
+ * @param {number} params.amount
115
+ * @param {string} params.orderId
116
+ * @param {string} params.callbackUrl
87
117
  * @param {Function} onComplete
88
118
  */
89
- showPaymentModal(payload: PaymentData, onComplete: (result: PolliongResult) => void): Promise<void>;
119
+ showPaymentModal(params: ICorePayParams, onComplete: (result: PolliongResult) => void): Promise<void>;
120
+ /**
121
+ * _createAndRenderModal
122
+ * @param {string} contentHtml
123
+ * @param {boolean} isTerminal
124
+ * @returns
125
+ */
126
+ private _createAndRenderModal;
90
127
  /**
91
128
  * _renderQrModalContent
92
- * @param {CreatePaymentResponse} apiResponse
93
- * @param {PaymentData} payload
129
+ * @param {ICreatePaymentResponse} apiResponse
130
+ * @param {CreatePaymentRequest} payload
94
131
  * @param {string} merchantName
95
132
  */
96
133
  private _renderQrModalContent;
@@ -111,7 +148,7 @@ export declare class MMPaySDK {
111
148
  private _reRenderPendingModalInstance;
112
149
  /**
113
150
  * Cleans up the modal and stops polling.
114
- * @param restoreBodyScroll
151
+ * @param {boolean} restoreBodyScroll
115
152
  */
116
153
  private _cleanupModal;
117
154
  /**
@@ -122,7 +159,12 @@ export declare class MMPaySDK {
122
159
  private _injectQrScript;
123
160
  /**
124
161
  * _startPolling
125
- * @param {string} _id
162
+ * @param {IPollingRequest} payload
163
+ * @param {number} payload.amount
164
+ * @param {string} payload.currency
165
+ * @param {string} payload.orderId
166
+ * @param {string} payload.nonce
167
+ * @param {string} payload.callbackUrl
126
168
  * @param {Function} onComplete
127
169
  */
128
170
  private _startPolling;