Building Miniapps with x402

# Clone the x402 repository
git clone https://github.com/coinbase/x402.git
cd x402/examples/typescript/fullstack/farcaster-miniapp

# Install dependencies
pnpm install

# Build all packages (required for monorepo)
cd ../../
pnpm build
cd fullstack/farcaster-miniapp

# Copy environment variables
cp env.example .env.local

# Configure your environment (see below)
# Then start the development server
pnpm dev

farcaster-miniapp/
├── app/
│   ├── .well-known/
│   │   └── farcaster.json/    # Dynamic Frame configuration
│   │       └── route.ts
│   ├── api/
│   │   ├── notify/            # Notification proxy endpoint
│   │   ├── protected/         # x402-protected endpoint
│   │   └── webhook/           # Frame webhook handler
│   ├── page.tsx               # Main miniapp interface
│   ├── layout.tsx             # Root layout with providers
│   ├── providers.tsx          # MiniKit and wallet providers
│   └── globals.css            # Global styles
├── lib/
│   └── notification-client.ts # Notification utilities
├── middleware.ts              # x402 payment middleware
└── .env.local                 # Environment configuration

# Your wallet address to receive payments
RESOURCE_WALLET_ADDRESS=0xYourWalletAddress

# Network: "base-sepolia" for testing, "base" for production
NETWORK=base-sepolia

# OnchainKit API key (get from https://portal.cdp.coinbase.com/products/onchainkit)
NEXT_PUBLIC_ONCHAINKIT_API_KEY=your_api_key_here
NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME=x402 Mini App

# For mainnet only (get from portal.cdp.coinbase.com)
CDP_API_KEY_ID=your_cdp_key_id
CDP_API_KEY_SECRET=your_cdp_key_secret

npx create-onchain --manifest

import { facilitator } from "@coinbase/x402";
import { paymentMiddleware } from "x402-next";

const payTo = process.env.RESOURCE_WALLET_ADDRESS as Address;
const network = process.env.NETWORK || "base-sepolia";

export const middleware = paymentMiddleware(
  payTo,
  {
    "/api/protected": {
      price: "$0.01",
      network,
      config: {
        description: "Protected route",
      },
    },
  },
  facilitator,
);

export const config = {
  matcher: ["/api/protected"],
  runtime: "nodejs",
};

import { NextResponse } from "next/server";

export async function GET() {
  // This only executes if payment is verified
  return NextResponse.json({
    success: true,
    message: "Protected action completed successfully",
    timestamp: new Date().toISOString(),
  });
}

import { wrapFetchWithPayment } from "x402-fetch";
import { getWalletClient } from "wagmi/actions";

// Get wallet client from wagmi
const walletClient = await getWalletClient(config, {
  account: address,
  chainId: chainId,
  connector: connector,
});

// Wrap fetch with x402 payment handling
const fetchWithPayment = wrapFetchWithPayment(fetch, walletClient);

// Call protected endpoint - payment is handled automatically
const response = await fetchWithPayment("/api/protected");

import { sdk } from "@farcaster/frame-sdk";

useEffect(() => {
  const initMiniApp = async () => {
    await sdk.actions.ready();
    const isInMiniApp = await sdk.isInMiniApp();
    setIsInMiniApp(isInMiniApp);
  };
  initMiniApp();
}, []);

export const middleware = paymentMiddleware(
  payTo,
  {
    "/api/protected": {
      price: "$0.01",
      network,
    },
    "/api/premium-content": {
      price: "$1.00",
      network,
      config: {
        description: "Premium content access",
      },
    },
    "/api/exclusive-feature": {
      price: "$5.00",
      network,
      config: {
        description: "Exclusive feature unlock",
      },
    },
  },
  facilitator,
);

export const config = {
  matcher: ["/api/protected", "/api/premium-content", "/api/exclusive-feature"],
};

import { sendFrameNotification } from "@/lib/notification-client";

// Send a notification after successful payment
await sendFrameNotification({
  fid: userFid,
  title: "Payment Successful!",
  body: "You've unlocked premium content",
  notificationDetails: {
    url: "/premium",
    type: "payment_success",
  },
});

/* Custom theme variables */
:root {
  --ockThemePrimary: #4F46E5;
  --ockThemeSecondary: #7C3AED;
  --ockConnectWalletBackground: #FFFFFF;
  /* ... more theme variables ... */
}

// Ensure wallet client is properly configured
if (!walletClient) {
  console.error("Wallet client not available");
  return;
}

// Check network matches configuration
if (chainId !== expectedChainId) {
  console.error("Wrong network");
  return;
}

// Ensure Frame SDK is initialized
try {
  await sdk.actions.ready();
} catch (error) {
  console.log("Not in miniapp context");
}

// Verify middleware matcher includes your route
export const config = {
  matcher: ["/api/your-route"], // Add your route here
};