mmpay-browser-sdk 1.0.4 β†’ 1.0.6

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 +139 -103
  2. package/dist/cjs/index.d.ts +37 -16
  3. package/dist/cjs/index.js +57 -18
  4. package/dist/esm/index.d.ts +37 -16
  5. package/dist/esm/index.js +57 -18
  6. package/dist/mmpay-sdk.js +57 -18
  7. package/dist/mmpay-sdk.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/index.ts +79 -27
  10. package/test/home.html +5 -25
package/README.md CHANGED
@@ -1,151 +1,187 @@
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.
99
+ ### Error Codes
133
100
 
101
+ | Code | Description |
102
+ | :--- | :--- |
103
+ | **`R000`** | Internal Server Error ( Talk to our support immediately fot this ) |
104
+ | **`R001`** | Wrong publishable Key |
105
+ | **`R002`** | Key Not Live Yet |
106
+ | **`R003`** | Origin Whitelist Not Allowed |
107
+ | **`R004`** | Origin Requires SSL |
108
+ | **`429`** | Ratelimit hit only 1000 request / minute allowed |
134
109
 
135
- ### Dependencies
136
- Ensure you have Node.js and TypeScript installed globally or locally:
137
-
138
-
139
- ```bash
140
- npm install typescript --save-dev
141
- ```
142
110
 
143
- ### Build Command
111
+ ### 3. Angular Framework Implementation
144
112
 
