Integrate x402 with Para

Para provides a standard ViemAccount that works seamlessly with x402’s HTTP payment protocol. This guide shows you how to integrate Para wallets with x402 for stablecoin payments.

Prerequisites

Para SDK configured with API credentials
Node.js 18+ or modern browser environment
Basic understanding of Viem accounts
x402 facilitator URL (default: https://x402.org/facilitator)

Installation

Install packages

Install the required packages:

npm install @getpara/viem-v2-integration viem@^2 @coinbase/x402 x402-express --save-exact

Setup

Initialize Para SDK

import Para, { Environment } from '@getpara/web-sdk';

const para = new Para(Environment.BETA, YOUR_API_KEY);

Get ViemAccount

Para provides a standard ViemAccount that works with any Viem-compatible library:

import { createParaViemAccount } from '@getpara/viem-v2-integration';

const viemAccount = await createParaViemAccount(para);

Usage

Client-Side Payments

import { wrapFetchWithPayment } from '@coinbase/x402';

// Wrap fetch with x402 payments using Para's ViemAccount
const paymentFetch = wrapFetchWithPayment(fetch, viemAccount);

// Make payment-enabled requests
const response = await paymentFetch('https://api.example.com/premium');
const data = await response.json();

React Hook Integration

import { useAccount } from '@getpara/react-sdk';
import { createParaViemAccount } from '@getpara/viem-v2-integration';
import { wrapFetchWithPayment } from '@coinbase/x402';

function PaymentComponent() {
  const { para } = useAccount();
  
  const handlePayment = async () => {
    const viemAccount = await createParaViemAccount(para);
    const paymentFetch = wrapFetchWithPayment(fetch, viemAccount);
    
    const response = await paymentFetch('/api/endpoint');
    const data = await response.json();
    console.log('Payment complete:', data);
  };
  
  return <button onClick={handlePayment}>Pay with Para</button>;
}

Server-Side Setup

Configure middleware

Set up your Express server with x402 payment middleware:

import express from 'express';
import { paymentMiddleware } from 'x402-express';
import { facilitator } from '@coinbase/x402';

const app = express();

Apply payment middleware

Configure the middleware with your wallet address and pricing:

app.use('/api/premium', paymentMiddleware(
  '0xYourWalletAddress', // Your receiving wallet
  {
    'GET /api/premium': {
      price: '$0.01',
      network: 'base'
    }
  },
  facilitator // or { url: 'https://x402.org/facilitator' } for testnet
));

Create protected endpoint

Add your protected endpoint and start the server:

app.get('/api/premium', (req, res) => {
  res.json({ data: 'Premium content' });
});

app.listen(3000);

Examples

Autonomous Agent

Build an agent that makes autonomous payments:

import Para, { Environment } from '@getpara/server-sdk';
import { createParaViemAccount } from '@getpara/viem-v2-integration';
import { wrapFetchWithPayment } from '@coinbase/x402';

class PaymentAgent {
  private para: Para;
  private viemAccount: any;

  async initialize() {
    this.para = new Para(Environment.BETA, process.env.PARA_API_KEY);
    this.viemAccount = await createParaViemAccount(this.para);
  }

  async payForService(url: string, maxAmount: string) {
    const paymentFetch = wrapFetchWithPayment(fetch, this.viemAccount, {
      maxAmount
    });
    
    return await paymentFetch(url);
  }
}

// Usage
const agent = new PaymentAgent();
await agent.initialize();
const response = await agent.payForService('https://api.example.com/premium', '0.10');

Multi-Chain Payments

Use Para’s multi-chain support with x402:

import { createParaViemAccount } from '@getpara/viem-v2-integration';
import { http } from 'viem';
import { base, ethereum, polygon } from 'viem/chains';

// Create Para Viem client with multi-chain support
const paraClient = createParaViemAccount(para, {
  chain: base, // Default chain
  transport: http()
});

// Use with x402 - automatically handles chain switching
const paymentFetch = wrapFetchWithPayment(fetch, paraClient.account);

Next Steps

x402 Documentation

Learn more about the x402 payment protocol

Viem Guide

Explore Para’s Viem integration in detail

Bulk Wallet Pregeneration

Intermediate · 25 min · Large-scale wallet generation

Miden Integration

Intermediate · 25 min · Zero-knowledge virtual machine

Chrome Extension Integration

Advanced · 45 min · Browser extensions with Para wallets

Overview

DeFi & Money Movement

Smart Accounts

Chains & Privacy

Para Templates

Agents

Integrate x402 with Para

Prerequisites

Installation

Install packages

Setup

Usage

Client-Side Payments

React Hook Integration

Server-Side Setup

Examples

Autonomous Agent

Multi-Chain Payments

Next Steps

x402 Documentation

Viem Guide

Bulk Wallet Pregeneration

Miden Integration

Chrome Extension Integration

​Prerequisites

​Installation

​Install packages

​Setup

​Usage

​Client-Side Payments

​React Hook Integration

​Server-Side Setup

​Examples

​Autonomous Agent

​Multi-Chain Payments

​Next Steps

x402 Documentation

Viem Guide

​Related Walkthroughs

Bulk Wallet Pregeneration

Miden Integration

Chrome Extension Integration

Prerequisites

Installation

Install packages

Setup

Usage

Client-Side Payments

React Hook Integration

Server-Side Setup

Examples

Autonomous Agent

Multi-Chain Payments

Next Steps

Related Walkthroughs