Sell tickets to an event

Imagine your event page announces a one-day workshop. It has the date, venue, and a Get a ticket button. Publish a ticket offer in Plandalf, then let the button open its checkout.

Set it up

Publish an offer for the ticket. This example calls it spring-workshop-ticket.
Put the button on your event page, using your real organization host in the script URL or apiBase.
Have your server confirm the purchase before it issues a ticket or reserves a place. The browser result alone is not a ticket record.

The browser bundle automatically binds the ticket button. No application JavaScript is needed to open checkout.

event.html

<script defer src="https://your-org.plandalf.dev/js/plandalf-sdk.js"></script>
<button data-plandalf-present="spring-workshop-ticket">Get a ticket</button>

Issue the ticket only after your server confirms the purchase. For an immediate page message based on the checkout result, use the JavaScript or React tab.

tickets.js

import { Plandalf } from '@plandalf/sdk'

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

button.addEventListener('click', async () => {
  const result = await sdk.present('spring-workshop-ticket')
  message.textContent = result.status === 'complete'
    ? 'Checkout finished. We are confirming your ticket.'
    : 'You can come back for a ticket later.'
})

event.html

<button id="get-ticket">Get a ticket</button>
<p id="ticket-message" role="status"></p>

TicketButton.tsx

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

function TicketButton() {
  const { present, presenting } = usePresent()
  const [message, setMessage] = useState('')

  async function getTicket() {
    const result = await present('spring-workshop-ticket')
    setMessage(result.status === 'complete'
      ? 'Checkout finished. We are confirming your ticket.'
      : 'You can come back for a ticket later.')
  }

  return <>
    <button disabled={presenting} onClick={getTicket}>Get a ticket</button>
    <p role="status">{message}</p>
  </>
}

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

The page can respond immediately to a completed or dismissed checkout. Your ticketing system still needs a confirmed purchase from your server before sending a ticket, QR code, or admission confirmation. Add your site's usual error handling for failed checkout requests.

For exact inputs and outputs, inspect present(), FlowOpenOptions, and FlowResult. To add an early-bird price to one ticket offer, configure promo tiers and pass the promo slug to present().