Add checkout to a button

Publish an offer with the slug upgrade, then connect a button on your page. HTML attributes need only the browser bundle. JavaScript and React let the page await the checkout result and refresh access from your server.

The SDK scans the page and binds the button automatically. Use your organization's SDK URL.

upgrade.html

<script defer src="https://your-org.plandalf.dev/js/plandalf-sdk.js"></script>
<button data-plandalf-present="upgrade">Upgrade</button>

This opens checkout without application JavaScript. If the upgrade grants access to a paid feature, your server must confirm the purchase before granting it.

Import the SDK class when your site already has JavaScript and you want the checkout result in the page.

upgrade.js

import { Plandalf } from '@plandalf/sdk'

const sdk = new Plandalf({ apiBase: 'https://your-org.plandalf.dev' })
const button = document.querySelector('#upgrade')

button.addEventListener('click', async () => {
  const result = await sdk.present('upgrade')
  if (result.status === 'complete') {
    // Refresh the customer's access from your server.
  }
})

upgrade.html

<button id="upgrade">Upgrade</button>

Put PlandalfProvider above the component, then use usePresent() inside it.

Upgrade.tsx

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

function UpgradeButton() {
  const { present, presenting } = usePresent()
  async function upgrade() {
    const result = await present('upgrade')
    if (result.status === 'complete') {
      // Refresh the customer's access from your server.
    }
  }

  return (
    <button disabled={presenting} onClick={upgrade}>
      {presenting ? 'Opening…' : 'Upgrade'}
    </button>
  )
}

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

usePresent() returns the core FlowHandle<FlowResult>, so the same awaitable result and type definitions apply. The HTML trigger opens the same offer but has no Promise in the markup. The checked-out Numi React package currently has typecheck errors; verify a matching package build before using it in production.