From 8f0a56079f5032e8638bc239d8acc20448da7ef0 Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Tue, 3 Mar 2026 15:31:52 +0100
Subject: [PATCH] =?UTF-8?q?feat(billing):=20A5=20=E2=80=94=20dual-path=20J?=
 =?UTF-8?q?S=20templates=20for=20Paddle=20overlay=20/=20Stripe=20redirect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New _payment_js.html: conditionally loads Paddle.js or nothing (Stripe
  uses server-side Checkout Session). Provides startCheckout() helper.
- All checkout templates use _payment_js.html instead of _paddle.html
- export.html, signup_step_4.html: Paddle.Checkout.open() → startCheckout()
- dashboard_boosts.html: inline onclick → buyItem() with server round-trip
- New /billing/checkout/item endpoint for single-item purchases (boosts, credits)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/padelnomics/billing/routes.py         | 26 ++++++++++
 .../padelnomics/planner/templates/export.html |  8 +--
 .../templates/suppliers/dashboard.html        |  2 +-
 .../suppliers/partials/dashboard_boosts.html  | 28 +++++++++-
 .../suppliers/partials/signup_step_4.html     |  6 +--
 .../suppliers/templates/suppliers/signup.html |  2 +-
 .../padelnomics/templates/_payment_js.html    | 51 +++++++++++++++++++
 7 files changed, 108 insertions(+), 15 deletions(-)
 create mode 100644 web/src/padelnomics/templates/_payment_js.html

diff --git a/web/src/padelnomics/billing/routes.py b/web/src/padelnomics/billing/routes.py
index c06708a..84feaba 100644
--- a/web/src/padelnomics/billing/routes.py
+++ b/web/src/padelnomics/billing/routes.py
@@ -175,6 +175,32 @@ async def checkout(plan: str):
     return jsonify(payload)
 
 
+@bp.route("/checkout/item", methods=["POST"])
+@login_required
+async def checkout_item():
+    """Return checkout JSON for a single item (boost, credit pack, etc.).
+
+    Used by dashboard boost/credit buttons that need a server round-trip
+    for Stripe (Checkout Session creation) and work with Paddle overlay too.
+    Expects JSON body: {price_key, custom_data, success_url?}
+    """
+    body = await request.get_json(silent=True) or {}
+    price_key = body.get("price_key", "")
+    custom_data = body.get("custom_data", {})
+    success_url = body.get("success_url", f"{config.BASE_URL}/suppliers/dashboard?tab=boosts")
+
+    price_id = await get_price_id(price_key)
+    if not price_id:
+        return jsonify({"error": "Product not configured."}), 400
+
+    payload = _provider().build_checkout_payload(
+        price_id=price_id,
+        custom_data=custom_data,
+        success_url=success_url,
+    )
+    return jsonify(payload)
+
+
 @bp.route("/manage", methods=["POST"])
 @login_required
 async def manage():
diff --git a/web/src/padelnomics/planner/templates/export.html b/web/src/padelnomics/planner/templates/export.html
index 70f99fa..f5c2327 100644
--- a/web/src/padelnomics/planner/templates/export.html
+++ b/web/src/padelnomics/planner/templates/export.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block title %}{{ t.export_title }} - {{ config.APP_NAME }}{% endblock %}
-{% block paddle %}{% include "_paddle.html" %}{% endblock %}
+{% block paddle %}{% include "_payment_js.html" %}{% endblock %}
 
 {% block head %}
 <style>
@@ -133,11 +133,7 @@ document.getElementById('export-form').addEventListener('submit', async function
       btn.textContent = '{{ t.export_btn }}';
       return;
     }
-    Paddle.Checkout.open({
-      items: data.items,
-      customData: data.customData,
-      settings: data.settings,
-    });
+    startCheckout(data);
     btn.disabled = false;
     btn.textContent = '{{ t.export_btn }}';
   } catch (err) {
diff --git a/web/src/padelnomics/suppliers/templates/suppliers/dashboard.html b/web/src/padelnomics/suppliers/templates/suppliers/dashboard.html
index 798b93a..417f08b 100644
--- a/web/src/padelnomics/suppliers/templates/suppliers/dashboard.html
+++ b/web/src/padelnomics/suppliers/templates/suppliers/dashboard.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block title %}{{ t.sd_page_title }} - {{ config.APP_NAME }}{% endblock %}
-{% block paddle %}{% include "_paddle.html" %}{% endblock %}
+{% block paddle %}{% include "_payment_js.html" %}{% endblock %}
 
 {% block head %}
 <style>
diff --git a/web/src/padelnomics/suppliers/templates/suppliers/partials/dashboard_boosts.html b/web/src/padelnomics/suppliers/templates/suppliers/partials/dashboard_boosts.html
index 0e1e8f4..d1bc713 100644
--- a/web/src/padelnomics/suppliers/templates/suppliers/partials/dashboard_boosts.html
+++ b/web/src/padelnomics/suppliers/templates/suppliers/partials/dashboard_boosts.html
@@ -102,7 +102,7 @@
           <div class="bst-boost__price">&euro;{{ b.price }}/mo</div>
           {% if price_ids.get(b.key) %}
           <button type="button" class="bst-buy-btn"
