Logo
Building a Self-Service Kiosk - Step by Step [full code]

Building a Self-Service Kiosk - Step by Step [full code]

KioskEngine Team•13/05/2025•13min
This article showcases a fully functional demo of a cafe self-service ordering kiosk built specifically to demonstrate the capabilities of the KioskEngine SDK. Unlike most kiosk demos that only simulate hardware interactions, this implementation includes real-world integration with payment terminals, fiscal printers, and kitchen order printers. The main purpose of this demo is to illustrate how developers can create sophisticated kiosk applications with minimal effort using the KioskEngine Platform. With just a few lines of code, you can handle hardware integration that would typically require months of development work. The complete source code for this demo is available on GitLab at https://gitlab.com/kiosk-engine-io/cafe-order-demo-kiosk — feel free to clone it, explore the implementation details, and use it as a starting point for your own kiosk projects.

1. See It in Action: The Complete Customer Journey

Watch how this cafe kiosk solution works in a real-world environment, handling everything from order selection to payment processing and receipt generation:
  • Cafe Kiosk Demo
  • Cafe Kiosk Demo
  • Cafe Kiosk Demo
  • Cafe Kiosk Demo
  • A Seamless Customer Experience in Just few lines of code:
  • - Browse & Select: Customers intuitively navigate through visually appealing coffee and pastry options on a responsive touchscreen, with item descriptions and customization options
  • - One-Touch Payment: The integrated payment terminal activates automatically when the order is ready, supporting contactless payments, credit/debit cards, and mobile wallets
  • - Instant Confirmation: After payment approval, customers receive a legally compliant fiscal receipt printed right at the kiosk
  • - Kitchen Notification: Simultaneously, the order details are automatically printed in the kitchen preparation area, ensuring staff can begin fulfilling the order immediately
  • Business Benefits of KioskEngine Platform:
  • - Rapid Development: Build and deploy complete kiosk solutions in weeks rather than months—what typically takes 6-8 months of custom development can be accomplished in just 4-6 weeks
  • - Minimal Code Required: Implement complex hardware integrations with just a few lines of code—the entire payment processing and receipt generation requires less than 20 lines
  • - Pre-Tested Hardware: Eliminate compatibility issues with pre-certified hardware components that just work—no need to test or debug complex driver integrations
  • - Zero Hardware Configuration: Forget manual device setup—KioskEngine automatically detects and configures all connected peripherals, handling firmware updates and driver management
  • - Lower Development Costs: Reduce development expenses by up to 70% compared to building custom kiosk solutions from scratch, with predictable monthly operating costs

2. Powerful Business Features Without Extra Work

The KioskEngine Platform automatically provides these powerful business tools to help you monitor and optimize your kiosk operations:
  • - 🧾 Real-Time Transaction Monitoring: Track every payment in real-time—see accepted transactions, declined cards, and payment amounts instantly in your dashboard
  • - 📊 Customer Behavior Analytics: Understand your customers better with insights on most popular items, peak ordering times, and typical order combinations
  • - 🔍 Menu Performance Data: Discover which menu items perform best and which might need repositioning or repricing based on customer selection patterns
  • - ⚙️ Operational Health Monitoring: Get instant notifications if any component of your kiosk system needs attention—from paper running low to connectivity issues
  • - 📱 Remote Management: Update menus, prices, and promotions across all your kiosks from a single dashboard—no need to visit each location
  • Cafe Kiosk Demo

3. Hardware Integration Made Simple

This complete solution integrates three essential hardware components, all managed seamlessly by the KioskEngine Platform:
  • - 💳 Payment Terminal: Securely process all major credit cards, mobile payments, and contactless transactions with PCI-compliant hardware
  • - 🧾 Fiscal Printer: Automatically generate legally compliant receipts for customers with your business details, tax information, and transaction data
  • - 🖨️ Thermal Kitchen Printer: Send clear, formatted order details directly to your kitchen preparation area for immediate fulfillment
  • No Technical Headaches: All hardware communication, driver management, and connectivity issues are handled automatically by the KioskEngine Platform—you simply connect the devices and they work together seamlessly.

4. How to Deploy It on KioskEngine Platform

To run this application with real hardware integration, follow these steps on KioskEngine Platform:
  • 📦 Step 1: Create a new project and select the required hardware: Payment Terminal, Fiscal Printer, Thermal Printer.
  • Cafe Kiosk Demo
  • 🛠️ Step 2: Build and upload your application via the KioskEngine dashboard, then deploy it to your physical kiosk.
  • Cafe Kiosk Demo
  • ✅ Step 3: Ensure all services show Running under Software Status for the kiosk.
  • Cafe Kiosk Demo

5. For Developers: Under the Hood

For technical team members, here's a glimpse at how simple it is to implement this powerful solution using KioskEngine SDK and Next.js:
  • Set up the SDK context globally with a provider:
    • tsx
    1import { KioskEngineProvider } from '@/components/kiosk-engine-provider';
2
3export default function RootLayout({ children }: { children: React.ReactNode }) {
4  return (
5    <html lang="en">
6      <body>
7        <KioskEngineProvider>{children}</KioskEngineProvider>
8      </body>
9    </html>
10  );
11}
  • Ensure a single SDK instance is created with all required hardware devices:
    • ts
    1const sdkInstance = new KioskEngineBuilder()
2  .withSandboxMode(false)
3  .withTimeout(10000)
4  .withWebSocketUrl("ws://localhost:9001")
5  .withDevice(DeviceType.PAYMENT_TERMINAL)
6  .withDevice(DeviceType.FISCAL_PRINTER)
7  .withDevice(DeviceType.THERMAL_PRINTER)
8  .build();
  • Check device status before any operation:
    • ts
    1import { useKioskEngine } from './kiosk-engine-provider';
2
3const {
4  terminalStatus,
5  fiscalPrinterStatus,
6  thermalPrinterStatus,
7  isInitializing,
8  checkDeviceStatuses,
9} = useKioskEngine();
  • Initiate a payment transaction and handle receipt printing seamlessly:
    • ts
    1const { sdk } = useKioskEngine();
2const terminal = sdk.getPaymentTerminal();
3
4const products = items.map((item) => ({
5  id: item.product.id.toString(),
6  name: item.product.name,
7  quantity: item.quantity,
8  unit_price: Math.round(item.product.price * 100),
9}));
10
11const result = await terminal.initializeTransaction(products);
12
13if (result.auth_res === 'approval') {
14  const cardPaymentData = result.card_payment_data || {};
15  const transactionId = `tx-${Date.now()}`;
16  onPaymentComplete(transactionId, cardPaymentData);
17} else {
18  setError(`Payment failed: ${result.auth_res}`);
19}
  • For full source code and project setup, visit this GitLab repository.
Need help with kiosk development?
Contact us to discuss your project and how we can help you

Conclusion

Self-service kiosks represent a significant opportunity for cafes and restaurants to improve customer experience, increase operational efficiency, and boost revenue. With KioskEngine's comprehensive platform, implementing this technology no longer requires complex technical knowledge or risky investments in custom development. Whether you're a small independent cafe or managing multiple locations, these kiosk solutions can be tailored to your specific needs while providing enterprise-grade reliability and features. The future of food service is increasingly digital and self-service—and with the right platform, that future is remarkably accessible today. For more details on how KioskEngine can power your cafe's digital transformation, visit KioskEngine.io or schedule a demo to see how it would work specifically for your business.