@arnaudjnn/billing-tools 0.23.0 → 0.24.0

package/dist/ui/index.d.ts

@@ -0,0 +1,42 @@
+import { PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { type Appearance, type StripeElementLocale } from "@stripe/stripe-js";
+import * as React from "react";
+export type BillingCheckoutProviderProps = {
+    /** Stripe publishable key (pk_…). Safe in the browser by design. */
+    publishableKey: string;
+    /** Client secret of the PaymentIntent/SetupIntent the SERVER created. */
+    clientSecret: string;
+    /** Stripe Elements appearance, so the form inherits the host app's theme. */
+    appearance?: Appearance;
+    /** e.g. "it" — defaults to the browser's locale. */
+    locale?: StripeElementLocale;
+    children: React.ReactNode;
+};
+/** Wraps Stripe's <Elements> with the bits every consumer would otherwise repeat. */
+export declare function BillingCheckoutProvider({ publishableKey, clientSecret, appearance, locale, children, }: BillingCheckoutProviderProps): React.JSX.Element;
+export type BillingPaymentFormProps = {
+    /** Where Stripe returns the browser after an off-site step (3DS, bank redirect). */
+    returnUrl: string;
+    /** Rendered as the submit button. Receives the live submitting state. */
+    children: (state: {
+        submitting: boolean;
+    }) => React.ReactNode;
+    /** Called after the intent is confirmed without a redirect. */
+    onSuccess?: () => void;
+    /** Called with a human-readable message when Stripe declines or validation fails. */
+    onError?: (message: string) => void;
+    className?: string;
+};
+/**
+ * The card/payment-method form: Stripe's PaymentElement plus confirmation.
+ *
+ * The button is passed in as a render prop rather than styled here, so the host
+ * app's own Button keeps the design system consistent — this component owns the
+ * Stripe wiring, not the look.
+ *
+ * `redirect: "if_required"` keeps the common card case on-page and only leaves
+ * for methods that genuinely need it (3DS challenge, bank redirects).
+ */
+export declare function BillingPaymentForm({ returnUrl, children, onSuccess, onError, className, }: BillingPaymentFormProps): React.JSX.Element;
+export { PaymentElement, useElements, useStripe };
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC3F,OAAO,EAAc,KAAK,UAAU,EAAe,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACvG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8B/B,MAAM,MAAM,4BAA4B,GAAG;IACzC,oEAAoE;IACpE,cAAc,EAAE,MAAM,CAAC;IACvB,yEAAyE;IACzE,YAAY,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,oDAAoD;IACpD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,qFAAqF;AACrF,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,4BAA4B,qBAO9B;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,oFAAoF;IACpF,SAAS,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GACV,EAAE,uBAAuB,qBAqCzB;AAED,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import * as React from "react";
+// The checkout UI, so every consumer app mounts the SAME payment form instead of
+// re-deriving one from the Stripe docs.
+//
+// Imported from a SEPARATE entry point — `@arnaudjnn/billing-tools/ui` — because
+// the rest of this package is server-side (WorkOS, Stripe secret key, MCP tools)
+// and must never reach a browser bundle. React and the Stripe browser SDKs are
+// declared as OPTIONAL peer dependencies, so the CLI and the MCP server keep
+// installing without them; only an app that imports `/ui` needs them present.
+//
+// The provider owns exactly two things a consumer shouldn't have to rediscover:
+// the publishable-key singleton (loadStripe must be called once per page, not
+// once per render) and the Elements options shape. Everything money-related still
+// happens on the server — this only collects a payment method and confirms an
+// intent whose client secret the server minted.
+// loadStripe returns a promise and Stripe asks that it be created once. Keyed by
+// publishable key so a consumer switching keys (test → live) still gets one
+// instance per key rather than one forever.
+const stripeCache = new Map();
+function stripeFor(publishableKey) {
+    const hit = stripeCache.get(publishableKey);
+    if (hit)
+        return hit;
+    const p = loadStripe(publishableKey);
+    stripeCache.set(publishableKey, p);
+    return p;
+}
+/** Wraps Stripe's <Elements> with the bits every consumer would otherwise repeat. */
+export function BillingCheckoutProvider({ publishableKey, clientSecret, appearance, locale, children, }) {
+    const stripe = React.useMemo(() => stripeFor(publishableKey), [publishableKey]);
+    return (_jsx(Elements, { stripe: stripe, options: { clientSecret, appearance, locale }, children: children }));
+}
+/**
+ * The card/payment-method form: Stripe's PaymentElement plus confirmation.
+ *
+ * The button is passed in as a render prop rather than styled here, so the host
+ * app's own Button keeps the design system consistent — this component owns the
+ * Stripe wiring, not the look.
+ *
+ * `redirect: "if_required"` keeps the common card case on-page and only leaves
+ * for methods that genuinely need it (3DS challenge, bank redirects).
+ */
+export function BillingPaymentForm({ returnUrl, children, onSuccess, onError, className, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [submitting, setSubmitting] = React.useState(false);
+    async function onSubmit(e) {
+        e.preventDefault();
+        if (!stripe || !elements || submitting)
+            return;
+        setSubmitting(true);
+        try {
+            // Surface field-level problems before touching the intent.
+            const submitted = await elements.submit();
+            if (submitted.error) {
+                onError?.(submitted.error.message ?? "Dati di pagamento non validi");
+                return;
+            }
+            const { error } = await stripe.confirmPayment({
+                elements,
+                confirmParams: { return_url: returnUrl },
+                redirect: "if_required",
+            });
+            if (error) {
+                onError?.(error.message ?? "Pagamento non riuscito");
+                return;
+            }
+            onSuccess?.();
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: onSubmit, className: className, children: [_jsx(PaymentElement, {}), children({ submitting })] }));
+}
+export { PaymentElement, useElements, useStripe };
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC3F,OAAO,EAAE,UAAU,EAA0D,MAAM,mBAAmB,CAAC;AACvG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iFAAiF;AACjF,wCAAwC;AACxC,EAAE;AACF,iFAAiF;AACjF,iFAAiF;AACjF,+EAA+E;AAC/E,6EAA6E;AAC7E,8EAA8E;AAC9E,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,kFAAkF;AAClF,8EAA8E;AAC9E,gDAAgD;AAEhD,iFAAiF;AACjF,4EAA4E;AAC5E,4CAA4C;AAC5C,MAAM,WAAW,GAAG,IAAI,GAAG,EAAkC,CAAC;AAE9D,SAAS,SAAS,CAAC,cAAsB;IACvC,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5C,IAAI,GAAG;QAAE,OAAO,GAAG,CAAC;IACpB,MAAM,CAAC,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACrC,WAAW,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACnC,OAAO,CAAC,CAAC;AACX,CAAC;AAcD,qFAAqF;AACrF,MAAM,UAAU,uBAAuB,CAAC,EACtC,cAAc,EACd,YAAY,EACZ,UAAU,EACV,MAAM,EACN,QAAQ,GACqB;IAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAChF,OAAO,CACL,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,YACpE,QAAQ,GACA,CACZ,CAAC;AACJ,CAAC;AAcD;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GACe;IACxB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,KAAK,UAAU,QAAQ,CAAC,CAAkB;QACxC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,IAAI,UAAU;YAAE,OAAO;QAC/C,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,IAAI,CAAC;YACH,2DAA2D;YAC3D,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC,MAAM,EAAE,CAAC;YAC1C,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;gBACpB,OAAO,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,IAAI,8BAA8B,CAAC,CAAC;gBACrE,OAAO;YACT,CAAC;YACD,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC;gBAC5C,QAAQ;gBACR,aAAa,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE;gBACxC,QAAQ,EAAE,aAAa;aACxB,CAAC,CAAC;YACH,IAAI,KAAK,EAAE,CAAC;gBACV,OAAO,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,wBAAwB,CAAC,CAAC;gBACrD,OAAO;YACT,CAAC;YACD,SAAS,EAAE,EAAE,CAAC;QAChB,CAAC;gBAAS,CAAC;YACT,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,OAAO,CACL,gBAAM,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,aAC5C,KAAC,cAAc,KAAG,EACjB,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,IACpB,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arnaudjnn/billing-tools",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "The get-paid engine for Stripe + WorkOS apps, for humans and AI agents. Drop-in API-key auth, token/credit + subscription billing, auth.md agent registration, and MPP machine payments, as MCP tools, a REST API, and a CLI. Framework-agnostic, storage-pluggable.",
   "license": "MIT",
   "author": "Arnaud Jeannin",
@@ -44,6 +44,11 @@
       "types": "./dist/cli/index.d.ts",
       "import": "./dist/cli/index.js",
       "default": "./dist/cli/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js",
+      "default": "./dist/ui/index.js"
     }
   },
   "files": [
@@ -67,12 +72,24 @@
   },
   "peerDependencies": {
     "@modelcontextprotocol/sdk": ">=1.25.0",
+    "@stripe/react-stripe-js": "^5 || ^6",
+    "@stripe/stripe-js": "^8 || ^9",
     "mcp-handler": ">=1.1.0",
+    "react": "^18 || ^19",
     "zod": "^3.25.0"
   },
   "peerDependenciesMeta": {
     "mcp-handler": {
       "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "@stripe/react-stripe-js": {
+      "optional": true
+    },
+    "@stripe/stripe-js": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -80,8 +97,12 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@stripe/react-stripe-js": "^6.8.0",
+    "@stripe/stripe-js": "^9.12.1",
     "@types/node": "^20",
+    "@types/react": "^19.2.17",
     "mcp-handler": "^1.1.0",
+    "react": "^19.2.8",
     "semantic-release": "^24.2.0",
     "typescript": "^5",
     "zod": "^3.25.76"