QR code

In context

Purpose

QRCode turns an amount or a link into something a customer can scan in a second — the fastest "get paid" there is when typing an account number is the alternative. It's a genuine encoder, not decorative art: what you pass in value is what a phone reads out.

Anatomy

• Matrix — the encoded modules, generated from value.
• Quiet zone — padding around the matrix so scanners lock on.
• Colour / background — near-black ink on white by default.
• Size / label — square dimension + an accessible label.

Variants

• Payment code — encodes a pay URL with an amount.
• Link/share — any string (a profile, a page).
• Themed — override color / background (keep strong contrast).

Code

import { QRCode } from '@daytwo/components'

<QRCode value="https://daytwo.app/pay?amt=1200" size={200} label="Pay ฿1,200" />

When to use

• Get paid — show an amount as a scannable code.
• Share a link (profile, page) offline-to-online.

When NOT to use

• Decoration — it's a real payload; don't fake one for looks.
• Tiny sizes — below scan resolution it stops working.

Good vs bad

• Good: a "Get paid" screen with ฿1,200 above a code that resolves to the pay link — the customer scans and pays without typing anything.
• Bad: shrinking the code to fit a cramped card or dropping contrast for style — a pretty QR that won't scan is worse than no QR.

Edge cases

Tokens used