Checkout, Mollie en Facturatie Setup¶

Datum: 6 november 2025
Doel: Checkout flow werkend krijgen, Mollie betaling integreren, facturen automatisch genereren met professionele vormgeving

🎯 Wat we vandaag hebben bereikt¶

1. WebformEntityStorageTrait PHP Compatibiliteit Fix ✅¶

Probleem: Fatal error bij drush updb - oude Drupal 9 syntax file_validate_extensions werkte niet in Drupal 10+.

Oplossing: - Patch gemaakt voor Commerce Invoice module - file_validate_extensions vervangen door FileExtension - Patch toegevoegd aan composer.json via cweagans/composer-patches - Locatie patch: patches/commerce_invoice-file_validator_drupal10.patch

Resultaat: Logo upload in invoice type configuratie werkt nu.

2. Commerce Invoice Configuratie ✅¶

Invoice Type "Factuur" geconfigureerd: - Logo: SVG woordbeeld toegevoegd (voedingsgeneeskunde-letterbeeld.svg) - Factuurnummering: VG-[jaar]-[nummer] (bijv. VG-2025-001) - Fixed length: 3 digits (001, 002, 003...) - Configuratie: /admin/commerce/config/number-patterns - Footer: Bedrijfsgegevens (KvK, BTW-nummer, IBAN, betalingstermijn 30 dagen) - Email kopie: facturen@voedingsgeneeskunde.nl - Factureren bij: Order completion (automatisch)

Workflow keuze: "Default, with validation" - Aanbevolen door Mollie - Extra validatie stap voor betalingsveiligheid

3. PDF Engine: DomPDF → Wkhtmltopdf ✅¶

Beslissing: Wkhtmltopdf voor A-merk kwaliteit

Redenen: - Pixel-perfect rendering (WebKit browser engine) - Volledige CSS3/HTML5 support - Betere font support voor custom fonts - Professionele PDF's voor A-merk uitstraling

Installatie:

sudo apt-get install wkhtmltopdf
composer require mikehaertl/phpwkhtmltopdf

Configuratie: - Binary locatie: /usr/bin/wkhtmltopdf - Entity Print ingesteld op wkhtmltopdf engine - Basis URL: https://dev.voedingsgeneeskunde.nl

4. QR-Code Library Geïnstalleerd ✅¶

Voor toekomstige ticket verkoop:

composer require endroid/qr-code

Gebruik: QR-codes genereren voor congrestickets die gescand worden bij de deur.

5. Checkout Flow Configuratie 🔄¶

Groot probleem: Checkout flow conflict met betaalinformatie/betalingsproces stappen.

Issues: - Checkout pagina's bleven leeg - Error: "Betaalinformatie- en Betaalprocesvensters moeten afzonderlijke stappen zijn" - Oude checkout flow kapot geraakt

Oplossing: - Oude flow verwijderd - Nieuwe "Mollie" checkout flow aangemaakt (ID: mollie) - Multistep - Default plugin - Order type gekoppeld aan nieuwe flow

Huidige stappen: 1. Inloggen - Verplicht (juridisch + consistent met medische content) 2. Orderinformatie - Contactinformatie (adres) 3. Overzicht - Review + Voorgang betaling 4. Betaling - Betaalinformatie 5. Voltooid - Afrondingsbericht

Valkuil: Payment information en payment process kunnen NIET op dezelfde stap. Dit blijft een architecturele uitdaging in Drupal Commerce.

6. Mollie Payment Gateway ✅¶

Installatie:

composer require drupal/commerce_mollie
ddrush en commerce_mollie -y

Configuratie: - Gateway naam: "Betaling via Mollie" - Machine name: betaling_via_mollie - Test API key ingesteld (van Thomas) - Mode: Test - Callback domain: https://dev.voedingsgeneeskunde.nl

Cruciale fix: Payment gateway koppelen aan order type

ddrush config:set commerce_order.commerce_order_type.default payment_gateways.0 betaling_via_mollie -y

