diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 42ec099..800ed9d 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -72,3 +72,22 @@ jobs:
                     dependencies: "${{ matrix.dependencies }}"
                     symfony: "${{ matrix.symfony }}"
                     testsuite: "functional"
+
+    javascript-tests:
+        runs-on: "ubuntu-latest"
+        steps:
+            -   uses: "actions/checkout@v4"
+            # The chooser JS unit tests live in tests/Application, whose package.json has file: deps on the
+            # installed Sylius/Symfony assets — so PHP + a composer install are needed to populate vendor/
+            # before yarn can resolve them.
+            -   uses: "shivammathur/setup-php@v2"
+                with:
+                    php-version: "8.4"
+                    extensions: "intl, mbstring"
+                    coverage: "none"
+            -   uses: "ramsey/composer-install@v4"
+            -   uses: "actions/setup-node@v4"
+                with:
+                    node-version: "22"
+            -   run: "yarn --cwd tests/Application install"
+            -   run: "yarn --cwd tests/Application test"
diff --git a/CLAUDE.md b/CLAUDE.md
index 7b6b9ed..5ddceb5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -57,7 +57,7 @@ When adding/changing a provider, the work happens in three places: the `Provider
 **Checkout pickup-point selection (async, no framework).** This is the heart of the shop UX and it deliberately makes **zero provider calls while the shipping page renders**, so a slow or down carrier can never stall checkout:
 
 - `Form/Extension/ShipmentTypeExtension` adds a hidden `pickupPoint` field (`Form/Type/PickupPointType`, a `HiddenType` + `Form/DataTransformer/PickupPointTransformer`). `Form/Extension/ShippingMethodChoiceTypeExtension` stamps `data-pickup-point-provider` onto each pickup-capable shipping-method radio.
-- After the page is on screen, the framework-free `public/js/setono-pickup-point.js` (wired via the `_javascripts` twig hook on `sylius_shop.base#javascripts`) fetches `GET /pickup-points` (`Controller/Action/PickupPointsAction`) **once**. That endpoint returns each pickup-capable method's points for the current cart, keyed by method code, with a per-provider `try/catch` so one failing carrier doesn't take the others down. The script builds the radio list, toggles the visible group as the shipping method changes, and shows loading/empty/error states. It (re-)initialises on both `DOMContentLoaded` and `turbo:load` because Sylius' shop navigates with Turbo (checkout steps are AJAX body swaps).
+- After the page is on screen, `public/js/setono-pickup-point.js` — a framework-free native **ES module** (`<script type="module">`, no bundler) wired via the `_javascripts` twig hook on `sylius_shop.checkout#javascripts` — fetches `GET /pickup-points` (`Controller/Action/PickupPointsAction`) **once**. That endpoint returns each pickup-capable method's points for the current cart, keyed by method code, with a per-provider `try/catch` so one failing carrier doesn't take the others down. The module's `PickupPointChooser` class builds the chooser by **cloning the `<template>`s** rendered by `templates/shop/checkout/_pickup_point_templates.html.twig` (all markup, translations and styling live there — there is no JS-built markup; a missing template just renders nothing), toggles the visible group as the shipping method changes, and shows loading/empty/error states. It (re-)initialises on both `DOMContentLoaded` and `turbo:load` because Sylius' shop navigates with Turbo (checkout steps are AJAX body swaps). It is extensible without forking — subclass `PickupPointChooser` (register it on `window.SetonoSyliusPickupPointChooser`), listen for the bubbling `setono:pickup-point(s):*` CustomEvents, or set `window.setonoSyliusPickupPointConfig`; see `docs/customizing-the-chooser.md`. JS unit tests run under Vitest/jsdom: `yarn --cwd tests/Application test`.
 - Each radio's value is a `value` token — the whole `DTO/PickupPoint` base64url-encoded by `Encoder/PickupPointEncoder`. Selecting a radio writes the token into the hidden field; on submit `PickupPointTransformer` decodes it straight back into the `PickupPoint` (no provider call, no re-resolve, no faker drift) and `Model/PickupPointAwareTrait::setPickupPoint()` persists it to the `pickup_point` JSON column. `Validator/Constraints/HasPickupPointSelected` enforces that a pickup-capable method actually got a point.
 
 **Identity lives on the DTO.** `DTO/PickupPoint` is a plain final class with public properties (`provider`, `id`, `country`, `name`, …, plus an open `metadata` map) and `fromArray()`/`jsonSerialize()` — not a Doctrine resource. The 1.x `Model/PickupPoint*` resources and the `PickupPointCode` (`provider---id---country`) value object were removed in 2.0.
diff --git a/README.md b/README.md
index ab8dc4a..2df6673 100644
--- a/README.md
+++ b/README.md
@@ -189,6 +189,10 @@ bin/console assets:install
 
 The plugin's JavaScript and CSS are auto-included on the shop checkout via Twig
 hooks (`sylius_shop.checkout#javascripts` / `sylius_shop.checkout#stylesheets`).
+The chooser is a framework-free ES module (loaded with `<script type="module">`)
+that builds its UI by cloning overridable Twig `<template>`s, so you can restyle or
+extend it without forking — see
+[docs/customizing-the-chooser.md](docs/customizing-the-chooser.md).
 
 ### Step 8: Admin shipping method form
 
diff --git a/UPGRADE.md b/UPGRADE.md
index 04c293e..e65b873 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -28,8 +28,12 @@ pickup points for the current cart. Each point carries display fields (`name`,
 `address`, `zipCode`, `city`, `latitude`, `longitude`) plus a `value` token —
 the *whole* point, base64url-encoded by `PickupPointEncoder`. The shipping page
 fetches this **asynchronously, after it has rendered** (so a slow or down carrier
-API never blocks the page), and the framework-free shop JS
-(`public/js/setono-pickup-point.js`) builds the radio list from the response.
+API never blocks the page), and the framework-free shop JS — a native ES module
+(`public/js/setono-pickup-point.js`, loaded with `<script type="module">`) — builds
+the chooser by cloning overridable Twig `<template>`s from
+`_pickup_point_templates.html.twig`. It is extensible without forking: subclass the
+exported `PickupPointChooser`, listen for the `setono:pickup-point(s):*` CustomEvents,
+or set `window.setonoSyliusPickupPointConfig` — see `docs/customizing-the-chooser.md`.
 
 ## Plugin file layout
 
