Skip to content

Godbrand0/starkPay

Repository files navigation

StrkPay πŸ’³βš‘

Accept crypto payments in seconds - The fastest, most affordable way to accept STRK payments on Starknet

Live Demo Pitch Deck Contract GitHub


πŸš€ Overview

StrkPay is a next-generation QR code payment platform built on Starknet that enables merchants to accept cryptocurrency payments instantly with industry-leading low fees. No terminals, no setup feesβ€”just scan and get paid.

🎯 Key Features

  • πŸ’° 2% Platform Fee - Lowest in the industry, no hidden costs
  • ⚑ Instant Settlement - Funds arrive in seconds, not days
  • πŸ“Š 98% Revenue to Merchants - Highest payout rate
  • πŸ” Secure - Built on Starknet L2 with OpenZeppelin contracts
  • πŸ“± Mobile-First - Responsive design with QR scanning
  • 🌐 Zero Setup - Connect wallet and start accepting payments in 10 seconds

πŸ“‹ Table of Contents


πŸ”— Quick Links

Resource Link
Live Application https://stark-pay-nine.vercel.app/
Pitch Deck View on Gamma
Smart Contract Sepolia Voyager
GitHub Repository github.com/Godbrand0/starkPay

πŸ’‘ Why StrkPay?

The Problem

Traditional payment processors are expensive and slow:

  • High Fees: 2.9% + $0.30 per transaction (Stripe, Square)
  • Slow Settlement: 2-5 business days for funds to arrive
  • Complex Setup: Days of paperwork and verification
  • Limited Access: Excludes small merchants and crypto economy

Our Solution

StrkPay leverages Starknet's Layer 2 technology to provide:

Feature StrkPay Traditional Processors
Transaction Fee 2.0% 2.9% + $0.30
Settlement Time Instant (2-5 seconds) 2-5 business days
Setup Time 10 seconds 2-3 days
Gas Fees <$0.01 N/A
Merchant Revenue 98% 96.8% - 97.1%
Monthly Fees $0 $0 - $60

πŸ›  Technology Stack

Smart Contracts

  • Cairo - Starknet smart contract language
  • OpenZeppelin - Security-audited contract libraries
  • Starknet Sepolia - Testnet deployment

Backend

  • Node.js - Runtime environment
  • Express.js - Web framework
  • MongoDB - Database with Mongoose ODM
  • Starknet.js - Blockchain interaction library

Frontend

  • Next.js 14 - React framework with App Router
  • TypeScript - Type-safe development
  • Tailwind CSS - Utility-first styling
  • get-starknet - Wallet connection library
  • QR Code Scanner - Camera integration for payments
  • Lucide React - Modern icon library

Infrastructure

  • Vercel - Frontend hosting
  • MongoDB Atlas - Database hosting (optional)
  • Starknet Sepolia - Blockchain network

πŸš€ Getting Started

Prerequisites

  • Node.js v18+ and npm
  • MongoDB (local or Atlas)
  • Starknet wallet (ArgentX or Braavos)
  • Git

Quick Start

# Clone the repository
git clone https://github.com/Godbrand0/starkPay.git
cd starkPay

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

# Set up environment variables (see Environment Variables section)
cp .env.example .env.local

# Start backend server (from backend directory)
npm run dev

# Start frontend (from frontend directory)
npm run dev

Visit http://localhost:3000 to see the application.


πŸ‘¨β€πŸ’Ό Merchant Flow

Overview

Merchants can register, generate payment QR codes, and track their earnings in real-time.

Detailed Steps

1. Registration & Wallet Connection

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Merchant visits: /merchant/register                     β”‚
β”‚  ↓                                                        β”‚
β”‚  Clicks "Connect Wallet"                                 β”‚
β”‚  ↓                                                        β”‚
β”‚  Selects wallet (ArgentX or Braavos)                     β”‚
β”‚  ↓                                                        β”‚
β”‚  Signs connection request                                β”‚
β”‚  ↓                                                        β”‚
β”‚  Enters merchant details:                                β”‚
β”‚    β€’ Business Name                                       β”‚
β”‚    β€’ Description                                         β”‚
β”‚  ↓                                                        β”‚
β”‚  Merchant registered on blockchain & database            β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