Test checkout: - ✅ Product toevoegen aan winkelwagen werkt - ✅ Checkout doorlopen werkt - ✅ Redirect naar Mollie test environment werkt - ✅ iDEAL/Bancontact betaalmethoden zichtbaar - ✅ Test betaling succesvol - ✅ Order completion werkt - ⚠️ Kleine vertraging in webhook (refresh nodig)

7. Automatische Factuur Generatie ✅¶

Configuratie: - Order Type: Factureren bij "het plaatsen van de bestelling" - Invoice Type: Factuur - Workflow: Default, with validation

Resultaat: - ✅ Factuur wordt automatisch gegenereerd bij order completion - ✅ Twee emails verzonden: 1. Bestelbevestiging (order receipt) 2. Factuur PDF (VG2025001-nl-paid.pdf) - ✅ Logo zichtbaar in factuur - ✅ Bedrijfsgegevens in footer - ✅ BTW correct berekend en getoond - ✅ Factuurnummering correct (VG-2025-001)

8. PDF Factuur Styling 🔄 (Work in Progress)¶

Basis URL Fix: - Probleem: Logo URL was http://default/ in plaats van https://dev.voedingsgeneeskunde.nl - Oplossing: $base_url toegevoegd aan /web/sites/default/settings.php

Custom CSS aangemaakt: - Locatie: web/themes/custom/vg25/css/invoice-pdf.css - Professionele factuur layout - GAP Zuid VG custom font configuratie - Fallback: Verdana

Hook toegevoegd in vg25.theme:

function vg25_library_info_alter(&$libraries, $extension) {
  if ($extension === 'entity_print' && isset($libraries['default'])) {
    $libraries['default']['css']['theme']['themes/custom/vg25/css/invoice-pdf.css'] = [];
  }
}

function vg25_entity_print_pdf_engine_options_alter(array &$options, $entity_type_manager, $print_engine) {
  if ($print_engine->getPluginId() === 'phpwkhtmltopdf') {
    $options['enable-local-file-access'] = TRUE;
  }
}

Huidige status: - ✅ Logo zichtbaar - ✅ Layout correct - ✅ Bedrijfsgegevens footer - ❌ Custom font (GAP Zuid VG) wordt niet geladen