diff --git a/docs/customizing-the-chooser.md b/docs/customizing-the-chooser.md
new file mode 100644
index 0000000..66bcd9f
--- /dev/null
+++ b/docs/customizing-the-chooser.md
@@ -0,0 +1,76 @@
+# Customizing the checkout pickup-point chooser (JavaScript)
+
+The shop checkout pickup-point chooser is a framework-free ES module
+(`public/js/setono-pickup-point.js`, loaded as `<script type="module">`). Once the shipping page is on screen it
+fetches the pickup points for the current cart, then builds the UI by **cloning the `<template>` elements** from
+`templates/shop/checkout/_pickup_point_templates.html.twig`.
+
+You can customize it at four levels, from easiest to most powerful — reach for the lowest one that does the job.
+
+## 1. Restyle the markup — override the Twig templates (no JavaScript)
+
+The chooser's entire markup lives in `_pickup_point_templates.html.twig` as `<template>`s. Copy it into your app
+at `templates/bundles/SetonoSyliusPickupPointPlugin/shop/checkout/_pickup_point_templates.html.twig` and change
+the classes/structure however you like — add a map, show opening hours from a point's `metadata`, swap icons.
+The JavaScript only reads these hooks, so keep them on the right elements:
+
+- `[data-slot="name|address|label|current-name"]` — text is written into them.
+- `[data-role="body|list|required|header|radio|badge"]` — structural anchors / toggled elements.
+- `[data-action="change|keep"]` — buttons the script wires up.
+- `[data-state="loading|empty|error"]` — the message spans.
+
+The five templates are `#setono-pickup-point-section`, `-summary`, `-list`, `-row` and `-message`.
+
+## 2. Toggle behaviour — `window.setonoSyliusPickupPointConfig`
+
+Set a global config object before the module boots:
+
+```html
+<script>
+    window.setonoSyliusPickupPointConfig = {
+        autoSelectNearest: false,        // don't pre-select the nearest point; show the list instead
+        summaryAddressSeparator: ', ',   // separator in the compact summary
+        listAddressSeparator: ' — ',     // separator in the list rows
+    };
+</script>
+```
+
+## 3. React to the chooser — DOM events
+
+The chooser dispatches bubbling `CustomEvent`s on the field element (they bubble up to `document`):
+
+| Event | `detail` | Notes |
+| --- | --- | --- |
+| `setono:pickup-points:loaded` | `{ chooser, field, methodCode, points }` | points fetched for the selected method |
+| `setono:pickup-points:error` | `{ chooser, field, error }` | the fetch failed |
+| `setono:pickup-point:selected` | `{ chooser, field, point, token, source }` | a point was chosen (`source`: `auto` / `list` / `keep`); **cancelable** |
+
+```js
+document.addEventListener('setono:pickup-point:selected', (event) => {
+    analytics.track('pickup_point_selected', event.detail.point);
+    // event.preventDefault() vetoes writing the token (e.g. to block auto-select)
+});
+```
+
+## 4. Change behaviour — subclass `PickupPointChooser`
+
+Register a subclass on `window.SetonoSyliusPickupPointChooser`; the boot instantiates it instead of the default.
+Override one of the seams: `renderRow`, `renderSummary`, `renderList`, `formatAddress`, `shouldAutoSelect`,
+`fetchPoints`.
+
+```html
+<script type="module">
+    import { PickupPointChooser } from '/bundles/setonosyliuspickuppointplugin/js/setono-pickup-point.js';
+
+    window.SetonoSyliusPickupPointChooser = class extends PickupPointChooser {
+        renderRow(point, currentIdentity) {
+            const node = super.renderRow(point, currentIdentity);
+            // ... tweak the cloned row node ...
+            return node;
+        }
+    };
+</script>
+```
+
+Because module scripts are deferred and `DOMContentLoaded` waits for them, your registration runs before the
+chooser's boot reads the global — no ordering tricks needed.
diff --git a/public/js/setono-pickup-point.js b/public/js/setono-pickup-point.js
index 07a82c7..bb7c808 100644
--- a/public/js/setono-pickup-point.js
+++ b/public/js/setono-pickup-point.js
@@ -1,325 +1,462 @@
 /**
- * Pickup-point chooser (no framework, no Stimulus).
+ * Pickup-point chooser — a framework-free ES module (no build step, no Stimulus).
  *
- * The shipping page renders without any provider calls. Once it is on screen this script fetches — once
- * per visit, asynchronously — every pickup-capable method's points for the current cart from a single
- * JSON endpoint (window.setonoSyliusPickupPointUrl); a slow or down provider therefore degrades
- * gracefully instead of blocking checkout.
+ * The shipping page renders without any provider calls. Once it is on screen this module fetches — once per
+ * visit, asynchronously — every pickup-capable method's points for the current cart from a single JSON
+ * endpoint (window.setonoSyliusPickupPointUrl); a slow or down provider therefore degrades gracefully
+ * instead of blocking checkout.
  *
- * The chooser is built client-side and inserted into the selected pickup-capable shipping method's card.
- * It has two states: a compact summary of the chosen point (with a "Change" button) and an expandable
- * list of points (with a "Selected" badge on the current one and a "Keep this" shortcut). Selecting a
- * point writes its opaque token into the hidden input, which the server decodes on submit (no re-fetch).
+ * The chooser is built by CLONING server-rendered <template> elements (the `_pickup_point_templates.html.twig`
+ * partial) and filling their [data-slot]/[data-role]/[data-action] hooks — so the markup, its translations and
+ * its styling all live in Twig, and a consumer can restyle it by overriding that partial with no JavaScript.
+ * It has two states: a compact summary of the chosen point (with a "Change" button) and an expandable list of
+ * points (with a "Selected" badge on the current one and a "Keep this" shortcut). Selecting a point writes its
+ * opaque token into the hidden input, which the server decodes on submit (no re-fetch). If a template is
+ * absent the chooser renders nothing rather than building markup of its own.
  *
- * Sylius' shop navigates with Turbo (checkout steps are AJAX body swaps), so init is bound to both
- * DOMContentLoaded and turbo:load; a per-field flag keeps it from running twice on the same DOM.
+ * Extension points for plugin users:
+ *   - subclass {@link PickupPointChooser} and register it on `window.SetonoSyliusPickupPointChooser` to override
+ *     a seam (renderRow, formatAddress, fetchPoints, shouldAutoSelect, …) — the boot uses that global if set;
+ *   - listen for the bubbling CustomEvents `setono:pickup-points:loaded` / `:error` and `setono:pickup-point:selected`
+ *     (the last is cancelable: preventDefault() vetoes writing the token);
+ *   - set `window.setonoSyliusPickupPointConfig` to tweak behaviour, e.g. `{ autoSelectNearest: false }`.
+ *
+ * Sylius' shop navigates with Turbo (checkout steps are AJAX body swaps), so the boot is bound to both
+ * DOMContentLoaded and turbo:load; a per-field flag keeps it from running twice on the same DOM. Loaded as
+ * `<script type="module">`.
  */
-(function () {
-    'use strict';
 
-    if (window.__setonoSyliusPickupPointBooted) {
-        return;
+const SECTION_ATTR = 'data-setono-pickup-section';
+
+const DEFAULTS = {
+    autoSelectNearest: true,
+    summaryAddressSeparator: ' · ',
+    listAddressSeparator: ', ',
+};
+
+// The token is base64url(JSON of the whole point); decoding it lets the compact summary show the chosen
+// point's details without matching it back to a (possibly regenerated) fetched point.
+export function decodeToken(token) {
+    try {
+        let base64 = String(token).replace(/-/g, '+').replace(/_/g, '/');
+        while (0 !== base64.length % 4) {
+            base64 += '=';
+        }
+        const bytes = Uint8Array.from(atob(base64), function (character) {
+            return character.charCodeAt(0);
+        });
+
+        return JSON.parse(new TextDecoder().decode(bytes));
+    } catch (error) {
+        return null;
+    }
+}
+
+// A point's identity is provider + id — matching the server-side PickupPointIdentifier, where country is not
+// part of the identity but travels in the identifier's metadata (it is what re-resolves a point, not what names
+// it). It is NOT the full token: a provider may return slightly different details for the same point between
+// calls (and the faker provider regenerates them), so a persisted selection must still match its list entry on
+// reload by identity rather than byte-equality.
+export function identity(token) {
+    const point = decodeToken(token);
+
+    return null === point ? null : [point.provider, point.id].join(' ');
+}
+
+export function addressLine(point, separator) {
+    const locality = [point.zipCode, point.city].filter(Boolean).join(' ');
+
+    return [point.address, locality].filter(Boolean).join(separator);
+}
+
+function shipmentIndex(name) {
+    const match = /\[shipments]\[(\d+)]/.exec(name || '');
+
+    return match ? match[1] : '0';
+}
+
+function methodRadioSelector(index) {
+    return 'input[type="radio"][name*="[shipments][' + index + '][method]"]';
+}
+
+// Clones the first element of a server-rendered <template>, or returns null when it is absent. Callers treat
+// null as "nothing to render" so the chooser degrades gracefully if the templates partial was not rendered.
+function cloneTemplate(id) {
+    const template = document.getElementById(id);
+    if (template instanceof HTMLTemplateElement) {
+        const node = template.content.firstElementChild;
+        if (null !== node) {
+            return node.cloneNode(true);
+        }
     }
-    window.__setonoSyliusPickupPointBooted = true;
 
-    const SVG_NS = 'http://www.w3.org/2000/svg';
-    const SECTION_ATTR = 'data-setono-pickup-section';
+    return null;
+}
 
-    function shipmentIndex(name) {
-        const match = /\[shipments]\[(\d+)]/.exec(name || '');
+// One fetch per visit, shared by every shipment's chooser. Reset by the boot so a re-entered checkout step
+// re-fetches (the points depend on the cart's shipping address, which may have changed).
+let pointsPromise = null;
 
-        return match ? match[1] : '0';
-    }
+function loadPoints(url) {
+    if (null === pointsPromise) {
+        pointsPromise = fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
+            .then(function (response) {
+                if (!response.ok) {
+                    throw new Error('Request failed: ' + response.status);
+                }
 
-    function methodRadioSelector(index) {
-        return 'input[type="radio"][name*="[shipments][' + index + '][method]"]';
+                return response.json();
+            });
     }
 
-    function el(tag, className, text) {
-        const node = document.createElement(tag);
-        if (className) {
-            node.className = className;
-        }
-        if (undefined !== text && null !== text) {
-            node.textContent = text;
-        }
-
-        return node;
+    return pointsPromise;
+}
+
+export class PickupPointChooser {
+    constructor(field, options) {
+        this.field = field;
+        this.input = field.querySelector('[data-pickup-point-input]');
+        this.index = shipmentIndex(this.input ? this.input.getAttribute('name') : '');
+        this.options = Object.assign(
+            {},
+            DEFAULTS,
+            { url: window.setonoSyliusPickupPointUrl },
+            window.setonoSyliusPickupPointConfig || {},
+            options || {},
+        );
+        this.mode = 'summary';
+        // null = loading, false = failed, object = points keyed by shipping method code.
+        this.data = null;
     }
 
-    // The token is base64url(JSON of the whole point); decoding it lets the compact summary show the
-    // chosen point's details without matching it back to a (possibly regenerated) fetched point.
-    function decodeToken(token) {
-        try {
-            let base64 = String(token).replace(/-/g, '+').replace(/_/g, '/');
-            while (0 !== base64.length % 4) {
-                base64 += '=';
-            }
-            const bytes = Uint8Array.from(atob(base64), function (character) {
-                return character.charCodeAt(0);
-            });
-
-            return JSON.parse(new TextDecoder().decode(bytes));
-        } catch (error) {
-            return null;
+    start() {
+        if (null === this.input) {
+            return;
         }
-    }
 
-    function addressLine(point, separator) {
-        const locality = [point.zipCode, point.city].filter(Boolean).join(' ');
+        const self = this;
+        document.querySelectorAll(methodRadioSelector(this.index)).forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                self.input.value = '';
+                self.mode = 'summary';
+                self.render();
+            });
+        });
 
-        return [point.address, locality].filter(Boolean).join(separator);
+        this.render();
     }
 
-    // A point's identity is provider + id + country, not its full token: a provider may return slightly
-    // different details for the same point between calls (and the faker provider regenerates them), so a
-    // persisted selection must still match its list entry on reload by identity rather than byte-equality.
-    function identity(token) {
-        const point = decodeToken(token);
-
-        return null === point ? null : [point.provider, point.id, point.country].join(' ');
+    fetchPoints() {
+        return loadPoints(this.options.url);
     }
 
-    function checkIcon() {
-        const svg = document.createElementNS(SVG_NS, 'svg');
-        svg.setAttribute('viewBox', '0 0 16 16');
-        svg.setAttribute('width', '16');
-        svg.setAttribute('height', '16');
-        svg.setAttribute('fill', 'currentColor');
+    setData(data) {
+        this.data = data;
 
-        const path = document.createElementNS(SVG_NS, 'path');
-        path.setAttribute('d', 'M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z');
-        svg.appendChild(path);
+        const method = this.currentMethod();
+        const methodCode = null !== method ? method.value : null;
+        if (false === data) {
+            this.dispatch('setono:pickup-points:error', { error: null });
+        } else {
+            const points = (null !== methodCode && data) ? (data[methodCode] || []) : [];
+            this.dispatch('setono:pickup-points:loaded', { methodCode: methodCode, points: points });
+        }
 
-        return svg;
+        this.render();
     }
 
-    function message(field, attribute) {
-        return el('div', 'setono-sylius-pickup-point-field-message text-body-secondary small py-2', field.getAttribute(attribute));
+    currentMethod() {
+        return document.querySelector(methodRadioSelector(this.index) + ':checked');
     }
 
-    function summary(field, input, rerender) {
-        const point = decodeToken(input.value) || {};
-
-        const box = el('div', 'd-flex align-items-center gap-3 bg-body border border-primary rounded-3 p-3');
-
-        const check = el('span', 'setono-pickup-point__check rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center');
-        check.appendChild(checkIcon());
-        box.appendChild(check);
+    pointsFor(method) {
+        if (this.data && false !== this.data) {
+            return this.data[method.value] || [];
+        }
 
-        const info = el('div', 'flex-grow-1');
-        info.appendChild(el('div', 'fw-bold', point.name || ''));
-        info.appendChild(el('div', 'text-body-secondary small', addressLine(point, ' · ')));
-        box.appendChild(info);
+        return null;
+    }
 
-        const change = el('button', 'btn btn-link text-primary fw-semibold text-decoration-none p-0', field.getAttribute('data-change-text'));
-        change.type = 'button';
-        change.addEventListener('click', function () {
-            field._mode = 'list';
-            rerender();
+    removeSection() {
+        document.querySelectorAll('[' + SECTION_ATTR + '="' + this.index + '"]').forEach(function (section) {
+            section.remove();
         });
-        box.appendChild(change);
-
-        return box;
     }
 
-    function list(field, input, points, rerender) {
-        const wrapper = el('div');
+    shouldAutoSelect(points) {
+        // Index of the point to pre-select (providers return them ordered by distance), or -1 to skip.
+        return this.options.autoSelectNearest && Array.isArray(points) && points.length > 0 ? 0 : -1;
+    }
 
-        const current = input.value ? decodeToken(input.value) : null;
-        const currentIdentity = input.value ? identity(input.value) : null;
-        if (null !== current) {
-            const head = el('div', 'd-flex justify-content-between align-items-center gap-2 mb-2');
+    formatAddress(point, separator) {
+        return addressLine(point, separator);
+    }
 
-            const label = el('div', 'small text-body-secondary');
-            label.appendChild(document.createTextNode((field.getAttribute('data-currently-text') || '') + ' '));
-            label.appendChild(el('span', 'fw-bold text-body', current.name || ''));
-            head.appendChild(label);
+    render() {
+        this.removeSection();
 
-            const keep = el('button', 'btn btn-sm btn-outline-primary flex-shrink-0', field.getAttribute('data-keep-text'));
-            keep.type = 'button';
-            keep.addEventListener('click', function () {
-                field._mode = 'summary';
-                rerender();
-            });
-            head.appendChild(keep);
+        const method = this.currentMethod();
+        if (null === method || !method.hasAttribute('data-pickup-point-provider')) {
+            return;
+        }
 
-            wrapper.appendChild(head);
+        const card = method.closest('.card');
+        if (null === card) {
+            return;
         }
 
-        const group = el('div', 'setono-pickup-point__list list-group');
-        const groupName = 'setono-pickup-point-choice-' + shipmentIndex(input.getAttribute('name'));
+        const section = cloneTemplate('setono-pickup-point-section');
+        if (null === section) {
+            // The templates partial is not on the page — render nothing rather than fabricate markup.
+            return;
+        }
+        section.setAttribute(SECTION_ATTR, this.index);
 
-        points.forEach(function (point) {
-            const isSelected = null !== currentIdentity && identity(point.value) === currentIdentity;
-            const item = el('label', 'list-group-item d-flex align-items-center gap-3' + (isSelected ? ' bg-primary-subtle' : ''));
+        const points = this.pointsFor(method);
 
-            const radio = el('input', 'form-check-input flex-shrink-0 m-0');
-            radio.type = 'radio';
-            radio.name = groupName;
-            radio.value = point.value;
-            radio.checked = isSelected;
-            radio.addEventListener('change', function () {
-                input.value = radio.value;
-                field._mode = 'summary';
-                rerender();
-            });
-            item.appendChild(radio);
+        // Pre-select the nearest point so the shopper lands on the most likely choice in the compact summary
+        // instead of an open list; they can still open the list to pick another.
+        if ('' === this.input.value && Array.isArray(points)) {
+            const autoIndex = this.shouldAutoSelect(points);
+            if (autoIndex >= 0 && autoIndex < points.length) {
+                this.selectPoint(points[autoIndex], 'auto', false);
+            }
+        }
 
-            const info = el('div', 'flex-grow-1');
-            info.appendChild(el('div', 'fw-bold', point.name || ''));
-            info.appendChild(el('div', 'text-body-secondary small', addressLine(point, ', ')));
-            item.appendChild(info);
+        const summaryMode = 'summary' === this.mode && '' !== this.input.value;
 
-            if (isSelected) {
-                item.appendChild(el('span', 'badge bg-primary text-white flex-shrink-0', field.getAttribute('data-selected-text')));
-            }
+        const required = section.querySelector('[data-role="required"]');
+        if (null !== required) {
+            required.hidden = !(!summaryMode && Array.isArray(points) && points.length > 0);
+        }
 
-            group.appendChild(item);
-        });
+        let content;
+        if (summaryMode) {
+            content = this.renderSummary();
+        } else if (null === this.data) {
+            content = this.renderMessage('loading');
+        } else if (false === this.data) {
+            content = this.renderMessage('error');
+        } else if (!Array.isArray(points) || 0 === points.length) {
+            content = this.renderMessage('empty');
+        } else {
+            content = this.renderList(points);
+        }
 
-        wrapper.appendChild(group);
+        if (null !== content) {
+            const body = section.querySelector('[data-role="body"]') || section;
+            body.appendChild(content);
+        }
 
-        return wrapper;
+        card.appendChild(section);
     }
 
-    function removeSection(index) {
-        document.querySelectorAll('[' + SECTION_ATTR + '="' + index + '"]').forEach(function (section) {
-            section.remove();
-        });
-    }
+    renderSummary() {
+        const node = cloneTemplate('setono-pickup-point-summary');
+        if (null === node) {
+            return null;
+        }
 
-    function render(field, state) {
-        const input = field.querySelector('[data-pickup-point-input]');
-        if (null === input) {
-            return;
+        const point = decodeToken(this.input.value) || {};
+        const name = node.querySelector('[data-slot="name"]');
+        if (null !== name) {
+            name.textContent = point.name || '';
+        }
+        const address = node.querySelector('[data-slot="address"]');
+        if (null !== address) {
+            address.textContent = this.formatAddress(point, this.options.summaryAddressSeparator);
         }
 
-        const index = shipmentIndex(input.getAttribute('name'));
-        removeSection(index);
+        const change = node.querySelector('[data-action="change"]');
+        if (null !== change) {
+            const self = this;
+            change.addEventListener('click', function () {
+                self.mode = 'list';
+                self.render();
+            });
+        }
 
-        const method = document.querySelector(methodRadioSelector(index) + ':checked');
-        if (null === method || !method.hasAttribute('data-pickup-point-provider')) {
-            return;
+        return node;
+    }
+
+    renderList(points) {
+        const node = cloneTemplate('setono-pickup-point-list');
+        if (null === node) {
+            return null;
         }
 
-        const card = method.closest('.card');
-        if (null === card) {
-            return;
+        const current = this.input.value ? decodeToken(this.input.value) : null;
+        const currentIdentity = this.input.value ? identity(this.input.value) : null;
+
+        const header = node.querySelector('[data-role="header"]');
+        if (null !== header) {
+            if (null !== current) {
+                header.hidden = false;
+                const currentName = header.querySelector('[data-slot="current-name"]');
+                if (null !== currentName) {
+                    currentName.textContent = current.name || '';
+                }
+                const keep = header.querySelector('[data-action="keep"]');
+                if (null !== keep) {
+                    const self = this;
+                    keep.addEventListener('click', function () {
+                        self.mode = 'summary';
+                        self.render();
+                    });
+                }
+            } else {
+                header.hidden = true;
+            }
         }
 
-        const section = el('div', 'setono-pickup-point px-3 pb-3');
-        section.setAttribute(SECTION_ATTR, index);
-        section.appendChild(el('hr', 'setono-pickup-point__divider my-3'));
+        const list = node.querySelector('[data-role="list"]') || node;
+        const self = this;
+        points.forEach(function (point) {
+            const row = self.renderRow(point, currentIdentity);
+            if (null !== row) {
+                list.appendChild(row);
+            }
+        });
 
-        const points = (state.data && false !== state.data) ? (state.data[method.value] || []) : null;
+        return node;
+    }
 
-        // Pre-select the nearest point (providers return them ordered by distance from the address) so
-        // the shopper lands on the most likely choice in the compact summary instead of an open list;
-        // they can still open the list to pick another.
-        if (Array.isArray(points) && points.length > 0 && '' === input.value) {
-            input.value = points[0].value;
-            field._mode = 'summary';
+    renderRow(point, currentIdentity) {
+        const node = cloneTemplate('setono-pickup-point-row');
+        if (null === node) {
+            return null;
         }
 
-        const summaryMode = 'summary' === field._mode && '' !== input.value;
+        if (undefined === currentIdentity) {
+            currentIdentity = this.input.value ? identity(this.input.value) : null;
+        }
+        const isSelected = null !== currentIdentity && identity(point.value) === currentIdentity;
+        if (isSelected) {
+            node.classList.add('bg-primary-subtle');
+        }
 
-        const heading = el('div', 'fw-bold mb-2');
-        heading.appendChild(document.createTextNode(field.getAttribute('data-label-text') || ''));
-        if (!summaryMode && Array.isArray(points) && points.length > 0) {
-            heading.appendChild(document.createTextNode(' '));
-            heading.appendChild(el('span', 'text-danger', '*'));
+        const radio = node.querySelector('[data-role="radio"]');
+        if (null !== radio) {
+            radio.name = 'setono-pickup-point-choice-' + this.index;
+            radio.value = point.value;
+            radio.checked = isSelected;
+            const self = this;
+            radio.addEventListener('change', function () {
+                self.selectPoint(point, 'list');
+            });
         }
-        section.appendChild(heading);
 
-        const rerender = function () {
-            render(field, state);
-        };
+        const name = node.querySelector('[data-slot="name"]');
+        if (null !== name) {
+            name.textContent = point.name || '';
+        }
+        const address = node.querySelector('[data-slot="address"]');
+        if (null !== address) {
+            address.textContent = this.formatAddress(point, this.options.listAddressSeparator);
+        }
 
-        if (summaryMode) {
-            section.appendChild(summary(field, input, rerender));
-        } else if (null === state.data) {
-            section.appendChild(message(field, 'data-loading-text'));
-        } else if (false === state.data) {
-            section.appendChild(message(field, 'data-error-text'));
-        } else if (!Array.isArray(points) || 0 === points.length) {
-            section.appendChild(message(field, 'data-empty-text'));
-        } else {
-            section.appendChild(list(field, input, points, rerender));
+        const badge = node.querySelector('[data-role="badge"]');
+        if (null !== badge) {
+            badge.hidden = !isSelected;
         }
 
-        card.appendChild(section);
+        return node;
     }
 
-    function setup(field, state) {
-        const input = field.querySelector('[data-pickup-point-input]');
-        if (null === input) {
-            return;
+    renderMessage(state) {
+        const node = cloneTemplate('setono-pickup-point-message');
+        if (null === node) {
+            return null;
         }
 
-        field._mode = 'summary';
-
-        document.querySelectorAll(methodRadioSelector(shipmentIndex(input.getAttribute('name')))).forEach(function (radio) {
-            radio.addEventListener('change', function () {
-                input.value = '';
-                field._mode = 'summary';
-                render(field, state);
-            });
+        node.querySelectorAll('[data-state]').forEach(function (span) {
+            span.hidden = span.getAttribute('data-state') !== state;
         });
 
-        render(field, state);
+        return node;
     }
 
-    function init() {
-        const url = window.setonoSyliusPickupPointUrl;
-        if (!url) {
-            return;
-        }
-
-        const fields = [];
-        document.querySelectorAll('[data-pickup-point-field]').forEach(function (field) {
-            if (!field.hasAttribute('data-pickup-point-ready')) {
-                field.setAttribute('data-pickup-point-ready', '');
-                fields.push(field);
+    // Writes the chosen point's token into the hidden input and switches to the summary, dispatching a
+    // cancelable `selected` event first so a listener can veto it. Used by both list selection and auto-select.
+    selectPoint(point, source, rerender) {
+        const token = point.value;
+        const event = this.dispatch(
+            'setono:pickup-point:selected',
+            { point: decodeToken(token), token: token, source: source },
+            true,
+        );
+        if (event.defaultPrevented) {
+            this.mode = 'list';
+            if (false !== rerender) {
+                this.render();
             }
-        });
-        if (0 === fields.length) {
+
             return;
         }
 
-        // null = still loading, false = failed, object = points keyed by shipping method code.
-        const state = { data: null };
+        this.input.value = token;
+        this.mode = 'summary';
+        if (false !== rerender) {
+            this.render();
+        }
+    }
 
-        fields.forEach(function (field) {
-            setup(field, state);
+    dispatch(name, detail, cancelable) {
+        const event = new CustomEvent(name, {
+            bubbles: true,
+            cancelable: Boolean(cancelable),
+            detail: Object.assign({ chooser: this, field: this.field }, detail),
         });
+        this.field.dispatchEvent(event);
 
-        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
-            .then(function (response) {
-                if (!response.ok) {
-                    throw new Error('Request failed: ' + response.status);
-                }
+        return event;
+    }
+}
 
-                return response.json();
-            })
+function boot() {
+    const url = window.setonoSyliusPickupPointUrl;
+    if (!url) {
+        return;
+    }
+
+    const Ctor = window.SetonoSyliusPickupPointChooser || PickupPointChooser;
+
+    const choosers = [];
+    document.querySelectorAll('[data-pickup-point-field]').forEach(function (field) {
+        if (field.hasAttribute('data-pickup-point-ready')) {
+            return;
+        }
+        field.setAttribute('data-pickup-point-ready', '');
+        choosers.push(new Ctor(field, {}));
+    });
+    if (0 === choosers.length) {
+        return;
+    }
+
+    // Fresh fetch for this visit (see loadPoints) — one request shared by all of this page's shipments.
+    pointsPromise = null;
+
+    choosers.forEach(function (chooser) {
+        chooser.start();
+        chooser.fetchPoints()
             .then(function (data) {
-                state.data = data;
+                chooser.setData(data);
             })
             .catch(function () {
-                state.data = false;
-            })
-            .then(function () {
-                fields.forEach(function (field) {
-                    render(field, state);
-                });
+                chooser.setData(false);
             });
-    }
+    });
+}
 
-    document.addEventListener('DOMContentLoaded', init);
-    document.addEventListener('turbo:load', init);
+// Test-only: resets the per-visit fetch memo so specs can re-run the boot deterministically.
+export function __resetBootForTests() {
+    pointsPromise = null;
+}
 
-    // The script itself may be (re-)evaluated after the DOM is already interactive.
-    if ('loading' !== document.readyState) {
-        init();
-    }
-})();
+document.addEventListener('DOMContentLoaded', boot);
+document.addEventListener('turbo:load', boot);
+
+// The module may be evaluated after the DOM is already interactive.
+if ('loading' !== document.readyState) {
+    boot();
+}
diff --git a/src/DependencyInjection/SetonoSyliusPickupPointExtension.php b/src/DependencyInjection/SetonoSyliusPickupPointExtension.php
index c63fcf0..bc55cbd 100644
--- a/src/DependencyInjection/SetonoSyliusPickupPointExtension.php
+++ b/src/DependencyInjection/SetonoSyliusPickupPointExtension.php
@@ -108,6 +108,10 @@ public function prepend(ContainerBuilder $container): void
                     ],
                 ],
                 'sylius_shop.checkout#javascripts' => [
+                    'setono_sylius_pickup_point.templates' => [
+                        'template' => '@SetonoSyliusPickupPointPlugin/shop/checkout/_pickup_point_templates.html.twig',
+                        'priority' => -90,
+                    ],
                     'setono_sylius_pickup_point.javascripts' => [
                         'template' => '@SetonoSyliusPickupPointPlugin/_javascripts.html.twig',
                         'priority' => -100,
diff --git a/templates/_javascripts.html.twig b/templates/_javascripts.html.twig
index 75c5646..483e8fb 100644
--- a/templates/_javascripts.html.twig
+++ b/templates/_javascripts.html.twig
@@ -1,2 +1,2 @@
 <script>window.setonoSyliusPickupPointUrl = '{{ path('setono_sylius_pickup_point_shop_pickup_points') }}';</script>
-<script src="{{ asset('bundles/setonosyliuspickuppointplugin/js/setono-pickup-point.js') }}"></script>
+<script type="module" src="{{ asset('bundles/setonosyliuspickuppointplugin/js/setono-pickup-point.js') }}"></script>
diff --git a/templates/shop/checkout/_pickup_point_templates.html.twig b/templates/shop/checkout/_pickup_point_templates.html.twig
new file mode 100644
index 0000000..4e51ccd
--- /dev/null
+++ b/templates/shop/checkout/_pickup_point_templates.html.twig
@@ -0,0 +1,68 @@
+{#
+    Overridable markup for the checkout pickup-point chooser. public/js/setono-pickup-point.js clones these
+    <template>s and fills their [data-slot] / [data-role] / [data-action] hooks; a consumer can restyle the
+    chooser by overriding this partial (or just one of the blocks below) — no JavaScript needed — as long as
+    those hooks are preserved. Emitted once per checkout page via the sylius_shop.checkout#javascripts hook.
+#}
+{% block setono_sylius_pickup_point_section %}
+    <template id="setono-pickup-point-section">
+        <div class="setono-pickup-point px-3 pb-3">
+            <hr class="setono-pickup-point__divider my-3">
+            <div class="fw-bold mb-2">
+                <span data-slot="label">{{ 'setono_sylius_pickup_point.form.shipment.pickup_point'|trans }}</span>
+                <span class="text-danger" data-role="required" hidden>*</span>
+            </div>
+            <div data-role="body"></div>
+        </div>
+    </template>
+{% endblock %}
+
+{% block setono_sylius_pickup_point_summary %}
+    <template id="setono-pickup-point-summary">
+        <div class="d-flex align-items-center gap-3 bg-body border border-primary rounded-3 p-3">
+            <span class="setono-pickup-point__check rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center">
+                <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>
+            </span>
+            <div class="flex-grow-1">
+                <div class="fw-bold" data-slot="name"></div>
+                <div class="text-body-secondary small" data-slot="address"></div>
+            </div>
+            <button type="button" class="btn btn-link text-primary fw-semibold text-decoration-none p-0" data-action="change">{{ 'setono_sylius_pickup_point.ui.change'|trans }}</button>
+        </div>
+    </template>
+{% endblock %}
+
+{% block setono_sylius_pickup_point_list %}
+    <template id="setono-pickup-point-list">
+        <div>
+            <div class="d-flex justify-content-between align-items-center gap-2 mb-2" data-role="header" hidden>
+                <div class="small text-body-secondary">{{ 'setono_sylius_pickup_point.ui.currently'|trans }} <span class="fw-bold text-body" data-slot="current-name"></span></div>
+                <button type="button" class="btn btn-sm btn-outline-primary flex-shrink-0" data-action="keep">{{ 'setono_sylius_pickup_point.ui.keep_this'|trans }}</button>
+            </div>
+            <div class="setono-pickup-point__list list-group" data-role="list"></div>
+        </div>
+    </template>
+{% endblock %}
+
+{% block setono_sylius_pickup_point_row %}
+    <template id="setono-pickup-point-row">
+        <label class="list-group-item d-flex align-items-center gap-3">
+            <input type="radio" class="form-check-input flex-shrink-0 m-0" data-role="radio">
+            <div class="flex-grow-1">
+                <div class="fw-bold" data-slot="name"></div>
+                <div class="text-body-secondary small" data-slot="address"></div>
+            </div>
+            <span class="badge bg-primary text-white flex-shrink-0" data-role="badge" hidden>{{ 'setono_sylius_pickup_point.ui.selected'|trans }}</span>
+        </label>
+    </template>
+{% endblock %}
+
+{% block setono_sylius_pickup_point_message %}
+    <template id="setono-pickup-point-message">
+        <div class="setono-sylius-pickup-point-field-message text-body-secondary small py-2">
+            <span data-state="loading">{{ 'setono_sylius_pickup_point.ui.loading_pickup_points'|trans }}</span>
+            <span data-state="empty" hidden>{{ 'setono_sylius_pickup_point.ui.no_pickup_points'|trans }}</span>
+            <span data-state="error" hidden>{{ 'setono_sylius_pickup_point.ui.error_loading_pickup_points'|trans }}</span>
+        </div>
+    </template>
+{% endblock %}
diff --git a/templates/shop/checkout/select_shipping/shipment/pickupPoint.html.twig b/templates/shop/checkout/select_shipping/shipment/pickupPoint.html.twig
index dde32ad..239567d 100644
--- a/templates/shop/checkout/select_shipping/shipment/pickupPoint.html.twig
+++ b/templates/shop/checkout/select_shipping/shipment/pickupPoint.html.twig
@@ -2,22 +2,12 @@
 
 {% if form.pickupPoint is defined %}
     {#
-        Carrier only: the hidden field is what is submitted, and the data attributes hand the localized
-        strings to public/js/setono-pickup-point.js. The visible chooser is built by that script and
-        inserted into the selected pickup-capable shipping method's card, because the points are fetched
-        asynchronously after the page has rendered (a slow/down provider never blocks the page).
+        Carrier only: the hidden field is what is submitted. The visible chooser is built by
+        public/js/setono-pickup-point.js, which clones the <template>s from `_pickup_point_templates.html.twig`
+        and inserts the result into the selected pickup-capable shipping method's card — the points are fetched
+        asynchronously after the page has rendered, so a slow/down provider never blocks the page.
     #}
-    <div data-pickup-point-field
-         data-label-text="{{ 'setono_sylius_pickup_point.form.shipment.pickup_point'|trans }}"
-         data-loading-text="{{ 'setono_sylius_pickup_point.ui.loading_pickup_points'|trans }}"
-         data-empty-text="{{ 'setono_sylius_pickup_point.ui.no_pickup_points'|trans }}"
-         data-error-text="{{ 'setono_sylius_pickup_point.ui.error_loading_pickup_points'|trans }}"
-         data-change-text="{{ 'setono_sylius_pickup_point.ui.change'|trans }}"
-         data-keep-text="{{ 'setono_sylius_pickup_point.ui.keep_this'|trans }}"
-         data-currently-text="{{ 'setono_sylius_pickup_point.ui.currently'|trans }}"
-         data-selected-text="{{ 'setono_sylius_pickup_point.ui.selected'|trans }}"
-         hidden
-    >
+    <div data-pickup-point-field hidden>
         {{ form_widget(form.pickupPoint, {'attr': {'data-pickup-point-input': ''}}) }}
     </div>
 {% endif %}
diff --git a/tests/Application/package.json b/tests/Application/package.json
index bdebb61..3806ef3 100644
--- a/tests/Application/package.json
+++ b/tests/Application/package.json
@@ -3,7 +3,8 @@
     "scripts": {
         "build": "encore dev",
         "build:prod": "encore production",
-        "watch": "encore dev --watch"
+        "watch": "encore dev --watch",
+        "test": "vitest run"
     },
     "dependencies": {
         "@sylius-ui/admin": "file:../../vendor/sylius/sylius/src/Sylius/Bundle/AdminBundle",
@@ -15,6 +16,8 @@
         "@hotwired/stimulus": "^3.0.0",
         "@symfony/stimulus-bridge": "^3.2.0",
         "@symfony/webpack-encore": "^5.0.1",
-        "tom-select": "^2.2.2"
+        "jsdom": "^29.1.1",
+        "tom-select": "^2.2.2",
+        "vitest": "^4.1.8"
     }
 }
diff --git a/tests/Application/tests/js/boot.spec.js b/tests/Application/tests/js/boot.spec.js
new file mode 100644
index 0000000..09af528
--- /dev/null
+++ b/tests/Application/tests/js/boot.spec.js
@@ -0,0 +1,65 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, makePoints, section, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+// The module binds boot() to DOMContentLoaded at import time; dispatching the event re-runs it deterministically.
+function fireBoot() {
+    document.dispatchEvent(new Event('DOMContentLoaded'));
+}
+
+function stubFetch(data) {
+    vi.stubGlobal('fetch', vi.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve(data) })));
+}
+
+describe('boot', () => {
+    it('boots: stamps the field ready, fetches once and renders', async () => {
+        const { field } = buildDom();
+        window.setonoSyliusPickupPointUrl = '/pickup-points';
+        stubFetch({ faker: makePoints(2) });
+
+        fireBoot();
+
+        expect(field.hasAttribute('data-pickup-point-ready')).toBe(true);
+        // start() renders a loading section synchronously; wait for the summary that appears after the fetch.
+        await vi.waitFor(() => {
+            const name = section() && section().querySelector('[data-slot="name"]');
+            expect(name && name.textContent).toBe('Point #0');
+        });
+        expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('does nothing and does not throw when no endpoint URL is set', () => {
+        const { field } = buildDom();
+
+        expect(() => fireBoot()).not.toThrow();
+        expect(field.hasAttribute('data-pickup-point-ready')).toBe(false);
+        expect(section()).toBeNull();
+    });
+
+    it('uses a subclass registered on window.SetonoSyliusPickupPointChooser', async () => {
+        buildDom();
+        window.setonoSyliusPickupPointUrl = '/pickup-points';
+        window.setonoSyliusPickupPointConfig = { autoSelectNearest: false }; // show the list so rows render
+        window.SetonoSyliusPickupPointChooser = class extends PickupPointChooser {
+            renderRow(point, currentIdentity) {
+                const node = super.renderRow(point, currentIdentity);
+                if (null !== node) {
+                    node.setAttribute('data-custom', '');
+                }
+
+                return node;
+            }
+        };
+        stubFetch({ faker: makePoints(2) });
+
+        fireBoot();
+
+        // Wait for the list (autoSelectNearest=false) rendered after the fetch resolves.
+        await vi.waitFor(() => {
+            expect(section()).not.toBeNull();
+            expect(section().querySelectorAll('[data-role="list"] label[data-custom]').length).toBe(2);
+        });
+    });
+});
diff --git a/tests/Application/tests/js/events.spec.js b/tests/Application/tests/js/events.spec.js
new file mode 100644
index 0000000..17773e5
--- /dev/null
+++ b/tests/Application/tests/js/events.spec.js
@@ -0,0 +1,59 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, makePoints, rows, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+describe('events', () => {
+    it('dispatches a bubbling selected event (source=list) on row click', () => {
+        const { field } = buildDom();
+        const points = makePoints(3);
+        new PickupPointChooser(field, { autoSelectNearest: false }).setData({ faker: points });
+
+        const handler = vi.fn();
+        document.addEventListener('setono:pickup-point:selected', handler);
+        const radio = rows()[1].querySelector('[data-role="radio"]');
+        radio.checked = true;
+        radio.dispatchEvent(new Event('change', { bubbles: true }));
+
+        expect(handler).toHaveBeenCalledOnce();
+        const detail = handler.mock.calls[0][0].detail;
+        expect(detail.source).toBe('list');
+        expect(detail.token).toBe(points[1].value);
+        expect(detail.point.id).toBe('1');
+    });
+
+    it('dispatches a selected event (source=auto) during auto-select', () => {
+        const { field } = buildDom();
+        const handler = vi.fn();
+        document.addEventListener('setono:pickup-point:selected', handler);
+        new PickupPointChooser(field).setData({ faker: makePoints(2) });
+
+        expect(handler).toHaveBeenCalledOnce();
+        expect(handler.mock.calls[0][0].detail.source).toBe('auto');
+    });
+
+    it('lets a listener veto the selection with preventDefault()', () => {
+        const { field, input } = buildDom();
+        document.addEventListener('setono:pickup-point:selected', (event) => event.preventDefault());
+        new PickupPointChooser(field).setData({ faker: makePoints(2) }); // auto-select vetoed
+
+        expect(input.value).toBe('');
+    });
+
+    it('dispatches loaded (with methodCode + points) and error', () => {
+        const { field } = buildDom();
+        const loaded = vi.fn();
+        const error = vi.fn();
+        document.addEventListener('setono:pickup-points:loaded', loaded);
+        document.addEventListener('setono:pickup-points:error', error);
+
+        new PickupPointChooser(field).setData({ faker: makePoints(2) });
+        expect(loaded).toHaveBeenCalledOnce();
+        expect(loaded.mock.calls[0][0].detail.methodCode).toBe('faker');
+        expect(loaded.mock.calls[0][0].detail.points.length).toBe(2);
+
+        new PickupPointChooser(field).setData(false);
+        expect(error).toHaveBeenCalledOnce();
+    });
+});
diff --git a/tests/Application/tests/js/fixtures.js b/tests/Application/tests/js/fixtures.js
new file mode 100644
index 0000000..a7b85d6
--- /dev/null
+++ b/tests/Application/tests/js/fixtures.js
@@ -0,0 +1,122 @@
+// Test fixtures for the pickup-point chooser specs.
+//
+// The TEMPLATES_HTML below mirrors templates/shop/checkout/_pickup_point_templates.html.twig — keep the
+// [data-slot] / [data-role] / [data-action] / [data-state] hooks in sync with that partial (the real Twig
+// markup, with its translations and Bootstrap classes, is covered by the Playwright/Behat layer). The chooser
+// only ever reads those hooks, so the unstyled copy here is enough to exercise the JS.
+
+import { __resetBootForTests } from '../../../../public/js/setono-pickup-point.js';
+
+export const TEMPLATES_HTML = `
+<template id="setono-pickup-point-section">
+    <div class="setono-pickup-point">
+        <hr>
+        <div class="fw-bold mb-2"><span data-slot="label">Pickup point</span> <span class="text-danger" data-role="required" hidden>*</span></div>
+        <div data-role="body"></div>
+    </div>
+</template>
+<template id="setono-pickup-point-summary">
+    <div class="border border-primary">
+        <span class="setono-pickup-point__check"><svg viewBox="0 0 16 16"><path d="M0 0"/></svg></span>
+        <div><div class="fw-bold" data-slot="name"></div><div data-slot="address"></div></div>
+        <button type="button" data-action="change">Change</button>
+    </div>
+</template>
+<template id="setono-pickup-point-list">
+    <div>
+        <div class="header" data-role="header" hidden><div>Currently: <span data-slot="current-name"></span></div><button type="button" data-action="keep">Keep this</button></div>
+        <div class="list-group" data-role="list"></div>
+    </div>
+</template>
+<template id="setono-pickup-point-row">
+    <label class="list-group-item"><input type="radio" data-role="radio"><div><div class="fw-bold" data-slot="name"></div><div data-slot="address"></div></div><span class="badge" data-role="badge" hidden>Selected</span></label>
+</template>
+<template id="setono-pickup-point-message">
+    <div><span data-state="loading">Loading…</span><span data-state="empty" hidden>None</span><span data-state="error" hidden>Error</span></div>
+</template>
+`;
+
+// base64url(JSON) — mirrors the server-side PickupPointEncoder so specs build valid tokens (incl. UTF-8).
+export function tokenFor(point) {
+    const bytes = new TextEncoder().encode(JSON.stringify(point));
+    let binary = '';
+    bytes.forEach((b) => {
+        binary += String.fromCharCode(b);
+    });
+
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+// A "fetched point" as the endpoint returns it: flat display fields + the opaque `value` token (base64url of
+// the full pickup point, carrying provider/id/country/metadata used by decodeToken/identity).
+export function makePoint(overrides = {}) {
+    const full = Object.assign(
+        { provider: 'faker', id: '0', name: 'Post office #0', address: 'Main Street 1', zipCode: '9000', city: 'Aalborg', country: 'DK', latitude: '57.0', longitude: '9.9', metadata: [] },
+        overrides,
+    );
+
+    return { value: tokenFor(full), name: full.name, address: full.address, zipCode: full.zipCode, city: full.city, latitude: full.latitude, longitude: full.longitude };
+}
+
+export function makePoints(count, provider = 'faker') {
+    const points = [];
+    for (let i = 0; i < count; i++) {
+        points.push(makePoint({ provider: provider, id: String(i), name: 'Point #' + i, address: 'Street ' + i }));
+    }
+
+    return points;
+}
+
+// Builds the minimal checkout DOM the chooser needs: the <template>s, a shipping-method radio inside a `.card`,
+// and the field wrapper with the hidden input.
+export function buildDom({ provider = 'faker', methodValue = 'faker', checked = true, templates = true } = {}) {
+    document.body.innerHTML = '';
+
+    if (templates) {
+        const holder = document.createElement('div');
+        holder.innerHTML = TEMPLATES_HTML.trim();
+        Array.from(holder.children).forEach((child) => document.body.appendChild(child));
+    }
+
+    const card = document.createElement('div');
+    card.className = 'card';
+    const radio = document.createElement('input');
+    radio.type = 'radio';
+    radio.name = 'sylius_shop_checkout_select_shipping[shipments][0][method]';
+    radio.value = methodValue;
+    if (null !== provider) {
+        radio.setAttribute('data-pickup-point-provider', provider);
+    }
+    radio.checked = checked;
+    card.appendChild(radio);
+    document.body.appendChild(card);
+
+    const field = document.createElement('div');
+    field.setAttribute('data-pickup-point-field', '');
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = 'sylius_shop_checkout_select_shipping[shipments][0][pickupPoint]';
+    input.setAttribute('data-pickup-point-input', '');
+    field.appendChild(input);
+    document.body.appendChild(field);
+
+    return { card, radio, field, input };
+}
+
+export function section() {
+    return document.querySelector('[data-setono-pickup-section]');
+}
+
+export function rows() {
+    const list = document.querySelector('[data-role="list"]');
+
+    return list ? Array.from(list.querySelectorAll('label')) : [];
+}
+
+export function resetGlobals() {
+    __resetBootForTests();
+    delete window.setonoSyliusPickupPointUrl;
+    delete window.setonoSyliusPickupPointConfig;
+    delete window.SetonoSyliusPickupPointChooser;
+    document.body.innerHTML = '';
+}
diff --git a/tests/Application/tests/js/helpers.spec.js b/tests/Application/tests/js/helpers.spec.js
new file mode 100644
index 0000000..48b5ac3
--- /dev/null
+++ b/tests/Application/tests/js/helpers.spec.js
@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { decodeToken, identity, addressLine } from '../../../../public/js/setono-pickup-point.js';
+import { tokenFor } from './fixtures.js';
+
+describe('decodeToken', () => {
+    it('round-trips a base64url JSON token (incl. UTF-8)', () => {
+        const token = tokenFor({ provider: 'gls', id: '42', name: 'Kiosk Ø', city: 'København' });
+        expect(decodeToken(token)).toMatchObject({ provider: 'gls', id: '42', name: 'Kiosk Ø', city: 'København' });
+    });
+
+    it('returns null for malformed input', () => {
+        expect(decodeToken('!!! not base64 !!!')).toBeNull();
+        expect(decodeToken('')).toBeNull();
+        expect(decodeToken(null)).toBeNull();
+        expect(decodeToken(undefined)).toBeNull();
+        expect(decodeToken(btoa('hello'))).toBeNull(); // valid base64, not JSON
+    });
+});
+
+describe('identity', () => {
+    it('is provider + id (not country or name)', () => {
+        expect(identity(tokenFor({ provider: 'gls', id: '42', country: 'DK', name: 'A' }))).toBe('gls 42');
+    });
+
+    it('matches across faker drift — same provider+id, different name/country', () => {
+        const a = identity(tokenFor({ provider: 'faker', id: '3', name: 'Old', country: 'DK' }));
+        const b = identity(tokenFor({ provider: 'faker', id: '3', name: 'New', country: 'SE' }));
+        expect(a).toBe(b);
+        expect(a).toBe('faker 3');
+    });
+
+    it('returns null for a bad token', () => {
+        expect(identity('!!!')).toBeNull();
+    });
+});
+
+describe('addressLine', () => {
+    it('joins the address and "zip city" with the separator', () => {
+        expect(addressLine({ address: 'Main St 1', zipCode: '9000', city: 'Aalborg' }, ' · ')).toBe('Main St 1 · 9000 Aalborg');
+    });
+
+    it('omits empty parts', () => {
+        expect(addressLine({ address: '', zipCode: '', city: 'Aalborg' }, ', ')).toBe('Aalborg');
+        expect(addressLine({ address: 'Main St', zipCode: '', city: '' }, ', ')).toBe('Main St');
+    });
+});
diff --git a/tests/Application/tests/js/list.spec.js b/tests/Application/tests/js/list.spec.js
new file mode 100644
index 0000000..239aecb
--- /dev/null
+++ b/tests/Application/tests/js/list.spec.js
@@ -0,0 +1,51 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, makePoints, tokenFor, section, rows, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+function openList() {
+    section().querySelector('[data-action="change"]').click();
+}
+
+describe('list', () => {
+    it('marks the persisted point as Selected by identity on reload (faker drift)', () => {
+        const { field, input } = buildDom();
+        const points = makePoints(3); // provider faker, ids 0,1,2
+        // A persisted token with the same provider+id as points[1] but a drifted name.
+        input.value = tokenFor({ provider: 'faker', id: '1', name: 'Old name', country: 'DK', metadata: [] });
+        new PickupPointChooser(field).setData({ faker: points }); // summary (input already set)
+        openList();
+
+        const allRows = rows();
+        expect(allRows[1].querySelector('[data-role="badge"]').hidden).toBe(false);
+        expect(allRows[1].classList.contains('bg-primary-subtle')).toBe(true);
+        expect(allRows[1].querySelector('[data-role="radio"]').checked).toBe(true);
+        expect(allRows[0].querySelector('[data-role="badge"]').hidden).toBe(true);
+        expect(section().querySelector('[data-slot="current-name"]').textContent).toBe('Old name');
+    });
+
+    it('selecting a row writes its token and returns to the summary', () => {
+        const { field, input } = buildDom();
+        const points = makePoints(3);
+        new PickupPointChooser(field, { autoSelectNearest: false }).setData({ faker: points }); // list
+
+        const radio = rows()[2].querySelector('[data-role="radio"]');
+        radio.checked = true;
+        radio.dispatchEvent(new Event('change', { bubbles: true }));
+
+        expect(input.value).toBe(points[2].value);
+        expect(section().querySelector('[data-action="change"]')).not.toBeNull(); // back to summary
+    });
+
+    it('"Keep this" returns to the summary without changing the input', () => {
+        const { field, input } = buildDom();
+        new PickupPointChooser(field).setData({ faker: makePoints(3) }); // auto-selected summary
+        const token = input.value;
+        openList();
+        section().querySelector('[data-action="keep"]').click();
+
+        expect(input.value).toBe(token);
+        expect(section().querySelector('[data-action="change"]')).not.toBeNull();
+    });
+});
diff --git a/tests/Application/tests/js/render.spec.js b/tests/Application/tests/js/render.spec.js
new file mode 100644
index 0000000..98d7511
--- /dev/null
+++ b/tests/Application/tests/js/render.spec.js
@@ -0,0 +1,53 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, makePoints, section, rows, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+describe('render', () => {
+    it('auto-selects the nearest point and shows the summary', () => {
+        const { field, input } = buildDom();
+        const points = makePoints(3);
+        new PickupPointChooser(field).setData({ faker: points });
+
+        expect(input.value).toBe(points[0].value);
+        const sec = section();
+        expect(sec).not.toBeNull();
+        expect(sec.querySelector('[data-action="change"]')).not.toBeNull();
+        expect(sec.querySelector('[data-slot="name"]').textContent).toBe(points[0].name);
+    });
+
+    it('with autoSelectNearest=false leaves the input empty and shows the list + required marker', () => {
+        const { field, input } = buildDom();
+        new PickupPointChooser(field, { autoSelectNearest: false }).setData({ faker: makePoints(3) });
+
+        expect(input.value).toBe('');
+        expect(rows().length).toBe(3);
+        expect(section().querySelector('[data-role="required"]').hidden).toBe(false);
+    });
+
+    it('renders no section for a method without a provider', () => {
+        const { field } = buildDom({ provider: null });
+        new PickupPointChooser(field).setData({ faker: makePoints(2) });
+
+        expect(section()).toBeNull();
+    });
+
+    it('removes the prior section on re-render', () => {
+        const { field } = buildDom();
+        const chooser = new PickupPointChooser(field);
+        chooser.setData({ faker: makePoints(2) });
+        chooser.render();
+        chooser.render();
+
+        expect(document.querySelectorAll('[data-setono-pickup-section]').length).toBe(1);
+    });
+
+    it('renders nothing and does not crash when the templates are absent', () => {
+        const { field } = buildDom({ templates: false });
+        const chooser = new PickupPointChooser(field);
+
+        expect(() => chooser.setData({ faker: makePoints(2) })).not.toThrow();
+        expect(section()).toBeNull();
+    });
+});
diff --git a/tests/Application/tests/js/states.spec.js b/tests/Application/tests/js/states.spec.js
new file mode 100644
index 0000000..881bab6
--- /dev/null
+++ b/tests/Application/tests/js/states.spec.js
@@ -0,0 +1,34 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { PickupPointChooser } from '../../../../public/js/setono-pickup-point.js';
+import { buildDom, section, resetGlobals } from './fixtures.js';
+
+afterEach(() => resetGlobals());
+
+function visibleStates() {
+    return Array.from(section().querySelectorAll('[data-state]'))
+        .filter((span) => !span.hidden)
+        .map((span) => span.getAttribute('data-state'));
+}
+
+describe('states', () => {
+    it('shows the loading message before data arrives', () => {
+        const { field } = buildDom();
+        new PickupPointChooser(field).render(); // data is null
+
+        expect(visibleStates()).toEqual(['loading']);
+    });
+
+    it('shows the error message on fetch failure', () => {
+        const { field } = buildDom();
+        new PickupPointChooser(field).setData(false);
+
+        expect(visibleStates()).toEqual(['error']);
+    });
+
+    it('shows the empty message when the method has no points', () => {
+        const { field } = buildDom();
+        new PickupPointChooser(field).setData({ faker: [] });
+
+        expect(visibleStates()).toEqual(['empty']);
+    });
+});
diff --git a/tests/Application/vitest.config.mjs b/tests/Application/vitest.config.mjs
new file mode 100644
index 0000000..3c5c85d
--- /dev/null
+++ b/tests/Application/vitest.config.mjs
@@ -0,0 +1,19 @@
+// ESM config (.mjs) on purpose: tests/Application/package.json is NOT "type": "module" because Encore's
+// webpack.config.js is CommonJS. Vitest still imports the ESM source under test via Vite.
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+        include: ['tests/js/**/*.spec.js'],
+        restoreMocks: true,
+        unstubGlobals: true,
+    },
+    // The module under test lives at the repo root (public/js), above this config's root (tests/Application),
+    // so allow Vite to read files up there.
+    server: {
+        fs: {
+            allow: ['../..'],
+        },
+    },
+});