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

Get User's Event Tickets

Retrieve tickets for events the current user has purchased:

Copy
const tickets = await Loby.getEventTickets()

Cancel an Event Order

Allow users to cancel their event order:

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

Edit an Event Order

Allow users to modify their event order (e.g., change time slot):

Copy
await 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>${ticket.eventName}</p>
        <p>${ticket.date}</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', () => {
    Loby.checkout({ type: 'EVENT', eventId: EVENT_ID })
  })
</script>