API Endpoint: POST /api/merchant/register

Request Body:

{
  "address": "0x...",
  "name": "Coffee Shop",
  "description": "Local coffee shop accepting crypto"
}

Response:

{
  "success": true,
  "merchant": {
    "address": "0x...",
    "name": "Coffee Shop",
    "totalEarnings": "0",
    "transactionCount": 0
  }
}

2. Dashboard Access

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Navigate to: /merchant/dashboard                        β”‚
β”‚  ↓                                                        β”‚
β”‚  View real-time metrics:                                 β”‚
β”‚    β€’ Total Earnings                                      β”‚
β”‚    β€’ Transaction Count                                   β”‚
β”‚    β€’ Recent Transactions                                 β”‚
β”‚  ↓                                                        β”‚
β”‚  Access quick actions:                                   β”‚
β”‚    β€’ Generate QR Code                                    β”‚
β”‚    β€’ View Transaction History                            β”‚
β”‚    β€’ Withdraw Funds                                      β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

3. Generate Payment QR Code

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Click "Generate QR Code" button                         β”‚
β”‚  ↓                                                        β”‚
β”‚  Fill payment details:                                   β”‚
β”‚    β€’ Amount (in STRK or USD/NGN equivalent)              β”‚
β”‚    β€’ Description (optional)                              β”‚
β”‚    β€’ Currency selection (STRK/USD/NGN)                   β”‚
β”‚  ↓                                                        β”‚
β”‚  System fetches current STRK price from Pragma Oracle    β”‚
β”‚  ↓                                                        β”‚
β”‚  QR code generated with:                                 β”‚
β”‚    β€’ Unique payment ID                                   β”‚
β”‚    β€’ Merchant address                                    β”‚
β”‚    β€’ Amount                                              β”‚
β”‚    β€’ 5-minute expiry timer                               β”‚
β”‚  ↓                                                        β”‚
β”‚  Display QR code + shareable link                        β”‚
β”‚  ↓                                                        β”‚
β”‚  Customer scans QR code                                  β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

API Endpoint: POST /api/merchant/generate-qr

Request Body:

{
  "merchantAddress": "0x...",
  "amount": "10.50",
  "selectedCurrency": "USD",
  "description": "Coffee and pastry",
  "tokenAddress": "0x..."
}

Response:

{
  "success": true,
  "qrCode": "data:image/png;base64,...",
  "paymentUrl": "https://stark-pay-nine.vercel.app/pay/abc123",
  "paymentId": "abc123",
  "expiresAt": "2025-10-10T10:15:00Z",
  "amount": "10.50",
  "usdAmount": 10.50,
  "exchangeRate": 0.42
}

4. Monitor Payment Status

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Payment status automatically updates:                   β”‚
β”‚    β€’ "pending" β†’ Customer hasn't paid                    β”‚
β”‚    β€’ "processing" β†’ Payment submitted to blockchain      β”‚
β”‚    β€’ "completed" β†’ Payment confirmed, funds received     β”‚
β”‚    β€’ "expired" β†’ 5-minute window passed                  β”‚
β”‚  ↓                                                        β”‚
β”‚  Real-time notifications via WebSocket                   β”‚
β”‚  ↓                                                        β”‚
β”‚  Merchant receives:                                      β”‚
β”‚    β€’ 98% of payment amount                               β”‚
β”‚    β€’ Platform retains 2% fee                             β”‚
β”‚  ↓                                                        β”‚
β”‚  Transaction appears in dashboard history                β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

