SDK

The SDK connects a published Plandalf offer to your own site. You can load its browser script and use HTML attributes, call the Plandalf class from @plandalf/sdk, or use @plandalf/react. The examples use the same offer slugs and checkout flow. Choose an integration if you want a complete example first.

How a checkout works

Publish an offer and keep its slug.
Open it with present() or render it inline with mount(). An HTML data-plandalf-present button is wired to present() by the browser bundle.
The call returns a handle. present() can be awaited for a FlowResult; the handle also exposes events and close(). mount() resolves when the inline flow is ready.
Confirm the purchase on your server before granting access, sending tickets, or fulfilling an order.

The browser bundle initializes itself and scans data-plandalf-* elements when it loads. For direct calls, plandalf.ready() runs your callback after initialization. The package class is initialized with your organization's apiBase; React supplies that class through PlandalfProvider.

browser-checkout.js

plandalf.ready(async () => {
  const handle = plandalf.present('upgrade')
  const result = await handle

  if (result.status === 'complete') {
    // Confirm access on your server before granting it.
  }
})

Browser functions

Open any function below for its arguments, types, return value, source, and a code example. This list is checked against Numi's browser entrypoint when the reference is generated.

Function	What it does
`plandalf.identify()`	Set the current visitor identity.
`plandalf.reset()`	Clear the current visitor identity.
`plandalf.getAnonId()`	Read the anonymous visitor ID.
`plandalf.present()`	Open an offer and get an awaitable flow handle.
`plandalf.mount()`	Mount an offer in an element.
`plandalf.addGate()`	Register a named access gate.
`plandalf.gate()`	Check access and present its fallback offer when needed.
`plandalf.ready()`	Run a callback when the SDK instance is ready.
`plandalf.promo()`	Open a live promo handle.
`plandalf.from()`	Find the live handle associated with an element.

setUser() and resetUser() still work as aliases for identify() and reset(). getInstance() is an internal escape hatch for harnesses. The list above uses the current public names.

Package class and React

The ES module Plandalf class supplies the underlying methods. Its reference includes configure(), getIdentity(), getRef(), getSessionAge(), getUserToken(), preload(), and setRef() alongside the checkout, promo, identity, and gate methods above. The class and browser object have different public surfaces: plandalf.preload is not on the browser object, and the browser promo() wrapper forwards only the slug.

The React provider creates the SDK context for hooks such as usePresent(), useGate(), and usePromo(). Their parameters and return types are in the React package sidebar. The named SDK exports are listed under @plandalf/sdk in Packages.

For option fields and result shapes, open the relevant function above and follow its linked type, or browse all package types.