@blamejs/blamejs-shop 0.1.15 → 0.1.16

package/CHANGELOG.md

@@ -8,6 +8,8 @@ upgrading across more than a few patches at a time.
 
 ## v0.1.x
 
+- v0.1.16 (2026-05-25) — **PayPal express checkout — the on-page button.** PayPal checkout is now usable from the storefront. When PayPal is configured, the checkout page shows a native PayPal button (distinct from PayPal-through-Stripe): it opens a PayPal order for the current cart, the buyer approves in the PayPal popup, and the order is captured and marked paid. A verified PayPal webhook is the asynchronous backstop. This completes the native PayPal integration on top of the adapter and checkout orchestration shipped in the previous two releases. Card / Stripe checkout is unchanged. **Added:** *PayPal button + create/capture routes on the storefront* — The checkout page renders a PayPal button when `PAYPAL_CLIENT_ID` is configured. Its create step posts to `POST /checkout/paypal/create` (prices the cart, opens a PayPal order, persists the local order pending) and its approve step posts to `POST /checkout/paypal/capture` (captures and advances the order to paid, then redirects to the order page). Both validate input and never 500 on a missing cart or id. The buttons collect the same shipping fields as the card form. · *PayPal webhook endpoint* — `POST /api/webhooks/paypal` is the asynchronous backstop for captures completed or refunded out of band. The container verifies each event server-to-server through PayPal's verify-webhook-signature API (no edge HMAC pre-check, unlike Stripe), then advances the order; re-deliveries are idempotent. Point a PayPal webhook at `/api/webhooks/paypal`. **Changed:** *PayPal listed as configurable; CSP note* — The integrations status page and README document PayPal as a first-class checkout option once configured. As with the Stripe pay page's `js.stripe.com`, operators must allow `www.paypal.com` in their Content-Security-Policy `script-src` / `frame-src` for the PayPal SDK and approval popup.
+
 - v0.1.15 (2026-05-25) — **PayPal checkout orchestration.** Checkout can now run a PayPal order end to end, building on the adapter from the previous release. The orchestrator prices the cart, opens a PayPal order and persists the local order as pending, captures it after the buyer approves and advances the order to paid, and has a webhook backstop for captures completed or refunded out of band. Wired in when a PayPal app's credentials are present, and surfaced on the integrations status page. The storefront button and routes that drive this from the pay page come next; card / Stripe checkout is unchanged. **Added:** *checkout PayPal methods* — With a PayPal adapter wired (`paypal` dep), checkout gains three methods. `createPaypalOrder({ cart_id, ship_to, selected_shipping_id, customer, idempotency_key, return_url?, cancel_url? })` prices the cart, opens a PayPal Orders-v2 order, persists the local order in `pending` with the PayPal order id linked, and marks the cart converted. `capturePaypalOrder(paypalOrderId)` captures the approved order and advances the local order to `paid` (idempotent — a retry or a webhook that beat it won't double-transition). `handlePaypalEvent({ headers, rawBody })` is the asynchronous backstop: it verifies the event through PayPal, then maps `PAYMENT.CAPTURE.COMPLETED` → paid and `PAYMENT.CAPTURE.REFUNDED` → refunded, idempotent across re-deliveries. · *PayPal wired from configuration* — When `PAYPAL_CLIENT_ID` + `PAYPAL_SECRET` are set (with `PAYPAL_ENV` and `PAYPAL_WEBHOOK_ID`), the server builds the PayPal adapter and passes it to checkout; the integrations status page lists PayPal as action-needed once card checkout is also live. Off until configured; the existing checkout flow is untouched.
 
 - v0.1.14 (2026-05-25) — **PayPal payment adapter (Orders v2).** `payment.create({ adapter: "paypal", … })` is a new native PayPal adapter alongside the Stripe one — a from-scratch Orders-v2 client over the framework's SSRF-gated HTTP client, with no PayPal SDK dependency. It exchanges an OAuth2 client-credentials token (cached until it nears expiry), creates and captures orders, fetches and refunds them, and verifies inbound webhooks through PayPal's verify-webhook-signature API. This ships the adapter only; wiring it into the checkout flow and a storefront button comes next. Card / Stripe checkout is unchanged. **Added:** *PayPal Orders-v2 adapter* — `payment.create({ adapter: "paypal", clientId, secret, sandbox?, webhookId?, apiBase? })` returns `{ createOrder, captureOrder, getOrder, refund, verifyWebhook }`. `createOrder({ amount_minor, currency, order_id?, return_url?, cancel_url? })` opens a CAPTURE-intent order (amounts converted to PayPal's decimal-string major units, including 0-decimal currencies); `captureOrder(id)` finalizes it; `refund({ capture_id, amount_minor?, currency? })` refunds full or partial; `getOrder(id)` reads status. Every call carries an OAuth2 bearer token exchanged once and cached until ~2 minutes before expiry, and a `PayPal-Request-Id` for idempotency (plus the shared idempotency cache when a `query` handle is wired). `verifyWebhook(headers, rawBody, { webhookId })` confirms an inbound event through PayPal's verify-webhook-signature API and returns `{ ok, event }`. Outbound HTTP goes through `b.httpClient` — no `paypal` npm dependency. Off until the operator supplies credentials; the Stripe adapter and existing checkout are unchanged.

package/README.md

@@ -57,9 +57,9 @@ Every primitive is composed on the vendored blamejs surface — no npm runtime d
 | **`lib/pricing.js`** | Pure-function money math — `lineTotal`, `subtotal`, `totals`, `format`. Multi-currency refused, banker's-style rounding, locale-aware via `Intl.NumberFormat`. |
 | **`lib/tax.js`** | Operator-table adapter. Country / state / postal_prefix → rate_bps. Most-specific-first match, banker's rounding. Pluggable adapter shape for future Stripe Tax / TaxJar / Avalara. |
 | **`lib/shipping.js`** | Operator-table adapter. Services with zones (flat or per-gram + base + min/max), free-over-threshold, `digital_only` flag. |
-| **`lib/payment.js`** | Stripe adapter — verify webhook (HMAC-SHA256 via upstream `b.webhook.verify` alg `hmac-sha256-stripe`), create / retrieve / confirm / cancel PaymentIntent, refund, register / list payment-method domains (Apple Pay + Google Pay enablement for the Express Checkout Element). No `stripe` npm dep — outbound through `b.httpClient` (SSRF-gated, retried, circuit-broken). |
+| **`lib/payment.js`** | Payment adapters — **Stripe** (verify webhook HMAC-SHA256 via upstream `b.webhook.verify`, create / retrieve / confirm / cancel PaymentIntent, refund, register / list payment-method domains for Apple/Google Pay) and **PayPal** (`adapter: "paypal"` — OAuth2 client-credentials token, create / capture / get / refund Orders v2, webhook verify via PayPal's verify-webhook-signature API). No `stripe` / `paypal` npm dep — outbound through `b.httpClient` (SSRF-gated, retried, circuit-broken). |
 | **`lib/order.js`** | FSM-driven post-checkout record via upstream `b.fsm`. States: pending → paid → fulfilling → shipped → delivered (+ refunded / cancelled). Every transition appends to `order_transitions`. |
-| **`lib/checkout.js`** | Orchestrator. `quote()` returns priced quote; `confirm()` creates PaymentIntent + persists order in pending; `handleStripeEvent()` verifies webhook + fires the FSM transition (idempotent on re-delivery). |
+| **`lib/checkout.js`** | Orchestrator. `quote()` returns priced quote; `confirm()` creates a Stripe PaymentIntent + persists order pending; `handleStripeEvent()` verifies webhook + fires the FSM transition. PayPal path: `createPaypalOrder()` opens a PayPal order + persists pending, `capturePaypalOrder()` captures → paid, `handlePaypalEvent()` is the webhook backstop. All idempotent on re-delivery. |
 | **`lib/email.js`** | Transactional templates — order receipt, ship notification, refund confirmation. Strict `{{var}}` renderer with HTML escape + refusal of unknown / unused placeholders. Composed on `b.mail` (DKIM/SPF/DMARC/BIMI upstream). |
 | **`lib/storefront.js`** | Server-rendered HTML — utility bar + sticky header + dark hero with code-preview card + primitives marquee + featured-product callout + collections grid + framework feature band + designed catalog grid + newsletter band + four-column footer. Designed surfaces also for PDP, cart, checkout, pay, order, account login / register / dashboard, search results, `/admin` API landing, 404. Image-bearing cards on the home + search grids pull from `catalog.media`. The default theme stylesheet is external (R2-served `themes/default/assets/css/main.css`) and CSP-compliant — operators override by uploading a replacement at the same key, by passing `opts.theme_css` to renderers, or by registering a named theme through the `theme` primitive. |
 | **`lib/customers.js`** | Customer accounts — passkey (WebAuthn) + **Sign in with Google / Apple** (OIDC). Email is stored hash-only (`b.crypto.namespaceHash` namespace `customer-email`); the raw address never lands in D1. Passkey credentials carry CBOR-encoded public keys, transport hints, and SHA3-512-fingerprinted attestation. `signInWithOIDC` keys federated accounts on the provider `(provider, subject)` and links an existing account only on a provider-verified email (never on an unverified one). `mintAppleClientSecret` produces Apple's required ES256 client-secret JWT from a Services-ID `.p8` key (the one classical signature the protocol mandates; the PQC default doesn't apply to an external IdP's wire format). Account routes (`/account/login`, `/account/register`, `/account`, `/account/login/google`, `/account/login/apple`) ship as designed cards on the storefront. |
@@ -163,10 +163,10 @@ variables. A signed-in operator can see the live on/off status of each at
 | **Apple Pay & Google Pay** | One-tap wallet buttons (Express Checkout Element) on the pay page. | Stripe (above) **+** register each web domain: `POST /admin/payment-method-domains {"domain_name":"shop.example.com"}` | Stripe performs Apple merchant validation and hosts the association file — **no Apple Developer account needed**. Apex, `www`, and each subdomain register separately; a live-mode registration also covers sandbox. |
 | **Sign in with Google** | A *Continue with Google* button on `/account/login` (OIDC). | `GOOGLE_OAUTH_CLIENT_ID`, `GOOGLE_OAUTH_CLIENT_SECRET`, `SHOP_ORIGIN` (e.g. `https://shop.example.com`) | Create a Google Cloud **OAuth 2.0 Web** client; add `<SHOP_ORIGIN>/account/auth/google/callback` as an Authorized redirect URI; consent-screen scopes `openid email profile`. The button appears only when all three are set. |
 | **Sign in with Apple** | A *Continue with Apple* button on `/account/login` (OIDC). | `APPLE_TEAM_ID`, `APPLE_KEY_ID`, `APPLE_CLIENT_ID` (your **Services ID**), `APPLE_PRIVATE_KEY` (the `.p8` key contents), `SHOP_ORIGIN` | Needs an **Apple Developer Program** membership. Create a Services ID, enable Sign in with Apple, add `<SHOP_ORIGIN>/account/auth/apple/callback` as a Return URL, and create a Sign-in-with-Apple key (`.p8`). The shop mints Apple's ES256 client secret from the key at boot (re-minted each deploy, inside Apple's 6-month window). The button appears only when all five are set. |
+| **PayPal checkout** | A native PayPal button on `/checkout` (PayPal Orders v2 — create / approve / capture), distinct from PayPal-through-Stripe. | `PAYPAL_CLIENT_ID`, `PAYPAL_SECRET` (a PayPal REST app), `PAYPAL_WEBHOOK_ID`, `PAYPAL_ENV` (`sandbox`\|`live`); Stripe checkout must also be live | The shop exchanges the OAuth2 token and creates / captures orders server-side; the button drives `/checkout/paypal/create` + `/checkout/paypal/capture`. Point a PayPal webhook at `/api/webhooks/paypal` (verified through PayPal's API). Allow `www.paypal.com` in your CSP `script-src` / `frame-src` (as you would `js.stripe.com`). |
 
 **Planned / not available:**
 
-- **PayPal** — a separate adapter (Orders v2 + its own webhook); planned.
 - **Shop Pay / "Sign in with Shop"** — **not available** to a self-hosted,
   non-Shopify store: the credentials only issue from a Shopify Admin and payment
   flows through Shopify Payments. There is no path to enable it here.

package/lib/admin.js

@@ -1785,8 +1785,8 @@ var INTEGRATIONS_CATALOG = [
     set: "GOOGLE_OAUTH_CLIENT_ID, GOOGLE_OAUTH_CLIENT_SECRET, SHOP_ORIGIN. Add <SHOP_ORIGIN>/account/auth/google/callback as a Google OAuth redirect URI." },
   { key: "apple_signin",     name: "Sign in with Apple",      enables: "A “Continue with Apple” button on the account login page.",
     set: "APPLE_TEAM_ID, APPLE_KEY_ID, APPLE_CLIENT_ID (your Services ID), APPLE_PRIVATE_KEY (the .p8 key contents), SHOP_ORIGIN. Add <SHOP_ORIGIN>/account/auth/apple/callback as a Return URL on the Services ID. Requires an Apple Developer Program membership." },
-  { key: "paypal",           name: "PayPal checkout",         enables: "Native PayPal create / capture via PayPal Orders v2 (distinct from PayPal-through-Stripe). The on-page button and webhook endpoint land in a follow-up release.",
-    set: "PAYPAL_CLIENT_ID, PAYPAL_SECRET (a PayPal REST app), PAYPAL_WEBHOOK_ID, PAYPAL_ENV (sandbox|live). Card checkout (Stripe) must be live too." },
+  { key: "paypal",           name: "PayPal checkout",         enables: "A native PayPal button on the checkout page (create / capture via PayPal Orders v2) — distinct from PayPal-through-Stripe.",
+    set: "PAYPAL_CLIENT_ID, PAYPAL_SECRET (a PayPal REST app), PAYPAL_WEBHOOK_ID, PAYPAL_ENV (sandbox|live). Card checkout (Stripe) must be live too. Point a PayPal webhook at /api/webhooks/paypal." },
 ];
 
 function renderAdminIntegrations(opts) {

package/lib/storefront.js

@@ -1620,6 +1620,15 @@ function renderCheckoutForm(opts) {
     });
   }
   var body = _render(CHECKOUT_PAGE, { subtotal: subtotal });
