Event Checkout

Open a checkout flow for event ticket purchases. Events typically have specific dates, times, and capacity limits.

Basic Usage

Copy
Loby.checkout({
  type: 'EVENT',
  eventId: 'your-event-uuid'
})

This opens the event checkout modal for the specified event, allowing users to select time slots (if applicable) and purchase tickets.

Parameters

Parameter	Type	Required	Description
type	string	Yes	Must be 'EVENT'
eventId	string	Yes	UUID of the event
tickets	array	No	Array of event ticket types to pre-select. Each item has eventTicketTypeId (string) and quantity (number, defaults to 1). If omitted, the checkout opens with no tickets pre-selected.

Pre-selecting Event Ticket Types

You can pre-populate the checkout with specific event ticket types and quantities:

Copy
Loby.checkout({
  type: 'EVENT',
  eventId: 'your-event-uuid',
  tickets: [
    { eventTicketTypeId: 'event-ticket-type-uuid-1', quantity: 2 },
    { eventTicketTypeId: 'event-ticket-type-uuid-2', quantity: 1 }
  ]
})

Example: Event Page with Purchase Button

Copy
<article class="event">
  <h1>Summer Concert Series</h1>
  <p>Join us for an evening of live music!</p>
  <p>Date: July 15, 2024</p>
  <button id="buy-event-tickets" data-event-id="abc123">
    Buy Tickets
  </button>
</article>

<script>
  document.getElementById('buy-event-tickets').addEventListener('click', (e) => {
    const eventId = e.target.dataset.eventId
    Loby.checkout({
      type: 'EVENT',
      eventId: eventId
    })
  })
</script>

Managing Event Tickets

Call waitForCheckoutReady() before checkout or editEventOrder. If checkout is not ready, those methods return without opening a dialog and without throwing.

Get User's Event Tickets

Retrieve tickets for events the current user has purchased. An optional filter argument is accepted and ignored.

Copy
const tickets = await Loby.getEventTickets()

Each ticket looks like:

Copy
{
  id: "ticket-uuid",
  eventId: "event-uuid",
  eventTicketTypeId: "type-uuid",
  variantId: null,
  qrData: "...",
  orderId: "order-uuid",
  deletedAt: null,
  currentEvent: {
    eventFields: [],
    ticketTypes: []
  }
}

There is no flat eventName or date on the ticket. Use eventId, orderId, and currentEvent as needed.

Cancel an Event Order

Opens a refund/cancel dialog. It is not an async refund — do not await it for a completed cancellation. Listen for orderRefunded instead.

Copy
Loby.cancelEventOrder({ orderId: 'order-uuid' })

Edit an Event Order

Opens checkout to change an existing event order. Requires waitForCheckoutReady() first.

Copy
await Loby.waitForCheckoutReady()
Loby.editEventOrder({
  orderId: 'order-uuid',
  eventId: 'event-uuid'
})

Complete Example: Event with Ticket Management

Copy
<div id="event-section">
  <h2>Your Tickets</h2>
  <div id="user-tickets"></div>
  <button id="buy-tickets">Buy Event Tickets</button>
</div>

<script>
  const EVENT_ID = 'your-event-uuid'
  
  window.lobyAsyncInit = async function() {
    await Loby.init({
      clientId: 1234,
      version: 'v1'
    })
    
    // Load user's tickets
    await loadUserTickets()
    
    // Listen for order changes
    Loby.addEventListener('orderCompleted', loadUserTickets)
    Loby.addEventListener('orderRefunded', loadUserTickets)
  }
  
  async function loadUserTickets() {
    const user = await Loby.getUser()
    if (!user) return
    
    const tickets = await Loby.getEventTickets()
    displayTickets(tickets)
  }
  
  function displayTickets(tickets) {
    const container = document.getElementById('user-tickets')
    container.innerHTML = tickets.map(ticket => `
      <div class="ticket">
        <p>Order ${ticket.orderId}</p>
        <button onclick="editOrder('${ticket.orderId}')">Edit</button>
        <button onclick="cancelOrder('${ticket.orderId}')">Cancel</button>
      </div>
    `).join('')
  }
  
  function editOrder(orderId) {
    Loby.editEventOrder({ orderId, eventId: EVENT_ID })
  }
  
  function cancelOrder(orderId) {
    Loby.cancelEventOrder({ orderId })
  }
  
  document.getElementById('buy-tickets').addEventListener('click', async () => {
    await Loby.waitForCheckoutReady()
    Loby.checkout({ type: 'EVENT', eventId: EVENT_ID })
  })
</script>