Render ticket QR codes

Every ticket has a checkInCode, which is the credential the Checkout Page check-in scanner reads at the door. You can encode this value as a QR code to build your own tickets in your app, including your own ticket PDFs.

Prerequisites

To get the most out of this guide, you'll need:

• A Checkout Page API key
• An event with at least one paid booking

1. Install

Get a QR code library, plus the Checkout Page Node.js SDK if you prefer it over plain fetch:

npm install qrcode @checkoutpage/sdk

2. Get the check-in code

A booking produces one ticket per attendee. Fetch them with List all tickets, filtered by bookingId (from a booking.paid webhook or the bookings endpoints):

import { createCheckoutPageClient } from '@checkoutpage/sdk';

const client = createCheckoutPageClient({ apiKey: process.env.CHECKOUTPAGE_API_KEY });

const tickets = await client.tickets.list({ bookingId });

Each ticket in the response includes its checkInCode.

3. Render it as a QR code

Encode the value with any QR library. In the browser with qrcode:

import QRCode from 'qrcode';

await QRCode.toCanvas(document.getElementById('ticket-qr'), ticket.checkInCode);

Scanning the rendered QR code with the Checkout Page check-in scanner admits the guest. It is the same QR code printed on the official ticket PDF. Your rendered QR code and the PDF stay interchangeable at the door.

Related guides

• Download ticket PDFs