145
- Use the defined script to compile the TypeScript source into the final JavaScript file for distribution.
113
+ #### **Example Implementation**
114
+ ```typescript
115
+ import {Injectable} from '@angular/core';
116
+
117
+ interface PayResponse {
118
+ _id: string;
119
+ amount: number;
120
+ orderId: string;
121
+ currency?: string;
122
+ transactionRefId: string;
123
+ qr: string;
124
+ }
125
+
126
+ interface ModalResponse {
127
+ success: boolean,
128
+ transaction: {
129
+ orderId: string;
130
+ transactionRefId: string;
131
+ status: 'PENDING' | 'SUCCESS' | 'FAILED' | 'EXPIRED';
132
+ }
133
+ }
134
+
135
+ @Injectable({
136
+ providedIn: 'root'
137
+ })
138
+ export class MMPayService {
139
+ mmpay: any;
140
+ constructor() {
141
+ const MMPaySDK = (window as any).MMPaySDK;
142
+ if (!MMPaySDK) {
143
+ console.error('SDK not loaded attached to window');
144
+ return;
145
+ }
146
+ this.mmpay = new MMPaySDK('pk_test_123', {
147
+ baseUrl: 'https://xxx.myanmyanpay.com', // Sign up with us and ask our tea
148
+ environment: 'sandbox',
149
+ merchantName: 'Test Shop'
150
+ });
151
+ }
152
+ /**
153
+ * @param {number} amount
154
+ * @param {string} orderId
155
+ * @param {string} callbackUrl
156
+ */
157
+ modalPay(amount: number, orderId: string, callbackUrl?: string) {
158
+ this.mmpay.showPaymentModal({
159
+ amount,
160
+ orderId,
161
+ callbackUrl,
162
+ }, (result: ModalResponse) => {
163
+ if (result.success) {
164
+ console.log('Redirect Some where');
165
+ }
166
+ });
167
+ }
168
+ /**
169
+ * @param {number} amount
170
+ * @param {string} orderId
171
+ * @param {string} callbackUrl
172
+ */
173
+ pay(amount: number, orderId: string, callbackUrl?: string) {
174
+ this.mmpay.createPayment({
175
+ amount,
176
+ orderId,
177
+ callbackUrl,
178
+ })
179
+ .then((result: PayResponse) => {
180
+ if (result.qr) {
181
+ console.log('Transaction ID: ' + result.qr);
182
+ }
183
+ });
184
+ }
185
+ }
146
186
 
147
- ```bash
148
- npm run build
149
187
  ```
150
-
151
- This command cleans the old output and compiles `MMQRMerchant.ts` into `dist/MMQRMerchant.js`.
package/dist/cjs/index.d.ts CHANGED
@@ -1,6 +1,11 @@
1
- export interface ICreatePaymentRequest {
1
+ export interface ICorePayParams {
2
2
  amount: number;
3
- currency: string;
3
+ orderId: string;
4
+ callbackUrl?: string;
5
+ }
6
+ export interface ICreatePaymentRequestParams {
7
+ amount: number;
8
+ currency?: string;
4
9
  orderId: string;
5
10
  callbackUrl?: string;
6
11
  nonce?: string;
@@ -9,14 +14,13 @@ export interface ICreatePaymentResponse {
9
14
  _id: string;
10
15
  amount: number;
11
16
  orderId: string;
12
- currency: string;
17
+ currency?: string;
13
18
  transactionRefId: string;
14
19
  qr: string;
15
- url: string;
16
20
  }
17
- export interface ICreateTokenRequest {
21
+ export interface ICreateTokenRequestParams {
18
22
  amount: number;
19
- currency: string;
23
+ currency?: string;
20
24
  orderId: string;
21
25
  callbackUrl?: string;
22
26
  nonce?: string;
@@ -27,7 +31,7 @@ export interface ICreateTokenResponse {
27
31
  }
28
32
  export interface IPollingRequest {
29
33
  amount: number;
30
- currency: string;
34
+ currency?: string;
31
35
  orderId: string;
32
36
  callbackUrl?: string;
33
37
  nonce?: string;
@@ -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,8 +78,8 @@ export declare class MMPaySDK {
69
78
  */
70
79
  private _callApi;
71
80
  /**
72
- * createTokenRequest
73
- * @param {ICreateTokenRequest} payload
81
+ * _callApiTokenRequest
82
+ * @param {ICreateTokenRequestParams} payload
74
83
  * @param {number} payload.amount
75
84
  * @param {string} payload.currency
76
85
  * @param {string} payload.orderId
@@ -78,10 +87,10 @@ export declare class MMPaySDK {
78
87
  * @param {string} payload.callbackUrl
79
88
  * @returns {Promise<ICreateTokenResponse>}
80
89
  */
81
- createTokenRequest(payload: ICreateTokenRequest): Promise<ICreateTokenResponse>;
90
+ private _callApiTokenRequest;
82
91
  /**
83
- * createPaymentRequest
84
- * @param {ICreatePaymentRequest} payload
92
+ * _callApiPaymentRequest
93
+ * @param {ICreatePaymentRequestParams} payload
85
94
  * @param {number} payload.amount
86
95
  * @param {string} payload.currency
87
96
  * @param {string} payload.orderId
@@ -89,13 +98,25 @@ export declare class MMPaySDK {
89
98
  * @param {string} payload.callbackUrl
90
99
  * @returns {Promise<ICreatePaymentResponse>}
91
100
  */
92
- createPaymentRequest(payload: ICreatePaymentRequest): Promise<ICreatePaymentResponse>;
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>;
93
111
  /**
94
112
  * showPaymentModal
95
- * @param {CreatePaymentRequest} payload
113
+ * @param {ICorePayParams} params
114
+ * @param {number} params.amount
115
+ * @param {string} params.orderId
116
+ * @param {string} params.callbackUrl
96
117
  * @param {Function} onComplete
97
118
  */
98
- showPaymentModal(payload: ICreatePaymentRequest, onComplete: (result: PolliongResult) => void): Promise<void>;
119
+ showPaymentModal(params: ICorePayParams, onComplete: (result: PolliongResult) => void): Promise<void>;
99
120
  /**
100
121
  * _createAndRenderModal
101
122
  * @param {string} contentHtml
@@ -127,7 +148,7 @@ export declare class MMPaySDK {
127
148
  private _reRenderPendingModalInstance;
128
149
  /**
129
150
  * Cleans up the modal and stops polling.
130
- * @param restoreBodyScroll
151
+ * @param {boolean} restoreBodyScroll
131
152
  */
132
153
  private _cleanupModal;
133
154
  /**
package/dist/cjs/index.js CHANGED
@@ -2,14 +2,18 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.MMPaySDK = void 0;
4
4
  class MMPaySDK {
5
+ /**
6
+ * constructor
7
+ * @param publishableKey
8
+ * @param options
9
+ */
5
10
  constructor(publishableKey, options = {}) {
6
11
  this.pollIntervalId = undefined;
7
12
  this.onCompleteCallback = null;
8
13
  this.overlayElement = null;
9
- // Properties to store pending data for re-rendering after cancel attempt
10
14
  this.pendingApiResponse = null;
11
15
  this.pendingPaymentPayload = null;
12
- this.QR_SIZE = 300;
16
+ this.QR_SIZE = 290;
13
17
  if (!publishableKey) {
14
18
  throw new Error("A Publishable Key is required to initialize [MMPaySDK].");
15
19
  }
@@ -17,7 +21,7 @@ class MMPaySDK {
17
21
  this.environment = options.environment || 'production';
18
22
  this.baseUrl = options.baseUrl || 'https://api.mm-pay.com';
19
23
  this.merchantName = options.merchantName || 'Your Merchant';
20
- this.POLL_INTERVAL_MS = options.pollInterval || 3000;
24
+ this.POLL_INTERVAL_MS = options.pollInterval || 5000;
21
25
  }
22
26
  /**
23
27
  * _callApi
@@ -49,8 +53,8 @@ class MMPaySDK {
49
53
  return response.json();
50
54
  }
51
55
  /**
52
- * createTokenRequest
53
- * @param {ICreateTokenRequest} payload
56
+ * _callApiTokenRequest
57
+ * @param {ICreateTokenRequestParams} payload
54
58
  * @param {number} payload.amount
55
59
  * @param {string} payload.currency
56
60
  * @param {string} payload.orderId
@@ -58,7 +62,7 @@ class MMPaySDK {
58
62
  * @param {string} payload.callbackUrl
59
63
  * @returns {Promise<ICreateTokenResponse>}
60
64
  */
61
- async createTokenRequest(payload) {
65
+ async _callApiTokenRequest(payload) {
62
66
  try {
63
67
  const endpoint = this.environment === 'sandbox'
64
68
  ? '/xpayments/sandbox-token-request'
@@ -71,8 +75,8 @@ class MMPaySDK {
71
75
  }
72
76
  }
73
77
  /**
74
- * createPaymentRequest
75
- * @param {ICreatePaymentRequest} payload
78
+ * _callApiPaymentRequest
79
+ * @param {ICreatePaymentRequestParams} payload
76
80
  * @param {number} payload.amount
77
81
  * @param {string} payload.currency
78
82
  * @param {string} payload.orderId
@@ -80,7 +84,7 @@ class MMPaySDK {
80
84
  * @param {string} payload.callbackUrl
81
85
  * @returns {Promise<ICreatePaymentResponse>}
82
86
  */
83
- async createPaymentRequest(payload) {
87
+ async _callApiPaymentRequest(payload) {
84
88
  try {
85
89
  const endpoint = this.environment === 'sandbox'
86
90
  ? '/xpayments/sandbox-payment-create'
@@ -92,20 +96,56 @@ class MMPaySDK {
92
96
  throw error;
93
97
  }
94
98
  }
99
+ /**
100
+ * createPayment
101
+ * @param {ICorePayParams} params
102
+ * @param {number} params.amount
103
+ * @param {string} params.orderId
104
+ * @param {string} params.callbackUrl
105
+ * @returns {Promise<ICreatePaymentResponse>}
106
+ */
107
+ async createPayment(params) {
108
+ const payload = {
109
+ amount: params.amount,
110
+ orderId: params.orderId,
111
+ callbackUrl: params.callbackUrl,
112
+ currency: 'MMK',
113
+ nonce: new Date().getTime().toString() + '_mmp'
114
+ };
115
+ try {
116
+ const tokenResponse = await this._callApiTokenRequest(payload);
117
+ this.tokenKey = tokenResponse.token;
118
+ const apiResponse = await this._callApiPaymentRequest(payload);
119
+ return apiResponse;
120
+ }
121
+ catch (error) {
122
+ console.error("Payment request failed:", error);
123
+ throw error;
124
+ }
125
+ }
95
126
  /**
96
127
  * showPaymentModal
97
- * @param {CreatePaymentRequest} payload
128
+ * @param {ICorePayParams} params
129
+ * @param {number} params.amount
130
+ * @param {string} params.orderId
131
+ * @param {string} params.callbackUrl
98
132
  * @param {Function} onComplete
99
133
  */
100
- async showPaymentModal(payload, onComplete) {
134
+ async showPaymentModal(params, onComplete) {
101
135
  const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု α€…α€α€„α€Ία€”α€±α€žα€Šα€Ί...</div></div>`;
