Pay API

The drop-in entry point — same idea as a Stripe Buy Button. Give it a token and it handles method selection, checkout, and confirmation in one embed. It never sees your sk_… key; you mint a token server-side and pass only that to the browser.

npm install mooneum-js

<script type="module">
  import 'mooneum-js';
</script>

<mooneum-pay-button
  payment-link-id="pl_token_…"
  api-url="https://api.mooneum.com"
></mooneum-pay-button>

<script type="module">
  import 'mooneum-js';
</script>

Events

<mooneum-pay>, <mooneum-pay-button>, <mooneum-invoice>, and the wallet-connect components dispatch CustomEvents on themselves (they bubble and are composed, so a listener on document or any ancestor catches them too) — useful for things a webhook can't do, like updating the host page's own UI the instant checkout completes, without waiting on a server-to-server delivery.

document.addEventListener('payment-received', (e) => {
  const { token } = (e as CustomEvent).detail;
  // e.g. redirect to an order-confirmation page
});

If you also use the wallet-connect components (<mooneum-connect>, <mooneum-submit>) directly — <mooneum-pay> uses them internally for its "pay with a connected wallet" option — they dispatch their own events on document: wallet-connected (detail: { address, chainId, walletType }), wallet-disconnected, wallet-connect-closed, account-changed (detail: { address, chainId }), chain-changed (detail: { chainId }), and on the submit button itself: tx-submitted (detail: { txHash }), tx-confirmed (detail: { txHash, receipt }), tx-error (detail: { error, code }).

A full invoice document — organization name, invoice number, status, line items, and total — with a Pay action embedded automatically once the invoice is open or overdue.

npm install mooneum-js

<mooneum-invoice invoice-id="inv_…" api-url="https://api.mooneum.com"></mooneum-invoice>
 
<script type="module">
  import 'mooneum-js';
</script>

It reads from the same getPayable resolution Server-side uses, so there's nothing extra to mint or keep in sync — an Invoice id is already a valid token everywhere else in this SDK, including directly in <mooneum-pay-button>.

Listen for the embedded button's payment-received event if you need to react elsewhere on the page once payment completes — e.g. updating a surrounding order-history list.

Everything the widgets do client-side, callable directly — for teams building their own checkout UI from scratch.

import { HostedCheckoutClient } from '@mooneum/sdk';

const checkout = new HostedCheckoutClient({
  baseUrl: 'https://api.mooneum.com',
});
const payable = await checkout.getPayable(token);
// -> { name, description, amount, currency, isActive }

const attempt = await checkout.startCheckout(token, {
  method: 'CRYPTO',
  chain: 'ethereum',
});
// -> { token: checkoutToken, clientSecret?, publishableKey? }

const state = await checkout.getCheckout(attempt.token);
// -> { status, amount, assetSymbol, receiveAddress, paymentUri }

await checkout.checkPaid(attempt.token); // force an immediate on-chain check
await checkout.refreshCheckout(attempt.token); // re-quote an expired attempt

These live on the SDK's HostedCheckoutClient. See the API reference for the full Payment Links, Invoices, and Orders request/response shapes.

Payment-specific events

For a durable, server-to-server record of payment activity, use webhooks — the general webhook guide covers registration, signature verification, and delivery mechanics. Subscribe to payment.received (funds detected at the receive address) and payment.settled, plus the shared order.* lifecycle every vertical publishes (order.submitted, order.approved, order.confirmed, etc. — a Payment Link/Invoice checkout is an Order under the hood). See the Events reference for the complete, always-current list and payload shapes.