mmpay-browser-sdk 1.0.3
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/.vscode/settings.json +33 -0
- package/README.md +151 -0
- package/dist/cjs/index.d.ts +129 -0
- package/dist/cjs/index.js +469 -0
- package/dist/esm/index.d.ts +129 -0
- package/dist/esm/index.js +465 -0
- package/dist/mmpay-sdk.js +476 -0
- package/dist/mmpay-sdk.js.map +1 -0
- package/package.json +51 -0
- package/rollup.config.js +41 -0
- package/src/index.ts +529 -0
- package/test/home.html +243 -0
- package/tsconfig.cjs.json +7 -0
- package/tsconfig.json +15 -0
package/test/home.html
ADDED
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
<html lang="en">
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<title>Fastify E-Shop Checkout</title>
|
|
6
|
+
<style>
|
|
7
|
+
body {
|
|
8
|
+
font-family: 'Inter', sans-serif;
|
|
9
|
+
background-color: #f4f6f9;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 30px;
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
}
|
|
15
|
+
.container {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
gap: 30px;
|
|
19
|
+
max-width: 1000px;
|
|
20
|
+
width: 100%;
|
|
21
|
+
}
|
|
22
|
+
@media (min-width: 768px) {
|
|
23
|
+
.container {
|
|
24
|
+
flex-direction: row;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
.order-summary, .payment-area {
|
|
28
|
+
background-color: #ffffff;
|
|
29
|
+
padding: 25px;
|
|
30
|
+
border-radius: 10px;
|
|
31
|
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
32
|
+
flex: 1;
|
|
33
|
+
min-height: 450px;
|
|
34
|
+
}
|
|
35
|
+
h2 {
|
|
36
|
+
color: #2c3e50;
|
|
37
|
+
border-bottom: 2px solid #ecf0f1;
|
|
38
|
+
padding-bottom: 10px;
|
|
39
|
+
margin-bottom: 20px;
|
|
40
|
+
font-size: 1.5rem;
|
|
41
|
+
font-weight: 700;
|
|
42
|
+
}
|
|
43
|
+
.item-list div {
|
|
44
|
+
display: flex;
|
|
45
|
+
justify-content: space-between;
|
|
46
|
+
padding: 8px 0;
|
|
47
|
+
border-bottom: 1px dashed #ecf0f1;
|
|
48
|
+
color: #7f8c8d;
|
|
49
|
+
}
|
|
50
|
+
.item-list div:last-child {
|
|
51
|
+
border-bottom: none;
|
|
52
|
+
}
|
|
53
|
+
.total {
|
|
54
|
+
margin-top: 20px;
|
|
55
|
+
padding-top: 15px;
|
|
56
|
+
border-top: 2px solid #3498db;
|
|
57
|
+
font-size: 1.4rem;
|
|
58
|
+
font-weight: bold;
|
|
59
|
+
color: #2c3e50;
|
|
60
|
+
display: flex;
|
|
61
|
+
justify-content: space-between;
|
|
62
|
+
}
|
|
63
|
+
.checkout-button {
|
|
64
|
+
width: 100%;
|
|
65
|
+
background-color: #2ecc71;
|
|
66
|
+
color: white;
|
|
67
|
+
border: none;
|
|
68
|
+
padding: 15px;
|
|
69
|
+
border-radius: 8px;
|
|
70
|
+
font-size: 1.1rem;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
transition: background-color 0.2s, box-shadow 0.2s;
|
|
74
|
+
margin-top: 20px;
|
|
75
|
+
box-shadow: 0 2px 5px rgba(46, 204, 113, 0.4);
|
|
76
|
+
}
|
|
77
|
+
.checkout-button:hover {
|
|
78
|
+
background-color: #27ae60;
|
|
79
|
+
box-shadow: 0 4px 8px rgba(39, 174, 96, 0.6);
|
|
80
|
+
}
|
|
81
|
+
.payment-status {
|
|
82
|
+
margin-top: 20px;
|
|
83
|
+
padding: 15px;
|
|
84
|
+
border-radius: 6px;
|
|
85
|
+
background-color: #ecf0f1;
|
|
86
|
+
white-space: pre-wrap;
|
|
87
|
+
text-align: left;
|
|
88
|
+
font-size: 0.9rem;
|
|
89
|
+
max-height: 200px;
|
|
90
|
+
overflow-y: auto;
|
|
91
|
+
}
|
|
92
|
+
.success { color: #28a745; font-weight: bold; }
|
|
93
|
+
.failure { color: #dc3545; font-weight: bold; }
|
|
94
|
+
</style>
|
|
95
|
+
</head>
|
|
96
|
+
<body>
|
|
97
|
+
|
|
98
|
+
<div class="container">
|
|
99
|
+
<!-- 1. Order Summary (Left Side) -->
|
|
100
|
+
<div class="order-summary">
|
|
101
|
+
<h2>🛍️ Your Order Summary</h2>
|
|
102
|
+
<div class="item-list" id="order-items">
|
|
103
|
+
<!-- Items list populated by JS -->
|
|
104
|
+
</div>
|
|
105
|
+
<div class="total" id="order-total">
|
|
106
|
+
<span>Total Due:</span>
|
|
107
|
+
<span id="final-amount">--</span>
|
|
108
|
+
</div>
|
|
109
|
+
<button class="checkout-button" id="pay-button">
|
|
110
|
+
Pay Securely with MMPay
|
|
111
|
+
</button>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<!-- 2. Payment Area (Right Side - Will show QR modal) -->
|
|
115
|
+
<div class="payment-area">
|
|
116
|
+
<h2>💳 Payment Details</h2>
|
|
117
|
+
<div id="payment-container">
|
|
118
|
+
<p style="color: #6c757d; padding: 20px;">Click the "Pay Securely" button to initialize the transaction and display the MMPay QR code.</p>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="payment-status" id="result-container">
|
|
121
|
+
Awaiting transaction polling result...
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<!-- The external SDK file is loaded here -->
|
|
127
|
+
<!-- <script src="../dist/mmpay-sdk.js"></script> -->
|
|
128
|
+
<script src="https://cdn.jsdelivr.net/npm/mmpay-browser-sdk@latest/mmpay-browser-sdk/master/dist/mmpay-sdk.js"></script>
|
|
129
|
+
|
|
130
|
+
<!-- Client-Side Application Logic -->
|
|
131
|
+
<script>
|
|
132
|
+
// --- Configuration ---
|
|
133
|
+
const PUBLISHABLE_KEY = 'pk_test_504013d7294ea1f6ecf4a2a0d38c31e0788286ef1b8ccacecf2a9b2809e23341'; // <<< REMEMBER TO REPLACE THIS KEY!
|
|
134
|
+
const CONTAINER_ID = 'payment-container';
|
|
135
|
+
const RESULT_CONTAINER_ID = 'result-container';
|
|
136
|
+
const PAY_BUTTON_ID = 'pay-button';
|
|
137
|
+
const FINAL_AMOUNT_ID = 'final-amount';
|
|
138
|
+
const ORDER_ITEMS_ID = 'order-items';
|
|
139
|
+
|
|
140
|
+
const mockOrder = {
|
|
141
|
+
currency: 'MMK',
|
|
142
|
+
items: [
|
|
143
|
+
{ name: "Fastify T-Shirt", price: 25000, qty: 1 },
|
|
144
|
+
{ name: "Node.js Dev Sticker Pack", price: 10000, qty: 3 },
|
|
145
|
+
{ name: "TypeScript Handbook (Digital)", price: 18000, qty: 1 }
|
|
146
|
+
],
|
|
147
|
+
shipping: 2500,
|
|
148
|
+
taxRate: 0.08
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
let finalAmount = 0;
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Renders the order summary and calculates the total.
|
|
155
|
+
*/
|
|
156
|
+
function renderOrderSummary() {
|
|
157
|
+
const itemList = document.getElementById(ORDER_ITEMS_ID);
|
|
158
|
+
const finalAmountDisplay = document.getElementById(FINAL_AMOUNT_ID);
|
|
159
|
+
|
|
160
|
+
let subtotal = 0;
|
|
161
|
+
itemList.innerHTML = '';
|
|
162
|
+
|
|
163
|
+
mockOrder.items.forEach(item => {
|
|
164
|
+
const itemTotal = item.price * item.qty;
|
|
165
|
+
subtotal += itemTotal;
|
|
166
|
+
itemList.innerHTML += `
|
|
167
|
+
<div>
|
|
168
|
+
<span>${item.qty} x ${item.name}</span>
|
|
169
|
+
<span>$${itemTotal.toFixed(2)}</span>
|
|
170
|
+
</div>
|
|
171
|
+
`;
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
const tax = subtotal * mockOrder.taxRate;
|
|
175
|
+
finalAmount = subtotal + mockOrder.shipping + tax;
|
|
176
|
+
|
|
177
|
+
// Add breakdown to list
|
|
178
|
+
itemList.innerHTML += `
|
|
179
|
+
<div style="margin-top: 10px; color: #34495e;"><span>Subtotal:</span><span>$${subtotal.toFixed(2)}</span></div>
|
|
180
|
+
<div><span>Shipping:</span><span>$${mockOrder.shipping.toFixed(2)}</span></div>
|
|
181
|
+
<div><span>Tax (${(mockOrder.taxRate * 100).toFixed(0)}%):</span><span>$${tax.toFixed(2)}</span></div>
|
|
182
|
+
`;
|
|
183
|
+
|
|
184
|
+
finalAmountDisplay.textContent = `$${finalAmount.toFixed(2)} ${mockOrder.currency}`;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/**
|
|
188
|
+
* The main function to initiate the payment using the SDK.
|
|
189
|
+
*/
|
|
190
|
+
document.getElementById(PAY_BUTTON_ID).addEventListener('click', async (event) => {
|
|
191
|
+
event.target.disabled = true;
|
|
192
|
+
|
|
193
|
+
if (typeof MMPaySDK === 'undefined') {
|
|
194
|
+
document.getElementById(RESULT_CONTAINER_ID).innerHTML = '<span class="failure">❌ SDK Error: MMPaySDK not loaded. Check script src or compilation.</span>';
|
|
195
|
+
event.target.disabled = false;
|
|
196
|
+
return;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
if (PUBLISHABLE_KEY === 'YOUR_MMPAY_PUBLISHABLE_KEY') {
|
|
200
|
+
document.getElementById(RESULT_CONTAINER_ID).innerHTML = '<span class="failure">❌ SDK Initialization Failed: Please replace the placeholder key.</span>';
|
|
201
|
+
event.target.disabled = false;
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
document.getElementById(RESULT_CONTAINER_ID).innerHTML = 'Payment initiated. Waiting for API response and starting polling...';
|
|
206
|
+
|
|
207
|
+
try {
|
|
208
|
+
|
|
209
|
+
const sdk = new MMPaySDK(PUBLISHABLE_KEY, {
|
|
210
|
+
baseUrl: 'https://supapay.ecgedms.com',
|
|
211
|
+
environment: 'sandbox',
|
|
212
|
+
merchantName: 'Fastify E-Shop',
|
|
213
|
+
pollInterval: 5000
|
|
214
|
+
});
|
|
215
|
+
await sdk.showPaymentModal({
|
|
216
|
+
amount: parseFloat(finalAmount.toFixed(2)),
|
|
217
|
+
currency: mockOrder.currency,
|
|
218
|
+
orderId: 'FSTY' + Date.now(),
|
|
219
|
+
callbackUrl: 'https://your-fastify-backend.com/api/mmpay/webhook'
|
|
220
|
+
},(result) => {
|
|
221
|
+
const resultContainer = document.getElementById(RESULT_CONTAINER_ID);
|
|
222
|
+
document.getElementById(PAY_BUTTON_ID).disabled = false;
|
|
223
|
+
if (result.success) {
|
|
224
|
+
resultContainer.innerHTML = '<span class="success">✅ PAYMENT SUCCESSFUL!</span><br><br>' + JSON.stringify(result.transaction, null, 2);
|
|
225
|
+
document.getElementById(CONTAINER_ID).innerHTML = '<div style="color: #2ecc71; font-size: 1.5rem; font-weight: bold; padding: 50px 0;">Transaction Complete! Thank you for your order!</div>';
|
|
226
|
+
} else {
|
|
227
|
+
resultContainer.innerHTML = '<span class="failure">❌ PAYMENT FAILED / EXPIRED.</span><br><br>' + JSON.stringify(result.transaction, null, 2);
|
|
228
|
+
document.getElementById(CONTAINER_ID).innerHTML = '<div style="color: #e74c3c; font-size: 1.5rem; font-weight: bold; padding: 50px 0;">Transaction Failed. Please try again.</div>';
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
|
|
232
|
+
} catch (error) {
|
|
233
|
+
console.error("Critical SDK Error:", error);
|
|
234
|
+
document.getElementById(RESULT_CONTAINER_ID).innerHTML = `<span class="failure">❌ CRITICAL ERROR:</span><br>Could not initiate payment. Details: ${error.message}`;
|
|
235
|
+
document.getElementById(PAY_BUTTON_ID).disabled = false;
|
|
236
|
+
}
|
|
237
|
+
});
|
|
238
|
+
|
|
239
|
+
// Run the setup when the document is ready
|
|
240
|
+
window.onload = renderOrderSummary;
|
|
241
|
+
</script>
|
|
242
|
+
</body>
|
|
243
|
+
</html>
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"module": "ES2020",
|
|
5
|
+
"declaration": true,
|
|
6
|
+
"outDir": "dist/esm",
|
|
7
|
+
"strict": false,
|
|
8
|
+
"moduleResolution": "Node",
|
|
9
|
+
"esModuleInterop": true,
|
|
10
|
+
"skipLibCheck": true
|
|
11
|
+
},
|
|
12
|
+
"include": [
|
|
13
|
+
"src"
|
|
14
|
+
]
|
|
15
|
+
}
|