Playground 101

This section is an interactive guide giving you a full overview of what MoneyMQ does. It connects directly to your local MoneyMQ installation, so you can run the code snippets and interact with your own setup in real-time.

Prerequisites

Before you start, make sure you have the MoneyMQ CLI installed and running.

1. Install MoneyMQ

Run the following command to install the MoneyMQ CLI:

curl -sSL https://install.money.mq | bash

2. Start the Sandbox

Run the following command to start the MoneyMQ sandbox:

moneymq sandbox

3. Verify Sandbox Status

Waiting for sandbox localhost:8488

Some browsers restrict connections to localhost from hosted pages. If the status doesn't update, try a different browser or check your browser settings — your sandbox is likely running fine!

Catalog

MoneyMQ is built around two core primitives: Catalog and Payments.

In this section, we focus on Catalog. Catalogs are managed using declarative code, enabling better version control and collaboration. Products can be reviewed in pull requests, catalog deployments managed via GitOps, and updates triggered through your favorite CI/CD pipeline.

name: Weather Starter
description: Perfect for hobby projects and prototypes.
features:
  requests_per_day:
    value: 100
  forecast_days:
    value: 3
  historical_data:
    value: false
price:
  amounts:
    usd: 0
  pricing_type: recurring
  recurring:
    interval: month

name: Weather Pro
description: For apps that need reliable weather data.
features:
  requests_per_day:
    value: 10000
  forecast_days:
    value: 14
  historical_data:
    value: true
price:
  amounts:
    usd: 29.00
  pricing_type: recurring
  recurring:
    interval: month

name: Weather API
description: Real-time weather data and forecasts
active: true
features:
  requests_per_day:
    name: Daily Requests
    description: API calls included per day
  forecast_days:
    name: Forecast Range
    description: Days of forecast data available
  historical_data:
    name: Historical Data
    description: Access to past weather records

Listing Catalog

Interactive

import { MoneyMQ } from '@moneymq/sdk';

const moneymq = new MoneyMQ({
	endpoint: 'http://localhost:8488',
});

const catalog = await moneymq.catalog.list();

console.log(JSON.stringify(catalog, null, 2));

import { MoneyMQ } from '@moneymq/sdk';const moneymq = new MoneyMQ({	endpoint: 'http://localhost:8488',});const catalog = await moneymq.catalog.list();console.log(JSON.stringify(catalog, null, 2));

Payments for Users: Checkout Flow

Accept one-time payments using stablecoin. Many crypto-native users manage their funds through browser extension wallets like Phantom or Backpack. MoneyMQ integrates seamlessly with these wallets, allowing customers to approve payments with a single click.

import { MoneyMQ } from '@moneymq/sdk'
import { MoneyMQProvider, CheckoutButton } from '@moneymq/react'

const client = new MoneyMQ({
	endpoint: 'http://localhost:8488',
})

// Fetch product and price
const catalog = await client.catalog.list()
const product = catalog.data[0]
const prices = await client.catalog.prices.list({ product: product.id })
const price = prices.data[0]

function App() {
	return (
		<MoneyMQProvider client={client}>
			<CheckoutButton
				basket={[{ product, price }]}
				onSuccess={(payment) => {
					console.log('Payment confirmed:', payment.signature)
				}}
			>
				Pay
			</CheckoutButton>
		</MoneyMQProvider>
	)
}

import { MoneyMQ } from '@moneymq/sdk'import { MoneyMQProvider, CheckoutButton } from '@moneymq/react'const client = new MoneyMQ({	endpoint: 'http://localhost:8488',})// Fetch product and priceconst catalog = await client.catalog.list()const product = catalog.data[0]const prices = await client.catalog.prices.list({ product: product.id })const price = prices.data[0]function App() {	return (		<MoneyMQProvider client={client}>			<CheckoutButton				basket={[{ product, price }]}				onSuccess={(payment) => {					console.log('Payment confirmed:', payment.signature)				}}			>				Pay			</CheckoutButton>		</MoneyMQProvider>	)}

Payments for Agents: x402 Flow

Accept payments from AI agents using the x402 protocol. Build AI agents that can autonomously pay for API access. When an AI agent hits your endpoint, payment is negotiated and settled automatically within a single HTTP request cycle.

