diff --git a/app/lib/pdf/renderBarcode.ts b/app/lib/pdf/renderBarcode.ts
new file mode 100644
index 0000000..f614fd6
--- /dev/null
+++ b/app/lib/pdf/renderBarcode.ts
@@ -0,0 +1,51 @@
+import { BarcodeArray } from './pdf417';
+
+/**
+ * Renders a PDF417 barcode matrix to a canvas and returns it as a data URL.
+ *
+ * This function creates an HTML canvas element, draws the barcode by iterating through
+ * the barcode matrix, and converts the canvas to a base64-encoded PNG data URL that
+ * can be used as an image source.
+ *
+ * @param barcodeMatrix - The barcode array generated by the PDF417 encoder containing
+ * the barcode matrix data with dimensions and binary code values
+ * @param blockWidth - The width in pixels of each individual barcode module (bar/space unit)
+ * @param blockHeight - The height in pixels of each individual barcode module (bar/space unit)
+ *
+ * @returns A data URL string (base64-encoded PNG) representing the rendered barcode image,
+ * suitable for use in an HTML img src attribute
+ *
+ * @example
+ * ```typescript
+ * const pdf417 = createPDF417();
+ * pdf417.init("Hello World", 2, 2);
+ * const barcodeArray = pdf417.getBarcodeArray();
+ * const dataUrl = renderBarcode(barcodeArray, 2, 4);
+ * // dataUrl can now be used: 
+ * ```
+ */
+export function renderBarcode(barcodeMatrix: BarcodeArray, blockWidth: number, blockHeight: number) {
+
+ const canvas = document.createElement('canvas');
+ canvas.width = barcodeMatrix.num_cols * blockWidth;
+ canvas.height = barcodeMatrix.num_rows * blockHeight;
+ const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+ let positionY = 0;
+ for (let row = 0; row < barcodeMatrix.num_rows; row += 1) {
+ let positionX = 0;
+
+ for (let col = 0; col < barcodeMatrix.num_cols; col += 1) {
+ if (barcodeMatrix.bcode[row][col] === 1) {
+ ctx.fillStyle = '#000';
+ } else {
+ ctx.fillStyle = '#FFF';
+ }
+ ctx.fillRect(positionX, positionY, blockWidth, blockHeight);
+ positionX += blockWidth;
+ }
+ positionY += blockHeight;
+ }
+
+ return canvas.toDataURL();
+}
\ No newline at end of file
diff --git a/app/ui/Pdf417Barcode.tsx b/app/ui/Pdf417Barcode.tsx
new file mode 100644
index 0000000..cb087f0
--- /dev/null
+++ b/app/ui/Pdf417Barcode.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { generateBarcode } from '../lib/pdf/pdf417';
+import { renderBarcode } from '../lib/pdf/renderBarcode';
+import { EncodePayment } from 'hub-3a-payment-encoder';
+
+export const Pdf417Barcode = () => {
+ const [bitmapData, setBitmapData] = useState(undefined);
+
+ useEffect(() => {
+
+ const paymentParams = {
+ Iznos:"123,66", // NOTE: use comma, not period!
+ ImePlatitelja:"Ivan Horvat",
+ AdresaPlatitelja:"Ilica 23",
+ SjedistePlatitelja:"10000 Zagreb",
+ Primatelj:"VODOOPSKRBA I ODV. D.O.O.",
+ AdresaPrimatelja:"FOLNEGOVIĆEVA 1",
+ SjedistePrimatelja:"ZAGREB",
+ IBAN:"HR8924020061100679445",
+ ModelPlacanja: "HR00", // MUST contain "HR" prefix!
+ PozivNaBroj:"2025-05",
+ SifraNamjene:"",
+ OpisPlacanja:"Budakova Režije",
+ };
+
+
+ const hub3a_text = EncodePayment(paymentParams);
+
+ const barcodeMatrix = generateBarcode(hub3a_text);
+ const bitmap = renderBarcode(barcodeMatrix, 2, 2);
+ setBitmapData(bitmap);
+ }, []);
+
+ // Don't render until bitmap is generated (prevents hydration mismatch)
+ if (!bitmapData) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+