Expo Solana Crypto Checkout

A React Native mobile app for purchasing real-world products with SOL and USDC on Solana — powered by Privy wallet auth and Crossmint payments.

---

Features

• Wallet Authentication — Sign in with Solana wallet via Privy (email, social, or passkey)
• Product Browsing — Browse Amazon products with real images and descriptions
• Cart Management — Add, remove, and update quantities with Zustand state management
• Crypto Payments — Pay with SOL or USDC on Solana Devnet via Crossmint
• Transaction Signing — Sign Solana transactions directly from your mobile wallet
• Order Tracking — Real-time payment status polling with success/failure feedback
• Shipping Address — Full address form with validation (US addresses)
• Secure Storage — Sensitive data stored with Expo Secure Store

Tech Stack

Layer	Technology
Framework	Expo SDK 53 + React Native
Language	TypeScript (strict mode)
Auth	Privy — Web3 wallet authentication
Payments	Crossmint — Crypto checkout infrastructure
Blockchain	Solana via @solana/web3.js
Navigation	Expo Router
State	Zustand (local) + TanStack Query (server)
UI	React Native Paper

Architecture

src/
├── app/                # Expo Router screens & navigation
│   ├── (tabs)/         # Tab navigation (products, profile)
│   ├── auth.tsx        # Authentication screen
│   ├── cart.tsx        # Shopping cart
│   ├── checkout.tsx    # Shipping & payment selection
│   ├── payment.tsx     # Transaction signing & processing
│   └── payment-success.tsx
├── hooks/              # Custom React hooks
│   ├── useAuth.ts      # Authentication state
│   ├── useCart.ts      # Cart operations
│   └── useWalletBalance.ts
├── screens/            # Screen components
├── services/           # API integrations
│   ├── crossmint.ts    # Crossmint order & payment API
│   └── privy.tsx       # Privy SDK configuration
├── store/              # Zustand stores
│   ├── cartStore.ts    # Cart state management
│   └── userStore.ts    # User preferences
├── types/              # TypeScript type definitions
└── utils/              # Constants, helpers, wallet utils

Payment Flow

sequenceDiagram
    participant User
    participant App
    participant Privy
    participant Crossmint
    participant Solana

    User->>App: Select products & checkout
    App->>Crossmint: Create order (SOL/USDC)
    Crossmint-->>App: Return quote & transaction
    App->>Privy: Request transaction signing
    Privy-->>User: Approve transaction
    User->>Privy: Confirm
    Privy-->>App: Signed transaction
    App->>Solana: Submit transaction (Devnet)
    App->>Crossmint: Poll payment status
    Crossmint-->>App: Payment confirmed
    App-->>User: Success screen

Loading

Getting Started

Prerequisites

• Node.js 18+
• Expo CLI
• Privy account & App ID
• Crossmint account & API keys (testnet)

Installation

# Clone the repository
git clone https://github.com/helioxco/expo-solana-crypto-checkout.git
cd expo-solana-crypto-checkout

# Install dependencies
npm install

Environment Setup

cp .env.example .env

Add your API keys to .env:

EXPO_PUBLIC_PRIVY_APP_ID=your_privy_app_id
CROSSMINT_CLIENT_SECRET=your_crossmint_testnet_secret
EXPO_PUBLIC_CROSSMINT_PROJECT_ID=your_crossmint_project_id
EXPO_PUBLIC_USE_TESTNET=true
EXPO_PUBLIC_SOLANA_RPC_URL=https://api.devnet.solana.com

Run

npx expo start

Scan the QR code with Expo Go (iOS/Android) or press i / a to open in a simulator.

Testnet Tokens

This app runs on Solana Devnet only — no real funds are used.

Token	Amount	Source
SOL	5.0	Solana Faucet
USDC	100.0	Mocked for devnet

Supported Payment Methods

Currency	Network	Exchange Rate (Mock)
SOL	Solana Devnet	1 SOL = $20
USDC	Solana Devnet	1 USDC = $1

Resources

• Privy Docs — React Native
• Crossmint Docs — Headless Checkout
• Solana Web3.js Docs
• Solana Devnet Explorer

License

MIT