Donation QR Block

外掛說明

Donation QR Block adds a Gutenberg block that displays an EPC/GiroCode QR code for accepting SEPA bank donations. When scanned with a banking app, the QR code pre-fills all transfer details (recipient, IBAN, BIC, reference) – making it easy for supporters to donate.

Features

  • Native Gutenberg block – No shortcodes, works seamlessly with the block editor
  • Live preview – QR code updates in real-time as you edit bank details
  • Fully customizable – Edit recipient name, bank, IBAN, BIC, amount, and payment reference
  • No external services – QR codes are generated locally, your bank details never leave your server
  • Privacy-friendly – No tracking, no API calls, no external dependencies
  • Customizable appearance – Change background color to match your theme
  • Graceful fallback – Shows bank details even if QR generation is unavailable

What is an EPC QR Code?

The EPC QR code (European Payments Council Quick Response Code) is a standard for encoding SEPA credit transfer data. In Germany, it’s known as “GiroCode”. When scanned with a compatible banking app, it automatically fills in all payment details, reducing errors and making donations effortless.

Supported in 36 SEPA countries including: Germany, Austria, Belgium, Netherlands, France, Spain, Italy, and more.

Use Cases

  • Non-profit organizations accepting donations
  • Churches and religious organizations
  • Sports clubs and associations
  • Crowdfunding campaigns
  • Event organizers collecting fees
  • Any organization accepting SEPA bank transfers

Source Code & Development

The full source code for this plugin is available on GitHub:
https://github.com/remotedots/donation-qr-block

The /build directory contains compiled JavaScript and CSS assets generated from source files in the /src directory using @wordpress/scripts.

Building from Source

  1. Clone the repository: git clone https://github.com/remotedots/donation-qr-block.git
  2. Install dependencies: npm install
  3. Build assets: npm run build
  4. Install PHP dependencies: composer install --no-dev

Source Files

  • /src/index.js – Block registration
  • /src/edit.js – Editor component (React)
  • /src/editor.scss – Editor styles
  • /src/style.scss – Frontend styles
  • /src/block.json – Block metadata

Privacy Policy

This plugin does not collect, store, or transmit any personal data. All QR code generation happens locally on your server and in users’ browsers. No external API calls are made.

Disclaimer

This plugin is provided as-is without any warranty. The author is not responsible for any financial losses, incorrect transfers, or other damages resulting from the use of this plugin. Users are solely responsible for verifying that all bank details (IBAN, BIC, recipient name, amount) are correct before publishing. Always test QR codes with your banking app before making them publicly available.

螢幕擷圖

  • The Donation QR Block in the Gutenberg editor with live preview
  • Block settings panel with bank details configuration
  • Frontend display of the donation QR code

適用於區塊編輯器

這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。

  • Donation QR Code Display an EPC/GiroCode QR code for SEPA bank donations.

安裝方式

  1. Upload the donation-qr-block folder to /wp-content/plugins/
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Edit any page or post with the block editor
  4. Add the “Donation QR Code” block
  5. Configure your bank details in the block sidebar

Requirements

  • WordPress 6.0 or higher
  • PHP 8.1 or higher
  • For frontend QR code display: endroid/qr-code Composer package (recommended)

Note: Without the QR code library, the block will display bank details only (no QR code). The editor preview always shows the QR code.

常見問題集

Which banking apps support EPC QR codes?

Most European banking apps support EPC/GiroCode scanning, including:

  • Sparkasse
  • Volksbank
  • Deutsche Bank
  • ING
  • N26
  • Revolut
  • And many more…

Is my bank data sent to external servers?

No. All QR codes are generated locally – in your browser (editor) and on your server (frontend). Your bank details never leave your infrastructure.

Can I customize the appearance?

Yes. You can change the background color via the block settings. For further customization, you can add custom CSS targeting the .donation-qr-block class.

Does it work without JavaScript?

Yes. The QR code is rendered server-side as a static image, so it works even if visitors have JavaScript disabled.

What if the QR code doesn’t appear on the frontend?

The QR code requires the endroid/qr-code PHP library. Install it via Composer:

composer require endroid/qr-code

Without this library, the block displays bank details only. The editor preview always works regardless.

Can I set a default donation amount?

Yes. You can set a default amount in EUR via the block settings. The default is 5 EUR. Set it to 0 if you want donors to choose their own amount.

使用者評論

這個外掛目前沒有任何使用者評論。

參與者及開發者

以下人員參與了開源軟體〈Donation QR Block〉的開發相關工作。

參與者

將〈Donation QR Block〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.0.0

  • Initial release
  • Native Gutenberg block with live QR code preview
  • Customizable bank details (recipient, IBAN, BIC, reference, amount)
  • Background color customization
  • Server-side QR code generation for frontend
  • Client-side QR code generation for editor preview