Skip to main content

Workshop 05: QR-Code Payments

This final workshop combines everything from the previous ones into a working payment terminal. The microcontroller hosts a small webserver (LittleFS-served HTML/CSS/JS), the operator creates a payment request from the browser, the TFT displays a CIP-13 web+cardano: QR code, and the device polls Koios /address_utxos until a UTxO with the expected exact lovelace amount appears.

Source code: github.com/CardanoThings/Workshops/tree/main/Workshop-05

Steps​

  1. Getting Started - Project structure, LittleFS, and the basic webserver that serves an index.html from the device.
  2. CIP-13 Integration - What CIPs are, the web+cardano: URI scheme, and how amounts and addresses encode into a payment URI.
  3. QR-Code Creation - Render a QR code on the TFT using the QRcodeDisplay + QRcode_eSPI libraries.
  4. Building the Frontend - HTML/CSS/JS for a simple payment-request UI served from LittleFS.
  5. Building the Backend - Webserver routes, a JSON store of payment requests, and the on-chain transaction listener that matches by exact lovelace amount.

What you'll need​

  • Cheap Yellow Display (or compatible ESP32 + TFT) from earlier workshops.
  • Two Cardano wallets (one to pay from, one to receive) on Preprod.
  • LittleFS upload tool for the Arduino IDE.
  • All libraries from previous workshops, plus QRcodeDisplay and QRcode_eSPI.

Note on CIP-13 today. As of the workshop's writing, no major mobile wallet correctly attaches the exact-lovelace amount from a web+cardano: URI. To exercise the on-chain confirmation flow you'll need to send the exact amount manually from a desktop wallet. Track the CIP-0013 spec for progress.

Adapted from the CardanoThings workshop series, originally produced under Project Catalyst Fund 11. Source code: github.com/CardanoThings/Workshops/Workshop-05.