Checkout Flow

The checkout flow is designed for human users who pay through browser extension wallets like Phantom or Backpack. MoneyMQ provides React components that handle wallet connection, payment UI, and transaction confirmation.

Installation

npm install @moneymq/sdk @moneymq/react

pnpm add @moneymq/sdk @moneymq/react

yarn add @moneymq/sdk @moneymq/react

bun add @moneymq/sdk @moneymq/react

Quick Start

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)
				}}
			>
				Buy Now
			</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)				}}			>				Buy Now			</CheckoutButton>		</MoneyMQProvider>	)}

How It Works

User clicks the checkout button - Opens the MoneyMQ checkout modal
User connects wallet - Selects browser wallet (Phantom, Backpack, etc.)
User approves payment - Signs the transaction in their wallet
Payment is verified - MoneyMQ verifies the transaction on-chain
Payment is settled - Funds are transferred and onSuccess is called

Checkout Button Props

Prop	Type	Description
`basket`	`Array<{ product, price, quantity? }>`	Items to purchase
`onSuccess`	`(payment: Payment) => void`	Called when payment succeeds
`onError`	`(error: Error) => void`	Called when payment fails
`children`	`ReactNode`	Button content

Multiple Items

<CheckoutButton
  basket={[
    { product: productA, price: priceA, quantity: 1 },
    { product: productB, price: priceB, quantity: 2 },
  ]}
  onSuccess={(signature) => {
    console.log('Payment confirmed:', signature);
  }}
>
  Checkout ({totalItems} items)
</CheckoutButton>

Custom Styling

The CheckoutButton accepts standard button props:

<CheckoutButton
  basket={basket}
  onSuccess={handleSuccess}
  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg"
>
  Pay ${total.toFixed(2)}
</CheckoutButton>

Handling Payment Events (Backend)

For backend order fulfillment, use a processor to listen for all transactions:

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

const moneymq = new MoneyMQ({
  endpoint: 'http://localhost:8488',
  secret: process.env.MONEYMQ_SECRET,
});

// 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') {
      // Process the order
      const order = await fulfillOrder(tx.basket[0]?.productId, event.data.payer);

      // Attach order data (triggers transaction:completed event)
      await tx.attach('fulfillment', {
        orderId: order.id,
        trackingNumber: order.tracking,
      });
      break; // Done with this transaction
    }
  }
}

Next Steps

x402 Flow - Accept payments from AI agents
Payment Events - Real-time payment notifications

On this page