Build an event ticketing system in Bubble with Data Types for Events, TicketTypes, and Orders. Create event pages displaying ticket options with availability counters, a checkout workflow that reserves tickets and processes Stripe payments, and unique QR codes per ticket for check-in scanning. Handle sold-out states and cancellation refunds through conditional workflows.
Building an Event Ticketing System in Bubble
Event ticketing requires careful coordination between inventory management, payment processing, and attendee verification. This tutorial walks you through building a complete ticketing system in Bubble — from event listing to ticket purchase to door check-in with QR codes. You will use Stripe for payments, database constraints for inventory control, and a QR code API for scannable tickets.
Prerequisites
- A Bubble account with an app in the editor
- The Stripe plugin installed and configured with API keys
- User authentication set up
- Basic understanding of workflows and Data Types
Step-by-step guide
Create the Event, TicketType, and Order Data Types
Create the Event, TicketType, and Order Data Types
Go to Data tab → Data types. Create 'Event' with: title (text), description (text), date (date), venue (text), organizer (User), cover_image (image), status (text: draft/published/cancelled). Create 'TicketType' with: event (Event), name (text, e.g., 'General Admission', 'VIP'), price (number), total_quantity (number), sold_count (number, default 0), description (text). Create 'Order' with: user (User), event (Event), ticket_type (TicketType), quantity (number), total_price (number), status (text: pending/confirmed/cancelled), stripe_charge_id (text), qr_code_url (text), ticket_code (text).
Expected result: Three Data Types with proper relationships enable event creation, ticket inventory, and order tracking.
Build the event detail page with ticket selection
Build the event detail page with ticket selection
Create a page called 'event' with Type of content 'Event.' Display the event title, date, venue, description, and cover image at the top. Below, add a Repeating Group with Type 'TicketType' and Data source: 'Search TicketTypes where event = Current Page Event.' Each cell shows: ticket name, price (formatted as currency), remaining count (total_quantity - sold_count), and a quantity selector (a Dropdown with numbers 1-10 or an Input element). Add a conditional: 'When total_quantity - sold_count <= 0 → Show SOLD OUT text and hide the quantity selector.'
Expected result: The event page shows ticket types with prices, availability, and quantity selectors. Sold-out tickets show a clear indicator.
Create the ticket purchase workflow with Stripe
Create the ticket purchase workflow with Stripe
Add a 'Buy Tickets' button below the ticket selection. Create the workflow: When Button Buy is clicked → (1) Create Order (user, event, ticket_type = selected type, quantity, total_price = price × quantity, status = 'pending'). (2) Charge the current user using the Stripe plugin: amount = total_price × 100 (Stripe uses cents), currency = 'usd', description = Event title + Ticket name. (3) If charge succeeds, Make changes to Order → status = 'confirmed', stripe_charge_id = Result of charge step. (4) Make changes to TicketType → sold_count = sold_count + Order's quantity.
Pro tip: Add an 'Only when' condition to verify availability before charging: TicketType's total_quantity - sold_count >= selected quantity. This prevents overselling during simultaneous purchases.
Expected result: Users can purchase tickets with Stripe, inventory updates automatically, and orders are recorded.
Generate unique QR codes for each ticket
Generate unique QR codes for each ticket
After a successful purchase, generate a unique ticket code and QR code. In the purchase workflow, after confirming the order: (1) Generate a unique ticket_code using 'Calculate formula: arbitrary text' with a combination of the Order's unique id + a random string. (2) Use the API Connector to call a QR code generation API (such as https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=[ticket_code]). Store the resulting QR image URL in the Order's qr_code_url field. (3) Send a confirmation email with the QR code image and event details.
Expected result: Each ticket order receives a unique QR code that encodes the ticket's unique identifier.
Build the check-in scanning page for event staff
Build the check-in scanning page for event staff
Create a page called 'check-in' accessible only to event organizers. Add an Input element for scanning or manually entering the ticket code. When the code is submitted, search for the Order where ticket_code = Input's value. Display the result: attendee name, ticket type, event name. Add a 'Check In' button that creates an 'Attendance' record (order, check_in_time = now) and visually marks the ticket as used. Add conditionals: 'When no order found → Show Invalid ticket message.' 'When attendance record already exists → Show Already checked in message.'
Pro tip: For actual QR scanning, install a barcode scanner plugin that uses the device camera, or use an HTML element with a JavaScript QR scanner library.
Expected result: Event staff can scan or enter ticket codes, verify ticket validity, and record check-ins with duplicate prevention.
Handle ticket cancellations and refunds
Handle ticket cancellations and refunds
On the user's 'My Tickets' page, add a 'Cancel Ticket' button visible only when the event date is in the future. Create the workflow: When Cancel is clicked → (1) Process a Stripe refund via API Connector (POST to https://api.stripe.com/v1/refunds with charge = Order's stripe_charge_id). (2) Make changes to Order → status = 'cancelled.' (3) Make changes to TicketType → sold_count = sold_count - Order's quantity. This frees up inventory and refunds the payment.
Expected result: Users can cancel tickets before the event, receive a Stripe refund, and the inventory is restored.
Complete working example
1EVENT TICKETING SYSTEM2=======================34Data Types:5 Event: title, description, date, venue, organizer (User),6 cover_image, status7 TicketType: event (Event), name, price, total_quantity,8 sold_count (default 0), description9 Order: user (User), event, ticket_type (TicketType),10 quantity, total_price, status, stripe_charge_id,11 qr_code_url, ticket_code12 Attendance: order (Order), check_in_time1314Ticket Purchase Workflow:15 Trigger: Button Buy Tickets clicked16 Only when: TicketType's available >= selected quantity17 Action 1: Create Order (pending)18 Action 2: Stripe → Charge current user (amount in cents)19 Action 3: Make changes to Order → confirmed, save charge ID20 Action 4: Make changes to TicketType → sold_count + quantity21 Action 5: Generate QR code via API (ticket_code in URL)22 Action 6: Send confirmation email with QR code2324Check-In Workflow:25 Trigger: Submit ticket code26 Search: Order where ticket_code = input value27 Validate: Order exists AND not already checked in28 Action: Create Attendance (order, time)29 Display: Attendee name, ticket type, status3031Cancellation Workflow:32 Trigger: Cancel button (only before event date)33 Action 1: Stripe refund via API34 Action 2: Order status → cancelled35 Action 3: TicketType sold_count - quantity3637QR Code API:38 URL: https://api.qrserver.com/v1/create-qr-code/39 Params: size=200x200, data=[ticket_code]Common mistakes when building event ticketing in Bubble
Why it's a problem: Not checking ticket availability before processing payment
How to avoid: Add an 'Only when' condition checking available quantity before the Stripe charge, and recheck after payment by verifying sold_count has not exceeded total_quantity.
Why it's a problem: Storing Stripe amounts in dollars instead of cents
How to avoid: Multiply the price by 100 when passing it to the Stripe charge action.
Why it's a problem: Not preventing duplicate check-ins
How to avoid: Before creating an Attendance record, search for existing records with the same Order. Show 'Already checked in' if one exists.
Best practices
- Use sold_count on TicketType for fast availability checks instead of counting Orders each time
- Generate unique ticket codes combining Order ID with a random string for security
- Send confirmation emails with QR codes immediately after successful payment
- Add an 'Only when' availability check before processing payments to prevent overselling
- Build a dedicated check-in page for event staff with clear visual indicators for valid, invalid, and used tickets
- Allow cancellations only before the event date and process refunds automatically through Stripe
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build an event ticketing system in Bubble.io with ticket types, Stripe payments, QR codes for each ticket, and a check-in scanner for event staff. What Data Types do I need and how do I handle inventory, payments, and check-in verification?
Build an event ticketing system. Create Event, TicketType, and Order data types. Build an event page with ticket selection and availability counters. Add a Stripe payment workflow that creates orders and generates QR codes. Build a check-in page where staff can scan ticket codes and verify entry.
Frequently asked questions
Can I sell multiple ticket types per event?
Yes. Create multiple TicketType records linked to the same Event. Each has its own name, price, and quantity. The event page displays all available types in a Repeating Group.
How do I generate QR codes in Bubble?
Use a free QR code API like api.qrserver.com. Set up an API Connector call with the ticket code as the data parameter. The API returns an image URL you can store and display.
What happens if two people try to buy the last ticket at the same time?
Add a post-payment check: after charging, verify that sold_count has not exceeded total_quantity. If it has, refund immediately and show a 'sold out' message. This race condition is rare but important to handle.
Can I use this for free events?
Yes. Set the ticket price to 0 and skip the Stripe payment step. The rest of the system (registration, QR codes, check-in) works the same way.
How do I send tickets to buyers?
After purchase, send an email using Bubble's built-in email action or SendGrid. Include the QR code image URL, event details, and a link to the user's ticket page in the app.
Can RapidDev help build a production-ready ticketing platform?
Yes. RapidDev builds custom event ticketing systems in Bubble with features like seat selection, group ticketing, promo codes, and real-time attendance dashboards.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation