# Use with your app \[Handle payment-gated resources automatically]
## Overview
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:
## Manual mode
::::steps
### Install dependencies
:::code-group
```bash [npm]
npm install mppx viem
```
```bash [pnpm]
pnpm add mppx viem
```
```bash [bun]
bun add mppx viem
```
:::
### Define an account
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
const account = privateKeyToAccount('0xabc…123')
```
:::tip
With Tempo, you can also use [Passkey or WebCrypto accounts](https://viem.sh/tempo/accounts).
:::
### Create payment handler
Call `Mppx.create` at startup. This polyfills the global `fetch` to automatically handle `402` payment challenges.
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Mppx, tempo } from 'mppx/client' // [!code hl]
const account = privateKeyToAccount('0xabc…123')
Mppx.create({ // [!code hl]
methods: [tempo({ account })], // [!code hl]
}) // [!code hl]
```
:::tip
If you want to avoid polyfilling, use the bound `fetch` instead.
```ts
const mppx = Mppx.create({
polyfill: false, // [!code hl]
methods: [tempo({ account })]
})
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[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, KeyManager } from 'wagmi/tempo'
import { tempoModerato } from 'viem/chains'
declare const keyManager: KeyManager.KeyManager
// ---cut---
export const config = createConfig({
connectors: [webAuthn({ keyManager })],
chains: [tempoModerato],
transports: {
[tempoModerato.id]: http(),
},
})
```
:::
### Per-request accounts
Pass accounts on individual requests instead of at setup:
```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Mppx, tempo } from 'mppx/client'
const mppx = Mppx.create({
polyfill: false,
methods: [tempo()]
})
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
```ts twoslash
import { Mppx, tempo } from 'mppx/client'
import { privateKeyToAccount } from 'viem/accounts'
const mppx = Mppx.create({
// [!code hl:start]
polyfill: false,
// [!code hl:end]
methods: [tempo()],
})
// [!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