eInvoice Viewer – WordPress plugin

Free · WordPress plugin

The eInvoice Viewer as a WordPress plugin. One shortcode is enough.

With the free plugin, your visitors read e-invoices right on your WordPress website, as a clear document with all fields, bank accounts and attachments. An e-invoice is an invoice stored as a structured file that a program can read, but is hard for a person to read.

You install the plugin from the WordPress.org directory and place a shortcode on a page. A shortcode is a short placeholder in square brackets that WordPress replaces with the viewer. The invoice is read in the visitor’s browser. For viewing, it never reaches your server. Only if you connect a validator and the visitor clicks a validation button does it go to the validation engine you set up yourself.

The hub on your website. The plugin is the viewer plus control: you decide who may use it, how often, and from which role each add-on appears. Validation buttons for the official KoSIT validator, Mustang and VAMPIRE, the Hybrid Check, the payment code and all other add-ons appear as tabs in the same view.

Download free on WordPress.org

Try the demo

In three steps

Install, place the shortcode, done.

Install

Open the menu item “Plugins” in the WordPress backend, the admin area of your website. Search there for “eInvoice Viewer”, then install and activate the plugin.

Place the shortcode

Place the shortcode [spev_einvoice_viewer] on any page. With bt="1", the BT numbers are visible from the start; BT stands for business term, the numbered fields of the EN 16931 standard. You can turn off individual buttons and the XML and PDF tabs per page, for example with tab_spev_pdf="no".

Configure

Under “eInvoice Viewer → Viewer” you set the largest permitted file size, whether BT numbers are shown and the design kit. In the “Access and limits” section, you decide how many invoices guests and each role may open per day and from which role each add-on appears.

Current version: 2.39.0. Requirements: WordPress 5.8 or newer (tested up to 7.1) and PHP 8.2 or newer. License: GPL 2.0 or later. What the viewer shows and reads is described in detail on the overview page of the viewer. Without WordPress, the same viewer is available for free as an app.

New in versions 2.36 to 2.38

What the plugin now does for you as well.

Tabs for invoice, XML, PDF and every add-on
Since 2.38, the INVOICE, XML and PDF tabs sit below the toolbar. The XML tab shows the invoice the way the validators do, with search and BT numbers; the PDF tab also shows a PDF embedded in an XML invoice. Every add-on with a result gets a tab of its own. For you, this means everything about an invoice is on one page, and nothing opens in a separate window.
Validation buttons for three validators
If the eInvoice Validator for KoSIT, for Mustang or for VAMPIRE is installed, the toolbar gets a validation button for each. The report appears in the “KoSIT Validator”, “Mustang Validator” or “VAMPIRE Validator” tab, with report.xml and, for KoSIT and VAMPIRE, report.html for download. Since 2.38.1, the KoSIT button also validates a ZUGFeRD or Factur-X PDF. With a Validation Explorer, every finding also appears right at its field.
Turn off buttons per page
Since 2.38.0, you remove any button and the XML and PDF tabs from a page with a shortcode attribute, such as button_spev_rulebrowser="no". Since 2.39.0 this also works for the tabs of the add-ons and for add-ons without a button of their own, such as the markings of the Identifier Check. This way, a public page shows only what is needed and an internal page shows everything.
Access and limits per role
You set a daily number of invoices for guests and for each role, and for every add-on the role from which it appears. Below that role, the viewer behaves as if the add-on were not installed. Before each invoice, the viewer only briefly asks whether access is still available and sends no invoice data.
Settings dialog stored on the website
Since 2.36.0, the “Settings” button opens a dialog as soon as an add-on brings settings of its own, for example the Inbound Check for company data and supplier list. The values are stored in your website’s database, every save creates a new revision, and a backup file takes everything with you.
Design kits for all tools
Kit H is the default, Kit A is plainer, Kit S shows the viewer in the colors of the specialPress websites, and since 2.37.0 you can also upload a kit of your own. The choice applies to all eInvoice tools on your website, and the fonts are part of the plugin.