Interactive

import { MoneyMQ } from '@moneymq/sdk';
import { wrapFetchWithPayment } from 'x402-fetch';

const moneymq = new MoneyMQ({
	endpoint: 'http://localhost:8488',
});

// Fetch catalog
const catalog = await moneymq.catalog.list();
const product = catalog.data[0];

// Get signer for sandbox account by label
const payer = await moneymq.x402.getSigner({ tag: 'alice' });

// Get x402 config from server
const config = await moneymq.x402.getConfig();

// Create payment-enabled fetch (max = product price)
const fetchWithPayment = wrapFetchWithPayment(
	fetch,
	payer,
	BigInt(product.defaultPrice?.unitAmount * 10_000), // cents → USDC (6 decimals)
	undefined,
	config,
);

// Access a paid API - payment is handled automatically
const response = await fetchWithPayment(
	product.accessUrl,
	{ method: 'GET' },
);

const data = await response.json();
console.log(data);

import { MoneyMQ } from '@moneymq/sdk';import { wrapFetchWithPayment } from 'x402-fetch';const moneymq = new MoneyMQ({	endpoint: 'http://localhost:8488',});// Fetch catalogconst catalog = await moneymq.catalog.list();const product = catalog.data[0];// Get signer for sandbox account by labelconst payer = await moneymq.x402.getSigner({ tag: 'alice' });// Get x402 config from serverconst config = await moneymq.x402.getConfig();// Create payment-enabled fetch (max = product price)const fetchWithPayment = wrapFetchWithPayment(	fetch,	payer,	BigInt(product.defaultPrice?.unitAmount * 10_000), // cents → USDC (6 decimals)	undefined,	config,);// Access a paid API - payment is handled automaticallyconst response = await fetchWithPayment(	product.accessUrl,	{ method: 'GET' },);const data = await response.json();console.log(data);

Payment Events

MoneyMQ emits real-time events for all payment activity. Use event readers to receive events with guaranteed delivery - the server tracks your position and replays missed events on reconnect.

Interactive

import { MoneyMQ } from '@moneymq/sdk';

const moneymq = new MoneyMQ({
	endpoint: 'http://localhost:8488',
});

// Create a payment stream that listens for new transactions
const stream = moneymq.payment.paymentStream();

// Stream transactions using async iterator
for await (const tx of stream.transactions()) {
	console.log('New transaction:', tx.id, tx.payment?.amount, tx.basket[0]?.productId);

	// Listen for payment settlement
	for await (const event of tx.events()) {
		if (event.type === 'payment:settled') {
			console.log('Payment settled:', event.data.transactionSignature);
			await tx.attach('fulfillment', { orderId: tx.id });
			break;
		}
	}
}

import { MoneyMQ } from '@moneymq/sdk';const moneymq = new MoneyMQ({	endpoint: 'http://localhost:8488',});// Create a payment stream that listens for new transactionsconst stream = moneymq.payment.paymentStream();// Stream transactions using async iteratorfor await (const tx of stream.transactions()) {	console.log('New transaction:', tx.id, tx.payment?.amount, tx.basket[0]?.productId);	// Listen for payment settlement	for await (const event of tx.events()) {		if (event.type === 'payment:settled') {			console.log('Payment settled:', event.data.transactionSignature);			await tx.attach('fulfillment', { orderId: tx.id });			break;		}	}}

For more details on event types and stateless streams, see the Payment Events guide.

Recap

In this guide, you've explored the two core primitives of MoneyMQ:

Catalog — Declarative product and pricing management with GitOps-friendly workflows
Payments — Accept payments from users via browser wallets, or from AI agents via the x402 protocol

From here, your setup can be deployed and made available on your own infrastructure by running MoneyMQ as a sidecar, or by using MoneyMQ Cloud for a fully managed solution.

Prerequisites

1. Install MoneyMQ

2. Start the Sandbox

3. Verify Sandbox Status

Catalog

Listing Catalog

Payments for Users: Checkout Flow

Payments for Agents: x402 Flow

Payment Events

Recap

Next Steps

Catalog

Payments

On this page