-            onclick="Paddle.Checkout.open({items:[{priceId:'{{ price_ids[b.key] }}',quantity:1}],customData:{supplier_id:'{{ supplier.id }}'}})">
+            onclick="buyItem('{{ b.key }}', {supplier_id:'{{ supplier.id }}'}, this)">
             {{ t.sd_bst_activate }}
           </button>
           {% else %}
@@ -125,7 +125,7 @@
           <div class="bst-credit-card__price">&euro;{{ cp.price }}</div>
           {% if price_ids.get(cp.key) %}
           <button type="button" class="bst-buy-btn"
-            onclick="Paddle.Checkout.open({items:[{priceId:'{{ price_ids[cp.key] }}',quantity:1}],customData:{supplier_id:'{{ supplier.id }}'}})">
+            onclick="buyItem('{{ cp.key }}', {supplier_id:'{{ supplier.id }}'}, this)">
             {{ t.sd_bst_buy }}
           </button>
           {% else %}
@@ -160,3 +160,27 @@
     </div>
   </div>
 </div>
+
+<script>
+function buyItem(priceKey, customData, btn) {
+  var label = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = '...';
+  fetch('/billing/checkout/item', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({price_key: priceKey, custom_data: customData}),
+  })
+  .then(function(r) { return r.json(); })
+  .then(function(data) {
+    if (data.error) { alert(data.error); }
+    else { startCheckout(data); }
+    btn.disabled = false;
+    btn.textContent = label;
+  })
+  .catch(function() {
+    btn.disabled = false;
+    btn.textContent = label;
+  });
+}
+</script>
diff --git a/web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_4.html b/web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_4.html
index 6c62407..0f8e2aa 100644
--- a/web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_4.html
+++ b/web/src/padelnomics/suppliers/templates/suppliers/partials/signup_step_4.html
@@ -124,11 +124,7 @@
             btn.textContent = {{ t.sup_step4_checkout | tojson }};
             return;
           }
-          Paddle.Checkout.open({
-            items: result.data.items,
-            customData: result.data.customData,
-            settings: result.data.settings
-          });
+          startCheckout(result.data);
           btn.disabled = false;
           btn.textContent = {{ t.sup_step4_checkout | tojson }};
         })
diff --git a/web/src/padelnomics/suppliers/templates/suppliers/signup.html b/web/src/padelnomics/suppliers/templates/suppliers/signup.html
index 88885a5..f524c02 100644
--- a/web/src/padelnomics/suppliers/templates/suppliers/signup.html
+++ b/web/src/padelnomics/suppliers/templates/suppliers/signup.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block title %}{{ t.sup_signup_page_title }} - {{ config.APP_NAME }}{% endblock %}
-{% block paddle %}{% include "_paddle.html" %}{% endblock %}
+{% block paddle %}{% include "_payment_js.html" %}{% endblock %}
 
 {% block head %}
 <style>
diff --git a/web/src/padelnomics/templates/_payment_js.html b/web/src/padelnomics/templates/_payment_js.html
new file mode 100644
index 0000000..d3c355e
--- /dev/null
+++ b/web/src/padelnomics/templates/_payment_js.html
@@ -0,0 +1,51 @@
+{# Payment JS — conditionally loads provider SDK on checkout pages.
+   Include via {% block paddle %}{% include "_payment_js.html" %}{% endblock %}
+   Paddle: loads Paddle.js SDK + initializes overlay checkout.
+   Stripe: no SDK needed (server-side Checkout Session + redirect). #}
+
+{% if config.PAYMENT_PROVIDER == "paddle" %}
+<script defer src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    {% if config.PADDLE_ENVIRONMENT == "sandbox" %}
+    Paddle.Environment.set("sandbox");
+    {% endif %}
+    {% if config.PADDLE_CLIENT_TOKEN %}
+    Paddle.Initialize({
+      token: "{{ config.PADDLE_CLIENT_TOKEN }}",
+      eventCallback: function(ev) {
+        if (ev.name === "checkout.error") console.error("Paddle checkout error:", ev.data);
+      },
+      checkout: {
+        settings: {
+          displayMode: "overlay",
+          theme: "light",
+          locale: "en",
+        }
+      }
+    });
+    {% else %}
+    console.warn("Paddle: PADDLE_CLIENT_TOKEN not configured");
+    {% endif %}
+  });
+</script>
+{% endif %}
+
+<script>
+/**
+ * startCheckout — dual-path checkout handler.
+ * Paddle: opens overlay with items/customData/settings from response JSON.
+ * Stripe: redirects to checkout_url from response JSON.
+ */
+function startCheckout(data) {
+  if (data.checkout_url) {
+    window.location.href = data.checkout_url;
+  } else if (data.items) {
+    Paddle.Checkout.open({
+      items: data.items,
+      customData: data.customData,
+      settings: data.settings,
+    });
+  }
+}
+</script>