🎫

Event Tickets

Ticket sales, QR codes, and door scanning

Interactive Demo

Try the complete ticket flow: select tickets, complete purchase, then switch to "Door Scanner" to validate tickets.

🎉

Tech Conference 2025

March 15, 2025Convention Center, Freetown

General Admission

375 tickets remaining

NLe 50.00

0
NLe 0.00

VIP Access

30 tickets remaining

NLe 150.00

0
NLe 0.00

AI Integration Guide

Copy this prompt to your AI coding assistant to integrate Event Tickets.

Prompt for AI Assistant

bash
I want to add Peeap Event Tickets to my app. Here are the details:

"code-comment">## Installation
npm install @peeap/widgets

"code-comment">## Components Available
1. EventTicketSales - For selling tickets on your event page
2. TicketScanner - For scanning tickets at the door
3. EventDashboard - For managing events and viewing sales

"code-comment">## Basic Usage - Ticket Sales
import { EventTicketSales } from '@peeap/widgets'

function EventPage({ eventId }) {
  return (
    <EventTicketSales
      apiKey="pk_live_YOUR_API_KEY"
      eventId={eventId}
      onPurchaseComplete={(tickets) => console.log('Purchased:', tickets)}
    />
  )
}

"code-comment">## Basic Usage - Door Scanner
import { TicketScanner } from '@peeap/widgets'

function DoorScannerPage({ eventId }) {
  return (
    <TicketScanner
      apiKey="pk_live_YOUR_API_KEY"
      eventId={eventId}
      onScanSuccess={(ticket) => playSuccessSound()}
      onScanError={(error) => playErrorSound()}
    />
  )
}

"code-comment">## EventTicketSales Props
- apiKey (required): Your Peeap public API key
- eventId (required): The event ID to sell tickets for
- maxTicketsPerOrder: number (default: 10)
- onPurchaseComplete: (tickets) => void

"code-comment">## TicketScanner Props
- apiKey (required): Your Peeap public API key
- eventId (required): Event ID to validate tickets for
- scanMode: 'camera' | 'manual' | 'both' (default: 'both')
- onScanSuccess: (ticket) => void
- onScanError: (error) => void

Please integrate this into my app with [describe your requirements].

Available Widgets

🛒

EventTicketSales

Embed on your event page to let customers browse ticket types, select quantities, and complete purchases.

tsx
<class="code-component">EventTicketSales
  apiKey=class="code-keyword">class="code-string">"pk_live_xxx"
  eventId=class="code-keyword">class="code-string">"evt_123"
  maxTicketsPerOrder={10}
/>
📷

TicketScanner

Use at event entrance to scan and validate ticket QR codes. Shows attendee info and prevents duplicate entry.

tsx
<class="code-component">TicketScanner
  apiKey=class="code-keyword">class="code-string">"pk_live_xxx"
  eventId=class="code-keyword">class="code-string">"evt_123"
  scanMode=class="code-keyword">class="code-string">"camera"
/>

Code Examples

Complete Event Page

tsx
class="code-keyword">import { EventTicketSales } class="code-keyword">from class="code-keyword">class="code-string">'@peeap/widgets'

class="code-keyword">export class="code-keyword">default class="code-keyword">function class="code-function">EventPage({ params }) {
  class="code-keyword">const handlePurchase = (tickets) => {
    class="code-keyword">class=class="code-keyword">class="code-string">"code-comment">// Tickets purchased - redirect to confirmation
    router.class="code-function">push(class="code-keyword">class="code-template">`/tickets/${tickets[0].id}`)
  }

  class="code-keyword">return (
    <div className=class="code-keyword">class="code-string">"max-w-4xl mx-auto">
      <class="code-component">EventTicketSales
        apiKey=class="code-keyword">class="code-string">"pk_live_your_key"
        eventId={params.eventId}
        showEventHeader={class="code-keyword">true}
        onPurchaseComplete={handlePurchase}
      />
    </div>
  )
}

Door Scanner with Audio Feedback

tsx
class="code-keyword">import { TicketScanner } class="code-keyword">from class="code-keyword">class="code-string">'@peeap/widgets'
class="code-keyword">import { useRef } class="code-keyword">from class="code-keyword">class="code-string">'react'

class="code-keyword">export class="code-keyword">default class="code-keyword">function class="code-function">ScannerPage({ eventId }) {
  class="code-keyword">const successSound = class="code-function">useRef(class="code-keyword">new class="code-function">Audio(class="code-keyword">class="code-string">'/sounds/success.mp3'))
  class="code-keyword">const errorSound = class="code-function">useRef(class="code-keyword">new class="code-function">Audio(class="code-keyword">class="code-string">'/sounds/error.mp3'))

  class="code-keyword">return (
    <class="code-component">TicketScanner
      apiKey=class="code-keyword">class="code-string">"pk_live_your_key"
      eventId={eventId}
      scanMode=class="code-keyword">class="code-string">"camera"
      showStats={class="code-keyword">true}
      onScanSuccess={(ticket) => {
        successSound.current.class="code-function">play()
        console.class="code-function">log(class="code-keyword">class="code-string">'Welcome:', ticket.attendee_name)
      }}
      onScanError={(error) => {
        errorSound.current.class="code-function">play()
        console.class="code-function">error(class="code-keyword">class="code-string">'Scan failed:', error.message)
      }}
    />
  )
}

Event Dashboard for Organizers

tsx
class="code-keyword">import { EventDashboard } class="code-keyword">from class="code-keyword">class="code-string">'@peeap/widgets'

class="code-keyword">class=class="code-keyword">class="code-string">"code-comment">// Full event management with sales analytics
<class="code-component">EventDashboard
  apiKey=class="code-keyword">class="code-string">"sk_live_your_key"  class="code-keyword">class=class="code-keyword">class="code-string">"code-comment">// Use secret key for management
  merchantId=class="code-keyword">class="code-string">"your_merchant_id"
  features={[class="code-keyword">class="code-string">'sales', class="code-keyword">class="code-string">'attendees', class="code-keyword">class="code-string">'checkin-stats', class="code-keyword">class="code-string">'revenue']}
/>

How It Works

1

Customer Purchases Ticket

Customer selects ticket type, enters details, and completes payment through the embedded widget.

2

Ticket Delivered

Customer receives email with ticket PDF containing unique QR code. Can also view in-app.

3

Door Scanning

Staff uses TicketScanner widget to scan QR codes. System validates ticket and marks as used.

4

Real-time Analytics

Organizers see live check-in stats, revenue, and attendance numbers through the dashboard.