For developers

One shortcode, and a clear interface underneath.

Embedding

One shortcode is enough. Place [spev_einvoice_viewer] on any page. With the attribute bt="1", the business term identifiers are visible from the start; with bt="0", they are hidden at first, and with lite="1" the view starts with only the filled fields. The visitor can switch both at any time.

The knowledge about EN 16931, the European standard for the data in an e-invoice, lives in its own JavaScript core that runs in the browser. There is no PDF library for writing, no template engine and no framework. For you, this means little code to maintain and review.

The viewer is a web component named <einvoice-viewer>, a custom HTML element that can be used in any page. It is the same element in the shortcode, in the standalone app and in another CMS. The invoice model that was read is available as viewer.model, along with rawXml, syntax, file and identifiers. The events einvoice-model-ready, einvoice-language-changed and einvoice-reset bubble up to the document.

1 · Drop the file
in the visitor’s browser

2 · The JavaScript core reads it
the model is available as viewer.model

3 · The view appears
with all installed add-ons

How the viewer works: the file is read in the browser, the model is ready for your code, and the view appears with all add-ons.

Extension points

viewer.extendModel and viewer.extendTooltip append sections to the model and add lines to a BT or BG tooltip.
The interface has the number 4. New are addBadge() for a second small badge next to the field number, and addSettingsSection(), getSettings() and openSettings() for the settings dialog. With requireViewerApi(), an add-on checks that the interface it needs is there.
spev_force_enqueue loads scripts and styles even without a shortcode, spev_register_settings adds an add-on’s section to the settings page, and einvoice_design_kit sets the design kit of all eInvoice tools in code.
The settings dialog reads, writes, backs up and restores its values through REST routes. A write based on an outdated state is rejected with status 409, so nobody overwrites someone else’s change.

Works together with the add-ons

An add-on is an additional plugin that extends the viewer with one capability. You install the add-on, and its feature appears in the same view, usually with a tab of its own. The file is not read a second time, and in most cases there is nothing to configure to get started. Only the Inbound Check first needs your company data and your supplier list. These building blocks are available:

eInvoice Viewer
free · shows any e-invoice as a document

+ Technical Details
paid add-on · cardinality (how often a field may occur), data type and XPath, the location in the XML, plus a field browser, a rule browser and a reference browser

+ Extended Profiles
paid add-on · shows the extensions ZUGFeRD/Factur-X EXTENDED and EXTENDED-CTC-FR

+ Visualizer
paid add-on · five print layouts and a PDF/A-3 for download

+ Exporter
paid add-on · transfers the invoice into an Excel table in which every EN 16931 field has its place

+ Identifier Check
paid add-on · checks VAT IDs, LEIs, IBANs and national company numbers

+ Inbound Check
paid add-on · asks the plausibility questions of accounts payable, for example whether the invoice is addressed to your company

+ Hybrid Check
paid add-on · compares the PDF with the invoice data, such as the IBAN

+ EPC QR Code
paid add-on · shows the “Transfer code” tab for the banking app

+ eInvoice Validator for KoSIT, Mustang, VAMPIRE
free · one validation button each, with the report in its own tab

+ eInvoice Validation Explorer for KoSIT, Mustang, VAMPIRE
paid product · shows the validation report in plain language and every finding at its field

The free viewer and the building blocks that extend it: free parts are marked in blue, paid add-ons in orange.

You find every tool with a description and a link on the overview page in the section One viewer, many tools. The KoSIT validator is the official validation program for XRechnung invoices from KoSIT, the German Coordination Office for IT Standards. The eInvoice Validator for KoSIT connects it to your website, but does not include it.

Bring the viewer to your WordPress website.

Free, without an account and without an outside service. Install the plugin directly from WordPress.org and place your first shortcode. The manual shows each step in detail.

Download free on WordPress.org