# 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

| I want to… | Start here |
| --- | --- |
| Sell a course, workshop, download, or product | [Sell your first offer](https://plandalf.com/docs/start/first-checkout) |
| Sell places at an event | [Sell event tickets](https://plandalf.com/docs/start/sell-event-tickets) |
| Put checkout on an existing page | [Add checkout to your site](https://plandalf.com/docs/start/add-to-site) |
| Change an offer at a deadline | [Run a deadline](https://plandalf.com/docs/start/run-a-deadline) |
| Unlock a paid feature after purchase | [Protect a feature](https://plandalf.com/docs/start/protect-a-feature) |

Open **Getting started** in the Start sidebar to move between these walkthroughs. [Product guides](https://plandalf.com/docs/product-guides) cover offer and promo setup in depth; [SDK examples](https://plandalf.com/docs/guides) 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.

<scalar-tabs default="HTML">
<scalar-tab title="HTML">

```html title="course.html" lineNumbers lineNumberStart=1 highlight="2"
<script defer src="https://your-org.plandalf.dev/js/plandalf-sdk.js"></script>
<button data-plandalf-present="ceramics-course">Join the course</button>
```

The browser SDK binds the button. Your server still confirms purchase before granting access.

</scalar-tab>
<scalar-tab title="JavaScript">

```javascript title="checkout.js" lineNumbers lineNumberStart=1 highlight="6-7"
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.
}
```

</scalar-tab>
<scalar-tab title="React">

```tsx title="Upgrade.tsx" lineNumbers lineNumberStart=1 highlight="4,7"
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>
  )
}
```

</scalar-tab>
</scalar-tabs>

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](https://plandalf.com/docs/guides/await-a-checkout) for the setup steps.

## Migrate an existing integration

The [Plandalf v1 migration guide](https://plandalf.com/docs/migrations/plandalf-v1) 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](https://plandalf.com/docs/sdk) to see how checkout handles, promo monitors, identity, and gates work together. Click [`identify()`](https://plandalf.com/docs/sdk/identify) or [`present()`](https://plandalf.com/docs/sdk/present) to inspect the browser functions. The [package reference](https://plandalf.com/docs/packages) lists every exported class, function, hook, and type under `@plandalf/sdk` or `@plandalf/react`.

## Public package reference

[`@plandalf/sdk`](https://plandalf.com/docs/packages/sdk) contains the JavaScript class, handles, inputs, and result types. [`@plandalf/react`](https://plandalf.com/docs/packages/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.

| Package | Exported symbols |
| --- | ---: |
| [@plandalf/sdk](https://plandalf.com/docs/packages/sdk) | 71 |
| [@plandalf/react](https://plandalf.com/docs/packages/react) | 41 |

> [!NOTE]
> Generated from Numi source revision [fc6f42b5ade3](https://github.com/plandalf/numi/commit/fc6f42b5ade3d63b71623934838a6509f17203e2). 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.

Source: https://plandalf.com/docs