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.
- package/README.md +130 -102
- package/dist/cjs/index.d.ts +84 -42
- package/dist/cjs/index.js +130 -47
- package/dist/esm/index.d.ts +84 -42
- package/dist/esm/index.js +130 -47
- package/dist/mmpay-sdk.js +130 -47
- package/dist/mmpay-sdk.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +174 -76
- package/test/home.html +35 -23
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 =
|
|
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 ||
|
|
21
|
+
this.POLL_INTERVAL_MS = options.pollInterval || 5000;
|
|
18
22
|
}
|
|
19
23
|
/**
|
|
20
24
|
* _callApi
|
|
@@ -23,12 +27,20 @@ export class MMPaySDK {
|
|
|
23
27
|
* @returns
|
|
24
28
|
*/
|
|
25
29
|
async _callApi(endpoint, data = {}) {
|
|
30
|
+
let config = {
|
|
31
|
+
'Content-Type': 'application/json',
|
|
32
|
+
'Authorization': `Bearer ${this.publishableKey}`
|
|
33
|
+
};
|
|
34
|
+
if (this.tokenKey) {
|
|
35
|
+
config = {
|
|
36
|
+
'Content-Type': 'application/json',
|
|
37
|
+
'Authorization': `Bearer ${this.publishableKey}`,
|
|
38
|
+
'X-MMPay-Btoken': `${this.tokenKey}`
|
|
39
|
+
};
|
|
40
|
+
}
|
|
26
41
|
const response = await fetch(`${this.baseUrl}${endpoint}`, {
|
|
27
42
|
method: 'POST',
|
|
28
|
-
headers:
|
|
29
|
-
'Content-Type': 'application/json',
|
|
30
|
-
'Authorization': `Bearer ${this.publishableKey}`
|
|
31
|
-
},
|
|
43
|
+
headers: config,
|
|
32
44
|
body: JSON.stringify(data)
|
|
33
45
|
});
|
|
34
46
|
if (!response.ok) {
|
|
@@ -38,11 +50,38 @@ export class MMPaySDK {
|
|
|
38
50
|
return response.json();
|
|
39
51
|
}
|
|
40
52
|
/**
|
|
41
|
-
*
|
|
42
|
-
* @param {
|
|
43
|
-
* @
|
|
53
|
+
* _callApiTokenRequest
|
|
54
|
+
* @param {ICreateTokenRequestParams} payload
|
|
55
|
+
* @param {number} payload.amount
|
|
56
|
+
* @param {string} payload.currency
|
|
57
|
+
* @param {string} payload.orderId
|
|
58
|
+
* @param {string} payload.nonce
|
|
59
|
+
* @param {string} payload.callbackUrl
|
|
60
|
+
* @returns {Promise<ICreateTokenResponse>}
|
|
61
|
+
*/
|
|
62
|
+
async _callApiTokenRequest(payload) {
|
|
63
|
+
try {
|
|
64
|
+
const endpoint = this.environment === 'sandbox'
|
|
65
|
+
? '/xpayments/sandbox-token-request'
|
|
66
|
+
: '/xpayments/production-token-request';
|
|
67
|
+
return await this._callApi(endpoint, payload);
|
|
68
|
+
}
|
|
69
|
+
catch (error) {
|
|
70
|
+
console.error("Token request failed:", error);
|
|
71
|
+
throw error;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* _callApiPaymentRequest
|
|
76
|
+
* @param {ICreatePaymentRequestParams} payload
|
|
77
|
+
* @param {number} payload.amount
|
|
78
|
+
* @param {string} payload.currency
|
|
79
|
+
* @param {string} payload.orderId
|
|
80
|
+
* @param {string} payload.nonce
|
|
81
|
+
* @param {string} payload.callbackUrl
|
|
82
|
+
* @returns {Promise<ICreatePaymentResponse>}
|
|
44
83
|
*/
|
|
45
|
-
async
|
|
84
|
+
async _callApiPaymentRequest(payload) {
|
|
46
85
|
try {
|
|
47
86
|
const endpoint = this.environment === 'sandbox'
|
|
48
87
|
? '/xpayments/sandbox-payment-create'
|
|
@@ -54,10 +93,75 @@ export class MMPaySDK {
|
|
|
54
93
|
throw error;
|
|
55
94
|
}
|
|
56
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
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* showPaymentModal
|
|
125
|
+
* @param {ICorePayParams} params
|
|
126
|
+
* @param {number} params.amount
|
|
127
|
+
* @param {string} params.orderId
|
|
128
|
+
* @param {string} params.callbackUrl
|
|
129
|
+
* @param {Function} onComplete
|
|
130
|
+
*/
|
|
131
|
+
async showPaymentModal(params, onComplete) {
|
|
132
|
+
const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
|
|
133
|
+
this._createAndRenderModal(initialContent, false);
|
|
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
|
+
};
|
|
142
|
+
try {
|
|
143
|
+
const tokenResponse = await this._callApiTokenRequest(payload);
|
|
144
|
+
this.tokenKey = tokenResponse.token;
|
|
145
|
+
const apiResponse = await this._callApiPaymentRequest(payload);
|
|
146
|
+
if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
|
|
147
|
+
this.pendingApiResponse = apiResponse;
|
|
148
|
+
this.pendingPaymentPayload = payload;
|
|
149
|
+
this._renderQrModalContent(apiResponse, payload, this.merchantName);
|
|
150
|
+
this._startPolling(payload, onComplete);
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
catch (error) {
|
|
157
|
+
this.tokenKey = null;
|
|
158
|
+
this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
|
|
159
|
+
}
|
|
160
|
+
}
|
|
57
161
|
/**
|
|
58
162
|
* _createAndRenderModal
|
|
59
163
|
* @param {string} contentHtml
|
|
60
|
-
* @param isTerminal
|
|
164
|
+
* @param {boolean} isTerminal
|
|
61
165
|
* @returns
|
|
62
166
|
*/
|
|
63
167
|
_createAndRenderModal(contentHtml, isTerminal = false) {
|
|
@@ -69,7 +173,6 @@ export class MMPaySDK {
|
|
|
69
173
|
const style = document.createElement('style');
|
|
70
174
|
style.innerHTML = `
|
|
71
175
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Padauk:wght@400;700&display=swap');
|
|
72
|
-
|
|
73
176
|
#mmpay-full-modal {
|
|
74
177
|
position: fixed;
|
|
75
178
|
top: 0;
|
|
@@ -169,41 +272,15 @@ export class MMPaySDK {
|
|
|
169
272
|
document.body.style.overflow = 'hidden'; // FIX: Prevent body scroll when modal is open
|
|
170
273
|
return overlay;
|
|
171
274
|
}
|
|
172
|
-
/**
|
|
173
|
-
* showPaymentModal
|
|
174
|
-
* @param {PaymentData} payload
|
|
175
|
-
* @param {Function} onComplete
|
|
176
|
-
*/
|
|
177
|
-
async showPaymentModal(payload, onComplete) {
|
|
178
|
-
const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
|
|
179
|
-
this._createAndRenderModal(initialContent, false);
|
|
180
|
-
this.onCompleteCallback = onComplete;
|
|
181
|
-
try {
|
|
182
|
-
const apiResponse = await this.createPaymentRequest(payload);
|
|
183
|
-
if (apiResponse && apiResponse.qr && apiResponse.transactionId) {
|
|
184
|
-
this.pendingApiResponse = apiResponse;
|
|
185
|
-
this.pendingPaymentPayload = payload;
|
|
186
|
-
this._renderQrModalContent(apiResponse, payload, this.merchantName);
|
|
187
|
-
this._startPolling(apiResponse._id, onComplete);
|
|
188
|
-
}
|
|
189
|
-
else {
|
|
190
|
-
this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
catch (error) {
|
|
194
|
-
// Myanmar translation for "Error during payment initiation. See console."
|
|
195
|
-
this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
275
|
/**
|
|
199
276
|
* _renderQrModalContent
|
|
200
|
-
* @param {
|
|
201
|
-
* @param {
|
|
277
|
+
* @param {ICreatePaymentResponse} apiResponse
|
|
278
|
+
* @param {CreatePaymentRequest} payload
|
|
202
279
|
* @param {string} merchantName
|
|
203
280
|
*/
|
|
204
281
|
_renderQrModalContent(apiResponse, payload, merchantName) {
|
|
205
282
|
const qrData = apiResponse.qr;
|
|
206
|
-
const amountDisplay = `${apiResponse.amount.toFixed(2)}
|
|
283
|
+
const amountDisplay = `${apiResponse.amount.toFixed(2)} MMK`;
|
|
207
284
|
const qrCanvasId = 'mmpayQrCanvas';
|
|
208
285
|
const orderId = payload.orderId;
|
|
209
286
|
window.MMPayDownloadQR = function () {
|
|
@@ -270,7 +347,7 @@ export class MMPaySDK {
|
|
|
270
347
|
<span class="mmpay-text-myanmar">မှာယူမှုနံပါတ်:</span> <strong>${apiResponse.orderId}</strong>
|
|
271
348
|
</div>
|
|
272
349
|
<div class="mmpay-detail">
|
|
273
|
-
<span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.
|
|
350
|
+
<span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionRefId}</strong>
|
|
274
351
|
</div>
|
|
275
352
|
|
|
276
353
|
<p class="mmpay-warning mmpay-text-myanmar">
|
|
@@ -379,7 +456,7 @@ export class MMPaySDK {
|
|
|
379
456
|
}
|
|
380
457
|
/**
|
|
381
458
|
* Cleans up the modal and stops polling.
|
|
382
|
-
* @param restoreBodyScroll
|
|
459
|
+
* @param {boolean} restoreBodyScroll
|
|
383
460
|
*/
|
|
384
461
|
_cleanupModal(restoreBodyScroll) {
|
|
385
462
|
if (this.pollIntervalId !== undefined) {
|
|
@@ -425,10 +502,15 @@ export class MMPaySDK {
|
|
|
425
502
|
}
|
|
426
503
|
/**
|
|
427
504
|
* _startPolling
|
|
428
|
-
* @param {
|
|
505
|
+
* @param {IPollingRequest} payload
|
|
506
|
+
* @param {number} payload.amount
|
|
507
|
+
* @param {string} payload.currency
|
|
508
|
+
* @param {string} payload.orderId
|
|
509
|
+
* @param {string} payload.nonce
|
|
510
|
+
* @param {string} payload.callbackUrl
|
|
429
511
|
* @param {Function} onComplete
|
|
430
512
|
*/
|
|
431
|
-
async _startPolling(
|
|
513
|
+
async _startPolling(payload, onComplete) {
|
|
432
514
|
if (this.pollIntervalId !== undefined) {
|
|
433
515
|
window.clearInterval(this.pollIntervalId);
|
|
434
516
|
}
|
|
@@ -437,7 +519,7 @@ export class MMPaySDK {
|
|
|
437
519
|
const endpoint = this.environment === 'sandbox'
|
|
438
520
|
? '/xpayments/sandbox-payment-polling'
|
|
439
521
|
: '/xpayments/production-payment-polling';
|
|
440
|
-
const response = await this._callApi(endpoint,
|
|
522
|
+
const response = await this._callApi(endpoint, payload);
|
|
441
523
|
const status = (response.status || '').toUpperCase();
|
|
442
524
|
if (status === 'SUCCESS' || status === 'FAILED' || status === 'EXPIRED') {
|
|
443
525
|
window.clearInterval(this.pollIntervalId);
|
|
@@ -448,6 +530,7 @@ export class MMPaySDK {
|
|
|
448
530
|
`ငွေပေးချေမှု ${status === 'FAILED' ? 'မအောင်မြင်ပါ' : 'သက်တမ်းကုန်သွားပါပြီ'}.`;
|
|
449
531
|
this._showTerminalMessage(response.orderId || 'N/A', status, message);
|
|
450
532
|
if (onComplete) {
|
|
533
|
+
this.tokenKey = null;
|
|
451
534
|
onComplete({ success: success, transaction: response });
|
|
452
535
|
}
|
|
453
536
|
return;
|
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 =
|
|
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 ||
|
|
27
|
+
this.POLL_INTERVAL_MS = options.pollInterval || 5000;
|
|
24
28
|
}
|
|
25
29
|
/**
|
|
26
30
|
* _callApi
|
|
@@ -29,12 +33,20 @@
|
|
|
29
33
|
* @returns
|
|
30
34
|
*/
|
|
31
35
|
async _callApi(endpoint, data = {}) {
|
|
36
|
+
let config = {
|
|
37
|
+
'Content-Type': 'application/json',
|
|
38
|
+
'Authorization': `Bearer ${this.publishableKey}`
|
|
39
|
+
};
|
|
40
|
+
if (this.tokenKey) {
|
|
41
|
+
config = {
|
|
42
|
+
'Content-Type': 'application/json',
|
|
43
|
+
'Authorization': `Bearer ${this.publishableKey}`,
|
|
44
|
+
'X-MMPay-Btoken': `${this.tokenKey}`
|
|
45
|
+
};
|
|
46
|
+
}
|
|
32
47
|
const response = await fetch(`${this.baseUrl}${endpoint}`, {
|
|
33
48
|
method: 'POST',
|
|
34
|
-
headers:
|
|
35
|
-
'Content-Type': 'application/json',
|
|
36
|
-
'Authorization': `Bearer ${this.publishableKey}`
|
|
37
|
-
},
|
|
49
|
+
headers: config,
|
|
38
50
|
body: JSON.stringify(data)
|
|
39
51
|
});
|
|
40
52
|
if (!response.ok) {
|
|
@@ -44,11 +56,38 @@
|
|
|
44
56
|
return response.json();
|
|
45
57
|
}
|
|
46
58
|
/**
|
|
47
|
-
*
|
|
48
|
-
* @param {
|
|
49
|
-
* @
|
|
59
|
+
* _callApiTokenRequest
|
|
60
|
+
* @param {ICreateTokenRequestParams} payload
|
|
61
|
+
* @param {number} payload.amount
|
|
62
|
+
* @param {string} payload.currency
|
|
63
|
+
* @param {string} payload.orderId
|
|
64
|
+
* @param {string} payload.nonce
|
|
65
|
+
* @param {string} payload.callbackUrl
|
|
66
|
+
* @returns {Promise<ICreateTokenResponse>}
|
|
67
|
+
*/
|
|
68
|
+
async _callApiTokenRequest(payload) {
|
|
69
|
+
try {
|
|
70
|
+
const endpoint = this.environment === 'sandbox'
|
|
71
|
+
? '/xpayments/sandbox-token-request'
|
|
72
|
+
: '/xpayments/production-token-request';
|
|
73
|
+
return await this._callApi(endpoint, payload);
|
|
74
|
+
}
|
|
75
|
+
catch (error) {
|
|
76
|
+
console.error("Token request failed:", error);
|
|
77
|
+
throw error;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* _callApiPaymentRequest
|
|
82
|
+
* @param {ICreatePaymentRequestParams} 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<ICreatePaymentResponse>}
|
|
50
89
|
*/
|
|
51
|
-
async
|
|
90
|
+
async _callApiPaymentRequest(payload) {
|
|
52
91
|
try {
|
|
53
92
|
const endpoint = this.environment === 'sandbox'
|
|
54
93
|
? '/xpayments/sandbox-payment-create'
|
|
@@ -60,10 +99,75 @@
|
|
|
60
99
|
throw error;
|
|
61
100
|
}
|
|
62
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
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* showPaymentModal
|
|
131
|
+
* @param {ICorePayParams} params
|
|
132
|
+
* @param {number} params.amount
|
|
133
|
+
* @param {string} params.orderId
|
|
134
|
+
* @param {string} params.callbackUrl
|
|
135
|
+
* @param {Function} onComplete
|
|
136
|
+
*/
|
|
137
|
+
async showPaymentModal(params, onComplete) {
|
|
138
|
+
const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
|
|
139
|
+
this._createAndRenderModal(initialContent, false);
|
|
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
|
+
};
|
|
148
|
+
try {
|
|
149
|
+
const tokenResponse = await this._callApiTokenRequest(payload);
|
|
150
|
+
this.tokenKey = tokenResponse.token;
|
|
151
|
+
const apiResponse = await this._callApiPaymentRequest(payload);
|
|
152
|
+
if (apiResponse && apiResponse.qr && apiResponse.transactionRefId) {
|
|
153
|
+
this.pendingApiResponse = apiResponse;
|
|
154
|
+
this.pendingPaymentPayload = payload;
|
|
155
|
+
this._renderQrModalContent(apiResponse, payload, this.merchantName);
|
|
156
|
+
this._startPolling(payload, onComplete);
|
|
157
|
+
}
|
|
158
|
+
else {
|
|
159
|
+
this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
catch (error) {
|
|
163
|
+
this.tokenKey = null;
|
|
164
|
+
this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
|
|
165
|
+
}
|
|
166
|
+
}
|
|
63
167
|
/**
|
|
64
168
|
* _createAndRenderModal
|
|
65
169
|
* @param {string} contentHtml
|
|
66
|
-
* @param isTerminal
|
|
170
|
+
* @param {boolean} isTerminal
|
|
67
171
|
* @returns
|
|
68
172
|
*/
|
|
69
173
|
_createAndRenderModal(contentHtml, isTerminal = false) {
|
|
@@ -75,7 +179,6 @@
|
|
|
75
179
|
const style = document.createElement('style');
|
|
76
180
|
style.innerHTML = `
|
|
77
181
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Padauk:wght@400;700&display=swap');
|
|
78
|
-
|
|
79
182
|
#mmpay-full-modal {
|
|
80
183
|
position: fixed;
|
|
81
184
|
top: 0;
|
|
@@ -175,41 +278,15 @@
|
|
|
175
278
|
document.body.style.overflow = 'hidden'; // FIX: Prevent body scroll when modal is open
|
|
176
279
|
return overlay;
|
|
177
280
|
}
|
|
178
|
-
/**
|
|
179
|
-
* showPaymentModal
|
|
180
|
-
* @param {PaymentData} payload
|
|
181
|
-
* @param {Function} onComplete
|
|
182
|
-
*/
|
|
183
|
-
async showPaymentModal(payload, onComplete) {
|
|
184
|
-
const initialContent = `<div class="mmpay-overlay-content"><div style="text-align: center; color: #fff;">ငွေပေးချေမှု စတင်နေသည်...</div></div>`;
|
|
185
|
-
this._createAndRenderModal(initialContent, false);
|
|
186
|
-
this.onCompleteCallback = onComplete;
|
|
187
|
-
try {
|
|
188
|
-
const apiResponse = await this.createPaymentRequest(payload);
|
|
189
|
-
if (apiResponse && apiResponse.qr && apiResponse.transactionId) {
|
|
190
|
-
this.pendingApiResponse = apiResponse;
|
|
191
|
-
this.pendingPaymentPayload = payload;
|
|
192
|
-
this._renderQrModalContent(apiResponse, payload, this.merchantName);
|
|
193
|
-
this._startPolling(apiResponse._id, onComplete);
|
|
194
|
-
}
|
|
195
|
-
else {
|
|
196
|
-
this._showTerminalMessage(apiResponse.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်ရန် မအောင်မြင်ပါ။ QR ဒေတာ မရရှိပါ။');
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
catch (error) {
|
|
200
|
-
// Myanmar translation for "Error during payment initiation. See console."
|
|
201
|
-
this._showTerminalMessage(payload.orderId || 'N/A', 'FAILED', 'ငွေပေးချေမှု စတင်စဉ် အမှားအယွင်း ဖြစ်ပွားသည်။ ကွန်ဆိုးလ်တွင် ကြည့်ပါ။');
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
281
|
/**
|
|
205
282
|
* _renderQrModalContent
|
|
206
|
-
* @param {
|
|
207
|
-
* @param {
|
|
283
|
+
* @param {ICreatePaymentResponse} apiResponse
|
|
284
|
+
* @param {CreatePaymentRequest} payload
|
|
208
285
|
* @param {string} merchantName
|
|
209
286
|
*/
|
|
210
287
|
_renderQrModalContent(apiResponse, payload, merchantName) {
|
|
211
288
|
const qrData = apiResponse.qr;
|
|
212
|
-
const amountDisplay = `${apiResponse.amount.toFixed(2)}
|
|
289
|
+
const amountDisplay = `${apiResponse.amount.toFixed(2)} MMK`;
|
|
213
290
|
const qrCanvasId = 'mmpayQrCanvas';
|
|
214
291
|
const orderId = payload.orderId;
|
|
215
292
|
window.MMPayDownloadQR = function () {
|
|
@@ -276,7 +353,7 @@
|
|
|
276
353
|
<span class="mmpay-text-myanmar">မှာယူမှုနံပါတ်:</span> <strong>${apiResponse.orderId}</strong>
|
|
277
354
|
</div>
|
|
278
355
|
<div class="mmpay-detail">
|
|
279
|
-
<span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.
|
|
356
|
+
<span class="mmpay-text-myanmar">ငွေပေးငွေယူနံပါတ်:</span> <strong>${apiResponse.transactionRefId}</strong>
|
|
280
357
|
</div>
|
|
281
358
|
|
|
282
359
|
<p class="mmpay-warning mmpay-text-myanmar">
|
|
@@ -385,7 +462,7 @@
|
|
|
385
462
|
}
|
|
386
463
|
/**
|
|
387
464
|
* Cleans up the modal and stops polling.
|
|
388
|
-
* @param restoreBodyScroll
|
|
465
|
+
* @param {boolean} restoreBodyScroll
|
|
389
466
|
*/
|
|
390
467
|
_cleanupModal(restoreBodyScroll) {
|
|
391
468
|
if (this.pollIntervalId !== undefined) {
|
|
@@ -431,10 +508,15 @@
|
|
|
431
508
|
}
|
|
432
509
|
/**
|
|
433
510
|
* _startPolling
|
|
434
|
-
* @param {
|
|
511
|
+
* @param {IPollingRequest} payload
|
|
512
|
+
* @param {number} payload.amount
|
|
513
|
+
* @param {string} payload.currency
|
|
514
|
+
* @param {string} payload.orderId
|
|
515
|
+
* @param {string} payload.nonce
|
|
516
|
+
* @param {string} payload.callbackUrl
|
|
435
517
|
* @param {Function} onComplete
|
|
436
518
|
*/
|
|
437
|
-
async _startPolling(
|
|
519
|
+
async _startPolling(payload, onComplete) {
|
|
438
520
|
if (this.pollIntervalId !== undefined) {
|
|
439
521
|
window.clearInterval(this.pollIntervalId);
|
|
440
522
|
}
|
|
@@ -443,7 +525,7 @@
|
|
|
443
525
|
const endpoint = this.environment === 'sandbox'
|
|
444
526
|
? '/xpayments/sandbox-payment-polling'
|
|
445
527
|
: '/xpayments/production-payment-polling';
|
|
446
|
-
const response = await this._callApi(endpoint,
|
|
528
|
+
const response = await this._callApi(endpoint, payload);
|
|
447
529
|
const status = (response.status || '').toUpperCase();
|
|
448
530
|
if (status === 'SUCCESS' || status === 'FAILED' || status === 'EXPIRED') {
|
|
449
531
|
window.clearInterval(this.pollIntervalId);
|
|
@@ -454,6 +536,7 @@
|
|
|
454
536
|
`ငွေပေးချေမှု ${status === 'FAILED' ? 'မအောင်မြင်ပါ' : 'သက်တမ်းကုန်သွားပါပြီ'}.`;
|
|
455
537
|
this._showTerminalMessage(response.orderId || 'N/A', status, message);
|
|
456
538
|
if (onComplete) {
|
|
539
|
+
this.tokenKey = null;
|
|
457
540
|
onComplete({ success: success, transaction: response });
|
|
458
541
|
}
|
|
459
542
|
return;
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|