KryptoGO Payment Sample App

A demo e-commerce app showcasing KryptoGO Pay SDK integration — accept stablecoin payments (USDT/USDC) in a Next.js storefront.

What This Demonstrates

• Stablecoin checkout flow — customers pay with USDT/USDC on Arbitrum
• KryptoGO Pay SDK (usePayment hook) — fiat-denominated orders settled in crypto
• Wallet connection — KryptoGO Wallet + WalletConnect support via KryptogoKit
• Shopping cart — add items, adjust quantities, checkout with crypto

Tech Stack

• Next.js 15 (App Router, Turbopack)
• React 19
• Tailwind CSS 4
• @kryptogo/kryptogokit-sdk-react — wallet connection + payment
• wagmi v3 + viem — Ethereum client
• TanStack React Query — async state management

Getting Started

Prerequisites

• Node.js 18+
• pnpm
• A KryptoGO Studio account — get your Client ID at studio.kryptogo.com

Setup

# Clone
git clone https://github.com/kryptogo/payment-sample-app.git
cd payment-sample-app

# Install
pnpm install

# Configure environment
cp .env.example .env.local

Edit .env.local with your credentials:

NEXT_PUBLIC_KRYPTOGO_CLIENT_ID=your_client_id
KRYPTOGO_STUDIO_API_KEY=your_studio_api_key

Run

pnpm dev

Open http://localhost:3000.

Project Structure

app/
  layout.tsx          # Root layout
  providers.tsx       # Wagmi + KryptogoKit + React Query providers
  page.tsx            # Main storefront page
components/
  Header.tsx          # Navigation bar with cart badge
  ProductCard.tsx     # Product display card
  CartDrawer.tsx      # Slide-out shopping cart
  CheckoutModal.tsx   # Payment modal (uses KryptoGO Pay SDK)
lib/
  products.ts         # Product catalog data
  cart.ts             # Cart utility functions
  utils.ts            # General utilities (cn)

How Payment Works

1. Customer adds items to cart and clicks checkout
2. CheckoutModal calls openPaymentModal() from usePayment() hook
3. KryptoGO Pay SDK handles wallet connection, token selection, and on-chain transaction
4. App receives txHash on success and displays confirmation

const { openPaymentModal, isSuccess, txHash } = usePayment();

await openPaymentModal({
  fiat_amount: "150.00",
  fiat_currency: "TWD",
  order_data: { items: "..." },
});

Environment Variables

Variable	Required	Description
NEXT_PUBLIC_KRYPTOGO_CLIENT_ID	Yes	KryptoGO client ID (public, used client-side)
KRYPTOGO_STUDIO_API_KEY	Yes	KryptoGO Studio API key (server-side only)

License

MIT