chitfund/BROWSER_API_TESTER.md

🌐 Browser API Tester - Complete Guide

✨ What Is This?

A beautiful web-based tool to test your ChitFund API endpoints directly from the browser - no Postman needed!

---

🚀 Quick Start

Step 1: Access the Tester

Open your browser and go to:

https://chitfund.deepteklabs.com/test/api-tester.html

Or for local testing:

http://localhost:3000/test/api-tester.html

Step 2: Login

1. Enter your manager mobile number
2. Enter your password
3. Click "Login"

You'll see:

• ✅ Success message with your name
• 🔐 Your authentication token displayed
• Token saved automatically for future use

Step 3: Test Endpoints

Click any of the pre-configured buttons:

• 📋 Get Review Queue - Transaction sync review queue
• 💳 Get UPI Settings - Your UPI configuration
• 📊 Get Sync Stats - Payment sync statistics

Or enter a custom endpoint!

---

📱 Screenshots

Login Screen:

╔═══════════════════════════════════════╗
║  🔧 ChitFund API Tester              ║
║  Test your API endpoints             ║
╠═══════════════════════════════════════╣
║                                       ║
║  🔐 Step 1: Login                     ║
║  ─────────────────────────────────   ║
║                                       ║
║  Mobile Number: [9876543210     ]    ║
║  Password:      [••••••••••     ]    ║
║                                       ║
║  [Login]                              ║
║                                       ║
║  Auth Token:                          ║
║  ┌─────────────────────────────────┐ ║
║  │ eyJhbGciOiJIUzI1NiIsInR5cCI6... │ ║
║  └─────────────────────────────────┘ ║
║  [Copy Token]                         ║
║                                       ║
╚═══════════════════════════════════════╝

API Testing:

╔═══════════════════════════════════════╗
║  🚀 Step 2: Test API Endpoints        ║
║  ─────────────────────────────────   ║
║                                       ║
║  [📋 Get Review Queue]                ║
║  [💳 Get UPI Settings]                ║
║  [📊 Get Sync Stats]                  ║
║                                       ║
║  Custom Endpoint:                     ║
║  [/payments/phonepe/settings/upi]     ║
║  [Call Custom Endpoint]               ║
║                                       ║
║  [Clear Response]                     ║
╚═══════════════════════════════════════╝

Response Display:

╔═══════════════════════════════════════╗
║  📦 Response                           ║
║  ─────────────────────────────────   ║
║  {                                    ║
║    "success": true,                   ║
║    "data": {                          ║
║      "upi_id": "9876543210@ybl",      ║
║      "is_configured": true,           ║
║      "transaction_fee": 0,            ║
║      "transaction_fee_percentage": "0%"║
║    }                                  ║
║  }                                    ║
╚═══════════════════════════════════════╝

---

🎨 Features

1. Automatic Token Management

• ✅ Saves token to localStorage
• ✅ Persists across page refreshes
• ✅ Automatically includes in all requests

2. Pre-configured Endpoints

• Review Queue - /transaction-sync/review-queue
• UPI Settings - /payments/phonepe/settings/upi
• Sync Stats - /transaction-sync/stats

3. Custom Endpoint Testing

• Enter any API endpoint
• Automatically adds base URL
• Uses saved authentication token

4. Beautiful UI

• 🎨 Modern gradient design
• 📱 Responsive layout
• 🌈 Color-coded responses
• ✨ Smooth animations

5. Response Formatting

• JSON syntax highlighting
• Scrollable response area
• Copy-friendly display
• Clear success/error indicators

---

🔧 How to Use

Testing Review Queue

1. Login with manager credentials
2. Click "Get Review Queue"
3. See all transactions needing review

Response Example:

{
  "success": true,
  "data": {
    "pending": [
      {
        "id": "123",
        "amount": 10250,
        "payer_vpa": "user@paytm",
        "timestamp": "2025-11-10T10:00:00Z"
      }
    ],
    "total": 1
  }
}

Testing UPI Settings

1. Click "Get UPI Settings"
2. See your UPI configuration

Response Example:

{
  "success": true,
  "data": {
    "upi_id": "9876543210@ybl",
    "is_configured": true,
    "provider": "ybl",
    "transaction_fee": 0,
    "transaction_fee_percentage": "0%"
  }
}

Testing Custom Endpoint

