Merchant integration

npm install @withlocus/checkout-react

import { LocusCheckout } from '@withlocus/checkout-react';

function CheckoutPage({ sessionId }: { sessionId: string }) {
  return (
    <LocusCheckout
      sessionId={sessionId}
      mode="embedded"
      onSuccess={(data) => {
        console.log('Paid!', data.txHash);
        // Show confirmation. Fulfill orders after server-side verification.
      }}
      onCancel={() => {
        console.log('Buyer cancelled');
      }}
      onError={(error) => {
        console.error('Checkout error:', error.message);
      }}
    />
  );
}

{
  "event": "checkout.session.paid",
  "data": {
    "sessionId": "SESSION_ID",
    "amount": "25.00",
    "currency": "USDC",
    "paymentTxHash": "0x...",
    "payerAddress": "0x...",
    "paidAt": "2026-03-01T12:00:00.000Z",
    "metadata": { "userId": "usr_123", "plan": "pro" }
  },
  "timestamp": "2026-03-01T12:00:01.000Z"
}

import crypto from 'crypto';

function verifyWebhook(payload: string, signature: string, secret: string): boolean {
  const expected = 'sha256=' + crypto
    .createHmac('sha256', secret)
    .update(payload)
    .digest('hex');
  const receivedBytes = Buffer.from(signature);
  const expectedBytes = Buffer.from(expected);
  return receivedBytes.length === expectedBytes.length &&
    crypto.timingSafeEqual(receivedBytes, expectedBytes);
}

import { useLocusCheckout } from '@withlocus/checkout-react';

function PayButton({ sessionId }: { sessionId: string }) {
  const { openPopup, redirectToCheckout, getCheckoutUrl } = useLocusCheckout();

  return (
    <div>
      <button onClick={() => openPopup(sessionId)}>Pay in popup</button>
      <button onClick={() => redirectToCheckout(sessionId)}>Pay</button>
      <a href={getCheckoutUrl(sessionId)}>Open checkout</a>
    </div>
  );
}