Start with Plandalf

Choose what you want to do. Each path takes you from setup to a working checkout or feature, then links to the exact SDK inputs and types when you need them.

Getting started

Open Getting started in the Start sidebar to move between these walkthroughs. Product guides cover offer and promo setup in depth; SDK examples compare HTML, JavaScript, and React for real tasks.

See the idea in code

Suppose your site sells a ceramics course. You publish an offer with the slug ceramics-course, then your buy button opens it. Choose the integration that fits your site; all three use the same offer.

<script defer src="https://your-org.plandalf.dev/js/plandalf-sdk.js"></script>
<button data-plandalf-present="ceramics-course">Join the course</button>

import { Plandalf } from '@plandalf/sdk'

const sdk = new Plandalf({
  apiBase: 'https://your-org.plandalf.dev',
})
const handle = sdk.present('ceramics-course')
const result = await handle

if (result.status === 'complete') {
  // Ask your server to confirm the purchase before unlocking lessons.
}

import { PlandalfProvider, usePresent } from '@plandalf/react'

function UpgradeButton() {
  const { present, presenting } = usePresent()

  async function upgrade() {
    const result = await present('ceramics-course')
    if (result.status === 'complete') {
      // Ask your server to confirm the purchase before unlocking lessons.
    }
  }

  return <button disabled={presenting} onClick={upgrade}>Join the course</button>
}

export function Upgrade() {
  return (
    <PlandalfProvider apiBase="https://your-org.plandalf.dev">
      <UpgradeButton />
    </PlandalfProvider>
  )
}

All three open checkout. JavaScript and React await the outcome; HTML attributes bind the button automatically. Your server decides whether the customer gets course access. Read the course walkthrough for the setup steps.

Migrate an existing integration

The Plandalf v1 migration guide covers replacing workflow dispatchers and old checkout events, preserving billing rules, and rolling out one action at a time.

Understand the SDK

Start with the SDK overview to see how checkout handles, promo monitors, identity, and gates work together. Click identify() or present() to inspect the browser functions. The package reference lists every exported class, function, hook, and type under @plandalf/sdk or @plandalf/react.

Public package reference

@plandalf/sdk contains the JavaScript class, handles, inputs, and result types. @plandalf/react adds a provider, hooks, and components for React applications. Each package's types sit beside its functions in the Packages sidebar. The index below covers these two public entrypoints; implementation dependencies are not separate public references.

Note. Generated from Numi source revision fc6f42b5ade3. This describes the checked-out source, not a verified npm release. Numi currently has typecheck errors; verify the package build and runtime before treating these signatures as shipped.