+  // When PayPal is configured, append its button below the card form. The
+  // block is built as raw HTML (appended after the strict render) so the SDK
+  // script + handlers survive; the client-id is the only interpolation and is
+  // attribute-escaped. The PayPal button's createOrder/onApprove drive the
+  // /checkout/paypal/create + /capture routes. (Operators must allow
+  // www.paypal.com in their CSP script-src/frame-src, as for js.stripe.com.)
+  if (opts.paypal_client_id) {
+    body += _paypalCheckoutBlock(opts.paypal_client_id, totals.currency);
+  }
   return _wrap({
     title:      "Checkout",
     shop_name:  shopName,
@@ -1629,6 +1638,31 @@ function renderCheckoutForm(opts) {
   });
 }
 
+function _paypalCheckoutBlock(clientId, currency) {
+  var esc = b.template.escapeHtml;
+  var cid = esc(String(clientId));
+  var cur = esc(String(currency || "USD"));
+  return "\n<div class=\"checkout-paypal\" style=\"max-width:32rem;margin:1.5rem auto 0;\">" +
+    "<div class=\"pay-card__divider\"><span>or pay with PayPal</span></div>" +
+    "<div id=\"paypal-button-container\"></div>" +
+    "<p id=\"paypal-error\" class=\"auth-form__message auth-form__message--err\" hidden></p>" +
+    "</div>" +
+    "<script src=\"https://www.paypal.com/sdk/js?client-id=" + cid + "&currency=" + cur + "&intent=capture\"></script>" +
+    "<script>(function(){" +
+    "if(!window.paypal){return;}" +
+    "var form=document.querySelector('.checkout-page form');" +
+    "var errEl=document.getElementById('paypal-error');" +
+    "function vals(){var d={};['email','name','country','state','postal'].forEach(function(k){var el=form&&form.elements[k];if(el){d[k]=el.value;}});return d;}" +
+    "function showErr(m){if(errEl){errEl.hidden=false;errEl.textContent=m||'PayPal checkout could not be completed.';}}" +
+    "paypal.Buttons({" +
+    "onClick:function(_d,actions){if(form&&form.reportValidity&&!form.reportValidity()){return actions.reject();}return actions.resolve();}," +
+    "createOrder:function(){return fetch('/checkout/paypal/create',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(vals())}).then(function(r){return r.json();}).then(function(d){if(!d.id){throw new Error(d.error||'create failed');}return d.id;});}," +
+    "onApprove:function(data){return fetch('/checkout/paypal/capture',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({paypal_order_id:data.orderID})}).then(function(r){return r.json();}).then(function(d){if(d.redirect){window.location.href=d.redirect;}else{showErr(d.error);}});}," +
+    "onError:function(){showErr();}" +
+    "}).render('#paypal-button-container');" +
+    "})();</script>\n";
+}
+
 // Stripe Elements payment page — embeds Stripe.js + a minimal
 // mount block. The publishable key is operator-supplied (env
 // `STRIPE_PUBLISHABLE_KEY` → forwarded into the rendered HTML).
