Payment Sample App

A complete Next.js e-commerce demo showcasing KryptoGO Pay SDK integration. Customers browse products, add to cart, and check out with stablecoins (USDT/USDC) on Arbitrum.

GitHub: kryptogo/payment-sample-app

What It Demonstrates

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

Tech Stack

Technology	Version
Next.js	15 (App Router, Turbopack)
React	19
Tailwind CSS	4
@kryptogo/kryptogokit-sdk-react	latest
wagmi	v3
viem	v2
TanStack React Query	v5

Quick Start

Clone and Install


git clone https://github.com/kryptogo/payment-sample-app.git
cd payment-sample-app
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

Get your Client ID and API Key from KryptoGO Studio . See the AI Skills setup guide for details.

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

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

Core Code


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)

Next Steps

AI Agent Skills — let your AI coding agent set up payments for you
SDK Payment Hooks — full usePayment API reference
API Reference — server-side payment endpoints