Font probleem: - Wkhtmltopdf laadt CSS, maar fonts niet - Geprobeerd: 1. Relatieve URLs (../fonts/gap/) 2. Absolute HTTPS URLs (https://dev.voedingsgeneeskunde.nl/...) 3. Lokale file paths (file:///var/www/...) 4. Enable local file access hook - Diagnose: PDF gebruikt DejaVu Sans (wkhtmltopdf default), niet Verdana fallback - Betekenis: CSS wordt niet correct ingelezen door wkhtmltopdf

⚠️ Valkuilen en Lessen¶

1. Checkout Flow Architectuur¶

Commerce checkout is complex - betaalinformatie en betalingsproces moeten op aparte stappen, maar dat botst met logische flow. Oplossing: creative stap-indeling.

2. Drupal 10+ Breaking Changes¶

Veel contrib modules gebruiken nog oude Drupal 9 syntax. Patches via Composer zijn essentieel.

3. PDF Font Loading in Wkhtmltopdf¶

Wkhtmltopdf heeft strikte security restrictions voor lokale bestanden. CSS laden en font embedding zijn aparte uitdagingen.

4. Entity Print Library System¶

Entity Print laadt libraries anders dan normale Drupal pages. Hook implementatie is tricky.

5. Base URL Configuratie¶

Drupal genereert verkeerde URLs zonder expliciete $base_url in settings.php.

📋 TODO Morgen¶

Hoge Prioriteit¶

1. GAP Zuid VG Font in PDF Werkend Krijgen¶

Opties om te proberen: - A. Base64 embed fonts - Fonts inline in CSS encoderen (meest betrouwbaar)

@font-face {
  font-family: 'GAP Zuid VG';
  src: url(data:font/truetype;charset=utf-8;base64,[BASE64_DATA]) format('truetype');
}

- B. Wkhtmltopdf debug mode - Checken waarom CSS niet volledig laadt - C. Alternative: DomPDF + font subsetting - Terug naar DomPDF met embedded fonts

Script maken:

# Base64 encode fonts en genereer CSS
for font in GAPZuidVG-*.ttf; do
  base64 -w 0 "$font" > "$font.base64"
done

2. Factuur Template Finaliseren¶

Kleuren aanpassen aan huisstijl
Typography verfijnen
Logo grootte optimaliseren
Footer layout verbeteren
Betalingsvoorwaarden styling

3. Email Templates Aanpassen¶

Order confirmation email styling
Factuur email styling
Consistente branding

4. Invoice Display Bug Fixen¶

Error: InvalidComponentDataException bij /admin/commerce/invoices/1 - SDC component bug in Drupal core - Workaround: Invoices via orders bekijken of direct downloaden

Middelprijs¶

5. Product Tabel Verbeteren¶

Huidige weergave: 2 x Voedingsgeneeskunde 4 - 2025 - €19,90
Gewenst: Stuksprijs + totaal zichtbaar:

2 x Voedingsgeneeskunde 4 - 2025
Stuksprijs: €9,95
Totaal: €19,90

6. User Dashboard¶

Klanten kunnen facturen downloaden via /user/[uid]/orders
Test user experience

7. Mollie Webhook Testen¶

Webhook response tijd verbeteren
Test met verschillende betaalmethoden (Creditcard, Bancontact)

Lage Prioriteit¶

8. Views voor Winkel¶

View "Winkel - Losse nummers" afmaken
Block plaatsen op winkelpagina
Shopping cart block in menu

9. Productcategorieën Opschonen¶

Taxonomy structuur verifiëren
Eventueel exposed filters

10. Live Deployment Voorbereiden¶

Config export: ddrush cex -y
Test API keys vervangen door Live keys
SSL certificaat checken
Performance testing

🔧 Technische Details¶

Modules Geïnstalleerd Vandaag¶

drupal/commerce_mollie 8.x-1.12
mikehaertl/phpwkhtmltopdf 2.5.0
endroid/qr-code 6.0.9
cweagans/composer-patches 2.0.0

Belangrijke Paden¶

Invoice types: /admin/commerce/config/invoice-types
Number patterns: /admin/commerce/config/number-patterns
Checkout flows: /admin/commerce/config/checkout-flows
Payment gateways: /admin/commerce/config/payment-gateways
Entity Print: /admin/config/content/entityprint
Order types: /admin/commerce/config/order-types

Custom Code Locaties¶

Patch: patches/commerce_invoice-file_validator_drupal10.patch
CSS: web/themes/custom/vg25/css/invoice-pdf.css
Hooks: web/themes/custom/vg25/vg25.theme
BTW module: web/modules/custom/vg_commerce_tax/ (van vorige sessie)

Configuratie¶

$base_url = 'https://dev.voedingsgeneeskunde.nl'; in settings.php
Wkhtmltopdf binary: /usr/bin/wkhtmltopdf
Payment gateway gekoppeld aan default order type

💡 Beslissingen & Rationale¶

Wkhtmltopdf boven DomPDF¶

Voor A-merk kwaliteit en pixel-perfect PDF's met volledige CSS3 support.

Verplicht Inloggen bij Checkout¶

Consistent met medische content authenticatie, betere klantrelatie, order history.

Checkout Flow Herstructurering¶

Nieuwe flow nodig door architecturele beperkingen Drupal Commerce checkout systeem.

Factureren bij Order Placement¶

Automatische workflow, klant krijgt direct factuur, geen handmatige stappen.

🚀 Volgende Milestone¶

Doel: Los nummer product volledig werkend (checkout → betaling → factuur met correcte vormgeving)

Daarna: 1. Ticket product type (met QR-code generatie) 2. Abonnement product type (met recurring billing) 3. Live deployment

Status na vandaag: - ✅ Checkout werkt end-to-end - ✅ Mollie test betalingen werken - ✅ Facturen worden automatisch gegenereerd - ✅ Emails worden verzonden - ✅ BTW correct berekend - 🔄 Font styling nog niet werkend (morgen prioriteit #1)

Klaar voor: Font embedding oplossen, template styling verfijnen, dan live!