@@ -2808,7 +2842,7 @@ function mount(router, deps) {
         return res.end ? res.end() : res.send("");
       }
       var totals = pricing.totals(c, lines, {});
-      _send(res, 200, renderCheckoutForm({ lines: lines, totals: totals, shop_name: shopName, theme: theme }));
+      _send(res, 200, renderCheckoutForm({ lines: lines, totals: totals, shop_name: shopName, theme: theme, paypal_client_id: deps.paypal ? deps.paypal_client_id : null }));
     });
 
     router.post("/checkout", async function (req, res) {
@@ -2867,6 +2901,76 @@ function mount(router, deps) {
       }
     });
 
+    // PayPal express checkout (Orders v2). Mounts when the PayPal adapter is
+    // wired. The pay-page PayPal button drives two AJAX calls: `create` opens
+    // a PayPal order for the current cart (returns its id for the SDK to
+    // approve in the popup); `capture` finalizes after approval and advances
+    // the local order to paid. Both read the session cart; the button posts
+    // the same ship_to fields the card form collects.
+    if (deps.paypal) {
+      router.post("/checkout/paypal/create", async function (req, res) {
+        function _json(status, obj) {
+          res.status(status);
+          res.setHeader && res.setHeader("content-type", "application/json; charset=utf-8");
+          var s = JSON.stringify(obj);
+          return res.end ? res.end(s) : res.send(s);
+        }
+        var body = req.body || {};
+        var sid = _readSidCookie(req);
+        if (!sid) return _json(400, { error: "no-session" });
+        var c = await deps.cart.bySession(sid);
+        if (!c || c.status !== "active") return _json(409, { error: "no-active-cart" });
+        var shipTo = {
+          country: (body.country || "").toUpperCase(),
+          state:   body.state ? String(body.state).toUpperCase() : undefined,
+          postal:  body.postal || undefined,
+        };
+        try {
+          var defaultShipId = typeof deps.default_shipping_id === "function"
+            ? await deps.default_shipping_id() : deps.default_shipping_id;
+          var created = await deps.checkout.createPaypalOrder({
+            cart_id:              c.id,
+            ship_to:              shipTo,
+            selected_shipping_id: body.selected_shipping_id || defaultShipId || "std",
+            customer:             { email: body.email, name: body.name },
+            idempotency_key:      "paypal:" + c.id + ":" + b.uuid.v7(),
+            return_url:           body.return_url || undefined,
+            cancel_url:           body.cancel_url || undefined,
+          });
+          // The PayPal JS SDK's createOrder expects `{ id }`.
+          return _json(200, { id: created.paypal_order_id, order_id: created.order.id });
+        } catch (e) {
+          return _json(e instanceof TypeError ? 400 : 502, { error: (e && e.message) || "paypal-create-failed" });
+        }
+      });
+
+      router.post("/checkout/paypal/capture", async function (req, res) {
+        function _json(status, obj) {
+          res.status(status);
+          res.setHeader && res.setHeader("content-type", "application/json; charset=utf-8");
+          var s = JSON.stringify(obj);
+          return res.end ? res.end(s) : res.send(s);
+        }
+        var body = req.body || {};
+        var paypalOrderId = body.paypal_order_id || body.orderID || body.orderId;
+        if (typeof paypalOrderId !== "string" || !paypalOrderId.length) return _json(400, { error: "paypal_order_id required" });
+        try {
+          var result = await deps.checkout.capturePaypalOrder(paypalOrderId);
+          if (!result.order) return _json(404, { error: "order-not-found" });
+          // Only redirect to the order page when the capture actually
+          // completed (or the order is already paid). A non-completing capture
+          // leaves the order pending — surface it as an error so the client
+          // doesn't show success for an unpaid order.
+          if (!result.handled && result.order.status !== "paid") {
+            return _json(502, { error: "capture-incomplete", status: result.order.status });
+          }
+          return _json(200, { order_id: result.order.id, status: result.order.status, redirect: "/orders/" + result.order.id });
+        } catch (e) {
+          return _json(502, { error: (e && e.message) || "paypal-capture-failed" });
+        }
+      });
+    }
+
     router.get("/pay/:order_id", async function (req, res) {
       var orderId = req.params && req.params.order_id;
       if (!orderId) return _send(res, 404, renderNotFound({ shop_name: shopName, theme: theme }));
@@ -2952,6 +3056,32 @@ function mount(router, deps) {
         return res.end ? res.end("handler error") : res.send("");
       }
     });
