@usethrottle/checkout-sdk 1.0.0

package/README.md

@@ -0,0 +1,66 @@
+# @usethrottle/checkout-sdk
+
+Throttle Checkout SDK — Phase 1.
+
+Wraps `@usethrottle/checkout-react` with idempotency, telemetry, and brand theming.
+
+## Install
+
+```bash
+npm install @usethrottle/checkout-sdk
+```
+
+## Quickstart
+
+```tsx
+import { ThrottleCheckout } from '@usethrottle/checkout-sdk';
+
+<ThrottleCheckout
+  sessionId="sess_abc"
+  parentOrigin="https://shop.example.com"
+  theme={{ primary: '#ff6600', logo: 'https://shop.example.com/logo.png' }}
+  onSucceeded={({ orderId }) => router.push(`/orders/${orderId}`)}
+  onTelemetry={(event) => analytics.track(event.type, event)}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `sessionId` | `string` | Yes | Throttle checkout session id (`cs_*`) |
+| `parentOrigin` | `string` | No | Origin of the page mounting the embed |
+| `baseUrl` | `string` | No | Override the hosted checkout URL (default: `https://throttle-checkout.vercel.app`) |
+| `theme` | `BrandTheme` | No | Brand colour + logo forwarded to hosted page |
+| `onSucceeded` | `(args) => void` | No | Called once on successful payment |
+| `onFailed` | `(args) => void` | No | Called once on terminal payment failure |
+| `onCancelled` | `() => void` | No | Called when the user cancels |
+| `onTelemetry` | `(event) => void` | No | Receives every lifecycle event |
+
+## Telemetry events
+
+| `event.type` | Additional payload | Description |
+|---|---|---|
+| `mounted` | `sessionId`, `timestamp` | Component mounted in the DOM |
+| `ready` | `sessionId`, `timestamp` | Hosted iframe fully loaded |
+| `processing` | `sessionId`, `timestamp` | Payment authorization in-flight |
+| `succeeded` | `sessionId`, `orderId`, `paymentId`, `timestamp` | Payment completed successfully |
+| `failed` | `sessionId`, `code`, `message`, `timestamp` | Terminal payment failure |
+| `cancelled` | `sessionId`, `timestamp` | User cancelled checkout |
+| `step_changed` | `sessionId`, `step`, `timestamp` | Checkout step navigation (full embed only) |
+
+## Idempotency
+
+`onSucceeded` and `onFailed` are terminal events — the underlying iframe can occasionally emit duplicate postMessages on network hiccups or React strict-mode double-renders. `ThrottleCheckout` maintains a `settledRef` that ensures only the first terminal event fires the callback. All subsequent duplicates are silently dropped.
+
+## Brand theming
+
+`theme.primary` (a CSS colour string) and `theme.logo` (an absolute HTTPS URL) are forwarded as `?primary=...&logo=...` query params on the hosted checkout iframe src. The hosted page (`apps/checkout-web`) reads these to apply the merchant's brand.
+
+## Build
+
+```bash
+pnpm --filter @usethrottle/checkout-sdk build
+```
+
+Emits CJS (`dist/index.cjs`), ESM (`dist/index.js`), and TypeScript declarations (`dist/index.d.ts`).