102
136
  this._createAndRenderModal(initialContent, false);
103
137
  this.onCompleteCallback = onComplete;
138
+ const payload = {
139
+ amount: params.amount,
140
+ orderId: params.orderId,
141
+ callbackUrl: params.callbackUrl,
142
+ currency: 'MMK',
143
+ nonce: new Date().getTime().toString() + '_mmp'
144
+ };
104
145
  try {
105
- payload.nonce = new Date().getTime().toString() + '_mmp';
106
- const tokenResponse = await this.createTokenRequest(payload);
146
+ const tokenResponse = await this._callApiTokenRequest(payload);
107
147
  this.tokenKey = tokenResponse.token;
108
- const apiResponse = await this.createPaymentRequest(payload);
148
+ const apiResponse = await this._callApiPaymentRequest(payload);
109
149
  if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
110
150
  this.pendingApiResponse = apiResponse;
111
151
  this.pendingPaymentPayload = payload;
@@ -136,7 +176,6 @@ class MMPaySDK {
136
176
  const style = document.createElement('style');
137
177
  style.innerHTML = `
138
178
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Padauk:wght@400;700&display=swap');
139
-
140
179
  #mmpay-full-modal {
141
180
  position: fixed;
142
181
  top: 0;
@@ -244,7 +283,7 @@ class MMPaySDK {
244
283
  */
245
284
  _renderQrModalContent(apiResponse, payload, merchantName) {
246
285
  const qrData = apiResponse.qr;
247
- const amountDisplay = `${apiResponse.amount.toFixed(2)} ${apiResponse.currency}`;
286
+ const amountDisplay = `${apiResponse.amount.toFixed(2)} MMK`;
248
287
  const qrCanvasId = 'mmpayQrCanvas';
249
288
  const orderId = payload.orderId;
250
289
  window.MMPayDownloadQR = function () {
@@ -420,7 +459,7 @@ class MMPaySDK {
420
459
  }
421
460
  /**
422
461
  * Cleans up the modal and stops polling.
423
- * @param restoreBodyScroll
462
+ * @param {boolean} restoreBodyScroll
424
463
  */
425
464
  _cleanupModal(restoreBodyScroll) {
426
465
  if (this.pollIntervalId !== undefined) {
@@ -451,7 +490,7 @@ class MMPaySDK {
451
490
  if (typeof QRious !== 'undefined' && canvas) {
452
491
  new QRious({
453
492
  element: canvas,
454
- value: qrData,
493
+ value: unescape(encodeURIComponent(qrData)),
455
494
  size: this.QR_SIZE,
456
495
  padding: 15,
457
496
  level: 'H'
package/dist/esm/index.d.ts CHANGED
@@ -1,6 +1,11 @@
1
- export interface ICreatePaymentRequest {
1
+ export interface ICorePayParams {
2
2
  amount: number;
3
- currency: string;
3
+ orderId: string;
4
+ callbackUrl?: string;
5
+ }
6
+ export interface ICreatePaymentRequestParams {
7
+ amount: number;
8
+ currency?: string;
4
9
  orderId: string;
5
10
  callbackUrl?: string;
6
11
  nonce?: string;
@@ -9,14 +14,13 @@ export interface ICreatePaymentResponse {
9
14
  _id: string;
10
15
  amount: number;
11
16
  orderId: string;
12
- currency: string;
17
+ currency?: string;
13
18
  transactionRefId: string;
14
19
  qr: string;
15
- url: string;
16
20
  }
17
- export interface ICreateTokenRequest {
21
+ export interface ICreateTokenRequestParams {
18
22
  amount: number;
19
- currency: string;
23
+ currency?: string;
20
24
  orderId: string;
21
25
  callbackUrl?: string;
22
26
  nonce?: string;
@@ -27,7 +31,7 @@ export interface ICreateTokenResponse {
27
31
  }
28
32
  export interface IPollingRequest {
29
33
  amount: number;
30
- currency: string;
34
+ currency?: string;
31
35
  orderId: string;
32
36
  callbackUrl?: string;
33
37
  nonce?: string;
@@ -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,8 +78,8 @@ export declare class MMPaySDK {
69
78
  */
70
79
  private _callApi;
71
80
  /**
72
- * createTokenRequest
73
- * @param {ICreateTokenRequest} payload
81
+ * _callApiTokenRequest
82
+ * @param {ICreateTokenRequestParams} payload
74
83
  * @param {number} payload.amount
75
84
  * @param {string} payload.currency
76
85
  * @param {string} payload.orderId
@@ -78,10 +87,10 @@ export declare class MMPaySDK {
78
87
  * @param {string} payload.callbackUrl
79
88
  * @returns {Promise<ICreateTokenResponse>}
80
89
  */
81
- createTokenRequest(payload: ICreateTokenRequest): Promise<ICreateTokenResponse>;
90
+ private _callApiTokenRequest;
82
91
  /**
83
- * createPaymentRequest
84
- * @param {ICreatePaymentRequest} payload
92
+ * _callApiPaymentRequest
93
+ * @param {ICreatePaymentRequestParams} payload
85
94
  * @param {number} payload.amount
86
95
  * @param {string} payload.currency
87
96
  * @param {string} payload.orderId
@@ -89,13 +98,25 @@ export declare class MMPaySDK {
89
98
  * @param {string} payload.callbackUrl
90
99
  * @returns {Promise<ICreatePaymentResponse>}
91
100
  */
92
- createPaymentRequest(payload: ICreatePaymentRequest): Promise<ICreatePaymentResponse>;
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>;
93
111
  /**
94
112
  * showPaymentModal
95
- * @param {CreatePaymentRequest} payload
113
+ * @param {ICorePayParams} params
114
+ * @param {number} params.amount
115
+ * @param {string} params.orderId
116
+ * @param {string} params.callbackUrl
96
117
  * @param {Function} onComplete
97
118
  */
98
- showPaymentModal(payload: ICreatePaymentRequest, onComplete: (result: PolliongResult) => void): Promise<void>;
119
+ showPaymentModal(params: ICorePayParams, onComplete: (result: PolliongResult) => void): Promise<void>;
99
120
  /**
100
121
  * _createAndRenderModal
101
122
  * @param {string} contentHtml
@@ -127,7 +148,7 @@ export declare class MMPaySDK {
127
148
  private _reRenderPendingModalInstance;
128
149
  /**
129
150
  * Cleans up the modal and stops polling.
130
- * @param restoreBodyScroll
151
+ * @param {boolean} restoreBodyScroll
131
152
  */
132
153
  private _cleanupModal;
133
154
  /**
package/dist/esm/index.js CHANGED
@@ -1,12 +1,16 @@
1
1
  export class MMPaySDK {
2
+ /**
3
+ * constructor
4
+ * @param publishableKey
5
+ * @param options
6
+ */
2
7
  constructor(publishableKey, options = {}) {
3
8
  this.pollIntervalId = undefined;
4
9
  this.onCompleteCallback = null;
5
10
  this.overlayElement = null;
6
- // Properties to store pending data for re-rendering after cancel attempt
7
11
  this.pendingApiResponse = null;
8
12
  this.pendingPaymentPayload = null;
9
- this.QR_SIZE = 300;
13
+ this.QR_SIZE = 290;
10
14
  if (!publishableKey) {
11
15
  throw new Error("A Publishable Key is required to initialize [MMPaySDK].");
12
16
  }
@@ -14,7 +18,7 @@ export class MMPaySDK {
14
18
  this.environment = options.environment || 'production';
15
19
  this.baseUrl = options.baseUrl || 'https://api.mm-pay.com';
16
20
  this.merchantName = options.merchantName || 'Your Merchant';
17
- this.POLL_INTERVAL_MS = options.pollInterval || 3000;
21
+ this.POLL_INTERVAL_MS = options.pollInterval || 5000;
18
22
  }
19
23
  /**
20
24
  * _callApi
@@ -46,8 +50,8 @@ export class MMPaySDK {
46
50
  return response.json();
47
51
  }
48
52
  /**
49
- * createTokenRequest
50
- * @param {ICreateTokenRequest} payload
53
+ * _callApiTokenRequest
54
+ * @param {ICreateTokenRequestParams} payload
51
55
  * @param {number} payload.amount
52
56
  * @param {string} payload.currency
53
57
  * @param {string} payload.orderId
@@ -55,7 +59,7 @@ export class MMPaySDK {
55
59
  * @param {string} payload.callbackUrl
56
60
  * @returns {Promise<ICreateTokenResponse>}
57
61
  */
58
- async createTokenRequest(payload) {
62
+ async _callApiTokenRequest(payload) {
59
63
  try {
60
64
  const endpoint = this.environment === 'sandbox'
61
65
  ? '/xpayments/sandbox-token-request'
@@ -68,8 +72,8 @@ export class MMPaySDK {
68
72
  }
69
73
  }
70
74
  /**
71
- * createPaymentRequest
72
- * @param {ICreatePaymentRequest} payload
75
+ * _callApiPaymentRequest
76
+ * @param {ICreatePaymentRequestParams} payload
73
77
  * @param {number} payload.amount
74
78
  * @param {string} payload.currency
75
79
  * @param {string} payload.orderId
@@ -77,7 +81,7 @@ export class MMPaySDK {
77
81
  * @param {string} payload.callbackUrl
78
82
  * @returns {Promise<ICreatePaymentResponse>}
79
83
  */
80
- async createPaymentRequest(payload) {
84
+ async _callApiPaymentRequest(payload) {
81
85
  try {
82
86
  const endpoint = this.environment === 'sandbox'
83
87
  ? '/xpayments/sandbox-payment-create'
@@ -89,20 +93,56 @@ export class MMPaySDK {
89
93
  throw error;
90
94
  }
91
95
  }
96
+ /**
97
+ * createPayment
98
+ * @param {ICorePayParams} params
99
+ * @param {number} params.amount
100
+ * @param {string} params.orderId
101
+ * @param {string} params.callbackUrl
102
+ * @returns {Promise<ICreatePaymentResponse>}
103
+ */
104
+ async createPayment(params) {
105
+ const payload = {
106
+ amount: params.amount,
107
+ orderId: params.orderId,
108
+ callbackUrl: params.callbackUrl,
109
+ currency: 'MMK',
110
+ nonce: new Date().getTime().toString() + '_mmp'
111
+ };
112
+ try {
113
+ const tokenResponse = await this._callApiTokenRequest(payload);
114
+ this.tokenKey = tokenResponse.token;
115
+ const apiResponse = await this._callApiPaymentRequest(payload);
116
+ return apiResponse;
117
+ }
118
+ catch (error) {
119
+ console.error("Payment request failed:", error);
120
+ throw error;
121
+ }
122
+ }
92
123
  /**
93
124
  * showPaymentModal
94
- * @param {CreatePaymentRequest} payload
125
+ * @param {ICorePayParams} params
126
+ * @param {number} params.amount
127
+ * @param {string} params.orderId
128
+ * @param {string} params.callbackUrl
95
129
  * @param {Function} onComplete
96
130
  */
97
- async showPaymentModal(payload, onComplete) {
131
+ async showPaymentModal(params, onComplete) {
98
132
  const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု α€…α€α€„α€Ία€”α€±α€žα€Šα€Ί...</div></div>`;
99
133
  this._createAndRenderModal(initialContent, false);
100
134
  this.onCompleteCallback = onComplete;
135
+ const payload = {
136
+ amount: params.amount,
137
+ orderId: params.orderId,
138
+ callbackUrl: params.callbackUrl,
139
+ currency: 'MMK',
140
+ nonce: new Date().getTime().toString() + '_mmp'
141
+ };
101
142
  try {
102
- payload.nonce = new Date().getTime().toString() + '_mmp';
103
- const tokenResponse = await this.createTokenRequest(payload);
143
+ const tokenResponse = await this._callApiTokenRequest(payload);
104
144
  this.tokenKey = tokenResponse.token;
105
- const apiResponse = await this.createPaymentRequest(payload);
145
+ const apiResponse = await this._callApiPaymentRequest(payload);
106
146
  if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
107
147
  this.pendingApiResponse = apiResponse;
108
148
  this.pendingPaymentPayload = payload;
@@ -133,7 +173,6 @@ export class MMPaySDK {
133
173
  const style = document.createElement('style');
134
174
  style.innerHTML = `
135
175
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Padauk:wght@400;700&display=swap');
136
-
137
176
  #mmpay-full-modal {
138
177
  position: fixed;
139
178
  top: 0;
@@ -241,7 +280,7 @@ export class MMPaySDK {
241
280
  */
242
281
  _renderQrModalContent(apiResponse, payload, merchantName) {
243
282
  const qrData = apiResponse.qr;
244
- const amountDisplay = `${apiResponse.amount.toFixed(2)} ${apiResponse.currency}`;
283
+ const amountDisplay = `${apiResponse.amount.toFixed(2)} MMK`;
245
284
  const qrCanvasId = 'mmpayQrCanvas';
246
285
  const orderId = payload.orderId;
247
286
  window.MMPayDownloadQR = function () {
@@ -417,7 +456,7 @@ export class MMPaySDK {
417
456
  }
418
457
  /**
419
458
  * Cleans up the modal and stops polling.
420
- * @param restoreBodyScroll
459
+ * @param {boolean} restoreBodyScroll
421
460
  */
422
461
  _cleanupModal(restoreBodyScroll) {
423
462
  if (this.pollIntervalId !== undefined) {
@@ -448,7 +487,7 @@ export class MMPaySDK {
448
487
  if (typeof QRious !== 'undefined' && canvas) {
449
488
  new QRious({
450
489
  element: canvas,
451
- value: qrData,
490
+ value: unescape(encodeURIComponent(qrData)),
452
491
  size: this.QR_SIZE,
453
492
  padding: 15,
454
493
  level: 'H'
package/dist/mmpay-sdk.js CHANGED
@@ -5,14 +5,18 @@
5
5
  })(this, (function (exports) { 'use strict';
6
6
 
7
7
  class MMPaySDK {
8
+ /**
9
+ * constructor
10
+ * @param publishableKey
11
+ * @param options
12
+ */
8
13
  constructor(publishableKey, options = {}) {
9
14
  this.pollIntervalId = undefined;
10
15
  this.onCompleteCallback = null;
11
16
  this.overlayElement = null;
12
- // Properties to store pending data for re-rendering after cancel attempt
13
17
  this.pendingApiResponse = null;
14
18
  this.pendingPaymentPayload = null;
15
- this.QR_SIZE = 300;
19
+ this.QR_SIZE = 290;
16
20
  if (!publishableKey) {
17
21
  throw new Error("A Publishable Key is required to initialize [MMPaySDK].");
18
22
  }
@@ -20,7 +24,7 @@
20
24
  this.environment = options.environment || 'production';
21
25
  this.baseUrl = options.baseUrl || 'https://api.mm-pay.com';
22
26
  this.merchantName = options.merchantName || 'Your Merchant';
23
- this.POLL_INTERVAL_MS = options.pollInterval || 3000;
27
+ this.POLL_INTERVAL_MS = options.pollInterval || 5000;
24
28
  }
25
29
  /**
26
30
  * _callApi
@@ -52,8 +56,8 @@
52
56
  return response.json();
53
57
  }
54
58
  /**
55
- * createTokenRequest
56
- * @param {ICreateTokenRequest} payload
59
+ * _callApiTokenRequest
60
+ * @param {ICreateTokenRequestParams} payload
57
61
  * @param {number} payload.amount
58
62
  * @param {string} payload.currency
59
63
  * @param {string} payload.orderId
@@ -61,7 +65,7 @@
61
65
  * @param {string} payload.callbackUrl
62
66
  * @returns {Promise<ICreateTokenResponse>}
63
67
  */
64
- async createTokenRequest(payload) {
68
+ async _callApiTokenRequest(payload) {
65
69
  try {
66
70
  const endpoint = this.environment === 'sandbox'
67
71
  ? '/xpayments/sandbox-token-request'
@@ -74,8 +78,8 @@
74
78
  }
75
79
  }
76
80
  /**
77
- * createPaymentRequest
78
- * @param {ICreatePaymentRequest} payload
81
+ * _callApiPaymentRequest
82
+ * @param {ICreatePaymentRequestParams} payload
79
83
  * @param {number} payload.amount
80
84
  * @param {string} payload.currency
81
85
  * @param {string} payload.orderId
@@ -83,7 +87,7 @@
83
87
  * @param {string} payload.callbackUrl
84
88
  * @returns {Promise<ICreatePaymentResponse>}
85
89
  */
86
- async createPaymentRequest(payload) {
90
+ async _callApiPaymentRequest(payload) {
87
91
  try {
88
92
  const endpoint = this.environment === 'sandbox'
89
93
  ? '/xpayments/sandbox-payment-create'
@@ -95,20 +99,56 @@
95
99
  throw error;
96
100
  }
97
101
  }
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
+ async createPayment(params) {
111
+ const payload = {
112
+ amount: params.amount,
113
+ orderId: params.orderId,
114
+ callbackUrl: params.callbackUrl,
115
+ currency: 'MMK',
116
+ nonce: new Date().getTime().toString() + '_mmp'
117
+ };
118
+ try {
119
+ const tokenResponse = await this._callApiTokenRequest(payload);
120
+ this.tokenKey = tokenResponse.token;
121
+ const apiResponse = await this._callApiPaymentRequest(payload);
122
+ return apiResponse;
123
+ }
124
+ catch (error) {
125
+ console.error("Payment request failed:", error);
126
+ throw error;
127
+ }
128
+ }
98
129
  /**
99
130
  * showPaymentModal
100
- * @param {CreatePaymentRequest} payload
131
+ * @param {ICorePayParams} params
132
+ * @param {number} params.amount
133
+ * @param {string} params.orderId
134
+ * @param {string} params.callbackUrl
101
135
  * @param {Function} onComplete
102
136
  */
103
- async showPaymentModal(payload, onComplete) {
137
+ async showPaymentModal(params, onComplete) {
104
138
  const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု α€…α€α€„α€Ία€”α€±α€žα€Šα€Ί...</div></div>`;
105
139
  this._createAndRenderModal(initialContent, false);
106
140
  this.onCompleteCallback = onComplete;
141
+ const payload = {
142
+ amount: params.amount,
143
+ orderId: params.orderId,
144
+ callbackUrl: params.callbackUrl,
145
+ currency: 'MMK',
146
+ nonce: new Date().getTime().toString() + '_mmp'
147
+ };
107
148
  try {
108
- payload.nonce = new Date().getTime().toString() + '_mmp';
109
- const tokenResponse = await this.createTokenRequest(payload);
149
+ const tokenResponse = await this._callApiTokenRequest(payload);
110
150
  this.tokenKey = tokenResponse.token;
111
- const apiResponse = await this.createPaymentRequest(payload);
151
+ const apiResponse = await this._callApiPaymentRequest(payload);
112
152
  if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
113
153
  this.pendingApiResponse = apiResponse;
114
154
  this.pendingPaymentPayload = payload;
@@ -139,7 +179,6 @@
139
179
  const style = document.createElement('style');
140
180
  style.innerHTML = `
141
181
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Padauk:wght@400;700&display=swap');
142
-
143
182
  #mmpay-full-modal {
144
183
  position: fixed;
145
184
  top: 0;
@@ -247,7 +286,7 @@
247
286
  */
248
287
  _renderQrModalContent(apiResponse, payload, merchantName) {
249
288
  const qrData = apiResponse.qr;
250
- const amountDisplay = `${apiResponse.amount.toFixed(2)} ${apiResponse.currency}`;
289
+ const amountDisplay = `${apiResponse.amount.toFixed(2)} MMK`;
251
290
  const qrCanvasId = 'mmpayQrCanvas';
252
291
  const orderId = payload.orderId;
253
292
  window.MMPayDownloadQR = function () {
@@ -423,7 +462,7 @@
423
462
  }
424
463
  /**
425
464
  * Cleans up the modal and stops polling.
426
- * @param restoreBodyScroll
465
+ * @param {boolean} restoreBodyScroll
427
466
  */
428
467
  _cleanupModal(restoreBodyScroll) {
429
468
  if (this.pollIntervalId !== undefined) {
@@ -454,7 +493,7 @@
454
493
  if (typeof QRious !== 'undefined' && canvas) {
455
494
  new QRious({
456
495
  element: canvas,
457
- value: qrData,
496
+ value: unescape(encodeURIComponent(qrData)),
458
497
  size: this.QR_SIZE,
459
498
  padding: 15,
460
499
  level: 'H'
package/dist/mmpay-sdk.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mmpay-sdk.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"mmpay-sdk.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mmpay-browser-sdk",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "JavaScript SDK for integrating the MMQR Merchant and Redirect payment gateway",
5
5
  "keywords": [
6
6
  "MMQR",
package/src/index.ts CHANGED
@@ -1,6 +1,12 @@
1
- export interface ICreatePaymentRequest {
1
+ export interface ICorePayParams {
2
2
  amount: number;
3
- currency: string;
3
+ orderId: string;
4
+ callbackUrl?: string;
5
+ }
6
+
7
+ export interface ICreatePaymentRequestParams {
8
+ amount: number;
9
+ currency?: string;
4
10
  orderId: string;
5
11
  callbackUrl?: string;
6
12
  nonce?: string;
@@ -9,14 +15,13 @@ export interface ICreatePaymentResponse {
9
15
  _id: string;
10
16
  amount: number;
11
17
  orderId: string;
12
- currency: string;
18
+ currency?: string;
13
19
  transactionRefId: string;
14
20
  qr: string;
15
- url: string;
16
21
  }
17
- export interface ICreateTokenRequest {
22
+ export interface ICreateTokenRequestParams {
18
23
  amount: number;
19
- currency: string;
24
+ currency?: string;
20
25
  orderId: string;
21
26
  callbackUrl?: string;
22
27
  nonce?: string;
@@ -27,7 +32,7 @@ export interface ICreateTokenResponse {
27
32
  }
28
33
  export interface IPollingRequest {
29
34
  amount: number;
30
- currency: string;
35
+ currency?: string;
31
36
  orderId: string;
32
37
  callbackUrl?: string;
33
38
  nonce?: string;
@@ -69,12 +74,16 @@ export class MMPaySDK {
69
74
  private onCompleteCallback: ((result: PolliongResult) => void) | null = null;
70
75
  private overlayElement: HTMLDivElement | null = null;
71
76
 
72
- // Properties to store pending data for re-rendering after cancel attempt
73
77
  private pendingApiResponse: ICreatePaymentResponse | null = null;
74
- private pendingPaymentPayload: ICreatePaymentRequest | null = null;
78
+ private pendingPaymentPayload: ICreatePaymentRequestParams | null = null;
75
79
 
76
- private readonly QR_SIZE: number = 300;
80
+ private readonly QR_SIZE: number = 290;
77
81
 
82
+ /**
83
+ * constructor
84
+ * @param publishableKey
85
+ * @param options
86
+ */
78
87
  constructor(publishableKey: string, options: SDKOptions = {}) {
79
88
  if (!publishableKey) {
80
89
  throw new Error("A Publishable Key is required to initialize [MMPaySDK].");
@@ -83,7 +92,7 @@ export class MMPaySDK {
83
92
  this.environment = options.environment || 'production';
84
93
  this.baseUrl = options.baseUrl || 'https://api.mm-pay.com';
85
94
  this.merchantName = options.merchantName || 'Your Merchant';
86
- this.POLL_INTERVAL_MS = options.pollInterval || 3000;
95
+ this.POLL_INTERVAL_MS = options.pollInterval || 5000;
87
96
  }
88
97
  /**
89
98
  * _callApi
@@ -115,8 +124,8 @@ export class MMPaySDK {
115
124
  return response.json() as Promise<T>;
116
125
  }
117
126
  /**
118
- * createTokenRequest
119
- * @param {ICreateTokenRequest} payload
127
+ * _callApiTokenRequest
128
+ * @param {ICreateTokenRequestParams} payload
120
129
  * @param {number} payload.amount
121
130
  * @param {string} payload.currency
122
131
  * @param {string} payload.orderId
@@ -124,7 +133,7 @@ export class MMPaySDK {
124
133
  * @param {string} payload.callbackUrl
125
134
  * @returns {Promise<ICreateTokenResponse>}
126
135
  */
127
- async createTokenRequest(payload: ICreateTokenRequest): Promise<ICreateTokenResponse> {
136
+ private async _callApiTokenRequest(payload: ICreateTokenRequestParams): Promise<ICreateTokenResponse> {
128
137
  try {
129
138
  const endpoint = this.environment === 'sandbox'
130
139
  ? '/xpayments/sandbox-token-request'
@@ -136,8 +145,8 @@ export class MMPaySDK {
136
145
  }
137
146
  }
138
147
  /**
139
- * createPaymentRequest
140
- * @param {ICreatePaymentRequest} payload
148
+ * _callApiPaymentRequest
149
+ * @param {ICreatePaymentRequestParams} payload
141
150
  * @param {number} payload.amount
142
151
  * @param {string} payload.currency
143
152
  * @param {string} payload.orderId
@@ -145,7 +154,7 @@ export class MMPaySDK {
145
154
  * @param {string} payload.callbackUrl
146
155
  * @returns {Promise<ICreatePaymentResponse>}
147
156
  */
148
- async createPaymentRequest(payload: ICreatePaymentRequest): Promise<ICreatePaymentResponse> {
157
+ private async _callApiPaymentRequest(payload: ICreatePaymentRequestParams): Promise<ICreatePaymentResponse> {
149
158
  try {
150
159
  const endpoint = this.environment === 'sandbox'
151
160
  ? '/xpayments/sandbox-payment-create'
@@ -156,23 +165,62 @@ export class MMPaySDK {
156
165
  throw error;
157
166
  }
158
167
  }
168
+
169
+
170
+
171
+ /**
172
+ * createPayment
173
+ * @param {ICorePayParams} params
174
+ * @param {number} params.amount
175
+ * @param {string} params.orderId
176
+ * @param {string} params.callbackUrl
177
+ * @returns {Promise<ICreatePaymentResponse>}
178
+ */
179
+ public async createPayment(params: ICorePayParams): Promise<ICreatePaymentResponse> {
180
+ const payload: ICreatePaymentRequestParams = {
181
+ amount: params.amount,
182
+ orderId: params.orderId,
183
+ callbackUrl: params.callbackUrl,
184
+ currency: 'MMK',
185
+ nonce: new Date().getTime().toString() + '_mmp'
186
+ }
187
+ try {
188
+ const tokenResponse = await this._callApiTokenRequest(payload);
189
+ this.tokenKey = tokenResponse.token as string;
190
+ const apiResponse = await this._callApiPaymentRequest(payload);
191
+ return apiResponse
192
+ } catch (error) {
193
+ console.error("Payment request failed:", error);
194
+ throw error;
195
+ }
196
+ }
159
197
  /**
160
198
  * showPaymentModal
161
- * @param {CreatePaymentRequest} payload
199
+ * @param {ICorePayParams} params
200
+ * @param {number} params.amount
201
+ * @param {string} params.orderId
202
+ * @param {string} params.callbackUrl
162
203
  * @param {Function} onComplete
163
204
  */
164
205
  public async showPaymentModal(
165
- payload: ICreatePaymentRequest,
206
+ params: ICorePayParams,
166
207
  onComplete: (result: PolliongResult) => void
167
208
  ): Promise<void> {
168
209
  const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု α€…α€α€„α€Ία€”α€±α€žα€Šα€Ί...</div></div>`;
169
210
  this._createAndRenderModal(initialContent, false);
170
211
  this.onCompleteCallback = onComplete;
212
+ const payload: ICreatePaymentRequestParams = {
213
+ amount: params.amount,
214
+ orderId: params.orderId,
215
+ callbackUrl: params.callbackUrl,
216
+ currency: 'MMK',
217
+ nonce: new Date().getTime().toString() + '_mmp'
218
+ }
219
+
171
220
  try {
172
- payload.nonce = new Date().getTime().toString() + '_mmp';
173
- const tokenResponse = await this.createTokenRequest(payload);
221
+ const tokenResponse = await this._callApiTokenRequest(payload);
174
222
  this.tokenKey = tokenResponse.token as string;
175
- const apiResponse = await this.createPaymentRequest(payload);
223
+ const apiResponse = await this._callApiPaymentRequest(payload);
176
224
  if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
177
225
  this.pendingApiResponse = apiResponse;
178
226
  this.pendingPaymentPayload = payload;
@@ -186,6 +234,11 @@ export class MMPaySDK {
186
234
  this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် α€‘α€™α€Ύα€¬α€Έα€‘α€šα€½α€„α€Ία€Έ α€–α€Όα€…α€Ία€•α€½α€¬α€Έα€žα€Šα€Ία‹ α€€α€½α€”α€Ία€†α€­α€―α€Έα€œα€Ία€α€½α€„α€Ί α€€α€Όα€Šα€·α€Ία€•α€«α‹');
187
235
  }
188
236
  }
237
+
238
+
239
+
240
+
241
+
189
242
  /**
190
243
  * _createAndRenderModal
191
244
  * @param {string} contentHtml
@@ -201,7 +254,6 @@ export class MMPaySDK {
201
254
  const style = document.createElement('style');
202
255
  style.innerHTML = `
203
256
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Padauk:wght@400;700&display=swap');
204
-
205
257
  #mmpay-full-modal {
206
258
  position: fixed;
207
259
  top: 0;
@@ -306,9 +358,9 @@ export class MMPaySDK {
306
358
  * @param {CreatePaymentRequest} payload
307
359
  * @param {string} merchantName
308
360
  */
309
- private _renderQrModalContent(apiResponse: ICreatePaymentResponse, payload: ICreatePaymentRequest, merchantName: string): void {
361
+ private _renderQrModalContent(apiResponse: ICreatePaymentResponse, payload: ICreatePaymentRequestParams, merchantName: string): void {
310
362
  const qrData = apiResponse.qr;
311
- const amountDisplay = `${apiResponse.amount.toFixed(2)} ${apiResponse.currency}`;
363
+ const amountDisplay = `${apiResponse.amount.toFixed(2)} MMK`;
312
364
  const qrCanvasId = 'mmpayQrCanvas';
313
365
  const orderId = payload.orderId;
314
366
  window.MMPayDownloadQR = function () {
@@ -481,7 +533,7 @@ export class MMPaySDK {
481
533
  }
482
534
  /**
483
535
  * Cleans up the modal and stops polling.
484
- * @param restoreBodyScroll
536
+ * @param {boolean} restoreBodyScroll
485
537
  */
486
538
  private _cleanupModal(restoreBodyScroll: boolean): void {
487
539
  if (this.pollIntervalId !== undefined) {
@@ -512,7 +564,7 @@ export class MMPaySDK {
512
564
  if (typeof QRious !== 'undefined' && canvas) {
513
565
  new QRious({
514
566
  element: canvas,
515
- value: qrData,
567
+ value: unescape(encodeURIComponent(qrData)),
516
568
  size: this.QR_SIZE,
517
569
  padding: 15,
518
570
  level: 'H'
package/test/home.html CHANGED
@@ -146,25 +146,6 @@
146
146
  </div>
147
147
 
148
148
  <script src="../dist/mmpay-sdk.js"></script>
149
- <!-- <script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/dist/mmpay-sdk.js"></script> -->
150
- <!-- <script>
151
- const PUBLISHABLE_KEY = 'pk_test_504013d7294ea1f6ecf4a2a0d38c31e0788286ef1b8ccacecf2a9b2809e23341';
152
- const sdk = new MMPaySDK(PUBLISHABLE_KEY, {
153
- baseUrl: 'https://supapay.ecgedms.com',
154
- environment: 'sandbox',
155
- merchantName: 'Fastify E-Shop',
156
- pollInterval: 5000
157
- });
158
- await sdk.showPaymentModal({
159
- amount: parseFloat(finalAmount.toFixed(2)),
160
- currency: mockOrder.currency,
161
- orderId: 'FSTY' + Date.now(),
162
- callbackUrl: 'https://your.backend.com/api/mmpay/webhook'
163
- },(result) => {
164
- const resultContainer = document.getElementById(RESULT_CONTAINER_ID);
165
- // DO your logic
166
- });
167
- </script> -->
168
149
 
169
150
  <!-- Client-Side Application Logic -->
170
151
  <script>
@@ -179,11 +160,11 @@
179
160
  const mockOrder = {
180
161
  currency: 'MMK',
181
162
  items: [
182
- { name: "Fastify T-Shirt", price: 25000, qty: 1 },
183
- { name: "Node.js Dev Sticker Pack", price: 10000, qty: 3 },
184
- { name: "TypeScript Handbook (Digital)", price: 18000, qty: 1 }
163
+ { name: "Fastify T-Shirt", price: 500, qty: 1 },
164
+ { name: "Node.js Dev Sticker Pack", price: 500, qty: 3 },
165
+ { name: "TypeScript Handbook (Digital)", price: 500, qty: 1 }
185
166
  ],
186
- shipping: 2500,
167
+ shipping: 500,
187
168
  taxRate: 0.08
188
169
  };
189
170
 
@@ -246,14 +227,13 @@
246
227
  try {
247
228
 
248
229
  const sdk = new MMPaySDK(PUBLISHABLE_KEY, {
249
- baseUrl: 'https://supapay.ecgedms.com',
230
+ baseUrl: 'https://ezapi.myanmyanpay.com',
250
231
  environment: 'sandbox',
251
232
  merchantName: 'Fastify E-Shop',
252
233
  pollInterval: 5000
253
234
  });
254
235
  await sdk.showPaymentModal({
255
236
  amount: parseFloat(finalAmount.toFixed(2)),
256
- currency: mockOrder.currency,
257
237
  orderId: 'FSTY' + Date.now(),
258
238
  callbackUrl: 'https://your-fastify-backend.com/api/mmpay/webhook'
259
239
  }, (result) => {