+
+    // PayPal webhook — the async backstop for captures completed/refunded out
+    // of band (the create/capture flow is primary). Verified server-to-server
+    // through PayPal's API (handlePaypalEvent), so unlike Stripe there is no
+    // edge HMAC pre-check; the raw body is captured upstream by
+    // webhookRawBodyCapture. Mounts only when the PayPal adapter is wired.
+    if (deps.paypal) {
+      router.post("/api/webhooks/paypal", async function (req, res) {
+        var raw = Buffer.isBuffer(req.body) ? req.body.toString("utf8")
+          : (typeof req.body === "string" ? req.body : "");
+        try {
+          var result = await deps.checkout.handlePaypalEvent({ headers: req.headers || {}, rawBody: raw });
+          res.status(200);
+          res.setHeader && res.setHeader("content-type", "application/json; charset=utf-8");
+          var payload = JSON.stringify({ ok: true, handled: !!(result && result.handled) });
+          return res.end ? res.end(payload) : res.send(payload);
+        } catch (e) {
+          if (e && e.code === "WEBHOOK_INVALID") {
+            res.status(400);
+            return res.end ? res.end("invalid signature") : res.send("");
+          }
+          res.status(500);
+          return res.end ? res.end("handler error") : res.send("");
+        }
+      });
+    }
   }
 
   // ---- customer accounts (passkey-only) ------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blamejs/blamejs-shop",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Open-source framework built on blamejs. Vendored stack, zero npm runtime deps, PQC-first crypto, security-on by default.",
   "main": "lib/index.js",
   "scripts": {