@coincircuit/checkout 0.1.0

package/dist/react.js

@@ -0,0 +1,67 @@
+import {
+  CoinCircuitCheckout
+} from "./chunk-VYS76EOY.js";
+
+// src/react.ts
+import { useRef, useCallback, useEffect, createElement } from "react";
+function CoinCircuitCheckoutButton(props) {
+  const {
+    reference,
+    theme,
+    baseUrl,
+    publicKey,
+    label = "Pay with CoinCircuit",
+    className,
+    style,
+    disabled,
+    onReady,
+    onPaymentComplete,
+    onPaymentFailed,
+    onExpired,
+    onClose
+  } = props;
+  const checkoutRef = useRef(null);
+  const onReadyRef = useRef(onReady);
+  const onPaymentCompleteRef = useRef(onPaymentComplete);
+  const onPaymentFailedRef = useRef(onPaymentFailed);
+  const onExpiredRef = useRef(onExpired);
+  const onCloseRef = useRef(onClose);
+  onReadyRef.current = onReady;
+  onPaymentCompleteRef.current = onPaymentComplete;
+  onPaymentFailedRef.current = onPaymentFailed;
+  onExpiredRef.current = onExpired;
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    checkoutRef.current = new CoinCircuitCheckout({ baseUrl, publicKey });
+    return () => {
+      checkoutRef.current?.close();
+    };
+  }, [baseUrl, publicKey]);
+  const handleClick = useCallback(() => {
+    if (!checkoutRef.current || !reference) return;
+    checkoutRef.current.open({
+      reference,
+      theme,
+      onReady: () => onReadyRef.current?.(),
+      onPaymentComplete: (data) => onPaymentCompleteRef.current?.(data),
+      onPaymentFailed: (data) => onPaymentFailedRef.current?.(data),
+      onExpired: () => onExpiredRef.current?.(),
+      onClose: () => onCloseRef.current?.()
+    });
+  }, [reference, theme]);
+  return createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || !reference,
+      className,
+      style,
+      "data-coincircuit-checkout": "true"
+    },
+    label
+  );
+}
+export {
+  CoinCircuitCheckoutButton
+};

package/dist/types-B0nOHvDT.d.cts

@@ -0,0 +1,72 @@
+/**
+ * Theme options for the checkout.
+ */
+type CheckoutTheme = 'light' | 'dark';
+/**
+ * Data returned when a payment completes successfully.
+ */
+interface PaymentCompleteData {
+    reference: string;
+    transactionHash?: string;
+    status: string;
+    amount?: string;
+    currency?: string;
+}
+/**
+ * Error data returned when a payment fails.
+ */
+interface PaymentFailedData {
+    reference: string;
+    code: string;
+    message: string;
+}
+/**
+ * Configuration for the CoinCircuitCheckout instance.
+ */
+interface CheckoutConfig {
+    /**
+     * Public API key. Reserved for future use.
+     */
+    publicKey?: string;
+    /**
+     * Base URL of the checkout application.
+     * Defaults to "https://checkout.coincircuit.io".
+     */
+    baseUrl?: string;
+}
+/**
+ * Options passed to `checkout.open()` to launch the checkout modal.
+ */
+interface CheckoutOptions {
+    /** The checkout session reference (e.g. "cs_ref_abc123"). */
+    reference: string;
+    /** Color theme for the checkout UI. Defaults to "light". */
+    theme?: CheckoutTheme;
+    /** Called when the checkout has loaded and is ready. */
+    onReady?: () => void;
+    /** Called when the payment completes successfully. */
+    onPaymentComplete?: (data: PaymentCompleteData) => void;
+    /** Called when the payment fails. */
+    onPaymentFailed?: (data: PaymentFailedData) => void;
+    /** Called when the checkout session has expired. */
+    onExpired?: () => void;
+    /** Called when the user closes the checkout modal. */
+    onClose?: () => void;
+}
+/**
+ * Props for the React CoinCircuitCheckoutButton component.
+ */
+interface CheckoutButtonProps extends CheckoutOptions {
+    publicKey?: string;
+    baseUrl?: string;
+    /** Text to display on the button. Defaults to "Pay with CoinCircuit". */
+    label?: string;
+    /** Additional CSS class name(s) for the button element. */
+    className?: string;
+    /** Inline styles for the button element. */
+    style?: Record<string, string | number>;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+}
+
+export type { CheckoutConfig as C, PaymentCompleteData as P, CheckoutOptions as a, PaymentFailedData as b, CheckoutTheme as c, CheckoutButtonProps as d };

package/dist/types-B0nOHvDT.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Theme options for the checkout.
+ */
+type CheckoutTheme = 'light' | 'dark';
+/**
+ * Data returned when a payment completes successfully.
+ */
+interface PaymentCompleteData {
+    reference: string;
+    transactionHash?: string;
+    status: string;
+    amount?: string;
+    currency?: string;
+}
+/**
+ * Error data returned when a payment fails.
+ */
+interface PaymentFailedData {
+    reference: string;
+    code: string;
+    message: string;
+}
+/**
+ * Configuration for the CoinCircuitCheckout instance.
+ */
+interface CheckoutConfig {
+    /**
+     * Public API key. Reserved for future use.
+     */
+    publicKey?: string;
+    /**
+     * Base URL of the checkout application.
+     * Defaults to "https://checkout.coincircuit.io".
+     */
+    baseUrl?: string;
+}
+/**
+ * Options passed to `checkout.open()` to launch the checkout modal.
+ */
+interface CheckoutOptions {
+    /** The checkout session reference (e.g. "cs_ref_abc123"). */
+    reference: string;
+    /** Color theme for the checkout UI. Defaults to "light". */
+    theme?: CheckoutTheme;
+    /** Called when the checkout has loaded and is ready. */
+    onReady?: () => void;
+    /** Called when the payment completes successfully. */
+    onPaymentComplete?: (data: PaymentCompleteData) => void;
+    /** Called when the payment fails. */
+    onPaymentFailed?: (data: PaymentFailedData) => void;
+    /** Called when the checkout session has expired. */
+    onExpired?: () => void;
+    /** Called when the user closes the checkout modal. */
+    onClose?: () => void;
+}
+/**
+ * Props for the React CoinCircuitCheckoutButton component.
+ */
+interface CheckoutButtonProps extends CheckoutOptions {
+    publicKey?: string;
+    baseUrl?: string;
+    /** Text to display on the button. Defaults to "Pay with CoinCircuit". */
+    label?: string;
+    /** Additional CSS class name(s) for the button element. */
+    className?: string;
+    /** Inline styles for the button element. */
+    style?: Record<string, string | number>;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+}
+
+export type { CheckoutConfig as C, PaymentCompleteData as P, CheckoutOptions as a, PaymentFailedData as b, CheckoutTheme as c, CheckoutButtonProps as d };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@coincircuit/checkout",
+  "version": "0.1.0",
+  "description": "Embed CoinCircuit checkout in your site via iframe, with vanilla JS and React support",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/react.ts --format esm,cjs --dts --clean",
+    "typecheck": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "coincircuit",
+    "checkout",
+    "crypto",
+    "payments",
+    "embed",
+    "iframe",
+    "stablecoin",
+    "sdk"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coincircuit/coincircuit-checkout"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  }
+}