Event Listeners

The SDK emits events when important actions occur. Use event listeners to respond to these actions in your application.

Adding Event Listeners

Copy
Loby.addEventListener('eventName', callback)

Removing Event Listeners

Copy
Loby.removeEventListener('eventName', callback)

Note: You must pass the same function reference to remove a listener. Anonymous functions cannot be removed.

Available Events

Event	Description
signIn	Fired when a user signs in
orderCompleted	Fired when an order (membership, ticket, or event) is completed
orderRefunded	Fired when an order is refunded or cancelled

Event: signIn

Fired when a user successfully signs in.

Copy
Loby.addEventListener('signIn', async () => {
  const user = await Loby.getUser()
  console.log('User signed in:', user.firstName)
})

Use Cases

• Update navigation to show user name
• Load user-specific content
• Show personalized recommendations

Event: orderCompleted

Fired when a user completes a purchase (membership, ticket, or event).

Copy
Loby.addEventListener('orderCompleted', () => {
  console.log('Order completed!')
  // Show thank you message
  // Refresh user's purchases
  // Track conversion
})

Use Cases

• Show confirmation message
• Update UI to reflect new membership status
• Track analytics/conversions
• Refresh displayed content

Event: orderRefunded

Fired when an order is refunded or cancelled.

Copy
Loby.addEventListener('orderRefunded', () => {
  console.log('Order refunded')
  // Update UI
  // Refresh user's tickets/memberships
})

Use Cases

• Update displayed tickets
• Refresh membership status
• Show confirmation of cancellation

Complete Example

Copy
window.lobyAsyncInit = async function() {
  await Loby.init({
    clientId: 1234,
    version: 'v1'
  })
  
  // Handle sign-in
  async function handleSignIn() {
    const user = await Loby.getUser()
    updateUserUI(user)
  }
  
  // Handle order completion
  function handleOrderCompleted() {
    showNotification('Thank you for your purchase!')
    refreshUserData()
  }
  
  // Handle refunds
  function handleOrderRefunded() {
    showNotification('Your order has been refunded.')
    refreshUserData()
  }
  
  // Register all listeners
  Loby.addEventListener('signIn', handleSignIn)
  Loby.addEventListener('orderCompleted', handleOrderCompleted)
  Loby.addEventListener('orderRefunded', handleOrderRefunded)
}

Cleanup

If your application uses a framework with component lifecycle (React, Vue, etc.), remember to remove listeners when components unmount:

React Example

Copy
import { useEffect } from 'react'

function MyComponent() {
  useEffect(() => {
    function handleSignIn() {
      // Handle sign in
    }
    
    Loby.addEventListener('signIn', handleSignIn)
    
    // Cleanup on unmount
    return () => {
      Loby.removeEventListener('signIn', handleSignIn)
    }
  }, [])
  
  return <div>...</div>
}

Vue Example

Copy
<script>
export default {
  mounted() {
    this.handleSignIn = () => {
      // Handle sign in
    }
    Loby.addEventListener('signIn', this.handleSignIn)
  },
  beforeUnmount() {
    Loby.removeEventListener('signIn', this.handleSignIn)
  }
}
</script>