> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://mpp.dev/api/mcp` to find what you need.

# Use with your app \[Handle payment-gated resources automatically]

## Choose a signing account

### Direct

Create a server-only wallet.ts module, then import account wherever an example creates a local signing account.

```ts
import { privateKeyToAccount } from 'viem/accounts'

export const account = privateKeyToAccount(process.env.PRIVATE_KEY as `0x${string}`)
```

### Privy

Create an EVM wallet in Privy, fund it with the required currency on this page's network, and keep PRIVY\_APP\_SECRET server-side.

```bash
pnpm add @privy-io/node
```

Create a server-only privy.ts module, then import its account wherever an example configures account or feePayer.

```ts
import { PrivyClient } from '@privy-io/node'
import { createViemAccount } from '@privy-io/node/viem'

const privy = new PrivyClient({
  appId: process.env.PRIVY_APP_ID!,
  appSecret: process.env.PRIVY_APP_SECRET!,
})

export const account = createViemAccount(privy, {
  address: process.env.PRIVY_WALLET_ADDRESS as `0x${string}`,
  walletId: process.env.PRIVY_WALLET_ID!,
})
```

createViemAccount delegates signatures to the Privy wallet, so it replaces any local viem account in the examples on this page.

## Overview

Create a Tempo account and polyfill the global `fetch` to handle `402` responses. Your existing code works unchanged—payments happen in the background. Pick the path that suits you:

