Package: @ozentti/veyrun

ReleaseButton for x402 unlock flows.

Install

pnpm add @ozentti/veyrun

Quick start

import { ReleaseButton } from "@ozentti/veyrun";

export default function Page() {
  return (
    <ReleaseButton
      endpoint="/api/protected/article"
      onUnlock={(data, receipt) => console.log("Unlocked", data, receipt)}
    />
  );
}

Render unlocked content

<ReleaseButton
  endpoint="/api/protected/article"
  renderUnlocked={(data, receipt) => (
    <div style={{ padding: 16, border: "1px solid #e5e7eb" }}>
      <h2>Unlocked</h2>
      <p>{data?.content ?? "Paid."}</p>
      <pre style={{ marginTop: 12 }}>
        {JSON.stringify(receipt, null, 2)}
      </pre>
    </div>
  )}
/>

Props

• endpoint (string, required): x402-protected URL.
• method (string): HTTP method, default GET.
• fetchOptions (RequestInit): passed to fetch.
• autoFetch (boolean): fetch on mount, default true.
• labels (object): override button labels.
• renderUnlocked(data, receipt, state): replace the button with unlocked content.
• renderLocked(state, actions): override the locked rendering (advanced).
• containerClassName / containerStyle: style the wrapper container.
• onUnlock(data, receipt): called with JSON data + receipt when unlocked.
• onRequirement(requirement): called when Payment-Required is parsed.
• onDetected(detected): called when Veyrun extension is detected.
• onError(message): called on errors.
• onStatusChange(state): called when state changes.
• disabled (boolean): force-disable the button.

Notes

• Requires the Veyrun extension installed to complete payments.
• Works in Next.js, Vite, and plain React apps (JS/TS).