Desktop Only

This application is optimized for desktop browsers. Please open it on a device with a screen width of at least 1024px.

Installation

Detailed installation guide for x402 Mantle SDK.

Requirements

  • Node.js 18+
  • npm, yarn, or pnpm
  • MetaMask or any EIP-1193 compatible wallet
  • USDC on Mantle network (for testing payments)

Install the SDK

npm

npm install @puga-labs/x402-mantle-sdk

yarn

yarn add @puga-labs/x402-mantle-sdk

pnpm

pnpm add @puga-labs/x402-mantle-sdk

Peer Dependencies

The SDK has optional peer dependencies based on your use case:

For Client-Side (React)

npm install ethers react

For Client-Side (Vanilla JS)

npm install ethers

For Server-Side (Express)

npm install express

For Server-Side (Next.js)

Next.js is already included in your project.

For Server-Side (Hono/Web Standards)

No additional dependencies needed.

Import Paths

The SDK provides multiple entry points for tree-shaking:

// Main exports (shared types, constants)
import { MANTLE_DEFAULTS } from '@puga-labs/x402-mantle-sdk';

// Client
import { createMantleClient } from '@puga-labs/x402-mantle-sdk/client';

// React hooks
import { useMantleX402, useEthersWallet } from '@puga-labs/x402-mantle-sdk/react';

// Server - Express
import { mantlePaywall } from '@puga-labs/x402-mantle-sdk/server/express';

// Server - Next.js App Router
import { mantlePaywall } from '@puga-labs/x402-mantle-sdk/server/nextjs';

// Server - Web Standards (Hono, CF Workers, Deno, Bun)
import { mantlePaywall } from '@puga-labs/x402-mantle-sdk/server/web';

TypeScript Support

The SDK is written in TypeScript and includes full type definitions:

import type {
  PaymentRequirements,
  PaymentLogEntry,
  MantleClient,
  TelemetryConfig
} from '@puga-labs/x402-mantle-sdk';

Wallet Setup (For Testing)

  1. Install MetaMask browser extension

  2. Add Mantle network:

    • Network Name: Mantle
    • RPC URL: https://rpc.mantle.xyz
    • Chain ID: 5000
    • Currency Symbol: MNT
    • Explorer: https://explorer.mantle.xyz

  3. Get USDC:

    • Bridge from Ethereum: https://bridge.mantle.xyz
    • Or use a faucet for testnet

Environment Variables

Create .env.local in your project:

For Self-Hosted Facilitator (Recommended)

PAY_TO=0xYourWalletAddress
FACILITATOR_URL=https://your-facilitator.com
FACILITATOR_SECRET=fac_xxx...  # Copy from facilitator .env

For Hosted Facilitator

PAY_TO=0xYourWalletAddress
PROJECT_KEY=pk_xxx  # Get from dashboard

Next Steps