Build a no-code mini-app on Circles using the Gnosis app checkout flow

What will you be building?

A simple web “mini-app” that can accept a Circles payment without requiring users to install crypto wallets or browser extensions.

The trick: your app doesn’t sign blockchain transactions itself. Instead, it:

1. Generates a checkout QR code / link

2. The user confirms the payment inside the Gnosis app (often via passkey)

3. Your app listens for the on-chain confirmation and updates the UI

How the mini-app payment flow works?

Desktop-first flow (QR)

1. User clicks an action in your web app (e.g., “Checkout” / “Play”)

2. Your app shows a QR code

3. User scans it with the Gnosis app

4. The Gnosis app opens a checkout screen with:

   • recipient address

   • amount (CRC)

5. User confirms (passkey)

6. Your app detects confirmation and shows Success

Mobile-first flow (deep link)

Same flow, but instead of scanning a QR code, the user taps a link that opens checkout directly.

Before you start: what you need

• A browser

• A Circles-enabled wallet app (for testing checkout) — typically the Gnosis app

• A code “starter kit” repo URL (you’ll copy/paste it)

• A browser-based IDE account like Replit (the transcript uses it)

Step 1: Find the starter kit in the Circles docs

1. Open the About Circles site

2. Go to Developers → open the docs

3. In docs, find User Guides

4. Open Build Sample Apps with Circles and the Gnosis app

5. Click through to the GitHub repository for the starter kit

6. Copy the repository URL (you don’t need a GitHub account if you’re only copying a public link)

Step 2: Import the starter kit into Replit

1. Open Replit

2. Choose Import from GitHub (or “Import from URL”)

3. Paste the starter kit repo URL

4. Choose Public/Private (either is fine for testing)

5. Click Import

Replit will set up the project for you.

Step 3: Decide what you want your mini-app to do

The main goal would be:

User action → payment confirmation → app unlocks something

Examples:

• A simple shop checkout (“buy socks”)

• A game that unlocks playtime after payment

• A sequence of paid actions (choices in a game, maze moves, etc.)

Step 4: Customize the app using “plain English” instructions

In replit, you can describe what you want.

Example spec from the transcript: “Pay to play”

Build a game where:

• The user must send a fixed amount (e.g., 1 CRC) to a recipient address

• Once the transfer is detected, the user can play for 15 seconds

• Desktop-friendly controls (e.g., arrow keys)

• Retro 80s UI

• Clear instructions

• When time runs out, show a “Pay again to continue” button

If multiple people pay at the same time, your app must match the incoming payment to the right visitor/session.

Add:

• a unique session ID per visit (generated by the app)

• include that ID in the payment request metadata (or track it on your backend)

• only unlock gameplay when the payment tied to that session is confirmed

Step 5: Set the recipient correctly

You can’t send Circles from your address to your same address in the Gnosis app flow.

So for testing:

• Create a second account (mark it as “test recipient”)

• Use that second account’s address as the recipient in the app

This avoids the “send-to-self” block and makes tests realistic.

Step 6: Test the checkout flow end-to-end

1. Open your Replit-hosted app

2. Click the app’s action (Checkout / Pay to Play)

3. Scan the QR (desktop-first) or tap the deep link (mobile-first)

4. In the Gnosis app checkout:

   • verify recipient

   • verify amount

5. Confirm (passkey)

6. Return to the web app and confirm it shows:

   • payment detected

   • state updated (e.g., game unlocked)

Going beyond the simplest version

Add persistence (leaderboards, accounts, history)

If you want a leaderboard, player stats, or purchase history. you’ll need a database and Replit can support databases, so it’s doable without local setup

Accept specific kinds of Circles / use a dedicated shop identity

If you need your app to accept only certain circles types or behave like an organization:

• you may need a dedicated Circles group/org setup (the transcript notes this can be more involved)

Pay rewards back to users (backend-triggered transfers)

If your app sends prizes (e.g., “hit 1000 points, win CRC back”):

• your backend must be able to initiate on-chain actions

• that’s a more complex starter-kit category (but a natural next step)

Happy Building!