* [**Prompt mode**](#prompt-mode): paste a prompt into your coding agent for fast setup
* [**Manual mode**](#manual-mode): step-by-step setup with `mppx/client`

## Prompt mode

Paste this into your coding agent to set up your client with `mppx` in one prompt:

```text
Reference https://mpp.dev/quickstart/client.md

Add mppx to my app as a client.
Polyfill the global fetch to automatically handle 402 Payment Required responses using the Tempo payment method.
Make a request to https://mpp.dev/api/ping/paid to test.
```

## Manual mode

::::steps
### Install dependencies

:::code-group
```bash [npm]
$ npm install accounts mppx viem
```

```bash [pnpm]
$ pnpm add accounts mppx viem
```

```bash [bun]
$ bun add accounts mppx viem
```
:::

### Connect an account

#### Accounts SDK

```ts twoslash
import { Provider } from 'accounts'

const provider = Provider.create()
await provider.request({ method: 'wallet_connect' })
```

#### viem

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'

const account = privateKeyToAccount('0xabc…123')
```

### Enable payments

`Provider.create()` enables MPP by default. It installs a payment-aware `fetch` that handles Tempo `402` payment Challenges with the connected account.

#### Accounts SDK

```ts twoslash
import { Provider } from 'accounts'

// [!code hl:start]
const provider = Provider.create()
await provider.request({ method: 'wallet_connect' })
// [!code hl:end]
```

#### viem

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Mppx, tempo } from 'mppx/client' // [!code hl]

const account = privateKeyToAccount('0xabc…123')

// [!code hl:start]
Mppx.create({
  methods: [tempo({ account })],
})
// [!code hl:end]
```

:::tip
If you want to avoid polyfilling, disable the Accounts SDK MPP integration and use a bound `mppx` fetch instead.

##### Accounts SDK

```ts twoslash
import { Provider } from 'accounts'
import { Mppx, tempo } from 'mppx/client'

const provider = Provider.create({ mpp: false }) // Avoid double 402 handling; mppx is configured below.
await provider.request({ method: 'wallet_connect' })

const mppx = Mppx.create({
  methods: [tempo({
    account: provider.getAccount({ signable: true }),
    getClient: provider.getClient,
  })],
  polyfill: false, // [!code hl]
})

const response = await mppx.fetch('https://mpp.dev/api/ping/paid') // [!code hl]
```

##### viem

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Mppx, tempo } from 'mppx/client'

const account = privateKeyToAccount('0xabc…123')

const mppx = Mppx.create({
  methods: [tempo({ account })],
  polyfill: false, // [!code hl]
})

const response = await mppx.fetch('https://mpp.dev/api/ping/paid') // [!code hl]
```
:::

### Request protected resources

Use `fetch`. Payment happens when a server returns `402`.

```ts
const response = await fetch('https://mpp.dev/api/ping/paid')
```
::::

## Learn more

### Wagmi

You can inject a [Wagmi](https://wagmi.sh) connector into Mppx by passing the `getConnectorClient` function.

:::code-group
```ts twoslash [example.ts]
import { createConfig, http } from 'wagmi'
import { getConnectorClient } from 'wagmi/actions'
import { tempoModerato } from 'viem/chains'
import { Mppx, tempo } from 'mppx/client'

declare const connectors: Parameters<typeof createConfig>[0]['connectors']
// ---cut---
const config = createConfig({
  connectors,
  chains: [tempoModerato],
  transports: {
    [tempoModerato.id]: http(),
  },
})

Mppx.create({
  methods: [tempo({
    getClient: (parameters) =>
      getConnectorClient(config, parameters as any),
  })],
})
```

```ts twoslash [config.ts]
import { createConfig, http } from 'wagmi'
import { webAuthn } from 'wagmi/tempo'
import { tempoModerato } from 'viem/chains'

export const config = createConfig({
  chains: [tempoModerato],
  connectors: [
    webAuthn({
      authUrl: 'https://accounts.tempo.xyz',
    }),
  ],
  transports: {
    [tempoModerato.id]: http(),
  },
})
```
:::

### Per-request accounts

Pass accounts on individual requests instead of at setup:

#### Accounts SDK

```ts twoslash
import { Provider } from 'accounts'
import { Mppx, tempo } from 'mppx/client'

const provider = Provider.create({ mpp: false }) // Avoid double 402 handling; mppx is configured below.
await provider.request({ method: 'wallet_connect' })

const mppx = Mppx.create({
  methods: [tempo({
    getClient: provider.getClient,
  })],
  polyfill: false,
})

const response = await mppx.fetch('https://mpp.dev/api/ping/paid', {
  // [!code hl:start]
  context: {
    account: provider.getAccount({ signable: true }),
  }
  // [!code hl:end]
})
```

#### viem

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Mppx, tempo } from 'mppx/client'

const mppx = Mppx.create({
  methods: [tempo()],
  polyfill: false,
})

const response = await mppx.fetch('https://mpp.dev/api/ping/paid', {
  // [!code hl:start]
  context: {
    account: privateKeyToAccount('0xabc…123'),
  }
  // [!code hl:end]
})
```

### Manual payment handling

Use `Mppx.create` for full control over the payment flow:

* Present payment UI before paying
* Implement custom retry logic
* Handle Credentials manually

#### Accounts SDK

```ts twoslash
import { Provider } from 'accounts'
import { Mppx, tempo } from 'mppx/client'

const provider = Provider.create({ mpp: false }) // Avoid double 402 handling; mppx is configured below.
await provider.request({ method: 'wallet_connect' })

const mppx = Mppx.create({
  methods: [tempo({
    getClient: provider.getClient,
  })],
  // [!code hl:start]
  polyfill: false,
  // [!code hl:end]
})

// [!code hl:start]
const response = await fetch('https://mpp.dev/api/ping/paid')

if (response.status === 402) {
  const credential = await mppx.createCredential(response, {
    account: provider.getAccount({ signable: true }),
  })

  const paidResponse = await fetch('https://mpp.dev/api/ping/paid', {
    headers: { Authorization: credential },
  })
}
// [!code hl:end]
```

#### viem

```ts twoslash
import { Mppx, tempo } from 'mppx/client'
import { privateKeyToAccount } from 'viem/accounts'

const mppx = Mppx.create({
  methods: [tempo()],
  // [!code hl:start]
  polyfill: false,
  // [!code hl:end]
})

// [!code hl:start]
const response = await fetch('https://mpp.dev/api/ping/paid')

if (response.status === 402) {
  const credential = await mppx.createCredential(response, {
    account: privateKeyToAccount('0x...'),
  })

  const paidResponse = await fetch('https://mpp.dev/api/ping/paid', {
    headers: { Authorization: credential },
  })
}
// [!code hl:end]
```

### Payment Receipts

On success, the server returns a `Payment-Receipt` header:

```ts
import { Receipt } from 'mppx'

const response = await fetch('https://mpp.dev/api/ping/paid')

const receipt = Receipt.fromResponse(response) // [!code hl]

console.log(receipt.status)     
// @log: success
console.log(receipt.reference)
// @log: 0xtx789abc...
console.log(receipt.timestamp)
// @log: 2025-01-15T12:00:00Z
```

## Next steps

[Server quickstart](/quickstart/server) — Learn how to charge for resources

[Mppx.create reference](/sdk/typescript/client/Mppx.create) — Full API documentation