# Pi Developer Portal - Visual Navigation Guide

Quick visual reference for navigating Pi Network Developer Portal

---

## 🖼️ Screen-by-Screen Navigation

### Screen 1: Pi Network Home Page
**URL:** https://www.pi.network

```
┌─────────────────────────────────────┐
│  Pi Network                    🔐    │  ← Click for Login/Sign Up
├─────────────────────────────────────┤
│                                     │
│    [SIGN UP]  [LEARN MORE]          │
│                                     │
│    The Future of Payments,          │
│    Starting Today                   │
│                                     │
└─────────────────────────────────────┘
```

**Action:** Click "SIGN UP" button in top right

---

### Screen 2: Pi Sign Up Page
**URL:** https://www.pi.network/register

```
┌──────────────────────────────────┐
│   Join the Pi Community           │
├──────────────────────────────────┤
│                                  │
│  Choose Sign Up Method:          │
│  ┌────────────────────────────┐  │
│  │ 📧 Email                   │  │
│  │ 📱 Phone Number            │  │
│  │ 👤 Google Account          │  │
│  │ 👥 Facebook Account        │  │
│  └────────────────────────────┘  │
│                                  │
│  Already have account? [Log In]  │
│                                  │
└──────────────────────────────────┘
```

**Action:** Select Email or Phone, complete signup, verify

---

### Screen 3: Pi Dashboard (After Login)
**URL:** https://www.pi.network/dashboard

```
┌─────────────────────────────────────┐
│ Pi Dashboard          👤 [Profile ▼] │
├─────────────────────────────────────┤
│                                     │
│ Welcome, [Your Name]                │
│                                     │
│ Your Pi Wallet:        [0.00 Pi]   │
│ Your Username:         [name123]    │
│                                     │
│ Menu:                              │
│ • Home                            │
│ • Mining                          │
│ • Wallet                          │
│ • Developer Portal  ← CLICK HERE  │
│ • Settings                        │
│ • Log Out                         │
│                                     │
└─────────────────────────────────────┘
```

**Action:** Click "Developer Portal" in left menu

---

### Screen 4: Developer Portal Home
**URL:** https://develop.pi

```
┌──────────────────────────────────────┐
│ Developer Portal      👤 [Your Name▼] │
├──────────────────────────────────────┤
│                                      │
│ 📱 MY APPLICATIONS                   │
│                                      │
│ ┌─────────────────────────────────┐  │
│ │ [Create New App]                │  │
│ │ [View Documentation]            │  │
│ │ [API Reference]                 │  │
│ └─────────────────────────────────┘  │
│                                      │
│ Your Apps:                           │
│ (Empty - No apps created yet)        │
│                                      │
└──────────────────────────────────────┘
```

**Action:** Click "Create New App" button

---

### Screen 5: Create New App - Step 1
**URL:** https://develop.pi/create-app

```
┌──────────────────────────────────────┐
│ Create New Application               │
├──────────────────────────────────────┤
│                                      │
│ Step 1: Basic Information            │
│                                      │
│ App Name *                           │
│ ┌──────────────────────────────────┐ │
│ │ Nexera Africa                    │ │
│ └──────────────────────────────────┘ │
│                                      │
│ App Type *                           │
│ ◉ Web App          ← SELECT          │
│ ○ Mobile App                         │
│ ○ Desktop App                        │
│                                      │
│ Short Description                    │
│ ┌──────────────────────────────────┐ │
│ │ Pan-African marketplace on Pi     │ │
│ └──────────────────────────────────┘ │
│                                      │
│               [Next →]               │
│                                      │
└──────────────────────────────────────┘
```

**Action:** Fill in details, click "Next"

---

### Screen 6: Create New App - Step 2
**URLs Configuration**

```
┌──────────────────────────────────────┐
│ Create New Application               │
├──────────────────────────────────────┤
│                                      │
│ Step 2: URLs & Permissions           │
│                                      │
│ Callback URL (Server) *              │
│ ┌──────────────────────────────────┐ │
│ │ https://nexeraafrica.com/api/    │ │
│ │ pi_payment.php                   │ │
│ └──────────────────────────────────┘ │
│                                      │
│ Redirect URI *                       │
│ ┌──────────────────────────────────┐ │
│ │ https://nexeraafrica.com/        │ │
│ │ checkout.html                    │ │
│ └──────────────────────────────────┘ │
│                                      │
│ Permissions *                        │
│ ☑ username                           │
│ ☑ payments                           │
│ ☐ wallet_address                     │
│                                      │
│        [← Back]  [Create App →]      │
│                                      │
└──────────────────────────────────────┘
```

**Action:** Fill URLs, check permissions, click "Create App"

---

### Screen 7: App Created Success
**URL:** https://develop.pi/app/[APP_ID]

```
┌──────────────────────────────────────┐
│ App Dashboard - Nexera Africa        │
├──────────────────────────────────────┤
│                                      │
│ ✅ App Successfully Created!         │
│                                      │
│ 📊 App Status: ACTIVE               │
│                                      │
│ Quick Links:                         │
│ • [View Documentation]              │
│ • [API Reference]                   │
│ • [Edit Settings]                   │
│                                      │
└──────────────────────────────────────┘
```

