<!-- tempo-docs-context -->
> Source: [/docs/guide/machine-payments/client](https://tempo.xyz/developers/docs/guide/machine-payments/client.md)
> Section: [Machine Payments](https://tempo.xyz/developers/docs/agents.md). Pay for APIs, accept API payments, find services, and use MPP (https://mpp.dev).
> [Documentation index](https://tempo.xyz/developers/llms.txt) · [Docs skill](https://tempo.xyz/developers/SKILL.md)

> Tempo MCP: Use `search`, `find_pages`, `read_page`, and `code` at `https://mcp.tempo.xyz` for Tempo and related documentation.
> If an indexed page is missing or reflects an older site, read this site’s [documentation index](https://tempo.xyz/developers/llms.txt) and Markdown pages directly.

<span id="client-quickstart-build-an-mpp-client" />

# Pay for services

Use an MPP client to pay for an API request from your application. The client handles the payment challenge and retries with a credential using the account you configure. The examples below use a funded Tempo Mainnet account; use a testnet account only with a testnet service.

::::steps
### Install MPP client dependencies

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

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

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

### Define the MPP payer account

Keep the signing key on your server. Load it from an environment variable instead of putting it in application code.

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

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

:::tip
With Tempo, you can also use passkey or WebCrypto signing.
:::

### Create the MPP payment handler

Call `Mppx.create` at startup. This polyfills `fetch` to automatically handle `402` payment challenges.

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

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

Mppx.create({
  methods: [tempo({ account, allowedChainIds: [4217] })],
})
```

`tempo()` handles one-time charges and payment sessions. If the service uses sessions, set [`maxDeposit`](https://mpp.dev/sdk/typescript/client/Method.tempo#maxdeposit-optional) to cap the amount locked in a channel.

:::tip
If you want to avoid polyfilling, use the bound `fetch` instead.

```ts
const mppx = Mppx.create({
  polyfill: false,
  methods: [tempo({ account, allowedChainIds: [4217] })],
})

const response = await mppx.fetch('https://api.example.com/resource')
```
:::

### Request MPP-protected resources

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

```ts
const response = await fetch('https://api.example.com/resource')
```

In browsers, the fetch polyfill sends `Accept-Payment` to same-origin requests by default. For a paid API on another origin, configure [`acceptPaymentPolicy`](https://mpp.dev/sdk/typescript/client/Mppx.create#acceptpaymentpolicy-optional) for that origin if it supports the header.
::::

## Advanced MPP client patterns

### Use MPP with Wagmi

You can inject a [Wagmi](https://wagmi.sh) connector into Mppx by passing the `getConnectorClient` function. This example connects to Tempo Mainnet; connect the wallet before making a paid request.

:::code-group
```ts [example.ts]
import { Mppx, tempo } from 'mppx/client'
import { getConnectorClient } from 'wagmi/actions'
import { tempo as tempoMainnet } from 'viem/chains'
import { config } from './config'

Mppx.create({
  methods: [tempo({
    allowedChainIds: [tempoMainnet.id],
    getClient: ({ chainId }) => {
      if (chainId !== undefined && chainId !== tempoMainnet.id)
        throw new Error('This wallet supports Tempo Mainnet only')
      return getConnectorClient(config, { chainId: tempoMainnet.id })
    },
  })],
})
```

```ts [config.ts]
import { createConfig, http } from 'wagmi'
import { tempo as tempoMainnet } from 'viem/chains'
import { tempoWallet } from 'wagmi/connectors'

export const config = createConfig({
  connectors: [tempoWallet()],
  chains: [tempoMainnet],
  transports: {
    [tempoMainnet.id]: http(),
  },
})
```
:::

### Use per-request payer accounts

Pass accounts on individual requests instead of at setup:

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

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

const response = await mppx.fetch('https://api.example.com/resource', {
  context: {
    account: privateKeyToAccount(process.env.PRIVATE_KEY as `0x${string}`),
  },
})
```

### Handle MPP payments manually

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

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

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

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

const url = 'https://api.example.com/resource'
const request: RequestInit = { method: 'GET' }
const response = await mppx.rawFetch(url, request)

if (response.status === 402) {
  const payment = await mppx.preparePayment(response, { request })
  console.log(payment.challenge.request)

  // Review the payment terms before signing.
  const credential = await payment.createCredential({
    account: privateKeyToAccount(process.env.PRIVATE_KEY as `0x${string}`),
  })
  const paidRequest = payment.setCredential(request, credential)
  const paidResponse = await mppx.rawFetch(url, { ...paidRequest, redirect: 'manual' })
}
```

### Read MPP payment receipts

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

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

const response = await fetch('https://api.example.com/resource')

if (!response.ok) throw new Error(`Request failed: ${response.status}`)

const receipt = Receipt.fromResponse(response)

console.log(receipt.status)
// success
console.log(receipt.reference)
// 0x...
```

For a one-time charge, `reference` is the transaction hash. For a session, it is the channel ID; settlement has a separate transaction hash when the channel closes.

## Next steps for MPP clients

[Accept payments for an API](https://tempo.xyz/developers/docs/guide/machine-payments/server): Add payment gating to your HTTP endpoints

[Accept one-time payments](https://tempo.xyz/developers/docs/guide/machine-payments/one-time-payments): Charge per request with on-chain settlement

[Full SDK reference](https://mpp.dev/sdk/typescript/client/Mppx.create): Complete mppx client API documentation