Hugging Face's logo

Spaces:
offerpk3
/
stripe-testing-tool
Running

App Files Community
offerpk3 commited on
Commit
cf0c0d0
·
verified ·
1 Parent(s): c5c0237

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1170 -18
index.html CHANGED
@@ -1,19 +1,1171 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Payment Testing Tool</title>
7
+ <!-- Tailwind CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9
+ <!-- Font Awesome -->
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11
+ <!-- Google Fonts -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ :root {
15
+ --primary-color: #635bff;
16
+ --primary-light: #7a73ff;
17
+ --primary-dark: #4b44d1;
18
+ --secondary-color: #0a2540;
19
+ --success-color: #3ecf8e;
20
+ --warning-color: #f7b500;
21
+ --danger-color: #e25950;
22
+ --neutral-light: #f6f9fc;
23
+ --neutral-medium: #e3e8ee;
24
+ --neutral-dark: #697386;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Inter', sans-serif;
29
+ background-color: var(--neutral-light);
30
+ color: var(--secondary-color);
31
+ }
32
+
33
+ .navbar {
34
+ background-color: white;
35
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
36
+ }
37
+
38
+ .card {
39
+ background-color: white;
40
+ border-radius: 8px;
41
+ box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
42
+ transition: all 0.3s;
43
+ }
44
+
45
+ .card:hover {
46
+ transform: translateY(-2px);
47
+ box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
48
+ }
49
+
50
+ .btn-primary {
51
+ background-color: var(--primary-color);
52
+ color: white;
53
+ border-radius: 6px;
54
+ padding: 10px 20px;
55
+ font-weight: 500;
56
+ transition: all 0.2s;
57
+ }
58
+
59
+ .btn-primary:hover {
60
+ background-color: var(--primary-light);
61
+ }
62
+
63
+ .btn-secondary {
64
+ background-color: white;
65
+ color: var(--secondary-color);
66
+ border: 1px solid var(--neutral-medium);
67
+ border-radius: 6px;
68
+ padding: 10px 20px;
69
+ font-weight: 500;
70
+ transition: all 0.2s;
71
+ }
72
+
73
+ .btn-secondary:hover {
74
+ background-color: var(--neutral-light);
75
+ }
76
+
77
+ .tab-active {
78
+ border-bottom: 2px solid var(--primary-color);
79
+ color: var(--primary-color);
80
+ font-weight: 500;
81
+ }
82
+
83
+ .tab {
84
+ padding: 10px 16px;
85
+ cursor: pointer;
86
+ transition: all 0.2s;
87
+ }
88
+
89
+ .tab:hover:not(.tab-active) {
90
+ color: var(--primary-light);
91
+ }
92
+
93
+ .test-card {
94
+ border: 1px solid var(--neutral-medium);
95
+ border-radius: 6px;
96
+ padding: 12px;
97
+ margin-bottom: 8px;
98
+ cursor: pointer;
99
+ transition: all 0.2s;
100
+ }
101
+
102
+ .test-card:hover {
103
+ border-color: var(--primary-color);
104
+ background-color: rgba(99, 91, 255, 0.05);
105
+ }
106
+
107
+ .copy-btn {
108
+ color: var(--neutral-dark);
109
+ transition: all 0.2s;
110
+ }
111
+
112
+ .copy-btn:hover {
113
+ color: var(--primary-color);
114
+ }
115
+
116
+ .badge {
117
+ font-size: 0.75rem;
118
+ padding: 2px 8px;
119
+ border-radius: 12px;
120
+ font-weight: 500;
121
+ }
122
+
123
+ .badge-success {
124
+ background-color: rgba(62, 207, 142, 0.2);
125
+ color: var(--success-color);
126
+ }
127
+
128
+ .badge-warning {
129
+ background-color: rgba(247, 181, 0, 0.2);
130
+ color: var(--warning-color);
131
+ }
132
+
133
+ .badge-danger {
134
+ background-color: rgba(226, 89, 80, 0.2);
135
+ color: var(--danger-color);
136
+ }
137
+
138
+ .badge-primary {
139
+ background-color: rgba(99, 91, 255, 0.2);
140
+ color: var(--primary-color);
141
+ }
142
+
143
+ .search-input {
144
+ border: 1px solid var(--neutral-medium);
145
+ border-radius: 6px;
146
+ padding: 10px 16px;
147
+ width: 100%;
148
+ transition: all 0.2s;
149
+ }
150
+
151
+ .search-input:focus {
152
+ outline: none;
153
+ border-color: var(--primary-color);
154
+ box-shadow: 0 0 0 1px var(--primary-color);
155
+ }
156
+
157
+ .sidebar {
158
+ background-color: white;
159
+ border-right: 1px solid var(--neutral-medium);
160
+ }
161
+
162
+ .sidebar-item {
163
+ padding: 10px 16px;
164
+ cursor: pointer;
165
+ transition: all 0.2s;
166
+ border-radius: 6px;
167
+ margin: 4px 0;
168
+ }
169
+
170
+ .sidebar-item:hover {
171
+ background-color: var(--neutral-light);
172
+ }
173
+
174
+ .sidebar-item.active {
175
+ background-color: rgba(99, 91, 255, 0.1);
176
+ color: var(--primary-color);
177
+ font-weight: 500;
178
+ }
179
+
180
+ .code-block {
181
+ background-color: var(--secondary-color);
182
+ color: white;
183
+ border-radius: 6px;
184
+ padding: 16px;
185
+ font-family: monospace;
186
+ overflow-x: auto;
187
+ }
188
+
189
+ .slider {
190
+ -webkit-appearance: none;
191
+ width: 100%;
192
+ height: 6px;
193
+ border-radius: 5px;
194
+ background: var(--neutral-medium);
195
+ outline: none;
196
+ -webkit-transition: .2s;
197
+ transition: opacity .2s;
198
+ }
199
+
200
+ .slider::-webkit-slider-thumb {
201
+ -webkit-appearance: none;
202
+ appearance: none;
203
+ width: 20px;
204
+ height: 20px;
205
+ border-radius: 50%;
206
+ background: var(--primary-color);
207
+ cursor: pointer;
208
+ transition: all 0.2s;
209
+ }
210
+
211
+ .slider::-webkit-slider-thumb:hover {
212
+ transform: scale(1.1);
213
+ box-shadow: 0 0 0 6px rgba(99, 91, 255, 0.2);
214
+ }
215
+
216
+ .slider::-moz-range-thumb {
217
+ width: 20px;
218
+ height: 20px;
219
+ border-radius: 50%;
220
+ background: var(--primary-color);
221
+ cursor: pointer;
222
+ transition: all 0.2s;
223
+ }
224
+
225
+ .slider::-moz-range-thumb:hover {
226
+ transform: scale(1.1);
227
+ box-shadow: 0 0 0 6px rgba(99, 91, 255, 0.2);
228
+ }
229
+
230
+ /* Custom switch */
231
+ .switch {
232
+ position: relative;
233
+ display: inline-block;
234
+ width: 48px;
235
+ height: 24px;
236
+ }
237
+
238
+ .switch input {
239
+ opacity: 0;
240
+ width: 0;
241
+ height: 0;
242
+ }
243
+
244
+ .slider-switch {
245
+ position: absolute;
246
+ cursor: pointer;
247
+ top: 0;
248
+ left: 0;
249
+ right: 0;
250
+ bottom: 0;
251
+ background-color: var(--neutral-medium);
252
+ transition: .4s;
253
+ border-radius: 24px;
254
+ }
255
+
256
+ .slider-switch:before {
257
+ position: absolute;
258
+ content: "";
259
+ height: 18px;
260
+ width: 18px;
261
+ left: 3px;
262
+ bottom: 3px;
263
+ background-color: white;
264
+ transition: .4s;
265
+ border-radius: 50%;
266
+ }
267
+
268
+ input:checked + .slider-switch {
269
+ background-color: var(--primary-color);
270
+ }
271
+
272
+ input:checked + .slider-switch:before {
273
+ transform: translateX(24px);
274
+ }
275
+
276
+ /* Tooltip */
277
+ .tooltip {
278
+ position: relative;
279
+ display: inline-block;
280
+ }
281
+
282
+ .tooltip .tooltip-text {
283
+ visibility: hidden;
284
+ width: 200px;
285
+ background-color: var(--secondary-color);
286
+ color: white;
287
+ text-align: center;
288
+ border-radius: 6px;
289
+ padding: 8px;
290
+ position: absolute;
291
+ z-index: 1;
292
+ bottom: 125%;
293
+ left: 50%;
294
+ transform: translateX(-50%);
295
+ opacity: 0;
296
+ transition: opacity 0.3s;
297
+ font-size: 0.75rem;
298
+ }
299
+
300
+ .tooltip:hover .tooltip-text {
301
+ visibility: visible;
302
+ opacity: 1;
303
+ }
304
+
305
+ /* Responsive table */
306
+ .responsive-table {
307
+ width: 100%;
308
+ overflow-x: auto;
309
+ }
310
+
311
+ .responsive-table table {
312
+ width: 100%;
313
+ border-collapse: collapse;
314
+ }
315
+
316
+ .responsive-table th {
317
+ background-color: var(--neutral-light);
318
+ padding: 12px;
319
+ text-align: left;
320
+ font-weight: 500;
321
+ color: var(--neutral-dark);
322
+ }
323
+
324
+ .responsive-table td {
325
+ padding: 12px;
326
+ border-bottom: 1px solid var(--neutral-medium);
327
+ }
328
+
329
+ /* Animations */
330
+ @keyframes fadeIn {
331
+ from { opacity: 0; }
332
+ to { opacity: 1; }
333
+ }
334
+
335
+ .fade-in {
336
+ animation: fadeIn 0.3s ease-in-out;
337
+ }
338
+
339
+ @keyframes slideIn {
340
+ from { transform: translateY(10px); opacity: 0; }
341
+ to { transform: translateY(0); opacity: 1; }
342
+ }
343
+
344
+ .slide-in {
345
+ animation: slideIn 0.3s ease-in-out;
346
+ }
347
+ </style>
348
+ </head>
349
+ <body>
350
+ <!-- Navbar -->
351
+ <nav class="navbar p-4 flex items-center justify-between">
352
+ <div class="flex items-center">
353
+ <div class="text-2xl font-bold text-primary-color flex items-center">
354
+ <i class="fas fa-credit-card mr-2 text-primary-color"></i>
355
+ <span>Payment Testing Tool</span>
356
+ </div>
357
+ </div>
358
+ <div class="flex items-center space-x-4">
359
+ <button class="btn-secondary">
360
+ <i class="fas fa-moon mr-2"></i>
361
+ Dark Mode
362
+ </button>
363
+ <button class="btn-primary">
364
+ <i class="fas fa-code mr-2"></i>
365
+ API Reference
366
+ </button>
367
+ </div>
368
+ </nav>
369
+
370
+ <!-- Main Content -->
371
+ <div class="flex">
372
+ <!-- Sidebar -->
373
+ <div class="sidebar w-64 h-screen sticky top-0 p-4 hidden md:block">
374
+ <div class="mb-6">
375
+ <div class="text-sm text-neutral-dark mb-2">TESTING</div>
376
+ <div class="sidebar-item active">
377
+ <i class="fas fa-credit-card mr-2"></i>
378
+ Card Testing
379
+ </div>
380
+ <div class="sidebar-item">
381
+ <i class="fas fa-globe mr-2"></i>
382
+ Payment Methods
383
+ </div>
384
+ <div class="sidebar-item">
385
+ <i class="fas fa-exclamation-triangle mr-2"></i>
386
+ Error Simulation
387
+ </div>
388
+ <div class="sidebar-item">
389
+ <i class="fas fa-shield-alt mr-2"></i>
390
+ 3D Secure
391
+ </div>
392
+ <div class="sidebar-item">
393
+ <i class="fas fa-exchange-alt mr-2"></i>
394
+ Webhooks
395
+ </div>
396
+ </div>
397
+
398
+ <div class="mb-6">
399
+ <div class="text-sm text-neutral-dark mb-2">RESOURCES</div>
400
+ <div class="sidebar-item">
401
+ <i class="fas fa-book mr-2"></i>
402
+ Documentation
403
+ </div>
404
+ <div class="sidebar-item">
405
+ <i class="fas fa-code mr-2"></i>
406
+ API Reference
407
+ </div>
408
+ <div class="sidebar-item">
409
+ <i class="fas fa-question-circle mr-2"></i>
410
+ Help & Support
411
+ </div>
412
+ </div>
413
+
414
+ <div>
415
+ <div class="text-sm text-neutral-dark mb-2">SETTINGS</div>
416
+ <div class="sidebar-item">
417
+ <i class="fas fa-cog mr-2"></i>
418
+ Preferences
419
+ </div>
420
+ <div class="sidebar-item">
421
+ <i class="fas fa-key mr-2"></i>
422
+ API Keys
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Content -->
428
+ <div class="flex-1 p-6">
429
+ <div class="mb-8">
430
+ <h1 class="text-3xl font-bold mb-2">Payment Testing Tool</h1>
431
+ <p class="text-neutral-dark">Simulate payments and test your integration without moving any money.</p>
432
+ </div>
433
+
434
+ <!-- Tabs -->
435
+ <div class="flex border-b border-neutral-medium mb-6">
436
+ <div class="tab tab-active" onclick="switchTab('card-testing')">Card Testing</div>
437
+ <div class="tab" onclick="switchTab('payment-methods')">Payment Methods</div>
438
+ <div class="tab" onclick="switchTab('error-simulation')">Error Simulation</div>
439
+ <div class="tab" onclick="switchTab('3d-secure')">3D Secure</div>
440
+ </div>
441
+
442
+ <!-- Card Testing Tab -->
443
+ <div id="card-testing" class="tab-content slide-in">
444
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
445
+ <!-- Left Column -->
446
+ <div class="lg:col-span-2">
447
+ <div class="card p-6 mb-6">
448
+ <h2 class="text-xl font-semibold mb-4">Test Card Numbers</h2>
449
+ <p class="mb-4">Use these card numbers to test different payment scenarios. Any future expiration date and any 3-digit CVC will work.</p>
450
+
451
+ <!-- Search and Filter -->
452
+ <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 mb-4">
453
+ <div class="flex-1">
454
+ <input type="text" class="search-input" placeholder="Search cards..." id="card-search">
455
+ </div>
456
+ <div>
457
+ <select class="search-input" id="card-filter">
458
+ <option value="all">All Cards</option>
459
+ <option value="brand">By Brand</option>
460
+ <option value="country">By Country</option>
461
+ <option value="scenario">By Scenario</option>
462
+ </select>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Cards by Brand -->
467
+ <div class="mb-4">
468
+ <h3 class="text-lg font-medium mb-3">Cards by Brand</h3>
469
+
470
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('4242424242424242')">
471
+ <div>
472
+ <div class="flex items-center">
473
+ <img src="https://www.pngitem.com/pimgs/m/6-62449_visa-logo-png-transparent-visa-card-logo-png.png" alt="Visa" class="h-6 mr-2">
474
+ <span class="font-medium">Visa</span>
475
+ </div>
476
+ <div class="text-neutral-dark mt-1">4242 4242 4242 4242</div>
477
+ </div>
478
+ <div class="flex items-center">
479
+ <span class="badge badge-success mr-2">Success</span>
480
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('4242424242424242')">
481
+ <i class="far fa-copy"></i>
482
+ </button>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('4000056655665556')">
487
+ <div>
488
+ <div class="flex items-center">
489
+ <img src="https://www.pngitem.com/pimgs/m/6-62449_visa-logo-png-transparent-visa-card-logo-png.png" alt="Visa" class="h-6 mr-2">
490
+ <span class="font-medium">Visa (debit)</span>
491
+ </div>
492
+ <div class="text-neutral-dark mt-1">4000 0566 5566 5556</div>
493
+ </div>
494
+ <div class="flex items-center">
495
+ <span class="badge badge-success mr-2">Success</span>
496
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('4000056655665556')">
497
+ <i class="far fa-copy"></i>
498
+ </button>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('5555555555554444')">
503
+ <div>
504
+ <div class="flex items-center">
505
+ <img src="https://www.mastercard.us/content/dam/public/mastercardcom/na/us/en/homepage/Home/mc-logo-52.svg" alt="Mastercard" class="h-6 mr-2">
506
+ <span class="font-medium">Mastercard</span>
507
+ </div>
508
+ <div class="text-neutral-dark mt-1">5555 5555 5555 4444</div>
509
+ </div>
510
+ <div class="flex items-center">
511
+ <span class="badge badge-success mr-2">Success</span>
512
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('5555555555554444')">
513
+ <i class="far fa-copy"></i>
514
+ </button>
515
+ </div>
516
+ </div>
517
+
518
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('378282246310005')">
519
+ <div>
520
+ <div class="flex items-center">
521
+ <img src="https://www.pngitem.com/pimgs/m/217-2172284_transparent-amex-logo-american-express-black-logo-hd.png" alt="American Express" class="h-6 mr-2">
522
+ <span class="font-medium">American Express</span>
523
+ </div>
524
+ <div class="text-neutral-dark mt-1">3782 822463 10005</div>
525
+ </div>
526
+ <div class="flex items-center">
527
+ <span class="badge badge-success mr-2">Success</span>
528
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('378282246310005')">
529
+ <i class="far fa-copy"></i>
530
+ </button>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('6011111111111117')">
535
+ <div>
536
+ <div class="flex items-center">
537
+ <img src="https://www.pngitem.com/pimgs/m/292-2924859_discover-network-logo-png-transparent-png.png" alt="Discover" class="h-6 mr-2">
538
+ <span class="font-medium">Discover</span>
539
+ </div>
540
+ <div class="text-neutral-dark mt-1">6011 1111 1111 1117</div>
541
+ </div>
542
+ <div class="flex items-center">
543
+ <span class="badge badge-success mr-2">Success</span>
544
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('6011111111111117')">
545
+ <i class="far fa-copy"></i>
546
+ </button>
547
+ </div>
548
+ </div>
549
+ </div>
550
+
551
+ <!-- Declined Payments -->
552
+ <div class="mb-4">
553
+ <h3 class="text-lg font-medium mb-3">Declined Payments</h3>
554
+
555
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('4000000000000002')">
556
+ <div>
557
+ <div class="flex items-center">
558
+ <img src="https://www.pngitem.com/pimgs/m/6-62449_visa-logo-png-transparent-visa-card-logo-png.png" alt="Visa" class="h-6 mr-2">
559
+ <span class="font-medium">Visa (Generic Decline)</span>
560
+ </div>
561
+ <div class="text-neutral-dark mt-1">4000 0000 0000 0002</div>
562
+ </div>
563
+ <div class="flex items-center">
564
+ <span class="badge badge-danger mr-2">Declined</span>
565
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('4000000000000002')">
566
+ <i class="far fa-copy"></i>
567
+ </button>
568
+ </div>
569
+ </div>
570
+
571
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('4000000000009995')">
572
+ <div>
573
+ <div class="flex items-center">
574
+ <img src="https://www.pngitem.com/pimgs/m/6-62449_visa-logo-png-transparent-visa-card-logo-png.png" alt="Visa" class="h-6 mr-2">
575
+ <span class="font-medium">Visa (Insufficient Funds)</span>
576
+ </div>
577
+ <div class="text-neutral-dark mt-1">4000 0000 0000 9995</div>
578
+ </div>
579
+ <div class="flex items-center">
580
+ <span class="badge badge-danger mr-2">Declined</span>
581
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('4000000000009995')">
582
+ <i class="far fa-copy"></i>
583
+ </button>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('4000000000009987')">
588
+ <div>
589
+ <div class="flex items-center">
590
+ <img src="https://www.pngitem.com/pimgs/m/6-62449_visa-logo-png-transparent-visa-card-logo-png.png" alt="Visa" class="h-6 mr-2">
591
+ <span class="font-medium">Visa (Lost Card)</span>
592
+ </div>
593
+ <div class="text-neutral-dark mt-1">4000 0000 0000 9987</div>
594
+ </div>
595
+ <div class="flex items-center">
596
+ <span class="badge badge-danger mr-2">Declined</span>
597
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('4000000000009987')">
598
+ <i class="far fa-copy"></i>
599
+ </button>
600
+ </div>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- 3D Secure Authentication -->
605
+ <div>
606
+ <h3 class="text-lg font-medium mb-3">3D Secure Authentication</h3>
607
+
608
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('4000002500003155')">
609
+ <div>
610
+ <div class="flex items-center">
611
+ <img src="https://www.pngitem.com/pimgs/m/6-62449_visa-logo-png-transparent-visa-card-logo-png.png" alt="Visa" class="h-6 mr-2">
612
+ <span class="font-medium">Visa (3DS Required)</span>
613
+ </div>
614
+ <div class="text-neutral-dark mt-1">4000 0025 0000 3155</div>
615
+ </div>
616
+ <div class="flex items-center">
617
+ <span class="badge badge-primary mr-2">3D Secure</span>
618
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('4000002500003155')">
619
+ <i class="far fa-copy"></i>
620
+ </button>
621
+ </div>
622
+ </div>
623
+
624
+ <div class="test-card flex justify-between items-center" onclick="copyToClipboard('4000002760003184')">
625
+ <div>
626
+ <div class="flex items-center">
627
+ <img src="https://www.pngitem.com/pimgs/m/6-62449_visa-logo-png-transparent-visa-card-logo-png.png" alt="Visa" class="h-6 mr-2">
628
+ <span class="font-medium">Visa (3DS2 Frictionless)</span>
629
+ </div>
630
+ <div class="text-neutral-dark mt-1">4000 0027 6000 3184</div>
631
+ </div>
632
+ <div class="flex items-center">
633
+ <span class="badge badge-primary mr-2">3D Secure</span>
634
+ <button class="copy-btn" onclick="event.stopPropagation(); copyToClipboard('4000002760003184')">
635
+ <i class="far fa-copy"></i>
636
+ </button>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+
643
+ <!-- Right Column -->
644
+ <div>
645
+ <!-- Test Card Form -->
646
+ <div class="card p-6 mb-6">
647
+ <h2 class="text-xl font-semibold mb-4">Test Payment Form</h2>
648
+ <p class="mb-4">Enter a test card number to simulate a payment.</p>
649
+
650
+ <div class="mb-4">
651
+ <label class="block text-sm font-medium mb-2">Card Number</label>
652
+ <input type="text" id="card-number" class="search-input" placeholder="4242 4242 4242 4242">
653
+ </div>
654
+
655
+ <div class="grid grid-cols-2 gap-4 mb-4">
656
+ <div>
657
+ <label class="block text-sm font-medium mb-2">Expiration Date</label>
658
+ <input type="text" class="search-input" placeholder="MM / YY">
659
+ </div>
660
+ <div>
661
+ <label class="block text-sm font-medium mb-2">CVC</label>
662
+ <input type="text" class="search-input" placeholder="123">
663
+ </div>
664
+ </div>
665
+
666
+ <div class="mb-4">
667
+ <label class="block text-sm font-medium mb-2">Amount</label>
668
+ <div class="relative">
669
+ <span class="absolute left-3 top-2.5 text-neutral-dark">$</span>
670
+ <input type="text" class="search-input pl-8" placeholder="100.00">
671
+ </div>
672
+ </div>
673
+
674
+ <div class="mb-6">
675
+ <label class="block text-sm font-medium mb-2">Currency</label>
676
+ <select class="search-input">
677
+ <option>USD - US Dollar</option>
678
+ <option>EUR - Euro</option>
679
+ <option>GBP - British Pound</option>
680
+ <option>JPY - Japanese Yen</option>
681
+ </select>
682
+ </div>
683
+
684
+ <button class="btn-primary w-full" onclick="processPayment()">
685
+ <i class="fas fa-credit-card mr-2"></i>
686
+ Process Payment
687
+ </button>
688
+ </div>
689
+
690
+ <!-- Test Result -->
691
+ <div class="card p-6" id="test-result" style="display: none;">
692
+ <h2 class="text-xl font-semibold mb-4">Test Result</h2>
693
+ <div id="result-content"></div>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ </div>
698
+
699
+ <!-- Payment Methods Tab (Hidden by default) -->
700
+ <div id="payment-methods" class="tab-content hidden">
701
+ <div class="card p-6 mb-6">
702
+ <h2 class="text-xl font-semibold mb-4">Payment Methods</h2>
703
+ <p class="mb-4">Test different payment methods using these test values.</p>
704
+
705
+ <div class="mb-6">
706
+ <h3 class="text-lg font-medium mb-3">ACH Direct Debit</h3>
707
+ <div class="responsive-table">
708
+ <table>
709
+ <thead>
710
+ <tr>
711
+ <th>Account Number</th>
712
+ <th>Routing Number</th>
713
+ <th>Result</th>
714
+ <th>Action</th>
715
+ </tr>
716
+ </thead>
717
+ <tbody>
718
+ <tr>
719
+ <td>000123456789</td>
720
+ <td>110000000</td>
721
+ <td><span class="badge badge-success">Success</span></td>
722
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
723
+ </tr>
724
+ <tr>
725
+ <td>000111111116</td>
726
+ <td>110000000</td>
727
+ <td><span class="badge badge-danger">Declined</span></td>
728
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
729
+ </tr>
730
+ </tbody>
731
+ </table>
732
+ </div>
733
+ </div>
734
+
735
+ <div class="mb-6">
736
+ <h3 class="text-lg font-medium mb-3">SEPA Direct Debit</h3>
737
+ <div class="responsive-table">
738
+ <table>
739
+ <thead>
740
+ <tr>
741
+ <th>IBAN</th>
742
+ <th>Result</th>
743
+ <th>Action</th>
744
+ </tr>
745
+ </thead>
746
+ <tbody>
747
+ <tr>
748
+ <td>DE89370400440532013000</td>
749
+ <td><span class="badge badge-success">Success</span></td>
750
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
751
+ </tr>
752
+ <tr>
753
+ <td>DE62370400440532013001</td>
754
+ <td><span class="badge badge-danger">Declined</span></td>
755
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
756
+ </tr>
757
+ </tbody>
758
+ </table>
759
+ </div>
760
+ </div>
761
+
762
+ <div>
763
+ <h3 class="text-lg font-medium mb-3">BACS Direct Debit</h3>
764
+ <div class="responsive-table">
765
+ <table>
766
+ <thead>
767
+ <tr>
768
+ <th>Account Number</th>
769
+ <th>Sort Code</th>
770
+ <th>Result</th>
771
+ <th>Action</th>
772
+ </tr>
773
+ </thead>
774
+ <tbody>
775
+ <tr>
776
+ <td>00012345</td>
777
+ <td>108800</td>
778
+ <td><span class="badge badge-success">Success</span></td>
779
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
780
+ </tr>
781
+ <tr>
782
+ <td>00012346</td>
783
+ <td>108800</td>
784
+ <td><span class="badge badge-danger">Declined</span></td>
785
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
786
+ </tr>
787
+ </tbody>
788
+ </table>
789
+ </div>
790
+ </div>
791
+ </div>
792
+ </div>
793
+
794
+ <!-- Error Simulation Tab (Hidden by default) -->
795
+ <div id="error-simulation" class="tab-content hidden">
796
+ <div class="card p-6 mb-6">
797
+ <h2 class="text-xl font-semibold mb-4">Error Simulation</h2>
798
+ <p class="mb-4">Simulate various error scenarios to test your error handling.</p>
799
+
800
+ <div class="mb-6">
801
+ <h3 class="text-lg font-medium mb-3">API Errors</h3>
802
+ <div class="responsive-table">
803
+ <table>
804
+ <thead>
805
+ <tr>
806
+ <th>Error Type</th>
807
+ <th>Test Value</th>
808
+ <th>Description</th>
809
+ <th>Action</th>
810
+ </tr>
811
+ </thead>
812
+ <tbody>
813
+ <tr>
814
+ <td>Card Declined</td>
815
+ <td>4000000000000002</td>
816
+ <td>Generic decline</td>
817
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
818
+ </tr>
819
+ <tr>
820
+ <td>Insufficient Funds</td>
821
+ <td>4000000000009995</td>
822
+ <td>Insufficient funds error</td>
823
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
824
+ </tr>
825
+ <tr>
826
+ <td>Processing Error</td>
827
+ <td>4000000000009987</td>
828
+ <td>Processing error</td>
829
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
830
+ </tr>
831
+ <tr>
832
+ <td>Incorrect CVC</td>
833
+ <td>4000000000000127</td>
834
+ <td>Incorrect CVC code</td>
835
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
836
+ </tr>
837
+ <tr>
838
+ <td>Expired Card</td>
839
+ <td>4000000000000069</td>
840
+ <td>Expired card error</td>
841
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
842
+ </tr>
843
+ </tbody>
844
+ </table>
845
+ </div>
846
+ </div>
847
+
848
+ <div>
849
+ <h3 class="text-lg font-medium mb-3">Rate Limiting</h3>
850
+ <p class="mb-4">Simulate rate limiting errors by making multiple requests in quick succession.</p>
851
+
852
+ <div class="flex items-center mb-4">
853
+ <div class="mr-4">
854
+ <label class="switch">
855
+ <input type="checkbox" id="rate-limit-toggle">
856
+ <span class="slider-switch"></span>
857
+ </label>
858
+ </div>
859
+ <div>
860
+ <div class="font-medium">Enable Rate Limit Simulation</div>
861
+ <div class="text-sm text-neutral-dark">Simulates rate limiting after 3 consecutive requests</div>
862
+ </div>
863
+ </div>
864
+
865
+ <button class="btn-primary" id="test-rate-limit">
866
+ <i class="fas fa-bolt mr-2"></i>
867
+ Test Rate Limiting
868
+ </button>
869
+ </div>
870
+ </div>
871
+ </div>
872
+
873
+ <!-- 3D Secure Tab (Hidden by default) -->
874
+ <div id="3d-secure" class="tab-content hidden">
875
+ <div class="card p-6 mb-6">
876
+ <h2 class="text-xl font-semibold mb-4">3D Secure Authentication</h2>
877
+ <p class="mb-4">Test 3D Secure authentication flows with these test cards.</p>
878
+
879
+ <div class="mb-6">
880
+ <h3 class="text-lg font-medium mb-3">3D Secure 2 Test Cards</h3>
881
+ <div class="responsive-table">
882
+ <table>
883
+ <thead>
884
+ <tr>
885
+ <th>Card Number</th>
886
+ <th>Authentication</th>
887
+ <th>Description</th>
888
+ <th>Action</th>
889
+ </tr>
890
+ </thead>
891
+ <tbody>
892
+ <tr>
893
+ <td>4000002500003155</td>
894
+ <td><span class="badge badge-primary">Challenge</span></td>
895
+ <td>3DS authentication with challenge</td>
896
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
897
+ </tr>
898
+ <tr>
899
+ <td>4000002760003184</td>
900
+ <td><span class="badge badge-success">Frictionless</span></td>
901
+ <td>3DS authentication without challenge</td>
902
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
903
+ </tr>
904
+ <tr>
905
+ <td>4000008260003178</td>
906
+ <td><span class="badge badge-danger">Failed</span></td>
907
+ <td>3DS authentication fails</td>
908
+ <td><button class="copy-btn"><i class="far fa-copy"></i></button></td>
909
+ </tr>
910
+ </tbody>
911
+ </table>
912
+ </div>
913
+ </div>
914
+
915
+ <div>
916
+ <h3 class="text-lg font-medium mb-3">Test 3D Secure Authentication</h3>
917
+ <p class="mb-4">Enter a 3D Secure test card to simulate the authentication flow.</p>
918
+
919
+ <div class="mb-4">
920
+ <label class="block text-sm font-medium mb-2">Card Number</label>
921
+ <input type="text" id="3ds-card-number" class="search-input" placeholder="4000 0025 0000 3155">
922
+ </div>
923
+
924
+ <div class="grid grid-cols-2 gap-4 mb-6">
925
+ <div>
926
+ <label class="block text-sm font-medium mb-2">Expiration Date</label>
927
+ <input type="text" class="search-input" placeholder="MM / YY">
928
+ </div>
929
+ <div>
930
+ <label class="block text-sm font-medium mb-2">CVC</label>
931
+ <input type="text" class="search-input" placeholder="123">
932
+ </div>
933
+ </div>
934
+
935
+ <button class="btn-primary w-full" onclick="test3DSecure()">
936
+ <i class="fas fa-shield-alt mr-2"></i>
937
+ Test 3D Secure
938
+ </button>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ </div>
943
+ </div>
944
+
945
+ <!-- 3D Secure Modal -->
946
+ <div id="3ds-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
947
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
948
+ <div class="flex justify-between items-center mb-4">
949
+ <h3 class="text-xl font-semibold">3D Secure Authentication</h3>
950
+ <button onclick="close3DSModal()" class="text-neutral-dark hover:text-secondary-color">
951
+ <i class="fas fa-times"></i>
952
+ </button>
953
+ </div>
954
+ <div class="mb-6">
955
+ <p class="mb-4">Please complete the authentication to proceed with your payment.</p>
956
+ <div class="bg-neutral-light p-4 rounded mb-4">
957
+ <div class="flex justify-between mb-2">
958
+ <span class="text-neutral-dark">Card:</span>
959
+ <span class="font-medium" id="3ds-card-display">**** **** **** 3155</span>
960
+ </div>
961
+ <div class="flex justify-between">
962
+ <span class="text-neutral-dark">Amount:</span>
963
+ <span class="font-medium">$100.00</span>
964
+ </div>
965
+ </div>
966
+ <div class="mb-4">
967
+ <label class="block text-sm font-medium mb-2">Authentication Code</label>
968
+ <input type="text" class="search-input" placeholder="Enter code: 123456">
969
+ </div>
970
+ </div>
971
+ <div class="flex space-x-4">
972
+ <button class="btn-secondary flex-1" onclick="close3DSModal()">Cancel</button>
973
+ <button class="btn-primary flex-1" onclick="complete3DSAuth()">Complete Authentication</button>
974
+ </div>
975
+ </div>
976
+ </div>
977
+
978
+ <script>
979
+ // Switch tabs
980
+ function switchTab(tabId) {
981
+ // Hide all tab contents
982
+ document.querySelectorAll('.tab-content').forEach(tab => {
983
+ tab.classList.add('hidden');
984
+ });
985
+
986
+ // Remove active class from all tabs
987
+ document.querySelectorAll('.tab').forEach(tab => {
988
+ tab.classList.remove('tab-active');
989
+ });
990
+
991
+ // Show selected tab content
992
+ document.getElementById(tabId).classList.remove('hidden');
993
+ document.getElementById(tabId).classList.add('slide-in');
994
+
995
+ // Add active class to selected tab
996
+ document.querySelector(`.tab[onclick="switchTab('${tabId}')"]`).classList.add('tab-active');
997
+ }
998
+
999
+ // Copy to clipboard
1000
+ function copyToClipboard(text) {
1001
+ navigator.clipboard.writeText(text).then(() => {
1002
+ // Show a temporary tooltip or notification
1003
+ alert('Copied to clipboard: ' + text);
1004
+ });
1005
+ }
1006
+
1007
+ // Process payment
1008
+ function processPayment() {
1009
+ const cardNumber = document.getElementById('card-number').value.replace(/\s/g, '');
1010
+ let result = '';
1011
+
1012
+ // Show test result
1013
+ document.getElementById('test-result').style.display = 'block';
1014
+
1015
+ // Simulate different results based on card number
1016
+ if (cardNumber === '4242424242424242') {
1017
+ result = `
1018
+ <div class="bg-green-50 border border-green-200 rounded p-4 mb-4">
1019
+ <div class="flex items-center text-green-800 font-medium mb-2">
1020
+ <i class="fas fa-check-circle mr-2"></i>
1021
+ Payment Successful
1022
+ </div>
1023
+ <p class="text-green-700">The payment was processed successfully.</p>
1024
+ </div>
1025
+ <div class="bg-neutral-light p-4 rounded">
1026
+ <div class="grid grid-cols-2 gap-2">
1027
+ <div class="text-neutral-dark">Transaction ID:</div>
1028
+ <div class="font-medium">ch_1NjK9L2eZvKYlo2C0A2Uvl7g</div>
1029
+ <div class="text-neutral-dark">Amount:</div>
1030
+ <div class="font-medium">$100.00</div>
1031
+ <div class="text-neutral-dark">Status:</div>
1032
+ <div class="font-medium">Succeeded</div>
1033
+ <div class="text-neutral-dark">Card:</div>
1034
+ <div class="font-medium">Visa **** 4242</div>
1035
+ </div>
1036
+ </div>
1037
+ `;
1038
+ } else if (cardNumber === '4000000000000002') {
1039
+ result = `
1040
+ <div class="bg-red-50 border border-red-200 rounded p-4 mb-4">
1041
+ <div class="flex items-center text-red-800 font-medium mb-2">
1042
+ <i class="fas fa-exclamation-circle mr-2"></i>
1043
+ Payment Failed
1044
+ </div>
1045
+ <p class="text-red-700">Your card was declined.</p>
1046
+ </div>
1047
+ <div class="bg-neutral-light p-4 rounded">
1048
+ <div class="grid grid-cols-2 gap-2">
1049
+ <div class="text-neutral-dark">Error Code:</div>
1050
+ <div class="font-medium">card_declined</div>
1051
+ <div class="text-neutral-dark">Error Message:</div>
1052
+ <div class="font-medium">Your card was declined.</div>
1053
+ <div class="text-neutral-dark">Card:</div>
1054
+ <div class="font-medium">Visa **** 0002</div>
1055
+ </div>
1056
+ </div>
1057
+ `;
1058
+ } else if (cardNumber === '4000002500003155') {
1059
+ // Show 3D Secure modal
1060
+ show3DSModal('4000 0025 0000 3155');
1061
+ return;
1062
+ } else {
1063
+ result = `
1064
+ <div class="bg-yellow-50 border border-yellow-200 rounded p-4 mb-4">
1065
+ <div class="flex items-center text-yellow-800 font-medium mb-2">
1066
+ <i class="fas fa-exclamation-triangle mr-2"></i>
1067
+ Invalid Card
1068
+ </div>
1069
+ <p class="text-yellow-700">Please enter a valid test card number.</p>
1070
+ </div>
1071
+ `;
1072
+ }
1073
+
1074
+ document.getElementById('result-content').innerHTML = result;
1075
+ }
1076
+
1077
+ // 3D Secure functions
1078
+ function test3DSecure() {
1079
+ const cardNumber = document.getElementById('3ds-card-number').value.replace(/\s/g, '');
1080
+
1081
+ if (cardNumber === '4000002500003155' || cardNumber === '4000002760003184') {
1082
+ show3DSModal(cardNumber);
1083
+ } else {
1084
+ alert('Please enter a valid 3D Secure test card number.');
1085
+ }
1086
+ }
1087
+
1088
+ function show3DSModal(cardNumber) {
1089
+ // Format card number for display
1090
+ const formattedCard = cardNumber.replace(/(\d{4})/g, '$1 ').trim();
1091
+ document.getElementById('3ds-card-display').textContent = formattedCard;
1092
+
1093
+ // Show modal
1094
+ document.getElementById('3ds-modal').classList.remove('hidden');
1095
+ }
1096
+
1097
+ function close3DSModal() {
1098
+ document.getElementById('3ds-modal').classList.add('hidden');
1099
+ }
1100
+
1101
+ function complete3DSAuth() {
1102
+ close3DSModal();
1103
+
1104
+ // Show success result
1105
+ document.getElementById('test-result').style.display = 'block';
1106
+ document.getElementById('result-content').innerHTML = `
1107
+ <div class="bg-green-50 border border-green-200 rounded p-4 mb-4">
1108
+ <div class="flex items-center text-green-800 font-medium mb-2">
1109
+ <i class="fas fa-check-circle mr-2"></i>
1110
+ 3D Secure Authentication Successful
1111
+ </div>
1112
+ <p class="text-green-700">The payment was authenticated and processed successfully.</p>
1113
+ </div>
1114
+ <div class="bg-neutral-light p-4 rounded">
1115
+ <div class="grid grid-cols-2 gap-2">
1116
+ <div class="text-neutral-dark">Transaction ID:</div>
1117
+ <div class="font-medium">ch_1NjK9L2eZvKYlo2C0A2Uvl7g</div>
1118
+ <div class="text-neutral-dark">Amount:</div>
1119
+ <div class="font-medium">$100.00</div>
1120
+ <div class="text-neutral-dark">Status:</div>
1121
+ <div class="font-medium">Succeeded</div>
1122
+ <div class="text-neutral-dark">Authentication:</div>
1123
+ <div class="font-medium">3D Secure</div>
1124
+ </div>
1125
+ </div>
1126
+ `;
1127
+ }
1128
+
1129
+ // Rate limiting test
1130
+ document.getElementById('test-rate-limit').addEventListener('click', function() {
1131
+ const isEnabled = document.getElementById('rate-limit-toggle').checked;
1132
+
1133
+ if (isEnabled) {
1134
+ let count = 0;
1135
+ const interval = setInterval(() => {
1136
+ count++;
1137
+ if (count < 3) {
1138
+ alert(`Request ${count} successful`);
1139
+ } else {
1140
+ clearInterval(interval);
1141
+ alert('Rate limit exceeded. Too many requests in a short period.');
1142
+ }
1143
+ }, 500);
1144
+ } else {
1145
+ alert('Please enable rate limit simulation first.');
1146
+ }
1147
+ });
1148
+
1149
+ // Card search functionality
1150
+ document.getElementById('card-search').addEventListener('input', function() {
1151
+ const searchTerm = this.value.toLowerCase();
1152
+ const cards = document.querySelectorAll('.test-card');
1153
+
1154
+ cards.forEach(card => {
1155
+ const cardText = card.textContent.toLowerCase();
1156
+ if (cardText.includes(searchTerm)) {
1157
+ card.style.display = 'flex';
1158
+ } else {
1159
+ card.style.display = 'none';
1160
+ }
1161
+ });
1162
+ });
1163
+
1164
+ // Initialize
1165
+ document.addEventListener('DOMContentLoaded', function() {
1166
+ // Start with card testing tab active
1167
+ switchTab('card-testing');
1168
+ });
1169
+ </script>
1170
+ </body>
1171
  </html>