@usethrottle/checkout-react 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# @usethrottle/checkout-react
+
+React component for embedding Throttle checkout in your app.
+
+## Install
+
+```bash
+npm install @usethrottle/checkout-react
+```
+
+## Usage
+
+```tsx
+import { ThrottleCheckout } from '@usethrottle/checkout-react';
+
+export function CheckoutPage({ sessionId }: { sessionId: string }) {
+  return (
+    <ThrottleCheckout
+      sessionId={sessionId}
+      onCompleted={(orderId, paymentId) => {
+        // navigate to thank-you page, clear cart, etc.
+      }}
+      onError={(code, message) => {
+        // surface to user
+      }}
+    />
+  );
+}
+```
+
+The component renders an iframe pointed at `https://throttle-checkout-web.onrender.com/c/<sessionId>?embed=1`. Override `baseUrl` to point at a different deployment.
+
+## Events
+
+| Event | Callback | Payload |
+|---|---|---|
+| `throttle.ready` | `onReady` | — |
+| `throttle.resize` | (auto-handled, resizes iframe) | `{ height: number }` |
+| `throttle.completed` | `onCompleted(orderId, paymentId)` | `{ orderId, paymentId }` |
+| `throttle.cancelled` | `onCancelled` | — |
+| `throttle.error` | `onError(code, message)` | `{ code, message }` |

package/dist/index.cjs

@@ -0,0 +1,76 @@
+"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.tsx
+var index_exports = {};
+__export(index_exports, {
+  ThrottleCheckout: () => ThrottleCheckout
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_BASE_URL = "https://throttle-checkout-web.onrender.com";
+function ThrottleCheckout({
+  sessionId,
+  baseUrl = DEFAULT_BASE_URL,
+  initialHeight = 480,
+  className,
+  style,
+  onReady,
+  onCompleted,
+  onCancelled,
+  onError
+}) {
+  const iframeRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    function handle(ev) {
+      const data = ev?.data;
+      if (!data || typeof data !== "object" || typeof data.type !== "string") return;
+      if (!data.type.startsWith("throttle.")) return;
+      if (iframeRef.current && ev.source !== iframeRef.current.contentWindow) return;
+      if (data.type === "throttle.resize" && typeof data.height === "number" && iframeRef.current) {
+        iframeRef.current.style.height = `${data.height}px`;
+      }
+      if (data.type === "throttle.ready") onReady?.();
+      else if (data.type === "throttle.completed") onCompleted?.(data.orderId, data.paymentId);
+      else if (data.type === "throttle.cancelled") onCancelled?.();
+      else if (data.type === "throttle.error") onError?.(data.code, data.message);
+    }
+    window.addEventListener("message", handle);
+    return () => window.removeEventListener("message", handle);
+  }, [onReady, onCompleted, onCancelled, onError]);
+  const cleanBase = baseUrl.replace(/\/$/, "");
+  const src = `${cleanBase}/c/${encodeURIComponent(sessionId)}?embed=1`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      ref: iframeRef,
+      src,
+      className,
+      style: { border: 0, width: "100%", minHeight: initialHeight, ...style },
+      allow: "payment *",
+      title: "Throttle checkout"
+    }
+  );
+}
+// 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.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport interface ThrottleCheckoutProps {\n  /** The throttle checkout session id (sess_*). Required. */\n  sessionId: string;\n  /** Base URL of the deployed checkout-web app. Defaults to https://throttle-checkout-web.onrender.com */\n  baseUrl?: string;\n  /** Initial iframe height in pixels. Auto-resizes on throttle.resize events. */\n  initialHeight?: number;\n  /** Optional className for the iframe. */\n  className?: string;\n  /** Optional inline style for the iframe. */\n  style?: React.CSSProperties;\n  /** Fires once the iframe is ready to receive interactions. */\n  onReady?: () => void;\n  /** Fires after a successful payment. */\n  onCompleted?: (orderId: string, paymentId: string) => void;\n  /** Fires when the buyer cancels checkout. */\n  onCancelled?: () => void;\n  /** Fires on any error inside the iframe (Gr4vy decline, network, etc.). */\n  onError?: (code: string, message: string) => void;\n}\n\nconst DEFAULT_BASE_URL = 'https://throttle-checkout-web.onrender.com';\n\n/**\n * Embedded Throttle checkout for React apps.\n *\n * Renders an iframe pointed at <baseUrl>/c/<sessionId>?embed=1 and\n * subscribes to the postMessage v1 protocol. Events fire on the\n * provided callbacks. Auto-resizes the iframe on throttle.resize.\n */\nexport function ThrottleCheckout({\n  sessionId,\n  baseUrl = DEFAULT_BASE_URL,\n  initialHeight = 480,\n  className,\n  style,\n  onReady,\n  onCompleted,\n  onCancelled,\n  onError,\n}: ThrottleCheckoutProps) {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    function handle(ev: MessageEvent) {\n      const data = ev?.data;\n      if (!data || typeof data !== 'object' || typeof data.type !== 'string') return;\n      if (!data.type.startsWith('throttle.')) return;\n      if (iframeRef.current && ev.source !== iframeRef.current.contentWindow) return;\n\n      if (data.type === 'throttle.resize' && typeof data.height === 'number' && iframeRef.current) {\n        iframeRef.current.style.height = `${data.height}px`;\n      }\n      if (data.type === 'throttle.ready') onReady?.();\n      else if (data.type === 'throttle.completed') onCompleted?.(data.orderId, data.paymentId);\n      else if (data.type === 'throttle.cancelled') onCancelled?.();\n      else if (data.type === 'throttle.error') onError?.(data.code, data.message);\n    }\n    window.addEventListener('message', handle);\n    return () => window.removeEventListener('message', handle);\n  }, [onReady, onCompleted, onCancelled, onError]);\n\n  const cleanBase = baseUrl.replace(/\\/$/, '');\n  const src = `${cleanBase}/c/${encodeURIComponent(sessionId)}?embed=1`;\n\n  return (\n    <iframe\n      ref={iframeRef}\n      src={src}\n      className={className}\n      style={{ border: 0, width: '100%', minHeight: initialHeight, ...style }}\n      allow=\"payment *\"\n      title=\"Throttle checkout\"\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAoE9B;AA7CJ,IAAM,mBAAmB;AASlB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,gBAAY,qBAA0B,IAAI;AAEhD,8BAAU,MAAM;AACd,aAAS,OAAO,IAAkB;AAChC,YAAM,OAAO,IAAI;AACjB,UAAI,CAAC,QAAQ,OAAO,SAAS,YAAY,OAAO,KAAK,SAAS,SAAU;AACxE,UAAI,CAAC,KAAK,KAAK,WAAW,WAAW,EAAG;AACxC,UAAI,UAAU,WAAW,GAAG,WAAW,UAAU,QAAQ,cAAe;AAExE,UAAI,KAAK,SAAS,qBAAqB,OAAO,KAAK,WAAW,YAAY,UAAU,SAAS;AAC3F,kBAAU,QAAQ,MAAM,SAAS,GAAG,KAAK,MAAM;AAAA,MACjD;AACA,UAAI,KAAK,SAAS,iBAAkB,WAAU;AAAA,eACrC,KAAK,SAAS,qBAAsB,eAAc,KAAK,SAAS,KAAK,SAAS;AAAA,eAC9E,KAAK,SAAS,qBAAsB,eAAc;AAAA,eAClD,KAAK,SAAS,iBAAkB,WAAU,KAAK,MAAM,KAAK,OAAO;AAAA,IAC5E;AACA,WAAO,iBAAiB,WAAW,MAAM;AACzC,WAAO,MAAM,OAAO,oBAAoB,WAAW,MAAM;AAAA,EAC3D,GAAG,CAAC,SAAS,aAAa,aAAa,OAAO,CAAC;AAE/C,QAAM,YAAY,QAAQ,QAAQ,OAAO,EAAE;AAC3C,QAAM,MAAM,GAAG,SAAS,MAAM,mBAAmB,SAAS,CAAC;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,WAAW,eAAe,GAAG,MAAM;AAAA,MACtE,OAAM;AAAA,MACN,OAAM;AAAA;AAAA,EACR;AAEJ;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThrottleCheckoutProps {
+    /** The throttle checkout session id (sess_*). Required. */
+    sessionId: string;
+    /** Base URL of the deployed checkout-web app. Defaults to https://throttle-checkout-web.onrender.com */
+    baseUrl?: string;
+    /** Initial iframe height in pixels. Auto-resizes on throttle.resize events. */
+    initialHeight?: number;
+    /** Optional className for the iframe. */
+    className?: string;
+    /** Optional inline style for the iframe. */
+    style?: React.CSSProperties;
+    /** Fires once the iframe is ready to receive interactions. */
+    onReady?: () => void;
+    /** Fires after a successful payment. */
+    onCompleted?: (orderId: string, paymentId: string) => void;
+    /** Fires when the buyer cancels checkout. */
+    onCancelled?: () => void;
+    /** Fires on any error inside the iframe (Gr4vy decline, network, etc.). */
+    onError?: (code: string, message: string) => void;
+}
+/**
+ * Embedded Throttle checkout for React apps.
+ *
+ * Renders an iframe pointed at <baseUrl>/c/<sessionId>?embed=1 and
+ * subscribes to the postMessage v1 protocol. Events fire on the
+ * provided callbacks. Auto-resizes the iframe on throttle.resize.
+ */
+declare function ThrottleCheckout({ sessionId, baseUrl, initialHeight, className, style, onReady, onCompleted, onCancelled, onError, }: ThrottleCheckoutProps): react_jsx_runtime.JSX.Element;
+
+export { ThrottleCheckout, type ThrottleCheckoutProps };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThrottleCheckoutProps {
+    /** The throttle checkout session id (sess_*). Required. */
+    sessionId: string;
+    /** Base URL of the deployed checkout-web app. Defaults to https://throttle-checkout-web.onrender.com */
+    baseUrl?: string;
+    /** Initial iframe height in pixels. Auto-resizes on throttle.resize events. */
+    initialHeight?: number;
+    /** Optional className for the iframe. */
+    className?: string;
+    /** Optional inline style for the iframe. */
+    style?: React.CSSProperties;
+    /** Fires once the iframe is ready to receive interactions. */
+    onReady?: () => void;
+    /** Fires after a successful payment. */
+    onCompleted?: (orderId: string, paymentId: string) => void;
+    /** Fires when the buyer cancels checkout. */
+    onCancelled?: () => void;
+    /** Fires on any error inside the iframe (Gr4vy decline, network, etc.). */
+    onError?: (code: string, message: string) => void;
+}
+/**
+ * Embedded Throttle checkout for React apps.
+ *
+ * Renders an iframe pointed at <baseUrl>/c/<sessionId>?embed=1 and
+ * subscribes to the postMessage v1 protocol. Events fire on the
+ * provided callbacks. Auto-resizes the iframe on throttle.resize.
+ */
+declare function ThrottleCheckout({ sessionId, baseUrl, initialHeight, className, style, onReady, onCompleted, onCancelled, onError, }: ThrottleCheckoutProps): react_jsx_runtime.JSX.Element;
+
+export { ThrottleCheckout, type ThrottleCheckoutProps };

package/dist/index.js

@@ -0,0 +1,51 @@
+// src/index.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_BASE_URL = "https://throttle-checkout-web.onrender.com";
+function ThrottleCheckout({
+  sessionId,
+  baseUrl = DEFAULT_BASE_URL,
+  initialHeight = 480,
+  className,
+  style,
+  onReady,
+  onCompleted,
+  onCancelled,
+  onError
+}) {
+  const iframeRef = useRef(null);
+  useEffect(() => {
+    function handle(ev) {
+      const data = ev?.data;
+      if (!data || typeof data !== "object" || typeof data.type !== "string") return;
+      if (!data.type.startsWith("throttle.")) return;
+      if (iframeRef.current && ev.source !== iframeRef.current.contentWindow) return;
+      if (data.type === "throttle.resize" && typeof data.height === "number" && iframeRef.current) {
+        iframeRef.current.style.height = `${data.height}px`;
+      }
+      if (data.type === "throttle.ready") onReady?.();
+      else if (data.type === "throttle.completed") onCompleted?.(data.orderId, data.paymentId);
+      else if (data.type === "throttle.cancelled") onCancelled?.();
+      else if (data.type === "throttle.error") onError?.(data.code, data.message);
+    }
+    window.addEventListener("message", handle);
+    return () => window.removeEventListener("message", handle);
+  }, [onReady, onCompleted, onCancelled, onError]);
+  const cleanBase = baseUrl.replace(/\/$/, "");
+  const src = `${cleanBase}/c/${encodeURIComponent(sessionId)}?embed=1`;
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref: iframeRef,
+      src,
+      className,
+      style: { border: 0, width: "100%", minHeight: initialHeight, ...style },
+      allow: "payment *",
+      title: "Throttle checkout"
+    }
+  );
+}
+export {
+  ThrottleCheckout
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport interface ThrottleCheckoutProps {\n  /** The throttle checkout session id (sess_*). Required. */\n  sessionId: string;\n  /** Base URL of the deployed checkout-web app. Defaults to https://throttle-checkout-web.onrender.com */\n  baseUrl?: string;\n  /** Initial iframe height in pixels. Auto-resizes on throttle.resize events. */\n  initialHeight?: number;\n  /** Optional className for the iframe. */\n  className?: string;\n  /** Optional inline style for the iframe. */\n  style?: React.CSSProperties;\n  /** Fires once the iframe is ready to receive interactions. */\n  onReady?: () => void;\n  /** Fires after a successful payment. */\n  onCompleted?: (orderId: string, paymentId: string) => void;\n  /** Fires when the buyer cancels checkout. */\n  onCancelled?: () => void;\n  /** Fires on any error inside the iframe (Gr4vy decline, network, etc.). */\n  onError?: (code: string, message: string) => void;\n}\n\nconst DEFAULT_BASE_URL = 'https://throttle-checkout-web.onrender.com';\n\n/**\n * Embedded Throttle checkout for React apps.\n *\n * Renders an iframe pointed at <baseUrl>/c/<sessionId>?embed=1 and\n * subscribes to the postMessage v1 protocol. Events fire on the\n * provided callbacks. Auto-resizes the iframe on throttle.resize.\n */\nexport function ThrottleCheckout({\n  sessionId,\n  baseUrl = DEFAULT_BASE_URL,\n  initialHeight = 480,\n  className,\n  style,\n  onReady,\n  onCompleted,\n  onCancelled,\n  onError,\n}: ThrottleCheckoutProps) {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    function handle(ev: MessageEvent) {\n      const data = ev?.data;\n      if (!data || typeof data !== 'object' || typeof data.type !== 'string') return;\n      if (!data.type.startsWith('throttle.')) return;\n      if (iframeRef.current && ev.source !== iframeRef.current.contentWindow) return;\n\n      if (data.type === 'throttle.resize' && typeof data.height === 'number' && iframeRef.current) {\n        iframeRef.current.style.height = `${data.height}px`;\n      }\n      if (data.type === 'throttle.ready') onReady?.();\n      else if (data.type === 'throttle.completed') onCompleted?.(data.orderId, data.paymentId);\n      else if (data.type === 'throttle.cancelled') onCancelled?.();\n      else if (data.type === 'throttle.error') onError?.(data.code, data.message);\n    }\n    window.addEventListener('message', handle);\n    return () => window.removeEventListener('message', handle);\n  }, [onReady, onCompleted, onCancelled, onError]);\n\n  const cleanBase = baseUrl.replace(/\\/$/, '');\n  const src = `${cleanBase}/c/${encodeURIComponent(sessionId)}?embed=1`;\n\n  return (\n    <iframe\n      ref={iframeRef}\n      src={src}\n      className={className}\n      style={{ border: 0, width: '100%', minHeight: initialHeight, ...style }}\n      allow=\"payment *\"\n      title=\"Throttle checkout\"\n    />\n  );\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAoE9B;AA7CJ,IAAM,mBAAmB;AASlB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,YAAY,OAA0B,IAAI;AAEhD,YAAU,MAAM;AACd,aAAS,OAAO,IAAkB;AAChC,YAAM,OAAO,IAAI;AACjB,UAAI,CAAC,QAAQ,OAAO,SAAS,YAAY,OAAO,KAAK,SAAS,SAAU;AACxE,UAAI,CAAC,KAAK,KAAK,WAAW,WAAW,EAAG;AACxC,UAAI,UAAU,WAAW,GAAG,WAAW,UAAU,QAAQ,cAAe;AAExE,UAAI,KAAK,SAAS,qBAAqB,OAAO,KAAK,WAAW,YAAY,UAAU,SAAS;AAC3F,kBAAU,QAAQ,MAAM,SAAS,GAAG,KAAK,MAAM;AAAA,MACjD;AACA,UAAI,KAAK,SAAS,iBAAkB,WAAU;AAAA,eACrC,KAAK,SAAS,qBAAsB,eAAc,KAAK,SAAS,KAAK,SAAS;AAAA,eAC9E,KAAK,SAAS,qBAAsB,eAAc;AAAA,eAClD,KAAK,SAAS,iBAAkB,WAAU,KAAK,MAAM,KAAK,OAAO;AAAA,IAC5E;AACA,WAAO,iBAAiB,WAAW,MAAM;AACzC,WAAO,MAAM,OAAO,oBAAoB,WAAW,MAAM;AAAA,EAC3D,GAAG,CAAC,SAAS,aAAa,aAAa,OAAO,CAAC;AAE/C,QAAM,YAAY,QAAQ,QAAQ,OAAO,EAAE;AAC3C,QAAM,MAAM,GAAG,SAAS,MAAM,mBAAmB,SAAS,CAAC;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,WAAW,eAAe,GAAG,MAAM;AAAA,MACtE,OAAM;AAAA,MACN,OAAM;AAAA;AAAA,EACR;AAEJ;","names":[]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@usethrottle/checkout-react",
+  "version": "0.1.0",
+  "description": "React component for embedded Throttle checkout",
+  "type": "module",
+  "main": "./dist/index.js",
+  "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"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}