> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate x402 with Para

> Enable micropayments over HTTP using Para's ViemAccount with Coinbase's x402 protocol

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:

```bash theme={null}
npm install @getpara/viem-v2-integration viem@^2 @coinbase/x402 x402-express --save-exact
```

## Setup

<Steps>
  <Step title="Initialize Para SDK">
    ```typescript theme={null}
    import Para, { Environment } from '@getpara/web-sdk';

    const para = new Para(Environment.BETA, YOUR_API_KEY);
    ```
  </Step>

  <Step title="Get ViemAccount">
    Para provides a standard ViemAccount that works with any Viem-compatible library:

    ```typescript theme={null}
    import { createParaViemAccount } from '@getpara/viem-v2-integration';

    const viemAccount = await createParaViemAccount(para);
    ```
  </Step>
</Steps>

## Usage

### Client-Side Payments

```typescript theme={null}
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

```typescript theme={null}
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

<Steps>
  <Step title="Configure middleware">
    Set up your Express server with x402 payment middleware:

    ```typescript theme={null}
    import express from 'express';
    import { paymentMiddleware } from 'x402-express';
    import { facilitator } from '@coinbase/x402';

    const app = express();
    ```
  </Step>

  <Step title="Apply payment middleware">
    Configure the middleware with your wallet address and pricing:

    ```typescript theme={null}
    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
    ));
    ```
  </Step>

  <Step title="Create protected endpoint">
    Add your protected endpoint and start the server:

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

    app.listen(3000);
    ```
  </Step>
</Steps>

## Examples

### Autonomous Agent

Build an agent that makes autonomous payments:

```typescript theme={null}
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:

```typescript theme={null}
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

<CardGroup cols={2}>
  <Card title="x402 Documentation" href="https://docs.cdp.coinbase.com/x402">
    Learn more about the x402 payment protocol
  </Card>

  <Card title="Viem Guide" href="https://docs.getpara.com/v2/react/guides/web3-operations/evm/setup-libraries#viem-2">
    Explore Para's Viem integration in detail
  </Card>
</CardGroup>

## Related Walkthroughs

<CardGroup cols={3}>
  <Card title="Bulk Wallet Pregeneration" icon="layer-group" href="/v2/walkthroughs/bulk-pregeneration">
    Intermediate · 25 min · Large-scale wallet generation
  </Card>

  <Card title="Miden Integration" icon="shield-halved" href="/v2/walkthroughs/miden">
    Intermediate · 25 min · Zero-knowledge virtual machine
  </Card>

  <Card title="Chrome Extension Integration" icon="puzzle-piece" href="/v2/walkthroughs/chrome-extension-integration">
    Advanced · 45 min · Browser extensions with Para wallets
  </Card>
</CardGroup>