Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/freshfruty/docs

Free Space:

9.68 TB

🔧 Quick Actions

✏️ Editing: VIRTUAL_ACCOUNT_FEATURE.md

# Dokumentasi Virtual Account Payment Feature

## 📋 Ringkasan Fitur

Fitur Virtual Account memungkinkan pelanggan mendapatkan nomor virtual account unik untuk setiap metode pembayaran yang dipilih (Transfer Bank atau E-Wallet). Sistem akan:

1. **Generate Virtual Account Number** otomatis saat pelanggan memilih metode pembayaran
2. **Tampilkan Nomor VA dengan Styling Menarik** di checkout modal
3. **Simpan VA ke Database** untuk tracking pembayaran
4. **Berikan Instruksi Pembayaran Detail** sesuai metode yang dipilih

---

## 🚀 Instalasi & Setup

### 1. Buat Database Table

Jalankan migration untuk membuat tabel `virtual_accounts`:

```bash
# Jalankan file migration di browser atau via command line
http://localhost/xampp/htdocs/freshfruty/migrations/001_create_virtual_accounts_table.php
```

Atau jalankan query langsung di phpMyAdmin:

```sql
CREATE TABLE IF NOT EXISTS `virtual_accounts` (
    `id` INT(11) PRIMARY KEY AUTO_INCREMENT,
    `order_id` INT(11) NOT NULL,
    `customer_id` INT(11) NOT NULL,
    `payment_method` VARCHAR(100) NOT NULL,
    `virtual_account_number` VARCHAR(100) UNIQUE NOT NULL,
    `amount` BIGINT(20) NOT NULL,
    `status` ENUM('active', 'expired', 'paid') DEFAULT 'active',
    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    `expires_at` TIMESTAMP DEFAULT (DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 24 HOUR)),
    `paid_at` TIMESTAMP NULL,
    FOREIGN KEY (order_id) REFERENCES orders(id) ON DELETE CASCADE,
    FOREIGN KEY (customer_id) REFERENCES customers(id) ON DELETE CASCADE,
    INDEX idx_order_id (order_id),
    INDEX idx_customer_id (customer_id),
    INDEX idx_virtual_account_number (virtual_account_number),
    INDEX idx_status (status)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
```

### 2. File yang Sudah Diupdate

File-file berikut sudah diupdate dengan fitur Virtual Account:

| File | Perubahan |
|------|-----------|
| [checkout/generate_virtual_account.php](generate_virtual_account.php) | **NEW** - API endpoint untuk generate VA |
| [checkout/process.php](process.php) | Updated - Menyimpan VA ke database |
| [assets/js/main.js](../assets/js/main.js) | Updated - Handler JS untuk VA |
| [assets/css/style.css](../assets/css/style.css) | Updated - CSS styling untuk VA |
| [checkout/checkout_modal.php](checkout_modal.php) | Updated - Form struktur |
| [migrations/001_create_virtual_accounts_table.php](../migrations/001_create_virtual_accounts_table.php) | **NEW** - Database migration |

---

## 💻 Cara Kerja

### Flow Checkout dengan Virtual Account

```
User Pilih Metode Pembayaran (Bank/E-Wallet)
    ↓
JavaScript trigger generateAndShowVirtualAccount()
    ↓
Fetch ke checkout/generate_virtual_account.php
    ↓
API generate nomor VA unik berdasarkan metode
    ↓
Return VA number + instruksi pembayaran
    ↓
Tampilkan VA di checkout modal dengan styling
    ↓
User klik "Salin Virtual Account" (copy to clipboard)
    ↓
User klik "Konfirmasi Pesanan"
    ↓
Kirim VA number ke checkout/process.php
    ↓
Simpan VA ke table virtual_accounts
    ↓
Order sukses dibuat
```

### Metode Pembayaran yang Didukung

