node-paytmpg 5.4.2 → 6.4.2

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.
@@ -1,269 +1,439 @@
1
- .visuallyhidden {
2
- border: 0;
3
- clip: rect(0 0 0 0);
4
- height: 1px;
5
- margin: -1px;
6
- overflow: hidden;
7
- padding: 0;
8
- position: absolute;
9
- width: 1px;
1
+ * {
2
+ box-sizing: border-box;
10
3
  }
11
4
 
12
5
  body {
13
- font-family: 'Open Sans', sans-serif;
14
- background-color: #f0f0f0;
6
+ min-height: 100vh;
7
+ margin: 0;
8
+ font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
9
+ color: var(--color-text);
10
+ background: var(--bg-color);
15
11
  }
16
12
 
17
- h1, h2, h3, h4, h5 {
18
- margin: 0;
19
- font-weight: 600;
13
+ body.theme-dark {
14
+ --color-primary: #2f8bff;
15
+ --color-accent: #5ce1e6;
16
+ --color-surface: #0f1021;
17
+ --color-text: #e9ecf2;
18
+ --color-success: #24cf5f;
19
+ --color-danger: #ff6b6b;
20
+ --color-outline: rgba(255,255,255,0.08);
21
+ --bg-color: #0c0c12;
20
22
  }
21
23
 
22
- .button {
23
- align-self: center;
24
- color: #ffffff;
25
- width: 100%;
26
- max-height: 100px;
27
- height: 7vh;
28
- max-width: 80vh;
29
- background-color: #24cf5f;
30
- padding: 12px 25px;
31
- font-size: 12px;
32
- letter-spacing: 1px;
33
- text-transform: uppercase;
34
- border: 0;
35
- border-radius: 7px;
36
- outline: 0;
37
- box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.2);
38
- -webkit-transition: all .2s;
39
- transition: all .2s;
24
+ body.theme-light {
25
+ --color-primary: #2467ff;
26
+ --color-accent: #16c1ff;
27
+ --color-surface: #ffffff;
28
+ --color-text: #1f2430;
29
+ --color-success: #1dbf73;
30
+ --color-danger: #e85050;
31
+ --color-outline: rgba(0,0,0,0.08);
32
+ --bg-color: #f7f9fc;
40
33
  }
41
34
 
42
- .button:hover, .button:active, .button:focus {
43
- -webkit-transform: scale(1.1);
44
- transform: scale(1.1);
35
+ .shell {
36
+ max-width: 780px;
37
+ margin: 32px auto;
38
+ padding: 32px;
39
+ background: var(--color-surface);
40
+ border: 1px solid var(--color-outline);
41
+ border-radius: 18px;
42
+ box-shadow: 0 24px 60px rgba(0,0,0,0.12);
45
43
  }
46
44
 
47
- .button--transparent {
48
- background: transparent;
49
- border: 0;
50
- outline: 0;
45
+ /* Two-column checkout layout */
46
+ .checkout-grid {
47
+ display: grid;
48
+ grid-template-columns: 320px 1fr;
49
+ gap: 20px;
50
+ align-items: start;
51
+ }
52
+
53
+ .product-panel {
54
+ padding: 22px;
55
+ border-radius: 16px;
56
+ background: var(--color-surface);
57
+ color: var(--color-text);
58
+ }
59
+
60
+ .product-panel .product-title {
61
+ font-weight: 700;
62
+ font-size: 16px;
63
+ margin-bottom: 8px;
51
64
  }
52
65
 
53
- .button--close {
54
- position: absolute;
55
- top: 10px;
56
- left: 10px;
57
- display: -ms-flexbox;
58
- display: -webkit-box;
66
+ .product-panel .product-sub {
67
+ font-size: 13px;
68
+ opacity: 0.8;
69
+ margin-bottom: 18px;
70
+ }
71
+
72
+ .product-preview {
73
+ border-radius: 12px;
74
+ overflow: hidden;
75
+ height: 140px;
76
+ background: var(--color-surface);
77
+ border: 1px solid var(--color-outline);
78
+ margin-bottom: 14px;
79
+ }
80
+
81
+ .product-price {
59
82
  display: flex;
60
- -ms-flex-align: center;
61
- -webkit-box-align: center;
62
83
  align-items: center;
63
- -ms-flex-pack: center;
64
- -webkit-box-pack: center;
84
+ justify-content: space-between;
85
+ gap: 10px;
86
+ }
87
+
88
+ .product-price .price {
89
+ font-weight: 800;
90
+ font-size: 20px;
91
+ }
92
+
93
+ .form-panel {
94
+ padding: 24px;
95
+ border-radius: 16px;
96
+ background: var(--color-surface);
97
+ }
98
+
99
+ .shell__header,
100
+ .shell__footer {
101
+ display: flex;
102
+ align-items: center;
103
+ gap: 12px;
104
+ }
105
+
106
+ .shell__header {
107
+ justify-content: space-between;
108
+ }
109
+
110
+ .shell__footer {
65
111
  justify-content: center;
66
- width: 30px;
67
- height: 30px;
68
- color: #ffffff;
69
- border-radius: 50%;
70
- -webkit-transition: all .25s;
71
- transition: all .25s;
72
- z-index: 10;
112
+ margin-top: 20px;
113
+ font-size: 13px;
114
+ color: rgba(0,0,0,0.55);
73
115
  }
74
116
 
75
- .button--close svg {
76
- width: 20px;
77
- height: 20px;
117
+ body.theme-dark .shell__footer {
118
+ color: rgba(255,255,255,0.7);
78
119
  }
79
120
 
80
- .button--close svg * {
81
- fill: currentColor;
121
+ .shell__content {
122
+ margin-top: 20px;
82
123
  }
83
124
 
84
- .button--close:hover, .button--close:active, .button--close:focus {
85
- color: #fbcf34;
86
- background-color: #ffffff;
87
- box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
125
+ .brand {
126
+ display: flex;
127
+ align-items: center;
128
+ gap: 12px;
88
129
  }
89
130
 
90
- .button--info {
91
- position: absolute;
92
- top: 0;
93
- right: 0;
131
+ .brand__mark {
132
+ display: inline-flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ width: 42px;
136
+ height: 42px;
137
+ border-radius: 12px;
138
+ background: var(--color-primary);
139
+ color: #fff;
140
+ font-weight: 700;
141
+ letter-spacing: 0.3px;
94
142
  }
95
143
 
96
- input {
97
- width: calc(100% - 10px);
98
- max-width: 80vh;
99
- min-height: 30px;
100
- padding-left: 5px;
101
- padding-right: 5px;
102
- letter-spacing: .5px;
103
- border: 0;
104
- border-bottom: 2px solid #f0f0f0;
144
+ .brand__mark--img img {
145
+ width: 100%;
146
+ height: 100%;
147
+ object-fit: contain;
105
148
  }
106
149
 
107
- input:valid {
108
- border-color: #24cf5f;
150
+ .brand__title {
151
+ font-weight: 700;
152
+ font-size: 16px;
109
153
  }
110
154
 
111
- input:focus {
112
- outline: none;
113
- border-color: #fbcf34;
155
+ .brand__meta {
156
+ font-size: 12px;
157
+ color: rgba(255,255,255,0.7);
158
+ }
159
+
160
+ .pill {
161
+ padding: 6px 12px;
162
+ border-radius: 999px;
163
+ border: 1px solid var(--color-outline);
164
+ color: rgba(255,255,255,0.8);
165
+ font-size: 12px;
166
+ letter-spacing: 0.2px;
167
+ }
168
+
169
+ body.theme-light .pill {
170
+ color: rgba(0,0,0,0.7);
114
171
  }
115
172
 
116
- .form-list {
117
- padding-left: 0;
118
- list-style: none;
173
+ .card {
174
+ background: rgba(255,255,255,0.03);
175
+ border: 1px solid var(--color-outline);
176
+ border-radius: 16px;
177
+ padding: 20px;
178
+ backdrop-filter: blur(6px);
179
+ box-shadow: 0 24px 40px rgba(0,0,0,0.1);
119
180
  }
120
181
 
121
- .form-list__row {
122
- margin-bottom: 25px;
182
+ body.theme-light .card {
183
+ background: #ffffff;
184
+ box-shadow: 0 10px 30px rgba(23, 38, 61, 0.08);
123
185
  }
124
186
 
125
- .form-list__row label {
126
- position: relative;
127
- display: block;
187
+ .card__header {
188
+ display: flex;
189
+ align-items: center;
190
+ justify-content: space-between;
191
+ gap: 16px;
192
+ margin-bottom: 10px;
193
+ }
194
+
195
+ .eyebrow {
196
+ margin: 0 0 4px;
197
+ font-size: 12px;
198
+ letter-spacing: 0.6px;
128
199
  text-transform: uppercase;
200
+ color: rgba(255,255,255,0.65);
201
+ }
202
+
203
+ h2 {
204
+ margin: 0;
205
+ font-size: 24px;
206
+ letter-spacing: -0.2px;
207
+ }
208
+
209
+ .helper {
210
+ margin: 4px 0 16px;
211
+ color: rgba(0,0,0,0.65);
212
+ font-size: 14px;
213
+ }
214
+
215
+ body.theme-dark .helper {
216
+ color: rgba(255,255,255,0.7);
217
+ }
218
+
219
+ .amount-chip {
220
+ padding: 10px 14px;
221
+ border-radius: 12px;
222
+ background: var(--color-primary);
223
+ color: #ffffff;
224
+ font-weight: 700;
225
+ min-width: 120px;
226
+ text-align: right;
227
+ }
228
+
229
+ body.theme-light .amount-chip {
230
+ color: #0f172a;
231
+ }
232
+
233
+ .amount-chip span {
234
+ opacity: 0.8;
129
235
  font-weight: 600;
130
- font-size: 11px;
131
- letter-spacing: .5px;
132
- color: #939393;
236
+ margin-left: 6px;
237
+ }
238
+
239
+ .form-grid {
240
+ display: grid;
241
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
242
+ gap: 14px;
243
+ }
244
+
245
+ .form-grid--compact {
246
+ grid-template-columns: 1fr auto;
247
+ align-items: center;
133
248
  }
134
249
 
135
- .form-list__row--inline {
136
- display: -ms-flexbox;
137
- display: -webkit-box;
250
+ .field {
138
251
  display: flex;
139
- -ms-flex-pack: justify;
140
- -webkit-box-pack: justify;
141
- justify-content: space-between;
252
+ flex-direction: column;
253
+ gap: 6px;
142
254
  }
143
255
 
144
- .form-list__row--inline> :first-child {
145
- -ms-flex: 2;
146
- -webkit-box-flex: 2;
147
- flex: 2;
148
- padding-right: 20px;
256
+ .field__label {
257
+ font-size: 13px;
258
+ color: rgba(255,255,255,0.7);
149
259
  }
150
260
 
151
- .form-list__row--inline> :nth-child(2n) {
152
- -ms-flex: 1;
153
- -webkit-box-flex: 1;
154
- flex: 1;
261
+ input[type="text"],
262
+ input[type="email"],
263
+ input[type="number"],
264
+ input[type="tel"],
265
+ input[type="password"],
266
+ textarea {
267
+ width: 100%;
268
+ padding: 12px 14px;
269
+ border-radius: 12px;
270
+ border: 1px solid var(--color-outline);
271
+ background: rgba(255,255,255,0.05);
272
+ color: #fff;
273
+ font-size: 15px;
274
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
275
+ }
276
+
277
+ body.theme-light input[type="text"],
278
+ body.theme-light input[type="email"],
279
+ body.theme-light input[type="number"],
280
+ body.theme-light input[type="tel"],
281
+ body.theme-light input[type="password"],
282
+ body.theme-light textarea {
283
+ background: #f8f9fb;
284
+ color: #1f2430;
285
+ }
286
+
287
+ input:focus,
288
+ textarea:focus {
289
+ outline: none;
290
+ border-color: var(--color-primary);
291
+ box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
155
292
  }
156
293
 
157
- .form-list__input-inline {
158
- display: -ms-flexbox;
159
- display: -webkit-box;
294
+ .checkbox {
160
295
  display: flex;
161
- -ms-flex-pack: justify;
162
- -webkit-box-pack: justify;
163
- justify-content: space-between;
296
+ align-items: center;
297
+ gap: 10px;
298
+ font-size: 14px;
299
+ color: rgba(0,0,0,0.8);
300
+ }
301
+
302
+ body.theme-dark .checkbox {
303
+ color: rgba(255,255,255,0.8);
304
+ }
305
+
306
+ .checkbox input {
307
+ width: auto;
308
+ height: 18px;
309
+ accent-color: var(--color-primary);
310
+ }
311
+
312
+ .button {
313
+ grid-column: 1 / -1;
314
+ padding: 14px;
315
+ border: 0;
316
+ border-radius: 12px;
317
+ background: var(--color-primary);
318
+ color: #ffffff;
319
+ font-weight: 700;
320
+ font-size: 15px;
321
+ cursor: pointer;
322
+ transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
323
+ box-shadow: 0 18px 28px rgba(0,0,0,0.12);
324
+ }
325
+
326
+ .button:hover {
327
+ transform: translateY(-1px);
328
+ box-shadow: 0 20px 34px rgba(0,0,0,0.28);
164
329
  }
165
330
 
166
- .form-list__input-inline>* {
167
- width: calc(50% - 10px - 10px);
331
+ .button:active {
332
+ transform: translateY(0);
333
+ box-shadow: 0 12px 20px rgba(0,0,0,0.2);
168
334
  }
169
335
 
170
- .form-list__row--agree {
171
- margin-top: 30px;
172
- margin-bottom: 30px;
336
+ .button[disabled] {
337
+ opacity: 0.6;
338
+ cursor: not-allowed;
339
+ }
340
+
341
+ .result-grid {
342
+ display: grid;
343
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
344
+ gap: 12px;
345
+ margin: 14px 0 18px;
346
+ }
347
+
348
+ .result-item {
349
+ padding: 12px;
350
+ border: 1px solid var(--color-outline);
351
+ border-radius: 12px;
352
+ background: rgba(255,255,255,0.02);
353
+ }
354
+
355
+ body.theme-light .result-item {
356
+ background: #f8f9fb;
357
+ }
358
+
359
+ .result-item .label {
360
+ margin: 0;
173
361
  font-size: 12px;
362
+ color: rgba(0,0,0,0.6);
363
+ text-transform: uppercase;
364
+ letter-spacing: 0.4px;
174
365
  }
175
366
 
176
- .form-list__row--agree label {
177
- font-weight: 400;
178
- text-transform: none;
179
- color: #676767;
367
+ body.theme-dark .result-item .label {
368
+ color: rgba(255,255,255,0.6);
180
369
  }
181
370
 
182
- .form-list__row--agree input {
183
- width: auto;
184
- margin-right: 5px;
371
+ .result-item .value {
372
+ margin: 6px 0 0;
373
+ font-weight: 600;
374
+ color: #0f172a;
375
+ word-break: break-all;
185
376
  }
186
377
 
187
- #input--cc {
188
- position: relative;
189
- padding-top: 6px;
378
+ body.theme-dark .result-item .value {
379
+ color: #fff;
190
380
  }
191
381
 
192
- #input--cc input {
193
- padding-left: 46px;
194
- width: calc(100% - 46px);
382
+ .status-chip {
383
+ padding: 10px 12px;
384
+ border-radius: 12px;
385
+ font-weight: 700;
386
+ text-transform: uppercase;
387
+ letter-spacing: 0.4px;
195
388
  }
196
389
 
197
- .modal {
198
- display: -ms-flexbox;
199
- display: -webkit-box;
200
- display: flex;
201
- -ms-flex-pack: center;
202
- -webkit-box-pack: center;
203
- justify-content: center;
204
- -ms-flex-align: center;
205
- -webkit-box-align: center;
206
- align-items: center;
207
- height: 100vh;
208
- width: 100vw;
209
- z-index: 100;
210
- overflow-y: auto;
211
- background-color: #ffffff;
390
+ .status-chip.TXN_SUCCESS,
391
+ .status-chip.success {
392
+ background: rgba(36, 207, 95, 0.15);
393
+ color: #4cff9f;
394
+ border: 1px solid rgba(76, 255, 159, 0.4);
212
395
  }
213
396
 
214
- .modal__container {
215
- padding-top: 10vh;
397
+ .status-chip.TXN_FAILURE,
398
+ .status-chip.failed,
399
+ .status-chip.FAILURE {
400
+ background: rgba(255, 107, 107, 0.14);
401
+ color: #ff9b9b;
402
+ border: 1px solid rgba(255, 155, 155, 0.35);
403
+ }
216
404
 
217
- display: -ms-flexbox;
218
- display: -webkit-box;
219
- display: flex;
220
- max-width: 675px;
221
- min-height: 400px;
222
- margin-bottom: 125px;
223
- border-radius: 5px;
224
- box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
225
- }
226
-
227
- .modal__featured {
228
- position: relative;
229
- -ms-flex: 1;
230
- -webkit-box-flex: 1;
231
- flex: 1;
232
- min-width: 130px;
233
- padding: 20px;
234
- overflow: hidden;
235
- border-top-left-radius: 5px;
236
- border-bottom-left-radius: 5px;
237
- }
238
-
239
- .modal__circle {
240
- position: absolute;
241
- top: 0;
242
- left: 0;
243
- height: 200%;
244
- width: 200%;
245
- background-color: #fbcf34;
246
- border-radius: 50%;
247
- -webkit-transform: translateX(-50%) translateY(-25%);
248
- transform: translateX(-50%) translateY(-25%);
249
- }
250
-
251
- .modal__product {
252
- margin-top: 120px;
253
- position: absolute;
254
- top: 0;
255
- left: 50%;
256
- max-width: 85%;
257
- -webkit-transform: translateX(calc(-50% - 10px));
258
- transform: translateX(calc(-50% - 10px));
259
- }
260
-
261
- .modal__content {
262
- align-content: center;
263
- justify-content: center;
264
- min-width: 80vw;
265
- -ms-flex: 3;
266
- -webkit-box-flex: 3;
267
- flex: 3;
268
- padding: 40px 40px;
269
- }
405
+ .status-chip.TXN_PENDING,
406
+ .status-chip.pending {
407
+ background: rgba(255, 193, 79, 0.14);
408
+ color: #ffd77a;
409
+ border: 1px solid rgba(255, 215, 122, 0.35);
410
+ }
411
+
412
+ /* result icon toggles */
413
+ .status-TXN_SUCCESS .icon-success { display: block; }
414
+ .status-TXN_SUCCESS .icon-fail { display: none; }
415
+ .status-TXN_FAILURE .icon-success { display: none; }
416
+ .status-TXN_FAILURE .icon-fail { display: block; }
417
+
418
+ /* control which button group shows for success/failure */
419
+ .status-TXN_SUCCESS .fail-buttons { display: none !important; }
420
+ .status-TXN_FAILURE .success-buttons { display: none !important; }
421
+
422
+ .dot {
423
+ opacity: 0.6;
424
+ }
425
+
426
+ @media (max-width: 768px) {
427
+ .shell {
428
+ margin: 16px;
429
+ padding: 20px;
430
+ }
431
+
432
+ .checkout-grid {
433
+ grid-template-columns: 1fr;
434
+ }
435
+
436
+ .form-grid {
437
+ grid-template-columns: 1fr;
438
+ }
439
+ }