Qbit Pay

A hackathon-winning project at PermaHacks ’24, built with AO, Qbit SDK, and Arweave. Qbit Pay enables seamless qAR payments through a marketplace dApp, a QR-scanning browser extension, and an explorer dashboard for real-time transparency.

Problem Statement

The challenge was to create a decentralized app that allows qAR to be used as a payment method — specifically enabling transactions via QR codes. Existing flows assumed scanning from a second device (like a phone camera), which made laptop-only purchases awkward and inaccessible. The goal: make payments effortless, even when QR codes are displayed on the same screen where the transaction happens.

Journey

1Open the marketplace

Users start in a decentralized clothing marketplace where products are listed with qAR prices.

Step 1 — User browses the clothing marketplace
Step 1 — User browses the clothing marketplace

2Connect wallet

They connect their ArConnect wallet to enable payments and balances.

Step 2 — Wallet connection flow
Step 2 — Wallet connection flow

3Select product

A product is chosen, triggering the payment flow.

Step 3 — Product selection with Buy Now option
Step 3 — Product selection with Buy Now option

4Generate QR for payment

A QR code appears with the payment details embedded for secure scanning.

Step 4 — QR code generated for the transaction
Step 4 — QR code generated for the transaction

5Extension scan

Instead of requiring a phone, the lightweight browser extension detects the QR directly on-screen, reads it securely, and routes the payment via the Qbit SDK.

Step 5 — Browser extension scans the QR
Step 5 — Browser extension scans the QR

6Open Explorer

After sending the payment, the user opens Qbit Explorer to check transaction details.

Step 6 — Explorer landing page
Step 6 — Explorer landing page

7Verify transaction

The Explorer confirms the transaction with status and totals. Users can always return here to review history.

Step 7 — Explorer dashboard confirming transactions
Step 7 — Explorer dashboard confirming transactions

Key Challenge and Outcome

Challenge: How do you scan a QR code that’s displayed on the same laptop screen, when most payment systems assume a phone camera?

Solution: A lightweight browser extension that securely detects and reads the on-screen QR code, then routes the payment via the Qbit SDK. This eliminated the dependency on external devices, reduced friction, and made desktop-only purchases possible.

The result was a smooth and understandable flow that helped Qbit Pay win at PermaHacks ’24.

Role and Build Notes

Role: Design, front-end, and integration
Focus: Clean UI, fast flows, clear confirmations, accessibility

Tech: AO, Qbit SDK, Arweave, React, Tailwind
Artifacts: Marketplace dApp, QR extension, Explorer dashboard

Open Explorer ↗Read the event post