#### Bank Transfer:
- **BCA** → Code: 1
- **Mandiri** → Code: 2
- **BNI** → Code: 3
- **BRI** → Code: 4

#### E-Wallet:
- **DANA** → Code: 7
- **OVO** → Code: 8
- **GoPay** → Code: 9
- **Shopee Pay** → Code: 6

---

## 🎨 UI/UX Fitur

### Virtual Account Display

Ketika user memilih metode pembayaran, akan tampil:

```
┌─────────────────────────────────────────────────┐
│         NOMOR VIRTUAL ACCOUNT                  │
│  ┌──────────────────────────────────────────┐  │
│  │   1234 5678 9012 34                      │  │
│  └──────────────────────────────────────────┘  │
│        [Salin Virtual Account]                 │
│                                                 │
│  Metode: Transfer (BCA)                        │
│  Jumlah: Rp 250.000                            │
│  Berlaku: 24 Jam                              │
│                                                 │
│  📋 Langkah-langkah Pembayaran:               │
│  1. Buka aplikasi BCA Mobile                  │
│  2. Pilih menu "Transfer"                     │
│  3. Pilih "Ke Bank Lain (RTGS/GIRO)"         │
│  4. Masukkan nomor: 1234 5678 9012 34        │
│  5. Konfirmasi pembayaran                     │
│                                                 │
│  ⚠️ Pembayaran akan terverifikasi dalam      │
│     waktu kurang dari 5 menit                │
└─────────────────────────────────────────────────┘
```

### Copy to Clipboard

User bisa langsung copy nomor VA dengan tombol "Salin Virtual Account":
- Nomor akan dicopy ke clipboard (tanpa spasi)
- Tombol menampilkan feedback visual ✓

---

## 📊 Database Schema

### Tabel: virtual_accounts

| Kolom | Tipe | Keterangan |
|-------|------|-----------|
| `id` | INT | Primary Key, auto increment |
| `order_id` | INT | Foreign key ke orders table |
| `customer_id` | INT | Foreign key ke customers table |
| `payment_method` | VARCHAR(100) | Metode (transfer-BCA, ewallet-GoPay, dll) |
| `virtual_account_number` | VARCHAR(100) | Nomor VA unik (tanpa spasi) |
| `amount` | BIGINT | Jumlah yang harus dibayar |
| `status` | ENUM | active/expired/paid |
| `created_at` | TIMESTAMP | Waktu VA dibuat |
| `expires_at` | TIMESTAMP | Waktu VA kadaluarsa (24 jam) |
| `paid_at` | TIMESTAMP | Waktu pembayaran terkonfirmasi |

---

## 🔧 API Endpoints

### POST /checkout/generate_virtual_account.php

**Request:**
```json
{
    "payment_method": "transfer-BCA",
    "amount": 250000
}
```

**Response Success:**
```json
{
    "success": true,
    "virtual_account": "1234 5678 9012 34",
    "payment_method": "transfer-BCA",
    "amount": 250000,
    "formatted_amount": "Rp 250.000",
    "instructions": {
        "method": "Transfer Bank BCA",
        "steps": [
            "1. Buka aplikasi BCA Mobile / BCA Klik atau ATM BCA",
            ...
        ],
        "note": "Pembayaran akan terverifikasi otomatis dalam waktu kurang dari 5 menit"
    },
    "expires_in": "24 Jam"
}
```

**Response Error:**
```json
{
    "success": false,
    "message": "Error message"
}
```

---

## 🎯 Customization

### Mengubah Format Nomor VA

Edit function `formatVirtualAccount()` di [checkout/generate_virtual_account.php](generate_virtual_account.php):

```php
function formatVirtualAccount($va, $paymentMethod) {
    // Default: spasi setiap 4 digit
    return preg_replace('/(\d{4})(?=\d)/', '$1 ', $va);
    
    // Alternatif: spasi setiap 6 digit
    // return preg_replace('/(\d{6})(?=\d)/', '$1 ', $va);
}
```