**Action:** Continue to credentials screen

---

### Screen 8: Credentials / API Key
**URL:** https://develop.pi/app/[APP_ID]/credentials

```
┌────────────────────────────────────────┐
│ Nexera Africa - Credentials            │
├────────────────────────────────────────┤
│                                        │
│ 🔐 SANDBOX ENVIRONMENT                │
│                                        │
│ Status: ✅ ENABLED                    │
│                                        │
│ App ID                                 │
│ ┌──────────────────────────────────┐  │
│ │ 123456789abcdef...  [Copy]       │  │
│ └──────────────────────────────────┘  │
│                                        │
│ API Key (SECRET - KEEP SAFE!)         │
│ ┌──────────────────────────────────┐  │
│ │ sk_live_1a2b3c4d5e6f...  [Copy]  │  │
│ └──────────────────────────────────┘  │
│                                        │
│ API Secret                             │
│ ┌──────────────────────────────────┐  │
│ │ secret_xxx...  [Show/Hide] [Copy]│  │
│ └──────────────────────────────────┘  │
│                                        │
│ Test Endpoint:                         │
│ POST /payments/create                  │
│                                        │
│                                        │
│ 🟢 PRODUCTION ENVIRONMENT (Later)    │
│                                        │
│ Status: ⭕ DISABLED (Activate when    │
│         ready for real transactions)   │
│                                        │
└────────────────────────────────────────┘
```

**Action:** 🔴 **COPY YOUR API KEY AND SAVE SECURELY** ⚠️

---

## 📋 Copy-Paste Reference

### API Key Format
```
sk_live_1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p (Testing - Sandbox)
sk_prod_1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p (Production - Live)
```

### URLs to Copy
```
Callback URL:
https://nexeraafrica.com/api/pi_payment.php

Redirect URL:
https://nexeraafrica.com/checkout.html

Alternative Redirect:
https://nexeraafrica.com/payment.php
```

---

## 🔄 Common Navigation Paths

### Path 1: View Your Credentials Again
```
https://develop.pi 
  → Click on "Nexera Africa" app
  → Click "Credentials" or "API Keys"
  → View API Key
```

### Path 2: Edit App Settings
```
https://develop.pi
  → Click on "Nexera Africa" app
  → Click "Settings"
  → Edit callback URLs, permissions, etc.
```

### Path 3: Enable Production Mode
```
https://develop.pi
  → Click on "Nexera Africa" app
  → Click "Credentials"
  → Scroll down to "Production Environment"
  → Click "Enable"
  → Copy production API key
```

### Path 4: Delete/Recreate App
```
https://develop.pi
  → Click on "Nexera Africa" app
  → Click "Settings"
  → Scroll to bottom
  → Click "Delete App" (careful!)
```

---

## 💾 Secure Storage Checklist

Once you have your API Key:

- [ ] Copy to password manager (LastPass, 1Password, etc.)
- [ ] Store in environment variable on VPS
- [ ] Document in secure location
- [ ] DO NOT save in:
  - GitHub/public repositories
  - Email chains
  - Shared documents
  - Chat messages
  - Code comments

---

## 🚀 Next Steps After Getting API Key

1. **Store Safely**
   ```bash
   export PI_API_KEY="sk_live_xxx"
   ```

2. **Configure Code**
   Edit `api/pi_payment.php`:
   ```php
   define('PI_API_KEY', getenv('PI_API_KEY'));
   ```

3. **Test API**
   ```bash
   curl -X POST https://nexeraafrica.com/api/pi_payment.php?action=create
   ```

4. **Test in Browser**
   Open `checkout.html` in Pi Browser

5. **Switch to Production** (when ready)
   - Get production API key from Developer Portal
   - Update code with production key
   - Change `sandbox: true` to `sandbox: false`

---

## ⚠️ Common Mistakes to Avoid

| ❌ Don't | ✅ Do |
|---------|------|
| Share API key | Keep it secret |
| Commit to GitHub | Use environment variables |
| Use same key everywhere | Use different keys per environment |
| Ignore security warnings | Rotate keys every 90 days |
| Test in production | Use sandbox for testing |
| Hardcode in code | Load from environment |

---

## 🆘 Troubleshooting

### Can't Find Developer Portal Button
- Log in to https://www.pi.network first
- Click profile icon → Select "Developer Portal"
- Or go directly to https://develop.pi

### Can't Create App
- Verify email is confirmed
- Check all required fields filled
- Wait 5 minutes and refresh
- Try different browser

### Can't See API Key
- Login again to Developer Portal
- Click on app name
- Look for "Credentials" tab
- Might need to enable Sandbox first

### Lost Your API Key
- Go back to Developer Portal
- Click on app
- Click "Reset" or "Regenerate"
- Old key becomes inactive
- Copy new key

---

**Last Updated:** June 13, 2026  
**Visual Guide Version:** 1.0  
**Purpose:** Step-by-step navigation reference