package/dist/index.cjs

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ThrottleCheckout: () => ThrottleCheckout
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ThrottleCheckout.tsx
+var import_react = require("react");
+var import_checkout_react = require("@usethrottle/checkout-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ThrottleCheckout({
+  sessionId,
+  parentOrigin = "",
+  baseUrl,
+  theme,
+  onSucceeded,
+  onFailed,
+  onCancelled,
+  onTelemetry
+}) {
+  const settledRef = (0, import_react.useRef)(false);
+  const emit = (0, import_react.useCallback)(
+    (event) => {
+      onTelemetry?.(event);
+    },
+    [onTelemetry]
+  );
+  (0, import_react.useEffect)(() => {
+    emit({ type: "mounted", sessionId, timestamp: Date.now() });
+  }, []);
+  const handleReady = (0, import_react.useCallback)(() => {
+    emit({ type: "ready", sessionId, timestamp: Date.now() });
+  }, [emit, sessionId]);
+  const handleProcessing = (0, import_react.useCallback)(() => {
+    emit({ type: "processing", sessionId, timestamp: Date.now() });
+  }, [emit, sessionId]);
+  const handleSucceeded = (0, import_react.useCallback)(
+    ({ orderId, paymentId }) => {
+      if (settledRef.current) return;
+      settledRef.current = true;
+      emit({ type: "succeeded", sessionId, orderId, paymentId, timestamp: Date.now() });
+      onSucceeded?.({ orderId, paymentId });
+    },
+    [emit, sessionId, onSucceeded]
+  );
+  const handleFailed = (0, import_react.useCallback)(
+    ({ code, message }) => {
+      if (settledRef.current) return;
+      settledRef.current = true;
+      emit({ type: "failed", sessionId, code, message, timestamp: Date.now() });
+      onFailed?.({ code, message });
+    },
+    [emit, sessionId, onFailed]
+  );
+  const handleCanceled = (0, import_react.useCallback)(() => {
+    emit({ type: "cancelled", sessionId, timestamp: Date.now() });
+    onCancelled?.();
+  }, [emit, sessionId, onCancelled]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_checkout_react.PaymentEmbed,
+    {
+      sessionId,
+      parentOrigin,
+      ...baseUrl !== void 0 ? { baseUrl } : {},
+      primary: theme?.primary,
+      logo: theme?.logo,
+      onReady: handleReady,
+      onProcessing: handleProcessing,
+      onSucceeded: handleSucceeded,
+      onFailed: handleFailed,
+      onCanceled: handleCanceled
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThrottleCheckout
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/ThrottleCheckout.tsx"],"sourcesContent":["export { ThrottleCheckout } from './ThrottleCheckout.js';\nexport type { BrandTheme, TelemetryEvent, ThrottleCheckoutProps } from './types.js';\n","import { useCallback, useEffect, useRef } from 'react';\nimport { PaymentEmbed } from '@usethrottle/checkout-react';\nimport type { ThrottleCheckoutProps, TelemetryEvent } from './types.js';\n\n/**\n * ThrottleCheckout — Phase 1 platform SDK wrapper.\n *\n * Wraps `<PaymentEmbed>` from `@usethrottle/checkout-react` and adds:\n *   1. Idempotency  — settledRef ensures `onSucceeded` / `onFailed` fire at most once\n *                     per component lifetime, even if the iframe sends duplicate events.\n *   2. Telemetry    — `onTelemetry` callback receives every lifecycle event with a\n *                     typed payload so merchants can pipe to Datadog / Segment / etc.\n *   3. Brand theming — `theme.primary` + `theme.logo` are forwarded to the underlying\n *                     `<PaymentEmbed>` which appends them as URL query params on the\n *                     hosted checkout iframe src.\n */\nexport function ThrottleCheckout({\n  sessionId,\n  parentOrigin = '',\n  baseUrl,\n  theme,\n  onSucceeded,\n  onFailed,\n  onCancelled,\n  onTelemetry,\n}: ThrottleCheckoutProps): JSX.Element {\n  // Idempotency guard — once a terminal event (success or failure) fires,\n  // all subsequent duplicate events from the iframe are silently dropped.\n  const settledRef = useRef(false);\n\n  const emit = useCallback(\n    (event: TelemetryEvent) => {\n      onTelemetry?.(event);\n    },\n    [onTelemetry],\n  );\n\n  // Fire \"mounted\" telemetry once on initial render.\n  useEffect(() => {\n    emit({ type: 'mounted', sessionId, timestamp: Date.now() });\n    // intentionally only on mount — sessionId identity change re-mounts anyway\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleReady = useCallback(() => {\n    emit({ type: 'ready', sessionId, timestamp: Date.now() });\n  }, [emit, sessionId]);\n\n  const handleProcessing = useCallback(() => {\n    emit({ type: 'processing', sessionId, timestamp: Date.now() });\n  }, [emit, sessionId]);\n\n  const handleSucceeded = useCallback(\n    ({ orderId, paymentId }: { orderId: string; paymentId: string }) => {\n      if (settledRef.current) return;\n      settledRef.current = true;\n      emit({ type: 'succeeded', sessionId, orderId, paymentId, timestamp: Date.now() });\n      onSucceeded?.({ orderId, paymentId });\n    },\n    [emit, sessionId, onSucceeded],\n  );\n\n  const handleFailed = useCallback(\n    ({ code, message }: { code: string; message: string }) => {\n      if (settledRef.current) return;\n      settledRef.current = true;\n      emit({ type: 'failed', sessionId, code, message, timestamp: Date.now() });\n      onFailed?.({ code, message });\n    },\n    [emit, sessionId, onFailed],\n  );\n\n  const handleCanceled = useCallback(() => {\n    emit({ type: 'cancelled', sessionId, timestamp: Date.now() });\n    onCancelled?.();\n  }, [emit, sessionId, onCancelled]);\n\n  return (\n    <PaymentEmbed\n      sessionId={sessionId}\n      parentOrigin={parentOrigin}\n      {...(baseUrl !== undefined ? { baseUrl } : {})}\n      primary={theme?.primary}\n      logo={theme?.logo}\n      onReady={handleReady}\n      onProcessing={handleProcessing}\n      onSucceeded={handleSucceeded}\n      onFailed={handleFailed}\n      onCanceled={handleCanceled}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA+C;AAC/C,4BAA6B;AA6EzB;AA9DG,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AAGrC,QAAM,iBAAa,qBAAO,KAAK;AAE/B,QAAM,WAAO;AAAA,IACX,CAAC,UAA0B;AACzB,oBAAc,KAAK;AAAA,IACrB;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAGA,8BAAU,MAAM;AACd,SAAK,EAAE,MAAM,WAAW,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAAA,EAG5D,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAc,0BAAY,MAAM;AACpC,SAAK,EAAE,MAAM,SAAS,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAAA,EAC1D,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAM,uBAAmB,0BAAY,MAAM;AACzC,SAAK,EAAE,MAAM,cAAc,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAAA,EAC/D,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAM,sBAAkB;AAAA,IACtB,CAAC,EAAE,SAAS,UAAU,MAA8C;AAClE,UAAI,WAAW,QAAS;AACxB,iBAAW,UAAU;AACrB,WAAK,EAAE,MAAM,aAAa,WAAW,SAAS,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAChF,oBAAc,EAAE,SAAS,UAAU,CAAC;AAAA,IACtC;AAAA,IACA,CAAC,MAAM,WAAW,WAAW;AAAA,EAC/B;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,EAAE,MAAM,QAAQ,MAAyC;AACxD,UAAI,WAAW,QAAS;AACxB,iBAAW,UAAU;AACrB,WAAK,EAAE,MAAM,UAAU,WAAW,MAAM,SAAS,WAAW,KAAK,IAAI,EAAE,CAAC;AACxE,iBAAW,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,MAAM,WAAW,QAAQ;AAAA,EAC5B;AAEA,QAAM,qBAAiB,0BAAY,MAAM;AACvC,SAAK,EAAE,MAAM,aAAa,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAC5D,kBAAc;AAAA,EAChB,GAAG,CAAC,MAAM,WAAW,WAAW,CAAC;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAI,YAAY,SAAY,EAAE,QAAQ,IAAI,CAAC;AAAA,MAC5C,SAAS,OAAO;AAAA,MAChB,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aAAa;AAAA,MACb,UAAU;AAAA,MACV,YAAY;AAAA;AAAA,EACd;AAEJ;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,86 @@
+/**
+ * @usethrottle/checkout-sdk — Phase 1 types.
+ */
+interface BrandTheme {
+    /** Brand primary colour (#rrggbb or CSS named colour). */
+    primary?: string;
+    /** Absolute URL of merchant logo image. */
+    logo?: string;
+}
+type TelemetryEvent = {
+    type: 'mounted';
+    sessionId: string;
+    timestamp: number;
+} | {
+    type: 'ready';
+    sessionId: string;
+    timestamp: number;
+} | {
+    type: 'processing';
+    sessionId: string;
+    timestamp: number;
+} | {
+    type: 'succeeded';
+    sessionId: string;
+    orderId: string;
+    paymentId: string;
+    timestamp: number;
+} | {
+    type: 'failed';
+    sessionId: string;
+    code: string;
+    message: string;
+    timestamp: number;
+} | {
+    type: 'cancelled';
+    sessionId: string;
+    timestamp: number;
+} | {
+    type: 'step_changed';
+    sessionId: string;
+    step: string;
+    timestamp: number;
+};
+interface ThrottleCheckoutProps {
+    /** Throttle checkout session id (cs_*). Required. */
+    sessionId: string;
+    /**
+     * Parent origin where this embed is mounted (e.g. https://shop.example.com).
+     * Must be in the merchant's allowed_origins list.
+     */
+    parentOrigin?: string;
+    /** Base URL of the deployed checkout-web app. */
+    baseUrl?: string;
+    /** Optional brand theming forwarded to the hosted checkout page. */
+    theme?: BrandTheme;
+    /** Fired once when payment completes successfully. */
+    onSucceeded?: (args: {
+        orderId: string;
+        paymentId: string;
+    }) => void;
+    /** Fired once when payment fails terminally. */
+    onFailed?: (args: {
+        code: string;
+        message: string;
+    }) => void;
+    /** Fired when the user cancels checkout. */
+    onCancelled?: () => void;
+    /** Optional sink for all lifecycle events — pipe to Datadog / Segment / custom analytics. */
+    onTelemetry?: (event: TelemetryEvent) => void;
+}
+
+/**
+ * ThrottleCheckout — Phase 1 platform SDK wrapper.
+ *
+ * Wraps `<PaymentEmbed>` from `@usethrottle/checkout-react` and adds:
+ *   1. Idempotency  — settledRef ensures `onSucceeded` / `onFailed` fire at most once
+ *                     per component lifetime, even if the iframe sends duplicate events.
+ *   2. Telemetry    — `onTelemetry` callback receives every lifecycle event with a
+ *                     typed payload so merchants can pipe to Datadog / Segment / etc.
+ *   3. Brand theming — `theme.primary` + `theme.logo` are forwarded to the underlying
+ *                     `<PaymentEmbed>` which appends them as URL query params on the
+ *                     hosted checkout iframe src.
+ */
+declare function ThrottleCheckout({ sessionId, parentOrigin, baseUrl, theme, onSucceeded, onFailed, onCancelled, onTelemetry, }: ThrottleCheckoutProps): JSX.Element;
+
+export { type BrandTheme, type TelemetryEvent, ThrottleCheckout, type ThrottleCheckoutProps };

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @usethrottle/checkout-sdk — Phase 1 types.
+ */
+interface BrandTheme {
+    /** Brand primary colour (#rrggbb or CSS named colour). */
+    primary?: string;
+    /** Absolute URL of merchant logo image. */
+    logo?: string;
+}
+type TelemetryEvent = {
+    type: 'mounted';
+    sessionId: string;
+    timestamp: number;
+} | {
+    type: 'ready';
+    sessionId: string;
+    timestamp: number;
+} | {
+    type: 'processing';
+    sessionId: string;
+    timestamp: number;
+} | {
+    type: 'succeeded';
+    sessionId: string;
+    orderId: string;
+    paymentId: string;
+    timestamp: number;
+} | {
+    type: 'failed';
+    sessionId: string;
+    code: string;
+    message: string;
+    timestamp: number;
+} | {
+    type: 'cancelled';
+    sessionId: string;
+    timestamp: number;
+} | {
+    type: 'step_changed';
+    sessionId: string;
+    step: string;
+    timestamp: number;
+};
+interface ThrottleCheckoutProps {
+    /** Throttle checkout session id (cs_*). Required. */
+    sessionId: string;
+    /**
+     * Parent origin where this embed is mounted (e.g. https://shop.example.com).
+     * Must be in the merchant's allowed_origins list.
+     */
+    parentOrigin?: string;
+    /** Base URL of the deployed checkout-web app. */
+    baseUrl?: string;
+    /** Optional brand theming forwarded to the hosted checkout page. */
+    theme?: BrandTheme;
+    /** Fired once when payment completes successfully. */
+    onSucceeded?: (args: {
+        orderId: string;
+        paymentId: string;
+    }) => void;
+    /** Fired once when payment fails terminally. */
+    onFailed?: (args: {
+        code: string;
+        message: string;
+    }) => void;
+    /** Fired when the user cancels checkout. */
+    onCancelled?: () => void;
+    /** Optional sink for all lifecycle events — pipe to Datadog / Segment / custom analytics. */
+    onTelemetry?: (event: TelemetryEvent) => void;
+}
+
+/**
+ * ThrottleCheckout — Phase 1 platform SDK wrapper.
+ *
+ * Wraps `<PaymentEmbed>` from `@usethrottle/checkout-react` and adds:
+ *   1. Idempotency  — settledRef ensures `onSucceeded` / `onFailed` fire at most once
+ *                     per component lifetime, even if the iframe sends duplicate events.
+ *   2. Telemetry    — `onTelemetry` callback receives every lifecycle event with a
+ *                     typed payload so merchants can pipe to Datadog / Segment / etc.
+ *   3. Brand theming — `theme.primary` + `theme.logo` are forwarded to the underlying
+ *                     `<PaymentEmbed>` which appends them as URL query params on the
+ *                     hosted checkout iframe src.
+ */
+declare function ThrottleCheckout({ sessionId, parentOrigin, baseUrl, theme, onSucceeded, onFailed, onCancelled, onTelemetry, }: ThrottleCheckoutProps): JSX.Element;
+
+export { type BrandTheme, type TelemetryEvent, ThrottleCheckout, type ThrottleCheckoutProps };

package/dist/index.js

@@ -0,0 +1,72 @@
+// src/ThrottleCheckout.tsx
+import { useCallback, useEffect, useRef } from "react";
+import { PaymentEmbed } from "@usethrottle/checkout-react";
+import { jsx } from "react/jsx-runtime";
+function ThrottleCheckout({
+  sessionId,
+  parentOrigin = "",
+  baseUrl,
+  theme,
+  onSucceeded,
+  onFailed,
+  onCancelled,
+  onTelemetry
+}) {
+  const settledRef = useRef(false);
+  const emit = useCallback(
+    (event) => {
+      onTelemetry?.(event);
+    },
+    [onTelemetry]
+  );
+  useEffect(() => {
+    emit({ type: "mounted", sessionId, timestamp: Date.now() });
+  }, []);
+  const handleReady = useCallback(() => {
+    emit({ type: "ready", sessionId, timestamp: Date.now() });
+  }, [emit, sessionId]);
+  const handleProcessing = useCallback(() => {
+    emit({ type: "processing", sessionId, timestamp: Date.now() });
+  }, [emit, sessionId]);
+  const handleSucceeded = useCallback(
+    ({ orderId, paymentId }) => {
+      if (settledRef.current) return;
+      settledRef.current = true;
+      emit({ type: "succeeded", sessionId, orderId, paymentId, timestamp: Date.now() });
+      onSucceeded?.({ orderId, paymentId });
+    },
+    [emit, sessionId, onSucceeded]
+  );
+  const handleFailed = useCallback(
+    ({ code, message }) => {
+      if (settledRef.current) return;
+      settledRef.current = true;
+      emit({ type: "failed", sessionId, code, message, timestamp: Date.now() });
+      onFailed?.({ code, message });
+    },
+    [emit, sessionId, onFailed]
+  );
+  const handleCanceled = useCallback(() => {
+    emit({ type: "cancelled", sessionId, timestamp: Date.now() });
+    onCancelled?.();
+  }, [emit, sessionId, onCancelled]);
+  return /* @__PURE__ */ jsx(
+    PaymentEmbed,
+    {
+      sessionId,
+      parentOrigin,
+      ...baseUrl !== void 0 ? { baseUrl } : {},
+      primary: theme?.primary,
+      logo: theme?.logo,
+      onReady: handleReady,
+      onProcessing: handleProcessing,
+      onSucceeded: handleSucceeded,
+      onFailed: handleFailed,
+      onCanceled: handleCanceled
+    }
+  );
+}
+export {
+  ThrottleCheckout
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ThrottleCheckout.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { PaymentEmbed } from '@usethrottle/checkout-react';\nimport type { ThrottleCheckoutProps, TelemetryEvent } from './types.js';\n\n/**\n * ThrottleCheckout — Phase 1 platform SDK wrapper.\n *\n * Wraps `<PaymentEmbed>` from `@usethrottle/checkout-react` and adds:\n *   1. Idempotency  — settledRef ensures `onSucceeded` / `onFailed` fire at most once\n *                     per component lifetime, even if the iframe sends duplicate events.\n *   2. Telemetry    — `onTelemetry` callback receives every lifecycle event with a\n *                     typed payload so merchants can pipe to Datadog / Segment / etc.\n *   3. Brand theming — `theme.primary` + `theme.logo` are forwarded to the underlying\n *                     `<PaymentEmbed>` which appends them as URL query params on the\n *                     hosted checkout iframe src.\n */\nexport function ThrottleCheckout({\n  sessionId,\n  parentOrigin = '',\n  baseUrl,\n  theme,\n  onSucceeded,\n  onFailed,\n  onCancelled,\n  onTelemetry,\n}: ThrottleCheckoutProps): JSX.Element {\n  // Idempotency guard — once a terminal event (success or failure) fires,\n  // all subsequent duplicate events from the iframe are silently dropped.\n  const settledRef = useRef(false);\n\n  const emit = useCallback(\n    (event: TelemetryEvent) => {\n      onTelemetry?.(event);\n    },\n    [onTelemetry],\n  );\n\n  // Fire \"mounted\" telemetry once on initial render.\n  useEffect(() => {\n    emit({ type: 'mounted', sessionId, timestamp: Date.now() });\n    // intentionally only on mount — sessionId identity change re-mounts anyway\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleReady = useCallback(() => {\n    emit({ type: 'ready', sessionId, timestamp: Date.now() });\n  }, [emit, sessionId]);\n\n  const handleProcessing = useCallback(() => {\n    emit({ type: 'processing', sessionId, timestamp: Date.now() });\n  }, [emit, sessionId]);\n\n  const handleSucceeded = useCallback(\n    ({ orderId, paymentId }: { orderId: string; paymentId: string }) => {\n      if (settledRef.current) return;\n      settledRef.current = true;\n      emit({ type: 'succeeded', sessionId, orderId, paymentId, timestamp: Date.now() });\n      onSucceeded?.({ orderId, paymentId });\n    },\n    [emit, sessionId, onSucceeded],\n  );\n\n  const handleFailed = useCallback(\n    ({ code, message }: { code: string; message: string }) => {\n      if (settledRef.current) return;\n      settledRef.current = true;\n      emit({ type: 'failed', sessionId, code, message, timestamp: Date.now() });\n      onFailed?.({ code, message });\n    },\n    [emit, sessionId, onFailed],\n  );\n\n  const handleCanceled = useCallback(() => {\n    emit({ type: 'cancelled', sessionId, timestamp: Date.now() });\n    onCancelled?.();\n  }, [emit, sessionId, onCancelled]);\n\n  return (\n    <PaymentEmbed\n      sessionId={sessionId}\n      parentOrigin={parentOrigin}\n      {...(baseUrl !== undefined ? { baseUrl } : {})}\n      primary={theme?.primary}\n      logo={theme?.logo}\n      onReady={handleReady}\n      onProcessing={handleProcessing}\n      onSucceeded={handleSucceeded}\n      onFailed={handleFailed}\n      onCanceled={handleCanceled}\n    />\n  );\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,oBAAoB;AA6EzB;AA9DG,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AAGrC,QAAM,aAAa,OAAO,KAAK;AAE/B,QAAM,OAAO;AAAA,IACX,CAAC,UAA0B;AACzB,oBAAc,KAAK;AAAA,IACrB;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAGA,YAAU,MAAM;AACd,SAAK,EAAE,MAAM,WAAW,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAAA,EAG5D,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,SAAK,EAAE,MAAM,SAAS,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAAA,EAC1D,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAM,mBAAmB,YAAY,MAAM;AACzC,SAAK,EAAE,MAAM,cAAc,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAAA,EAC/D,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAM,kBAAkB;AAAA,IACtB,CAAC,EAAE,SAAS,UAAU,MAA8C;AAClE,UAAI,WAAW,QAAS;AACxB,iBAAW,UAAU;AACrB,WAAK,EAAE,MAAM,aAAa,WAAW,SAAS,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAChF,oBAAc,EAAE,SAAS,UAAU,CAAC;AAAA,IACtC;AAAA,IACA,CAAC,MAAM,WAAW,WAAW;AAAA,EAC/B;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,EAAE,MAAM,QAAQ,MAAyC;AACxD,UAAI,WAAW,QAAS;AACxB,iBAAW,UAAU;AACrB,WAAK,EAAE,MAAM,UAAU,WAAW,MAAM,SAAS,WAAW,KAAK,IAAI,EAAE,CAAC;AACxE,iBAAW,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,MAAM,WAAW,QAAQ;AAAA,EAC5B;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,SAAK,EAAE,MAAM,aAAa,WAAW,WAAW,KAAK,IAAI,EAAE,CAAC;AAC5D,kBAAc;AAAA,EAChB,GAAG,CAAC,MAAM,WAAW,WAAW,CAAC;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAI,YAAY,SAAY,EAAE,QAAQ,IAAI,CAAC;AAAA,MAC5C,SAAS,OAAO;AAAA,MAChB,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aAAa;AAAA,MACb,UAAU;AAAA,MACV,YAAY;AAAA;AAAA,EACd;AAEJ;","names":[]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@usethrottle/checkout-sdk",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
+  },
+  "dependencies": {
+    "@usethrottle/checkout-react": "1.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.0",
+    "jsdom": "^25.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}