### Menambah Metode Pembayaran Baru

1. Tambah bank code di `generateVirtualAccountNumber()`:
```php
$bankCodes = [
    'transfer-Mandiri' => '2',
    'transfer-CIMB' => '5',  // Tambah CIMB
    // ...
];
```

2. Tambah instruksi pembayaran di `getPaymentInstructions()`:
```php
'transfer-CIMB' => [
    'method' => 'Transfer Bank CIMB',
    'steps' => [
        '1. Buka aplikasi CIMB Niaga',
        // ...
    ],
    'note' => 'Pembayaran akan terverifikasi...'
]
```

### Mengubah Durasi VA

Edit expires_at di database atau code:

```php
// Durasi VA: 24 jam (default)
'expires_at' => 'DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 24 HOUR)'

// Ubah ke 12 jam:
'expires_at' => 'DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 12 HOUR)'
```

---

## 🔐 Security & Validation

### Nomor VA Validation

Sistem menggunakan checksum untuk validasi:

```php
function generateChecksum($str) {
    $sum = 0;
    for ($i = 0; $i < strlen($str); $i++) {
        $sum += intval($str[$i]) * ($i + 1);
    }
    return str_pad($sum % 100, 2, '0', STR_PAD_LEFT);
}
```

### XSS Protection

Semua input di-escape dan di-sanitize:
- Input dari user di-trim dan di-validate
- Output di-escape menggunakan prepared statements
- JSON responses di-encode properly

---

## 📱 Mobile Responsive

Fitur VA fully responsive untuk semua ukuran screen:

- **Desktop**: Tampil normal dengan styling penuh
- **Tablet**: Adjustable grid layout
- **Mobile**: Optimized untuk small screens
  - Font size: 1.2rem (dari 1.8rem)
  - Padding: Reduced untuk space efficiency
  - Layout: Stack vertical optimal

---

## 🐛 Troubleshooting

### VA Tidak Tampil

**Problem**: Dropdown metode pembayaran tidak show VA
**Solution**:
1. Cek browser console untuk errors
2. Pastikan API endpoint `/checkout/generate_virtual_account.php` accessible
3. Cek CORS settings jika berbeda domain

### Error: Table Not Found

**Problem**: "Table 'virtual_accounts' doesn't exist"
**Solution**:
1. Jalankan migration file: `/migrations/001_create_virtual_accounts_table.php`
2. Atau jalankan query SQL manual di phpMyAdmin

### Nomor VA Tidak Tersalin

**Problem**: Copy button tidak bekerja
**Solution**:
1. Browser harus support Clipboard API (Chrome 63+, Firefox 63+)
2. HTTPS required untuk production (optional di localhost)
3. Cek browser permissions

---

## 📈 Next Steps & Enhancement Ideas

### Fitur Tambahan yang Bisa Ditambahkan:

1. **Auto-verification Payment**
   - Webhook dari bank untuk konfirmasi otomatis
   - Update order status jika payment terdeteksi

2. **QR Code Payment**
   - Generate QR code dari VA number
   - Terintegrasi dengan QRIS standard Indonesia

3. **Payment Reminder**
   - Email/SMS reminder sebelum VA expire
   - Countdown timer di UI

4. **Transaction History**
   - Track semua VA yang pernah dibuat
   - Filter by status (paid/expired/active)

5. **Admin Dashboard**
   - Monitor payment menggunakan VA
   - Manual payment confirmation

6. **Multiple VA per Order**
   - Allow customer switch metode pembayaran
   - Generate VA baru untuk metode berbeda

---

## 📞 Support

Jika ada pertanyaan atau issue, hubungi:
- **WhatsApp**: Admin
- **Email**: support@freshfruty.com

---

**Last Updated**: January 20, 2026
**Version**: 1.0.0

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: VIRTUAL_ACCOUNT_FEATURE.md

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation