Client quickstart

Polyfill fetch to handle 402 responses. Your existing code works unchanged — payments happen in the background.

Install MPP client dependencies

Define the MPP payer account

import { privateKeyToAccount } from 'viem/accounts'
 
const account = privateKeyToAccount('0xabc…123')

Create the MPP payment handler

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

import { privateKeyToAccount } from 'viem/accounts'
import { Mppx, tempo } from 'mppx/client'
 
const account = privateKeyToAccount('0xabc…123')
 
Mppx.create({
  methods: [tempo({ account })],
})

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

const mppx = Mppx.create({
  polyfill: false,
  methods: [tempo({ account })]
})
 
const response = await mppx.fetch('https://api.example.com/resource')

Request MPP-protected resources

Use fetch. Payment happens when a server returns 402.

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

Advanced MPP client patterns

Use MPP with Wagmi

You can inject a Wagmi connector into Mppx by passing the getConnectorClient function.

import { Mppx, tempo } from 'mppx/client'
import { getConnectorClient } from 'wagmi/actions'
import { config } from './config'
 
Mppx.create({
  methods: [tempo({
    getClient: (parameters) => getConnectorClient(config, parameters),
  })],
})

import { createConfig, http } from 'wagmi'
import { tempoModerato } from 'viem/chains'
import { tempoWallet } from 'wagmi/connectors'
 
export const config = createConfig({
  connectors: [tempoWallet()],
  chains: [tempoModerato],
  transports: {
    [tempoModerato.id]: http(),
  },
})

Use per-request payer accounts

Pass accounts on individual requests instead of at setup:

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://api.example.com/resource', {
  context: {
    account: privateKeyToAccount('0xabc…123'),
  }
})

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

import { Mppx, tempo } from 'mppx/client'
import { privateKeyToAccount } from 'viem/accounts'
 
const mppx = Mppx.create({
  polyfill: false,
  methods: [tempo()],
})
 
const response = await fetch('https://api.example.com/resource')
 
if (response.status === 402) {
  const credential = await mppx.createCredential(response, {
    account: privateKeyToAccount('0x...'),
  })
 
  const paidResponse = await fetch('https://api.example.com/resource', {
    headers: { Authorization: credential },
  })
}

Read MPP payment receipts

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

import { Receipt } from 'mppx'
 
const response = await fetch('https://api.example.com/resource')
 
const receipt = Receipt.fromResponse(response)
 
console.log(receipt.status)
// success
console.log(receipt.reference)
// 0xtx789abc...

Next steps for MPP clients

Server quickstart

Add payment gating to your HTTP endpoints

Accept one-time payments

Charge per request with on-chain settlement

Full SDK reference

Complete mppx client API documentation

Was this helpful?

Suggest changes to this page