5. View Transaction History

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Navigate to: /merchant/transactions                     β”‚
β”‚  ↓                                                        β”‚
β”‚  View detailed transaction list:                         β”‚
β”‚    β€’ Transaction hash                                    β”‚
β”‚    β€’ Amount (gross & net)                                β”‚
β”‚    β€’ Fee deducted                                        β”‚
β”‚    β€’ Customer address                                    β”‚
β”‚    β€’ Timestamp                                           β”‚
β”‚    β€’ Status                                              β”‚
β”‚  ↓                                                        β”‚
β”‚  Filter by date, amount, or status                       β”‚
β”‚  ↓                                                        β”‚
β”‚  Export to CSV (optional feature)                        β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

API Endpoint: GET /api/merchant/:address/transactions

Query Parameters:

  • page - Page number (default: 1)
  • limit - Items per page (default: 20)

Response:

{
  "success": true,
  "transactions": [
    {
      "transactionHash": "0x...",
      "amount": "10.50",
      "netAmount": "10.29",
      "feeAmount": "0.21",
      "payerAddress": "0x...",
      "status": "completed",
      "completedAt": "2025-10-10T10:12:30Z"
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 20,
    "totalCount": 150,
    "totalPages": 8
  }
}

πŸ‘€ User Flow

Overview

Users can scan QR codes, make payments, and track their payment history.

Detailed Steps

1. Scan QR Code

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  User scans merchant QR code with:                       β”‚
β”‚    β€’ Phone camera (redirects to payment page)            β”‚
β”‚    β€’ QR scanner in app                                   β”‚
β”‚    β€’ Manual link entry                                   β”‚
β”‚  ↓                                                        β”‚
β”‚  Redirected to: /pay/[paymentId]                         β”‚
β”‚  ↓                                                        β”‚
β”‚  System fetches payment details:                         β”‚
β”‚    β€’ Merchant name                                       β”‚
β”‚    β€’ Amount                                              β”‚
β”‚    β€’ Description                                         β”‚
β”‚    β€’ Time remaining (5-minute countdown)                 β”‚
β”‚  ↓                                                        β”‚
β”‚  Display payment information                             β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

API Endpoint: GET /api/payment/:paymentId

Response:

{
  "success": true,
  "merchantAddress": "0x...",
  "merchantName": "Coffee Shop",
  "tokenAddress": "0x...",
  "amount": "10.50",
  "description": "Coffee and pastry",
  "status": "pending",
  "expiresAt": "2025-10-10T10:15:00Z",
  "isValid": true,
  "isExpired": false,
  "isCompleted": false,
  "selectedCurrency": "USD",
  "usdAmount": 10.50,
  "exchangeRate": 0.42
}

2. Connect Wallet

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Click "Connect Wallet" button                           β”‚
β”‚  ↓                                                        β”‚
β”‚  Select wallet:                                          β”‚
β”‚    β€’ ArgentX                                             β”‚
β”‚    β€’ Braavos                                             β”‚
β”‚  ↓                                                        β”‚
β”‚  Approve connection in wallet extension                  β”‚
β”‚  ↓                                                        β”‚
β”‚  Wallet connected successfully                           β”‚
β”‚  ↓                                                        β”‚
β”‚  Display:                                                β”‚
β”‚    β€’ Connected address                                   β”‚
β”‚    β€’ Current balance                                     β”‚
β”‚    β€’ Payment amount                                      β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

3. Review Payment Details

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Payment summary displayed:                              β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”             β”‚
β”‚  β”‚ Pay to: Coffee Shop                    β”‚             β”‚
β”‚  β”‚ Amount: 25 STRK (~$10.50 USD)          β”‚             β”‚
β”‚  β”‚ Description: Coffee and pastry          β”‚             β”‚
β”‚  β”‚                                         β”‚             β”‚
β”‚  β”‚ Payment Breakdown:                      β”‚             β”‚
β”‚  β”‚   β€’ Merchant receives: 24.5 STRK (98%) β”‚             β”‚
β”‚  β”‚   β€’ Platform fee: 0.5 STRK (2%)        β”‚             β”‚
β”‚  β”‚                                         β”‚             β”‚
β”‚  β”‚ Time remaining: 4:23                    β”‚             β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜             β”‚
β”‚  ↓                                                        β”‚
β”‚  Review and confirm                                      β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

4. Execute Payment

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Click "Pay Now" button                                  β”‚
β”‚  ↓                                                        β”‚
β”‚  System initiates blockchain transaction:                β”‚
β”‚    1. Approve token spending (if first time)             β”‚
β”‚    2. Call PaymentProcessor.process_payment()            β”‚
β”‚  ↓                                                        β”‚
β”‚  Wallet shows transaction details:                       β”‚
β”‚    β€’ To: Payment Processor Contract                      β”‚
β”‚    β€’ Amount: 25 STRK                                     β”‚
β”‚    β€’ Gas fee: ~0.001 STRK                                β”‚
β”‚  ↓                                                        β”‚
β”‚  User confirms in wallet                                 β”‚
β”‚  ↓                                                        β”‚
β”‚  Transaction submitted to blockchain                     β”‚
β”‚  ↓                                                        β”‚
β”‚  Show loading state: "Processing payment..."             β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Smart Contract Call:

PaymentProcessor.process_payment(
  merchant_address: 0x...,
  token_address: 0x...,
  amount: 25000000000000000000  // 25 STRK in wei
)

Contract Logic:

  1. Verify merchant is registered
  2. Verify token is whitelisted
  3. Calculate 2% fee: fee = amount * 200 / 10000
  4. Calculate net amount: net = amount - fee
  5. Transfer net amount to merchant
  6. Transfer fee to treasury
  7. Emit PaymentProcessed event

5. Payment Confirmation

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Transaction submitted (status: "processing")            β”‚
β”‚  ↓                                                        β”‚
β”‚  Backend monitors blockchain for confirmation            β”‚
β”‚  ↓                                                        β”‚
β”‚  Transaction confirmed in ~3-5 seconds                   β”‚
β”‚  ↓                                                        β”‚
β”‚  Backend verifies transaction:                           β”‚
β”‚    β€’ Extracts PaymentProcessed event                     β”‚
β”‚    β€’ Validates amounts                                   β”‚
β”‚    β€’ Updates payment status to "completed"               β”‚
β”‚  ↓                                                        β”‚
β”‚  Success screen displayed:                               β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”             β”‚
β”‚  β”‚ βœ“ Payment Successful!                  β”‚             β”‚
β”‚  β”‚                                         β”‚             β”‚
β”‚  β”‚ Transaction: 0x1a2b3c...               β”‚             β”‚
β”‚  β”‚ Amount paid: 25 STRK                   β”‚             β”‚
β”‚  β”‚ Merchant received: 24.5 STRK           β”‚             β”‚
β”‚  β”‚                                         β”‚             β”‚
β”‚  β”‚ [View on Voyager] [Done]               β”‚             β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜             β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

API Endpoint: POST /api/payment/verify

Request Body:

{
  "transactionHash": "0x..."
}

Response:

{
  "success": true,
  "payment": {
    "paymentId": "abc123",
    "status": "completed",
    "transactionHash": "0x...",
    "amount": "25.0",
    "netAmount": "24.5",
    "feeAmount": "0.5",
    "payerAddress": "0x...",
    "merchantAddress": "0x...",
    "completedAt": "2025-10-10T10:12:30Z"
  }
}

6. View Payment History

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Navigate to: /user                                      β”‚
β”‚  ↓                                                        β”‚
β”‚  Connect wallet (if not already connected)               β”‚
β”‚  ↓                                                        β”‚
β”‚  View all completed payments:                            β”‚
β”‚    β€’ Merchant name                                       β”‚
β”‚    β€’ Amount paid                                         β”‚
β”‚    β€’ Date & time                                         β”‚
β”‚    β€’ Transaction hash (link to explorer)                 β”‚
β”‚    β€’ Payment status                                      β”‚
β”‚  ↓                                                        β”‚
β”‚  Filter by date or merchant                              β”‚
β”‚  ↓                                                        β”‚
β”‚  Click transaction to view details                       β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

API Endpoint: GET /api/payment/user/:address

Response:

{
  "success": true,
  "payments": [
    {
      "paymentId": "abc123",
      "merchantAddress": "0x...",
      "merchantName": "Coffee Shop",
      "amount": "25.0",
      "description": "Coffee and pastry",
      "transactionHash": "0x...",
      "completedAt": "2025-10-10T10:12:30Z",
      "selectedCurrency": "USD",
      "usdAmount": 10.50
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 20,
    "totalCount": 45,
    "totalPages": 3
  }
}

πŸ“œ Smart Contract

Contract Address

Sepolia Testnet: 0x059a2afea28e769e8f59facda6c4a8019c5dcfb53adb1a8927b418bc6683dd31

Contract Interface

#[starknet::interface]
trait IPaymentProcessor<TContractState> {
    // Merchant registration
    fn register_merchant(ref self: TContractState, merchant_address: ContractAddress);

    // Process payment with automatic fee distribution
    fn process_payment(
        ref self: TContractState,
        merchant_address: ContractAddress,
        token_address: ContractAddress,
        amount: u256
    );

    // Admin functions
    fn whitelist_token(ref self: TContractState, token_address: ContractAddress, whitelisted: bool);
    fn update_platform_fee(ref self: TContractState, new_fee_basis_points: u256);

    // View functions
    fn is_merchant_registered(self: @TContractState, merchant_address: ContractAddress) -> bool;
    fn is_token_whitelisted(self: @TContractState, token_address: ContractAddress) -> bool;
    fn get_treasury_address(self: @TContractState) -> ContractAddress;
    fn get_platform_fee_basis_points(self: @TContractState) -> u256;
}

Key Features

  • Automatic Fee Distribution: 98% to merchant, 2% to platform treasury
  • Reentrancy Protection: OpenZeppelin ReentrancyGuard component
  • Access Control: Ownable pattern for admin functions
  • Token Whitelisting: Support for multiple ERC20 tokens
  • Event Emissions: Comprehensive logging for off-chain indexing

Events

#[derive(Drop, starknet::Event)]
struct PaymentProcessed {
    merchant: ContractAddress,
    payer: ContractAddress,
    token: ContractAddress,
    gross_amount: u256,
    net_amount: u256,
    fee: u256,
    timestamp: u64
}

πŸ“ Project Structure

starkPay/
β”œβ”€β”€ backend/                    # Express.js API server
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ controllers/       # Request handlers
β”‚   β”‚   β”‚   β”œβ”€β”€ merchantController.js
β”‚   β”‚   β”‚   └── paymentController.js
β”‚   β”‚   β”œβ”€β”€ models/            # MongoDB schemas
β”‚   β”‚   β”‚   β”œβ”€β”€ Merchant.js
β”‚   β”‚   β”‚   └── Payment.js
β”‚   β”‚   β”œβ”€β”€ routes/            # API routes
β”‚   β”‚   β”‚   β”œβ”€β”€ merchant.js
β”‚   β”‚   β”‚   └── payment.js
β”‚   β”‚   β”œβ”€β”€ services/          # Business logic
β”‚   β”‚   β”‚   └── contractService.js
β”‚   β”‚   └── server.js          # Entry point
β”‚   β”œβ”€β”€ package.json
β”‚   └── .env.example
β”‚
β”œβ”€β”€ frontend/                   # Next.js application
β”‚   β”œβ”€β”€ app/                   # Next.js App Router
β”‚   β”‚   β”œβ”€β”€ page.tsx          # Homepage
β”‚   β”‚   β”œβ”€β”€ merchant/         # Merchant pages
β”‚   β”‚   β”‚   β”œβ”€β”€ register/
β”‚   β”‚   β”‚   β”œβ”€β”€ dashboard/
β”‚   β”‚   β”‚   └── transactions/
β”‚   β”‚   β”œβ”€β”€ pay/              # Payment pages
β”‚   β”‚   β”‚   └── [paymentId]/
β”‚   β”‚   └── user/             # User pages
β”‚   β”œβ”€β”€ components/            # React components
β”‚   β”‚   β”œβ”€β”€ WalletConnect.tsx
β”‚   β”‚   β”œβ”€β”€ QRScanner.tsx
β”‚   β”‚   └── PaymentTimer.tsx
β”‚   β”œβ”€β”€ lib/                   # Utilities
β”‚   β”‚   └── apiService.ts
β”‚   β”œβ”€β”€ package.json
β”‚   └── .env.local.example
β”‚
β”œβ”€β”€ contracts/                 # Cairo smart contracts (if included)
β”‚   └── src/
β”‚       └── PaymentProcessor.cairo
β”‚
└── README.md

πŸ’» Local Development

Backend Setup

cd backend

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env with your configuration

# Start MongoDB (if running locally)
mongod

# Start development server
npm run dev

The backend server will start on http://localhost:3001

Frontend Setup

cd frontend

# Install dependencies
npm install

# Set up environment variables
cp .env.local.example .env.local
# Edit .env.local with your configuration

# Start development server
npm run dev

The frontend will start on http://localhost:3000

Testing the Full Flow

  1. Start Backend: Terminal 1 - cd backend && npm run dev
  2. Start Frontend: Terminal 2 - cd frontend && npm run dev
  3. Visit Homepage: Open http://localhost:3000
  4. Register as Merchant:
    • Click "For Merchants"
    • Connect ArgentX/Braavos wallet
    • Fill in merchant details
  5. Generate QR Code:
    • Enter amount and description
    • Generate QR code
  6. Make Payment:
    • Open QR code link in new tab/phone
    • Connect wallet
    • Confirm payment
  7. Verify Success:
    • Check merchant dashboard for updated earnings
    • Check transaction history

πŸ” Environment Variables

Backend (.env)

# Server Configuration
PORT=3001
NODE_ENV=development

# Database
MONGODB_URI=mongodb://localhost:27017/starkpay
# Or MongoDB Atlas:
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/starkpay

# Starknet Configuration
STARKNET_NETWORK=sepolia
STARKNET_RPC_URL=https://starknet-sepolia.public.blastapi.io
PAYMENT_PROCESSOR_ADDRESS=0x059a2afea28e769e8f59facda6c4a8019c5dcfb53adb1a8927b418bc6683dd31

# Token Addresses (Sepolia Testnet)
STRK_TOKEN_ADDRESS=0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d
MOCK_USDC_ADDRESS=0x...
MOCK_USDT_ADDRESS=0x...

# Oracle Configuration (Pragma)
PRAGMA_ORACLE_ADDRESS=0x...
PRICE_FEED_UPDATE_INTERVAL=60000

# CORS
CORS_ORIGIN=http://localhost:3000

# API Keys (Optional)
COINGECKO_API_KEY=your-api-key

Frontend (.env.local)

# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:3001/api

# Starknet Configuration
NEXT_PUBLIC_STARKNET_NETWORK=sepolia
NEXT_PUBLIC_PAYMENT_PROCESSOR_ADDRESS=0x059a2afea28e769e8f59facda6c4a8019c5dcfb53adb1a8927b418bc6683dd31
NEXT_PUBLIC_STRK_TOKEN_ADDRESS=0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d

# Application URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Analytics (Optional)
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

πŸ“š API Documentation

Base URL

  • Development: http://localhost:3001/api
  • Production: https://your-backend-url.com/api

Merchant Endpoints

Register Merchant

POST /api/merchant/register
Content-Type: application/json

{
  "address": "0x...",
  "name": "Coffee Shop",
  "description": "Local coffee shop"
}

Get Merchant Details

GET /api/merchant/:address

Generate QR Code

POST /api/merchant/generate-qr
Content-Type: application/json

{
  "merchantAddress": "0x...",
  "amount": "10.50",
  "selectedCurrency": "USD",
  "description": "Coffee",
  "tokenAddress": "0x..."
}

Get Merchant Transactions

GET /api/merchant/:address/transactions?page=1&limit=20

Payment Endpoints

Get Payment Details

GET /api/payment/:paymentId

Verify Transaction

POST /api/payment/verify
Content-Type: application/json

{
  "transactionHash": "0x..."
}

Get User Payment History

GET /api/payment/user/:address?page=1&limit=20

Response Format

Success Response:

{
  "success": true,
  "data": { ... },
  "message": "Operation successful"
}

Error Response:

{
  "success": false,
  "error": "Error message",
  "code": "ERROR_CODE"
}

πŸš€ Deployment

Frontend (Vercel)

  1. Push to GitHub:

    git add .
    git commit -m "Ready for deployment"
    git push origin main
  2. Deploy on Vercel:

    • Visit vercel.com
    • Import your GitHub repository
    • Configure build settings:
      • Framework: Next.js
      • Root Directory: frontend
      • Build Command: npm run build
      • Output Directory: .next
    • Add environment variables from .env.local
    • Deploy!
  3. Custom Domain (Optional):

    • Add your domain in Vercel settings
    • Update DNS records as instructed

Backend (Railway/Render/Heroku)

Railway Example:

  1. Create railway.json in backend folder:

    {
      "build": {
        "builder": "NIXPACKS"
      },
      "deploy": {
        "startCommand": "npm start",
        "restartPolicyType": "ON_FAILURE"
      }
    }
  2. Deploy:

    • Visit railway.app
    • Create new project
    • Connect GitHub repository
    • Select backend directory
    • Add environment variables
    • Deploy
  3. Add MongoDB:

    • Add MongoDB plugin in Railway
    • Copy connection string to MONGODB_URI

Database (MongoDB Atlas)

  1. Create Cluster:

  2. Get Connection String:

    • Click "Connect" β†’ "Connect your application"
    • Copy connection string
    • Replace <password> with your database password
    • Add to backend environment variables

🀝 Contributing

We welcome contributions! Please follow these steps:

  1. Fork the Repository

    git clone https://github.com/Godbrand0/starkPay.git
    cd starkPay
  2. Create Feature Branch

    git checkout -b feature/your-feature-name
  3. Make Changes

    • Write clean, documented code
    • Follow existing code style
    • Add tests if applicable
  4. Commit Changes

    git add .
    git commit -m "feat: add new feature"
  5. Push and Create PR

    git push origin feature/your-feature-name
    • Create Pull Request on GitHub
    • Describe your changes
    • Wait for review

Code Style

  • Frontend: Follow Next.js and React best practices
  • Backend: Use ES6+ features, async/await
  • Formatting: Use Prettier (run npm run format)
  • Linting: Use ESLint (run npm run lint)

πŸ› Known Issues & Roadmap

Current Issues

  • Payment expiry doesn't auto-cancel on frontend (timer visual only)
  • No pagination UI on transaction history pages
  • Camera permission handling on iOS Safari

Upcoming Features

  • Multi-token support (USDC, USDT, ETH)
  • Merchant withdrawal feature
  • Email notifications for payments
  • Mobile app (React Native)
  • Advanced analytics dashboard
  • Merchant API keys for integrations
  • Refund functionality
  • Recurring payments / subscriptions
  • Multi-language support

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.


πŸ™ Acknowledgments

  • Starknet - For the amazing L2 infrastructure
  • OpenZeppelin - For secure smart contract libraries
  • Pragma Oracle - For real-time price feeds
  • Vercel - For seamless frontend hosting
  • The Starknet Community - For continuous support

πŸ“ž Support & Contact


Built with ❀️ on Starknet

⭐ Star us on GitHub if you find this project useful!

Website β€’ Docs β€’ Contract

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •