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@alpha viem@^2 @coinbase/x402 x402-express --save-exact

Setup

1

Initialize Para SDK

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

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

Get ViemAccount

Para provides a standard ViemAccount that works with any Viem-compatible library:
import { createParaAccount } from '@getpara/viem-v2-integration';

const viemAccount = await createParaAccount(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 { createParaAccount } from '@getpara/viem-v2-integration';
import { wrapFetchWithPayment } from '@coinbase/x402';

function PaymentComponent() {
  const { para } = useAccount();
  
  const handlePayment = async () => {
    const viemAccount = await createParaAccount(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

1

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();
2

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
));
3

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 { createParaAccount } 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 createParaAccount(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 { createParaAccount } 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 = createParaAccount(para, {
  chain: base, // Default chain
  transport: http()
});

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

Next Steps