1. Enter endpoint path (e.g., /payments/history)
2. Click "Call Custom Endpoint"
3. View response

---

🛠️ Advanced Usage

Using Browser Console

The tool also exposes these functions in console:

// Login
login()

// Get review queue
getReviewQueue()

// Get UPI settings
getUPISettings()

// Call custom endpoint
callAPI('/your/endpoint', 'GET')

// Access saved token
console.log(window.authToken)

Copy Token for Other Tools

1. Click "Copy Token" button
2. Paste in Postman/cURL/other tools

Example cURL:

curl -X GET https://chitfund.deepteklabs.com/api/transaction-sync/review-queue \
  -H "Authorization: Bearer PASTE_TOKEN_HERE"

---

📋 Pre-configured Endpoints

Button	Endpoint	Description
📋 Get Review Queue	/transaction-sync/review-queue	Transactions needing review
💳 Get UPI Settings	/payments/phonepe/settings/upi	Your UPI configuration
📊 Get Sync Stats	/transaction-sync/stats	Payment sync statistics

---

⚙️ Configuration

File Location

backend/public/api-tester.html

Access URL

https://chitfund.deepteklabs.com/test/api-tester.html

Backend Route

// In server.js
app.use('/test', express.static('public'));

---

🎯 Use Cases

1. API Development

• Test new endpoints
• Verify authentication
• Check response format

2. Debugging

• Reproduce issues
• Verify fixes
• Test error handling

3. Documentation

• Show API examples
• Demo to team
• Training new developers

4. Quick Testing

• No Postman needed
• No installation required
• Works on any device

---

🔐 Security Notes

Token Storage

• Stored in browser localStorage
• Persists across sessions
• Clear storage to logout

Manual Logout

To clear token:

// In browser console
localStorage.removeItem('authToken');
location.reload();

Or just close and reopen the page, then login with new credentials.

---

🐛 Troubleshooting

Issue: "Please login first"

Solution:

1. Enter mobile number and password
2. Click Login button
3. Wait for success message

Issue: 401 Unauthorized

Solution:

1. Token expired - login again
2. Not a manager account - use manager credentials
3. Wrong credentials - check mobile/password

Issue: Page not loading

Solution:

1. Check backend is running
2. Verify URL is correct
3. Check browser console for errors

Issue: CORS Error

Solution: Backend already configured with:

app.use(cors({ origin: '*' }));

Should work. If not, restart backend.

---

🎨 Customization

Add New Endpoint Button

Edit api-tester.html:

<!-- In the button group -->
<button class="endpoint-btn" onclick="getMyNewEndpoint()">
  🆕 My New Endpoint
</button>

// In the script section
async function getMyNewEndpoint() {
    await callAPI('/my/new/endpoint', 'GET');
}

Change Colors

Edit the <style> section:

/* Change primary color */
background: linear-gradient(135deg, #YOUR_COLOR_1 0%, #YOUR_COLOR_2 100%);

---

📊 Status Indicators

Success (Green)

✅ Success! Status: 200

Error (Red)

❌ Error: Unauthorized (401)

Info (Blue)

ℹ️ Calling /api/endpoint...

---

🚀 Next Steps

Option 1: Use the Web Tester

1. Open browser
2. Go to /test/api-tester.html
3. Login and test!

Option 2: Use Browser Console

1. Open DevTools (F12)
2. Use the JavaScript code examples above
3. Test APIs directly

Option 3: Use Postman

1. Copy token from web tester
2. Import in Postman
3. Add Authorization header

---

💡 Pro Tips

1. Keep Tab Open

   • Token persists while tab is open
   • No need to re-login frequently

2. Use Custom Endpoint

   • Test any endpoint quickly
   • Great for development

3. Copy Token

   • Use in other tools
   • Share with team (securely!)

4. Check Response

   • Formatted JSON
   • Easy to read
   • Copy for documentation

---

📚 Related Documentation

• API Documentation: backend/API_DOCUMENTATION.md
• Authentication Guide: Check auth middleware
• Endpoint List: See routes files

---

🎉 Summary

Now you can:

• ✅ Test APIs from browser
• ✅ No Postman needed
• ✅ Beautiful UI
• ✅ Easy authentication
• ✅ Instant results
• ✅ Works anywhere

Access it now:

https://chitfund.deepteklabs.com/test/api-tester.html

Happy Testing! 🚀