Wero QR Card

Features

• QR code generated in pure JS (embedded Reed-Solomon algorithm), with a spec-compliant quiet zone
• Wero logo in the header (can be disabled)
• Two cards: wero-card and its mini version wero-mini-card (logo, title and payee on one row with a QR thumbnail that opens the full screen QR code; a detail button shows the full card)
• Copy-link button to share the payment link by message (the result is also announced to screen readers)
• Tap the QR code to show it fullscreen (tap again or press Escape to close)
• Visual editor: add and configure the card from the dashboard UI, no YAML needed
• Fully compatible with Home Assistant dark mode and sections dashboards (6 columns by default and at least, so the title stays readable)
• Keyboard friendly: visible focus on the copy button and the QR code, Enter or Space opens the QR code fullscreen
• English, French, German, Spanish, Serbian (Cyrillic and Latin), Italian, Dutch, European Portuguese, Polish, Romanian, Danish, Swedish, Bulgarian, Russian, Ukrainian, Hungarian, Slovak, Czech, Slovenian, Latvian and Greek, auto-detected
• Ready for the Marketplace, single file (~55 KB)

Prerequisites

Home Assistant 2024.8 or later, and:

A Wero payment link, generated by your bank:

Getting your Wero link#

There is no public format to build a Wero QR code from a phone number or an IBAN: the card re-encodes the link that your bank generates.

1. In your banking app (or the Wero app), open Wero and generate your QR code / payment link.
2. Either use the app's share option to copy the link, or scan the QR code with a generic QR reader (not a banking app) and copy the URL.
3. The link looks like https://share.weropay.eu/p/1/c/XXXXXXXXXX.

Check that the link is still valid after a few days before printing it or relying on it: its lifetime depends on how your bank generated it.

Configuration

Visual editor#

Edit your dashboard → Add card → search for Wero QR Card (or Wero QR mini card). Every option below can be set from the form; switch to the code editor if you prefer YAML.

Minimal#

type: custom:wero-card
url: https://share.weropay.eu/p/1/c/XXXXXXXXXX

Full options#

type: custom:wero-card
url: https://share.weropay.eu/p/1/c/XXXXXXXXXX
title: Refund
name: Alex
logo: true
qr_size: 176
language: en

Mini card#

type: custom:wero-mini-card
url: https://share.weropay.eu/p/1/c/XXXXXXXXXX
name: Alex
zoom: true

The mini card takes the same options as the full card, plus zoom. It shows the logo, the title and the payee name on one row, with a small QR thumbnail on the right. A tap on the thumbnail opens the QR code full screen, like the big one of the full card. The detail button (top right) switches to the full card; the button, or a click anywhere outside the card, brings the compact view back. The copy button sits under the detail button, so the thumbnail lines up with the other mini cards; on a card 200 px wide or less the thumbnail gets smaller and the copy button gives way (the full card keeps it).

Options reference#

How it works

The card encodes url as-is into a QR code (error correction level M). Scanning it with a Wero-enabled banking app, or with the phone camera, opens the Wero payment flow for the payee behind the link.

The logo is kept out of the QR code on purpose: overlaying a logo on the modules makes scanning unreliable.

Disclaimer

This project is not affiliated with, endorsed by, or sponsored by EPI Company. Wero and the Wero logo are trademarks of EPI Company, used here only to identify the payment method.

Support

If you find this project useful, you can support its development:

Features

• show_title option (also in the visual editor) hides the header's title, for a card placed under a section heading of its own (asked in juju35/ha-vehicle-card#72).

Fixes

• Translations: the cards are defined once the page's language file has arrived (at most 1.5 s; Home Assistant builds a card when its element gets defined), so the first render is already translated instead of English then redrawn; until a language file is in, a missing text reads the English one wherever the card has no fallback of its own.

Performance

• Translations load on demand: the bundle keeps English only (58 KB → 44 KB) and each other language is its own wero-card.i18n.<lang>.js file next to it, fetched the first time a card needs it. Home Assistant loads every dashboard resource on every dashboard, so each page used to download and parse all 22 languages to use one. Until a language file has arrived (a few milliseconds), texts fall back to English, and the cards redraw once it is there.

Maintenance

• Build: scripts/i18n-split.mjs splits the built bundle and rebuilds every table from the split files to check them (the build fails on any difference); src/ keeps every language as before.
• Release: every file of dist/ is attached. Manual installation copies the translation files too.

Fixes

• The full screen QR code no longer shows a focus ring around it (a dark outline drawn by the browser, on phones in particular); Escape still closes it and the focus still returns to the QR code.

What's new

• The QR code image's screen reader label is translated in the 22 languages of the card and follows a language change.
• The main card's name and description in the card picker are shown in the language of Home Assistant, like the mini card's.
• Mini card: the copy button moves under the detail button in the top right corner, so the QR thumbnail sits right next to that column and lines up with the other mini cards (such as the Wi-Fi one).

Fixes

• Accessibility: the QR code inside the clickable "Enlarge QR code" area is hidden from screen readers, so the button is announced once by its own label; the full screen QR stays an image.