Components

QrCode

Shows a finished payload as a QR code, with dark modules on a light background in every theme and in print.

Storybook: Storybook
Source: Source

When to use

To let a phone scan a payment link or a TR Karekod string.
To print the verification address on a receipt.

When not to use

To build the payload: QrCode does not build payment content. TR Karekod and FAST QR strings (EMVCo TLV with CRC) come from the server or a domain library; the component takes a finished value.
As the only way in: Also show the same link or reference as text.
With third-party shorteners: The code only carries an address on the brand’s own domain.

Anatomy

Frame: Fixed light background, 8 px corner radius.
Quiet zone: A light margin four modules wide on every side.
Modules: One SVG path, in the dark colour.
Logo: Optional; in the centre, a fifth of the code’s width.
Caption: Optional figcaption; reference and domain.

Behaviour

value is encoded as given, as UTF-8; Turkish letters are kept.
Error correction is M by default and Q when a logo is given.
When the value does not fit in a QR code at the chosen level, the component throws (in byte mode, 2331 bytes for M, 1663 for Q).
The code is drawn as SVG; no HTML strings and no innerHTML.

Guidelines

On the payment page, ask the user to compare the domain in the address bar.
Scan the code with three different phones before release.
For printed static codes, choose a placement that makes it hard to stick a label over them.
Do not shrink the code: use at least 128 px on screen.

Content

label says what the code is: “Payment link QR code”.
caption holds the reference and the domain: “Reference: 12345678”.

Copy: Copies the link as text.
CountdownTimer: Shows how long a dynamic code stays valid.