Add payment URL QR codes to invoice PDFs

e2e/form-defaults.spec.ts

@@ -109,6 +109,12 @@ test.describe('Form loads with correct defaults', () => {
     await expect(paymentMethod).toHaveValue('Bank Transfer');
   });
 
+  test('payment URL defaults to empty', async ({ page }) => {
+    const paymentUrl = page.locator('[data-testid="payment-url-input"]');
+    await expect(paymentUrl).toBeVisible();
+    await expect(paymentUrl).toHaveValue('');
+  });
+
   test('one default invoice item exists', async ({ page }) => {
     const items = page.locator('[data-testid="invoice-item"]');
     await expect(items).toHaveCount(1);

e2e/share-download.spec.ts

@@ -80,6 +80,34 @@ test.describe('Share link and download', () => {
     await expect(page.locator('[data-testid="item-net-price-input"]').first()).toHaveValue('150');
   });
 
+  test('payment URL persists in shared URL', async ({ page, context }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+    await page.locator('[data-testid="payment-url-input"]').fill('https://example.com/pay/invoice-123');
+    await page.locator('[data-testid="share-invoice-link-button"]').click();
+
+    const toast = page.locator('[data-testid="toast"]');
+    await expect(toast).toContainText('Invoice link copied to clipboard!');
+    await expect(toast).toHaveClass(/success/);
+    await expect(toast).not.toContainText('QR code not included');
+
+    const sharedUrl = page.url();
+    await page.evaluate(() => localStorage.clear());
+    await page.goto(sharedUrl);
+    await page.waitForSelector('[data-testid="items-container"]');
+
+    await expect(page.locator('[data-testid="payment-url-input"]')).toHaveValue('https://example.com/pay/invoice-123');
+  });
+
+  test('payment URL persists after reload', async ({ page }) => {
+    await page.locator('[data-testid="payment-url-input"]').fill('https://example.com/pay/reload-test');
+    await page.waitForTimeout(700);
+    await page.reload();
+    await page.waitForSelector('[data-testid="items-container"]');
+
+    await expect(page.locator('[data-testid="payment-url-input"]')).toHaveValue('https://example.com/pay/reload-test');
+  });
+
   test('share shows success toast', async ({ page, context }) => {
     await context.grantPermissions(['clipboard-read', 'clipboard-write']);
 
@@ -112,6 +140,22 @@ test.describe('Share link and download', () => {
     expect(filename).toMatch(/\.pdf$/);
   });
 
+  test('download with payment URL triggers PDF generation', async ({ page }) => {
+    await page.locator('[data-testid="seller-name-input"]').fill('Test Seller');
+    await page.locator('[data-testid="seller-email-input"]').fill('seller@test.com');
+    await page.locator('[data-testid="seller-address-input"]').fill('123 Test St');
+    await page.locator('[data-testid="buyer-name-input"]').fill('Test Buyer');
+    await page.locator('[data-testid="buyer-email-input"]').fill('buyer@test.com');
+    await page.locator('[data-testid="buyer-address-input"]').fill('456 Test Ave');
+    await page.locator('[data-testid="payment-url-input"]').fill('https://example.com/pay/invoice-123');
+
+    const downloadPromise = page.waitForEvent('download');
+    await page.locator('[data-testid="download-invoice-button"]').click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toMatch(/\.pdf$/);
+  });
+
   test('share with logo shows error toast', async ({ page, context }) => {
     await context.grantPermissions(['clipboard-read', 'clipboard-write']);
 

package.json

@@ -14,11 +14,13 @@
   "dependencies": {
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.4",
-    "lz-string": "^1.5.0"
+    "lz-string": "^1.5.0",
+    "qrcode": "1.5.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.49.0",
     "@types/lz-string": "^1.5.0",
+    "@types/qrcode": "1.5.6",
     "bun-types": "^1.3.9",
     "typescript": "^5.9.3"
   }

public/index.html

@@ -368,6 +368,13 @@ <h1 class="logo">EasyPDF <span class="logo-lite">Lite</span></h1>
               </div>
             </div>
 
+            <div class="form-row">
+              <div class="form-group full-width">
+                <label for="paymentUrl">Payment URL</label>
+                <input type="url" id="paymentUrl" name="paymentUrl" maxlength="2000" placeholder="https://..." data-testid="payment-url-input">
+              </div>
+            </div>
+
             <div class="form-row">
               <div class="form-group full-width">
                 <div class="field-toggle">

public/js/app.ts

@@ -32,7 +32,9 @@ function showToast(message: string, type: "success" | "error" = "success") {
 function refreshPreview() {
   try {
     const data = extractFormData();
-    updatePdfPreview(data);
+    void updatePdfPreview(data).catch((err) => {
+      console.error("PDF generation error:", err);
+    });
   } catch (err) {
     console.error("PDF generation error:", err);
   }
@@ -233,10 +235,10 @@ function setupShareAndDownload() {
   }
 
   if (downloadBtn) {
-    downloadBtn.addEventListener("click", () => {
+    downloadBtn.addEventListener("click", async () => {
       try {
         const data = extractFormData();
-        downloadPdf(data);
+        await downloadPdf(data);
         showToast("PDF downloaded!", "success");
       } catch (err) {
         console.error("Download error:", err);
@@ -407,6 +409,7 @@ function getDefaultData(): InvoiceData {
     vatTableSummaryIsVisible: true,
     paymentMethod: "Bank Transfer",
     paymentMethodFieldIsVisible: true,
+    paymentUrl: "",
     notes: "",
     notesFieldIsVisible: true,
     personAuthorizedToReceiveFieldIsVisible: true,

public/js/form.ts

@@ -104,6 +104,7 @@ export function populateForm(data: InvoiceData): void {
 
   // Payment & notes
   setInputValue("paymentMethod", data.paymentMethod ?? "");
+  setInputValue("paymentUrl", data.paymentUrl ?? "");
   setTextareaValue("invoiceNotes", data.notes ?? "");
 
   // Visibility checkboxes
@@ -226,6 +227,7 @@ export function extractFormData(): InvoiceData {
     vatTableSummaryIsVisible: getCheckbox("vatTableSummaryIsVisible"),
     paymentMethod: getInputValue("paymentMethod"),
     paymentMethodFieldIsVisible: getCheckbox("paymentMethodFieldIsVisible"),
+    paymentUrl: getInputValue("paymentUrl") || undefined,
     notes: getTextareaValue("invoiceNotes"),
     notesFieldIsVisible: getCheckbox("notesFieldIsVisible"),
     personAuthorizedToReceiveFieldIsVisible: getCheckbox("personAuthorizedToReceiveFieldIsVisible"),