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: paste a prompt into your coding agent for fast setup
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

Install dependencies

Define an account

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

Create payment handler

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

import {  } from 'viem/accounts'
import { ,  } from 'mppx/client'
 
const  = ('0xabc…123')
 
.({ 
  : [({  })], 
})

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://mpp.dev/api/ping/paid')

Request protected resources

Use fetch. Payment happens when a server returns 402.

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

Learn more

Wagmi

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

const  = ({
  ,
  : [],
  : {
    [.]: (),
  },
})
 
.({
  : [({
    : () =>
      (,  as any),
  })],
})

import { ,  } from 'wagmi'
import {  } from 'wagmi/tempo'
import {  } from 'viem/chains'
 
export const  = ({
  : [],
  : [
    ({
      : 'https://accounts.tempo.xyz',
    }),
  ],
  : {
    [.]: (),
  },
})

Per-request accounts

Pass accounts on individual requests instead of at setup:

import {  } from 'viem/accounts'
import { ,  } from 'mppx/client'
 
const  = .({
  : false,
  : [()]
})
 
const  = await .('https://mpp.dev/api/ping/paid', {
  : {
    : ('0xabc…123'),
  }
})

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

import { ,  } from 'mppx/client'
import {  } from 'viem/accounts'
 
const  = .({
  : false,
  : [()],
})
 
const  = await ('https://mpp.dev/api/ping/paid')
 
if (. === 402) {
  const  = await .(, {
    : ('0x...'),
  })
 
  const  = await ('https://mpp.dev/api/ping/paid', {
    : { :  },
  })
}

Payment receipts

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

import { Receipt } from 'mppx'
 
const response = await fetch('https://mpp.dev/api/ping/paid')
 
const receipt = Receipt.fromResponse(response) 
 
console.log(receipt.status)     
success
console.log(receipt.reference)
0xtx789abc...
console.log(receipt.timestamp)
2025-01-15T12:00:00Z

Next steps

Server quickstart

Learn how to charge for resources

Mppx.create reference

Full API documentation

Suggest changes to this page