Integration Guide

MoneyMQ is a developer-first payment infrastructure for accepting stablecoin payments. This guide walks you through the core integration patterns.

Prerequisites

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

Query your product catalog using the SDK. Products include their default price, features, and experiment configuration.

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

Accept one-time payments using stablecoin with browser extension wallets.

Checkout Flow

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

Accept payments from AI agents using the x402 protocol.

x402 Flow

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

Receive real-time payment notifications via Server-Sent Events.

PaymentStream

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;		}	}}

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.

On this page