@commercengine/react 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +5 -1
  2. package/dist/index.cjs +4 -2
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +11 -3
  5. package/dist/index.d.cts.map +1 -1
  6. package/dist/index.d.mts +11 -3
  7. package/dist/index.d.mts.map +1 -1
  8. package/dist/index.mjs +4 -2
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +2 -2
package/README.md CHANGED
@@ -17,6 +17,7 @@ function App() {
17
17
  const { openCart, cartCount, isReady } = useCheckout({
18
18
  storeId: "store_xxx",
19
19
  apiKey: "ak_xxx",
20
+ environment: "production", // or "staging"
20
21
  });
21
22
 
22
23
  return (
@@ -36,9 +37,11 @@ interface UseCheckoutOptions {
36
37
  // === Credentials (required) ===
37
38
  storeId: string; // Your Commerce Engine Store ID
38
39
  apiKey: string; // Your Commerce Engine API Key
40
+ environment?: "production" | "staging"; // Default: "production"
39
41
 
40
42
  // === Development ===
41
- url?: string; // Direct checkout URL (local dev only)
43
+ url?: string; // Direct checkout URL (for local dev)
44
+ // Overrides environment-based URL
42
45
 
43
46
  // === Theme ===
44
47
  theme?: "light" | "dark" | "system"; // Default: "system"
@@ -95,6 +98,7 @@ function Store() {
95
98
  } = useCheckout({
96
99
  storeId: "store_xxx",
97
100
  apiKey: "ak_xxx",
101
+ environment: "production",
98
102
  theme: "dark",
99
103
  zIndex: 100000,
100
104
  accessToken: session?.accessToken,
package/dist/index.cjs CHANGED
@@ -48,7 +48,7 @@ function useCheckout(options) {
48
48
  });
49
49
  const optionsRef = (0, react.useRef)(options);
50
50
  optionsRef.current = options;
51
- const { url, storeId, apiKey } = options;
51
+ const { url, storeId, apiKey, environment } = options;
52
52
  (0, react.useEffect)(() => {
53
53
  if (typeof window === "undefined") return;
54
54
  const opts = optionsRef.current;
@@ -56,6 +56,7 @@ function useCheckout(options) {
56
56
  url,
57
57
  storeId,
58
58
  apiKey,
59
+ environment,
59
60
  theme: opts.theme,
60
61
  authMode: opts.authMode,
61
62
  accessToken: opts.accessToken,
@@ -101,7 +102,8 @@ function useCheckout(options) {
101
102
  }, [
102
103
  url,
103
104
  storeId,
104
- apiKey
105
+ apiKey,
106
+ environment
105
107
  ]);
106
108
  return {
107
109
  openCart: (0, react.useCallback)(() => {
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":["Checkout"],"sources":["../src/use-checkout.ts"],"sourcesContent":["/**\n * useCheckout Hook\n *\n * React hook for Commerce Engine Checkout integration.\n * Handles checkout initialization, state management, and cleanup.\n *\n * @example\n * ```tsx\n * import { useCheckout } from \"@commercengine/react\";\n *\n * function MyStore() {\n * const { openCart, openCheckout, cartCount, isReady } = useCheckout({\n * storeId: \"store_xxx\",\n * apiKey: \"ak_xxx\",\n * theme: \"dark\",\n * onComplete: (order) => {\n * console.log(\"Order placed:\", order.orderNumber);\n * window.location.href = \"/thank-you\";\n * },\n * });\n *\n * return (\n * <button onClick={openCart} disabled={!isReady}>\n * Cart ({cartCount})\n * </button>\n * );\n * }\n * ```\n */\n\nimport {\n type AuthChangeData,\n type AuthMode,\n type CartData,\n Checkout,\n type CheckoutConfig,\n type ErrorData,\n type OrderData,\n type QuickBuyConfig,\n type SessionMode,\n} from \"@commercengine/js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Options for useCheckout hook\n */\nexport interface UseCheckoutOptions {\n /**\n * Your Commerce Engine Store ID\n * @example \"store_abc123\"\n */\n storeId?: string;\n\n /**\n * Your Commerce Engine API Key\n * @example \"ak_test_xyz789\"\n */\n apiKey?: string;\n\n /**\n * Checkout URL for local development\n * In production, URL is resolved from storeId/apiKey\n */\n url?: string;\n\n /**\n * Theme preference\n * @default \"system\"\n */\n theme?: \"light\" | \"dark\" | \"system\";\n\n /**\n * Z-index for the checkout overlay\n * @default 99999\n */\n zIndex?: number;\n\n /**\n * Authentication mode\n * - 'managed': Checkout manages token lifecycle (default)\n * - 'provided': Parent manages tokens, checkout uses in-memory only\n * @default \"managed\"\n */\n authMode?: AuthMode;\n\n /**\n * Initial access token (if user already logged in)\n */\n accessToken?: string;\n\n /**\n * Initial refresh token\n */\n refreshToken?: string;\n\n /**\n * Quick buy configuration for \"Buy Now\" flows\n * When provided, adds the product to cart on initialization\n */\n quickBuy?: QuickBuyConfig;\n\n /**\n * Session behavior when quick buy is used\n * @default \"continue-existing\"\n */\n sessionMode?: SessionMode;\n\n /**\n * Auto-detect quick buy params from parent page URL\n * When enabled, SDK parses window.location.search for:\n * - product_id, variant_id, qty/quantity, session_mode\n * Useful for ad-driven traffic to embedded checkout pages\n * @default false\n */\n autoDetectQuickBuy?: boolean;\n\n /**\n * Called when checkout iframe is ready\n */\n onReady?: () => void;\n\n /**\n * Called when checkout is opened\n */\n onOpen?: () => void;\n\n /**\n * Called when checkout is closed\n */\n onClose?: () => void;\n\n /**\n * Called when order is completed\n */\n onComplete?: (order: OrderData) => void;\n\n /**\n * Called when cart state changes\n */\n onCartUpdate?: (cart: CartData) => void;\n\n /**\n * Called when auth state changes\n */\n onAuthChange?: (auth: AuthChangeData) => void;\n\n /**\n * Called when checkout encounters a configuration error\n */\n onError?: (error: ErrorData) => void;\n}\n\n/**\n * Return value from useCheckout hook\n */\nexport interface UseCheckoutReturn {\n /**\n * Open the cart drawer\n */\n openCart: () => void;\n\n /**\n * Open the checkout drawer directly (for Buy Now flow)\n */\n openCheckout: () => void;\n\n /**\n * Close the checkout overlay\n */\n close: () => void;\n\n /**\n * Update auth tokens (when user logs in/out on parent site)\n */\n updateTokens: (accessToken: string, refreshToken?: string) => void;\n\n /**\n * Add item to cart\n * @param productId - Product ID (required)\n * @param variantId - Variant ID (required, null for non-variant products)\n * @param quantity - Quantity to add (default: 1)\n */\n addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n\n /**\n * Whether checkout is ready to use\n */\n isReady: boolean;\n\n /**\n * Whether checkout overlay is currently open\n */\n isOpen: boolean;\n\n /**\n * Number of items in cart\n */\n cartCount: number;\n\n /**\n * Cart subtotal amount\n */\n cartTotal: number;\n\n /**\n * Cart currency code\n */\n cartCurrency: string;\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * React hook for Commerce Engine Checkout\n *\n * @param options - Checkout configuration\n * @returns Checkout state and methods\n */\nexport function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn {\n const checkoutRef = useRef<Checkout | null>(null);\n const [isReady, setIsReady] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const [cart, setCart] = useState<CartData>({ count: 0, total: 0, currency: \"INR\" });\n\n // Store options in ref to avoid recreating checkout on callback changes\n // This allows stable callbacks while still using latest callback values\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n // Destructure stable keys for dependency array\n const { url, storeId, apiKey } = options;\n\n // Initialize checkout on mount or when key config changes\n useEffect(() => {\n // Skip on server\n if (typeof window === \"undefined\") return;\n\n // Get current options from ref for non-key values\n const opts = optionsRef.current;\n\n const config: CheckoutConfig = {\n url,\n storeId,\n apiKey,\n theme: opts.theme,\n authMode: opts.authMode,\n accessToken: opts.accessToken,\n refreshToken: opts.refreshToken,\n quickBuy: opts.quickBuy,\n sessionMode: opts.sessionMode,\n autoDetectQuickBuy: opts.autoDetectQuickBuy,\n appearance: {\n zIndex: opts.zIndex,\n },\n onReady: () => {\n setIsReady(true);\n optionsRef.current.onReady?.();\n },\n onOpen: () => {\n setIsOpen(true);\n optionsRef.current.onOpen?.();\n },\n onClose: () => {\n setIsOpen(false);\n optionsRef.current.onClose?.();\n },\n onComplete: (order) => {\n optionsRef.current.onComplete?.(order);\n },\n onCartUpdate: (cartData) => {\n setCart(cartData);\n optionsRef.current.onCartUpdate?.(cartData);\n },\n onAuthChange: (auth) => {\n optionsRef.current.onAuthChange?.(auth);\n },\n onError: (error) => {\n // Still set ready so buttons are enabled (error drawer will show)\n setIsReady(true);\n optionsRef.current.onError?.(error);\n },\n };\n\n const checkout = new Checkout(config);\n checkoutRef.current = checkout;\n\n return () => {\n checkout.destroy();\n checkoutRef.current = null;\n setIsReady(false);\n setIsOpen(false);\n };\n // Only reinitialize when URL or credentials change\n // Other options like theme, tokens, callbacks are read from optionsRef\n }, [url, storeId, apiKey]);\n\n // Stable callback refs\n const openCart = useCallback(() => {\n checkoutRef.current?.openCart();\n }, []);\n\n const openCheckout = useCallback(() => {\n checkoutRef.current?.openCheckout();\n }, []);\n\n const close = useCallback(() => {\n checkoutRef.current?.close();\n }, []);\n\n const updateTokens = useCallback((accessToken: string, refreshToken?: string) => {\n checkoutRef.current?.updateTokens(accessToken, refreshToken);\n }, []);\n\n const addToCart = useCallback(\n (productId: string, variantId: string | null, quantity?: number) => {\n checkoutRef.current?.addToCart(productId, variantId, quantity);\n },\n []\n );\n\n return {\n openCart,\n openCheckout,\n close,\n updateTokens,\n addToCart,\n isReady,\n isOpen,\n cartCount: cart.count,\n cartTotal: cart.total,\n cartCurrency: cart.currency,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgOA,SAAgB,YAAY,SAAgD;CAC1E,MAAM,gCAAsC,KAAK;CACjD,MAAM,CAAC,SAAS,kCAAuB,MAAM;CAC7C,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAC3C,MAAM,CAAC,MAAM,+BAA8B;EAAE,OAAO;EAAG,OAAO;EAAG,UAAU;EAAO,CAAC;CAInF,MAAM,+BAAoB,QAAQ;AAClC,YAAW,UAAU;CAGrB,MAAM,EAAE,KAAK,SAAS,WAAW;AAGjC,4BAAgB;AAEd,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,OAAO,WAAW;EA6CxB,MAAM,WAAW,IAAIA,2BA3CU;GAC7B;GACA;GACA;GACA,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,cAAc,KAAK;GACnB,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,oBAAoB,KAAK;GACzB,YAAY,EACV,QAAQ,KAAK,QACd;GACD,eAAe;AACb,eAAW,KAAK;AAChB,eAAW,QAAQ,WAAW;;GAEhC,cAAc;AACZ,cAAU,KAAK;AACf,eAAW,QAAQ,UAAU;;GAE/B,eAAe;AACb,cAAU,MAAM;AAChB,eAAW,QAAQ,WAAW;;GAEhC,aAAa,UAAU;AACrB,eAAW,QAAQ,aAAa,MAAM;;GAExC,eAAe,aAAa;AAC1B,YAAQ,SAAS;AACjB,eAAW,QAAQ,eAAe,SAAS;;GAE7C,eAAe,SAAS;AACtB,eAAW,QAAQ,eAAe,KAAK;;GAEzC,UAAU,UAAU;AAElB,eAAW,KAAK;AAChB,eAAW,QAAQ,UAAU,MAAM;;GAEtC,CAEoC;AACrC,cAAY,UAAU;AAEtB,eAAa;AACX,YAAS,SAAS;AAClB,eAAY,UAAU;AACtB,cAAW,MAAM;AACjB,aAAU,MAAM;;IAIjB;EAAC;EAAK;EAAS;EAAO,CAAC;AA0B1B,QAAO;EACL,uCAxBiC;AACjC,eAAY,SAAS,UAAU;KAC9B,EAAE,CAAC;EAuBJ,2CArBqC;AACrC,eAAY,SAAS,cAAc;KAClC,EAAE,CAAC;EAoBJ,oCAlB8B;AAC9B,eAAY,SAAS,OAAO;KAC3B,EAAE,CAAC;EAiBJ,sCAfgC,aAAqB,iBAA0B;AAC/E,eAAY,SAAS,aAAa,aAAa,aAAa;KAC3D,EAAE,CAAC;EAcJ,mCAXC,WAAmB,WAA0B,aAAsB;AAClE,eAAY,SAAS,UAAU,WAAW,WAAW,SAAS;KAEhE,EAAE,CACH;EAQC;EACA;EACA,WAAW,KAAK;EAChB,WAAW,KAAK;EAChB,cAAc,KAAK;EACpB"}
1
+ {"version":3,"file":"index.cjs","names":["Checkout"],"sources":["../src/use-checkout.ts"],"sourcesContent":["/**\n * useCheckout Hook\n *\n * React hook for Commerce Engine Checkout integration.\n * Handles checkout initialization, state management, and cleanup.\n *\n * @example\n * ```tsx\n * import { useCheckout } from \"@commercengine/react\";\n *\n * function MyStore() {\n * const { openCart, openCheckout, cartCount, isReady } = useCheckout({\n * storeId: \"store_xxx\",\n * apiKey: \"ak_xxx\",\n * theme: \"dark\",\n * onComplete: (order) => {\n * console.log(\"Order placed:\", order.orderNumber);\n * window.location.href = \"/thank-you\";\n * },\n * });\n *\n * return (\n * <button onClick={openCart} disabled={!isReady}>\n * Cart ({cartCount})\n * </button>\n * );\n * }\n * ```\n */\n\nimport {\n type AuthChangeData,\n type AuthMode,\n type CartData,\n Checkout,\n type CheckoutConfig,\n type Environment,\n type ErrorData,\n type OrderData,\n type QuickBuyConfig,\n type SessionMode,\n} from \"@commercengine/js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Options for useCheckout hook\n */\nexport interface UseCheckoutOptions {\n /**\n * Your Commerce Engine Store ID\n * @example \"store_abc123\"\n */\n storeId?: string;\n\n /**\n * Your Commerce Engine API Key\n * @example \"ak_test_xyz789\"\n */\n apiKey?: string;\n\n /**\n * Checkout URL (overrides environment detection)\n * Only needed for custom checkout deployments\n */\n url?: string;\n\n /**\n * Environment for checkout URL resolution\n * - 'production': checkout.commercengine.com (default)\n * - 'staging': staging.checkout.commercengine.com\n *\n * For local development, use the `url` option instead.\n */\n environment?: Environment;\n\n /**\n * Theme preference\n * @default \"system\"\n */\n theme?: \"light\" | \"dark\" | \"system\";\n\n /**\n * Z-index for the checkout overlay\n * @default 99999\n */\n zIndex?: number;\n\n /**\n * Authentication mode\n * - 'managed': Checkout manages token lifecycle (default)\n * - 'provided': Parent manages tokens, checkout uses in-memory only\n * @default \"managed\"\n */\n authMode?: AuthMode;\n\n /**\n * Initial access token (if user already logged in)\n */\n accessToken?: string;\n\n /**\n * Initial refresh token\n */\n refreshToken?: string;\n\n /**\n * Quick buy configuration for \"Buy Now\" flows\n * When provided, adds the product to cart on initialization\n */\n quickBuy?: QuickBuyConfig;\n\n /**\n * Session behavior when quick buy is used\n * @default \"continue-existing\"\n */\n sessionMode?: SessionMode;\n\n /**\n * Auto-detect quick buy params from parent page URL\n * When enabled, SDK parses window.location.search for:\n * - product_id, variant_id, qty/quantity, session_mode\n * Useful for ad-driven traffic to embedded checkout pages\n * @default false\n */\n autoDetectQuickBuy?: boolean;\n\n /**\n * Called when checkout iframe is ready\n */\n onReady?: () => void;\n\n /**\n * Called when checkout is opened\n */\n onOpen?: () => void;\n\n /**\n * Called when checkout is closed\n */\n onClose?: () => void;\n\n /**\n * Called when order is completed\n */\n onComplete?: (order: OrderData) => void;\n\n /**\n * Called when cart state changes\n */\n onCartUpdate?: (cart: CartData) => void;\n\n /**\n * Called when auth state changes\n */\n onAuthChange?: (auth: AuthChangeData) => void;\n\n /**\n * Called when checkout encounters a configuration error\n */\n onError?: (error: ErrorData) => void;\n}\n\n/**\n * Return value from useCheckout hook\n */\nexport interface UseCheckoutReturn {\n /**\n * Open the cart drawer\n */\n openCart: () => void;\n\n /**\n * Open the checkout drawer directly (for Buy Now flow)\n */\n openCheckout: () => void;\n\n /**\n * Close the checkout overlay\n */\n close: () => void;\n\n /**\n * Update auth tokens (when user logs in/out on parent site)\n */\n updateTokens: (accessToken: string, refreshToken?: string) => void;\n\n /**\n * Add item to cart\n * @param productId - Product ID (required)\n * @param variantId - Variant ID (required, null for non-variant products)\n * @param quantity - Quantity to add (default: 1)\n */\n addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n\n /**\n * Whether checkout is ready to use\n */\n isReady: boolean;\n\n /**\n * Whether checkout overlay is currently open\n */\n isOpen: boolean;\n\n /**\n * Number of items in cart\n */\n cartCount: number;\n\n /**\n * Cart subtotal amount\n */\n cartTotal: number;\n\n /**\n * Cart currency code\n */\n cartCurrency: string;\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * React hook for Commerce Engine Checkout\n *\n * @param options - Checkout configuration\n * @returns Checkout state and methods\n */\nexport function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn {\n const checkoutRef = useRef<Checkout | null>(null);\n const [isReady, setIsReady] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const [cart, setCart] = useState<CartData>({ count: 0, total: 0, currency: \"INR\" });\n\n // Store options in ref to avoid recreating checkout on callback changes\n // This allows stable callbacks while still using latest callback values\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n // Destructure stable keys for dependency array\n const { url, storeId, apiKey, environment } = options;\n\n // Initialize checkout on mount or when key config changes\n useEffect(() => {\n // Skip on server\n if (typeof window === \"undefined\") return;\n\n // Get current options from ref for non-key values\n const opts = optionsRef.current;\n\n const config: CheckoutConfig = {\n url,\n storeId,\n apiKey,\n environment,\n theme: opts.theme,\n authMode: opts.authMode,\n accessToken: opts.accessToken,\n refreshToken: opts.refreshToken,\n quickBuy: opts.quickBuy,\n sessionMode: opts.sessionMode,\n autoDetectQuickBuy: opts.autoDetectQuickBuy,\n appearance: {\n zIndex: opts.zIndex,\n },\n onReady: () => {\n setIsReady(true);\n optionsRef.current.onReady?.();\n },\n onOpen: () => {\n setIsOpen(true);\n optionsRef.current.onOpen?.();\n },\n onClose: () => {\n setIsOpen(false);\n optionsRef.current.onClose?.();\n },\n onComplete: (order) => {\n optionsRef.current.onComplete?.(order);\n },\n onCartUpdate: (cartData) => {\n setCart(cartData);\n optionsRef.current.onCartUpdate?.(cartData);\n },\n onAuthChange: (auth) => {\n optionsRef.current.onAuthChange?.(auth);\n },\n onError: (error) => {\n // Still set ready so buttons are enabled (error drawer will show)\n setIsReady(true);\n optionsRef.current.onError?.(error);\n },\n };\n\n const checkout = new Checkout(config);\n checkoutRef.current = checkout;\n\n return () => {\n checkout.destroy();\n checkoutRef.current = null;\n setIsReady(false);\n setIsOpen(false);\n };\n // Only reinitialize when URL, credentials, or environment change\n // Other options like theme, tokens, callbacks are read from optionsRef\n }, [url, storeId, apiKey, environment]);\n\n // Stable callback refs\n const openCart = useCallback(() => {\n checkoutRef.current?.openCart();\n }, []);\n\n const openCheckout = useCallback(() => {\n checkoutRef.current?.openCheckout();\n }, []);\n\n const close = useCallback(() => {\n checkoutRef.current?.close();\n }, []);\n\n const updateTokens = useCallback((accessToken: string, refreshToken?: string) => {\n checkoutRef.current?.updateTokens(accessToken, refreshToken);\n }, []);\n\n const addToCart = useCallback(\n (productId: string, variantId: string | null, quantity?: number) => {\n checkoutRef.current?.addToCart(productId, variantId, quantity);\n },\n []\n );\n\n return {\n openCart,\n openCheckout,\n close,\n updateTokens,\n addToCart,\n isReady,\n isOpen,\n cartCount: cart.count,\n cartTotal: cart.total,\n cartCurrency: cart.currency,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0OA,SAAgB,YAAY,SAAgD;CAC1E,MAAM,gCAAsC,KAAK;CACjD,MAAM,CAAC,SAAS,kCAAuB,MAAM;CAC7C,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAC3C,MAAM,CAAC,MAAM,+BAA8B;EAAE,OAAO;EAAG,OAAO;EAAG,UAAU;EAAO,CAAC;CAInF,MAAM,+BAAoB,QAAQ;AAClC,YAAW,UAAU;CAGrB,MAAM,EAAE,KAAK,SAAS,QAAQ,gBAAgB;AAG9C,4BAAgB;AAEd,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,OAAO,WAAW;EA8CxB,MAAM,WAAW,IAAIA,2BA5CU;GAC7B;GACA;GACA;GACA;GACA,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,cAAc,KAAK;GACnB,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,oBAAoB,KAAK;GACzB,YAAY,EACV,QAAQ,KAAK,QACd;GACD,eAAe;AACb,eAAW,KAAK;AAChB,eAAW,QAAQ,WAAW;;GAEhC,cAAc;AACZ,cAAU,KAAK;AACf,eAAW,QAAQ,UAAU;;GAE/B,eAAe;AACb,cAAU,MAAM;AAChB,eAAW,QAAQ,WAAW;;GAEhC,aAAa,UAAU;AACrB,eAAW,QAAQ,aAAa,MAAM;;GAExC,eAAe,aAAa;AAC1B,YAAQ,SAAS;AACjB,eAAW,QAAQ,eAAe,SAAS;;GAE7C,eAAe,SAAS;AACtB,eAAW,QAAQ,eAAe,KAAK;;GAEzC,UAAU,UAAU;AAElB,eAAW,KAAK;AAChB,eAAW,QAAQ,UAAU,MAAM;;GAEtC,CAEoC;AACrC,cAAY,UAAU;AAEtB,eAAa;AACX,YAAS,SAAS;AAClB,eAAY,UAAU;AACtB,cAAW,MAAM;AACjB,aAAU,MAAM;;IAIjB;EAAC;EAAK;EAAS;EAAQ;EAAY,CAAC;AA0BvC,QAAO;EACL,uCAxBiC;AACjC,eAAY,SAAS,UAAU;KAC9B,EAAE,CAAC;EAuBJ,2CArBqC;AACrC,eAAY,SAAS,cAAc;KAClC,EAAE,CAAC;EAoBJ,oCAlB8B;AAC9B,eAAY,SAAS,OAAO;KAC3B,EAAE,CAAC;EAiBJ,sCAfgC,aAAqB,iBAA0B;AAC/E,eAAY,SAAS,aAAa,aAAa,aAAa;KAC3D,EAAE,CAAC;EAcJ,mCAXC,WAAmB,WAA0B,aAAsB;AAClE,eAAY,SAAS,UAAU,WAAW,WAAW,SAAS;KAEhE,EAAE,CACH;EAQC;EACA;EACA,WAAW,KAAK;EAChB,WAAW,KAAK;EAChB,cAAc,KAAK;EACpB"}
package/dist/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import { AddToCartItem, AuthChangeData, AuthChangeData as AuthChangeData$1, AuthMode, AuthMode as AuthMode$1, CartData, CartData as CartData$1, ErrorData, OrderData, OrderData as OrderData$1, QuickBuyConfig, QuickBuyConfig as QuickBuyConfig$1, SessionMode, SessionMode as SessionMode$1 } from "@commercengine/js";
1
+ import { AddToCartItem, AuthChangeData, AuthChangeData as AuthChangeData$1, AuthMode, AuthMode as AuthMode$1, CartData, CartData as CartData$1, Environment, ErrorData, OrderData, OrderData as OrderData$1, QuickBuyConfig, QuickBuyConfig as QuickBuyConfig$1, SessionMode, SessionMode as SessionMode$1 } from "@commercengine/js";
2
2
 
3
3
  //#region src/use-checkout.d.ts
4
4
 
@@ -17,10 +17,18 @@ interface UseCheckoutOptions {
17
17
  */
18
18
  apiKey?: string;
19
19
  /**
20
- * Checkout URL for local development
21
- * In production, URL is resolved from storeId/apiKey
20
+ * Checkout URL (overrides environment detection)
21
+ * Only needed for custom checkout deployments
22
22
  */
23
23
  url?: string;
24
+ /**
25
+ * Environment for checkout URL resolution
26
+ * - 'production': checkout.commercengine.com (default)
27
+ * - 'staging': staging.checkout.commercengine.com
28
+ *
29
+ * For local development, use the `url` option instead.
30
+ */
31
+ environment?: Environment;
24
32
  /**
25
33
  * Theme preference
26
34
  * @default "system"
package/dist/index.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.cts","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":[],"mappings":";;;;;;;UAkDiB,kBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAqCJ;;;;;;;;;;;;;aAgBA;;;;;gBAMG;;;;;;;;;;;;;;;;;;;;;;;;uBA6BO;;;;wBAKC;;;;wBAKA;;;;oBAKJ;;;;;UAMH,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiED,WAAA,UAAqB,qBAAqB"}
1
+ {"version":3,"file":"index.d.cts","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":[],"mappings":";;;;;;;UAmDiB,kBAAA;;;;;;;;;;;;;;;;;;;;;;;gBA0BD;;;;;;;;;;;;;;;;;aAoBH;;;;;;;;;;;;;aAgBA;;;;;gBAMG;;;;;;;;;;;;;;;;;;;;;;;;uBA6BO;;;;wBAKC;;;;wBAKA;;;;oBAKJ;;;;;UAMH,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiED,WAAA,UAAqB,qBAAqB"}
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import { AddToCartItem, AuthChangeData, AuthChangeData as AuthChangeData$1, AuthMode, AuthMode as AuthMode$1, CartData, CartData as CartData$1, ErrorData, OrderData, OrderData as OrderData$1, QuickBuyConfig, QuickBuyConfig as QuickBuyConfig$1, SessionMode, SessionMode as SessionMode$1 } from "@commercengine/js";
1
+ import { AddToCartItem, AuthChangeData, AuthChangeData as AuthChangeData$1, AuthMode, AuthMode as AuthMode$1, CartData, CartData as CartData$1, Environment, ErrorData, OrderData, OrderData as OrderData$1, QuickBuyConfig, QuickBuyConfig as QuickBuyConfig$1, SessionMode, SessionMode as SessionMode$1 } from "@commercengine/js";
2
2
 
3
3
  //#region src/use-checkout.d.ts
4
4
 
@@ -17,10 +17,18 @@ interface UseCheckoutOptions {
17
17
  */
18
18
  apiKey?: string;
19
19
  /**
20
- * Checkout URL for local development
21
- * In production, URL is resolved from storeId/apiKey
20
+ * Checkout URL (overrides environment detection)
21
+ * Only needed for custom checkout deployments
22
22
  */
23
23
  url?: string;
24
+ /**
25
+ * Environment for checkout URL resolution
26
+ * - 'production': checkout.commercengine.com (default)
27
+ * - 'staging': staging.checkout.commercengine.com
28
+ *
29
+ * For local development, use the `url` option instead.
30
+ */
31
+ environment?: Environment;
24
32
  /**
25
33
  * Theme preference
26
34
  * @default "system"
package/dist/index.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":[],"mappings":";;;;;;;UAkDiB,kBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAqCJ;;;;;;;;;;;;;aAgBA;;;;;gBAMG;;;;;;;;;;;;;;;;;;;;;;;;uBA6BO;;;;wBAKC;;;;wBAKA;;;;oBAKJ;;;;;UAMH,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiED,WAAA,UAAqB,qBAAqB"}
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":[],"mappings":";;;;;;;UAmDiB,kBAAA;;;;;;;;;;;;;;;;;;;;;;;gBA0BD;;;;;;;;;;;;;;;;;aAoBH;;;;;;;;;;;;;aAgBA;;;;;gBAMG;;;;;;;;;;;;;;;;;;;;;;;;uBA6BO;;;;wBAKC;;;;wBAKA;;;;oBAKJ;;;;;UAMH,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiED,WAAA,UAAqB,qBAAqB"}
package/dist/index.mjs CHANGED
@@ -48,7 +48,7 @@ function useCheckout(options) {
48
48
  });
49
49
  const optionsRef = useRef(options);
50
50
  optionsRef.current = options;
51
- const { url, storeId, apiKey } = options;
51
+ const { url, storeId, apiKey, environment } = options;
52
52
  useEffect(() => {
53
53
  if (typeof window === "undefined") return;
54
54
  const opts = optionsRef.current;
@@ -56,6 +56,7 @@ function useCheckout(options) {
56
56
  url,
57
57
  storeId,
58
58
  apiKey,
59
+ environment,
59
60
  theme: opts.theme,
60
61
  authMode: opts.authMode,
61
62
  accessToken: opts.accessToken,
@@ -101,7 +102,8 @@ function useCheckout(options) {
101
102
  }, [
102
103
  url,
103
104
  storeId,
104
- apiKey
105
+ apiKey,
106
+ environment
105
107
  ]);
106
108
  return {
107
109
  openCart: useCallback(() => {
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":["/**\n * useCheckout Hook\n *\n * React hook for Commerce Engine Checkout integration.\n * Handles checkout initialization, state management, and cleanup.\n *\n * @example\n * ```tsx\n * import { useCheckout } from \"@commercengine/react\";\n *\n * function MyStore() {\n * const { openCart, openCheckout, cartCount, isReady } = useCheckout({\n * storeId: \"store_xxx\",\n * apiKey: \"ak_xxx\",\n * theme: \"dark\",\n * onComplete: (order) => {\n * console.log(\"Order placed:\", order.orderNumber);\n * window.location.href = \"/thank-you\";\n * },\n * });\n *\n * return (\n * <button onClick={openCart} disabled={!isReady}>\n * Cart ({cartCount})\n * </button>\n * );\n * }\n * ```\n */\n\nimport {\n type AuthChangeData,\n type AuthMode,\n type CartData,\n Checkout,\n type CheckoutConfig,\n type ErrorData,\n type OrderData,\n type QuickBuyConfig,\n type SessionMode,\n} from \"@commercengine/js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Options for useCheckout hook\n */\nexport interface UseCheckoutOptions {\n /**\n * Your Commerce Engine Store ID\n * @example \"store_abc123\"\n */\n storeId?: string;\n\n /**\n * Your Commerce Engine API Key\n * @example \"ak_test_xyz789\"\n */\n apiKey?: string;\n\n /**\n * Checkout URL for local development\n * In production, URL is resolved from storeId/apiKey\n */\n url?: string;\n\n /**\n * Theme preference\n * @default \"system\"\n */\n theme?: \"light\" | \"dark\" | \"system\";\n\n /**\n * Z-index for the checkout overlay\n * @default 99999\n */\n zIndex?: number;\n\n /**\n * Authentication mode\n * - 'managed': Checkout manages token lifecycle (default)\n * - 'provided': Parent manages tokens, checkout uses in-memory only\n * @default \"managed\"\n */\n authMode?: AuthMode;\n\n /**\n * Initial access token (if user already logged in)\n */\n accessToken?: string;\n\n /**\n * Initial refresh token\n */\n refreshToken?: string;\n\n /**\n * Quick buy configuration for \"Buy Now\" flows\n * When provided, adds the product to cart on initialization\n */\n quickBuy?: QuickBuyConfig;\n\n /**\n * Session behavior when quick buy is used\n * @default \"continue-existing\"\n */\n sessionMode?: SessionMode;\n\n /**\n * Auto-detect quick buy params from parent page URL\n * When enabled, SDK parses window.location.search for:\n * - product_id, variant_id, qty/quantity, session_mode\n * Useful for ad-driven traffic to embedded checkout pages\n * @default false\n */\n autoDetectQuickBuy?: boolean;\n\n /**\n * Called when checkout iframe is ready\n */\n onReady?: () => void;\n\n /**\n * Called when checkout is opened\n */\n onOpen?: () => void;\n\n /**\n * Called when checkout is closed\n */\n onClose?: () => void;\n\n /**\n * Called when order is completed\n */\n onComplete?: (order: OrderData) => void;\n\n /**\n * Called when cart state changes\n */\n onCartUpdate?: (cart: CartData) => void;\n\n /**\n * Called when auth state changes\n */\n onAuthChange?: (auth: AuthChangeData) => void;\n\n /**\n * Called when checkout encounters a configuration error\n */\n onError?: (error: ErrorData) => void;\n}\n\n/**\n * Return value from useCheckout hook\n */\nexport interface UseCheckoutReturn {\n /**\n * Open the cart drawer\n */\n openCart: () => void;\n\n /**\n * Open the checkout drawer directly (for Buy Now flow)\n */\n openCheckout: () => void;\n\n /**\n * Close the checkout overlay\n */\n close: () => void;\n\n /**\n * Update auth tokens (when user logs in/out on parent site)\n */\n updateTokens: (accessToken: string, refreshToken?: string) => void;\n\n /**\n * Add item to cart\n * @param productId - Product ID (required)\n * @param variantId - Variant ID (required, null for non-variant products)\n * @param quantity - Quantity to add (default: 1)\n */\n addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n\n /**\n * Whether checkout is ready to use\n */\n isReady: boolean;\n\n /**\n * Whether checkout overlay is currently open\n */\n isOpen: boolean;\n\n /**\n * Number of items in cart\n */\n cartCount: number;\n\n /**\n * Cart subtotal amount\n */\n cartTotal: number;\n\n /**\n * Cart currency code\n */\n cartCurrency: string;\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * React hook for Commerce Engine Checkout\n *\n * @param options - Checkout configuration\n * @returns Checkout state and methods\n */\nexport function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn {\n const checkoutRef = useRef<Checkout | null>(null);\n const [isReady, setIsReady] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const [cart, setCart] = useState<CartData>({ count: 0, total: 0, currency: \"INR\" });\n\n // Store options in ref to avoid recreating checkout on callback changes\n // This allows stable callbacks while still using latest callback values\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n // Destructure stable keys for dependency array\n const { url, storeId, apiKey } = options;\n\n // Initialize checkout on mount or when key config changes\n useEffect(() => {\n // Skip on server\n if (typeof window === \"undefined\") return;\n\n // Get current options from ref for non-key values\n const opts = optionsRef.current;\n\n const config: CheckoutConfig = {\n url,\n storeId,\n apiKey,\n theme: opts.theme,\n authMode: opts.authMode,\n accessToken: opts.accessToken,\n refreshToken: opts.refreshToken,\n quickBuy: opts.quickBuy,\n sessionMode: opts.sessionMode,\n autoDetectQuickBuy: opts.autoDetectQuickBuy,\n appearance: {\n zIndex: opts.zIndex,\n },\n onReady: () => {\n setIsReady(true);\n optionsRef.current.onReady?.();\n },\n onOpen: () => {\n setIsOpen(true);\n optionsRef.current.onOpen?.();\n },\n onClose: () => {\n setIsOpen(false);\n optionsRef.current.onClose?.();\n },\n onComplete: (order) => {\n optionsRef.current.onComplete?.(order);\n },\n onCartUpdate: (cartData) => {\n setCart(cartData);\n optionsRef.current.onCartUpdate?.(cartData);\n },\n onAuthChange: (auth) => {\n optionsRef.current.onAuthChange?.(auth);\n },\n onError: (error) => {\n // Still set ready so buttons are enabled (error drawer will show)\n setIsReady(true);\n optionsRef.current.onError?.(error);\n },\n };\n\n const checkout = new Checkout(config);\n checkoutRef.current = checkout;\n\n return () => {\n checkout.destroy();\n checkoutRef.current = null;\n setIsReady(false);\n setIsOpen(false);\n };\n // Only reinitialize when URL or credentials change\n // Other options like theme, tokens, callbacks are read from optionsRef\n }, [url, storeId, apiKey]);\n\n // Stable callback refs\n const openCart = useCallback(() => {\n checkoutRef.current?.openCart();\n }, []);\n\n const openCheckout = useCallback(() => {\n checkoutRef.current?.openCheckout();\n }, []);\n\n const close = useCallback(() => {\n checkoutRef.current?.close();\n }, []);\n\n const updateTokens = useCallback((accessToken: string, refreshToken?: string) => {\n checkoutRef.current?.updateTokens(accessToken, refreshToken);\n }, []);\n\n const addToCart = useCallback(\n (productId: string, variantId: string | null, quantity?: number) => {\n checkoutRef.current?.addToCart(productId, variantId, quantity);\n },\n []\n );\n\n return {\n openCart,\n openCheckout,\n close,\n updateTokens,\n addToCart,\n isReady,\n isOpen,\n cartCount: cart.count,\n cartTotal: cart.total,\n cartCurrency: cart.currency,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgOA,SAAgB,YAAY,SAAgD;CAC1E,MAAM,cAAc,OAAwB,KAAK;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,MAAM,WAAW,SAAmB;EAAE,OAAO;EAAG,OAAO;EAAG,UAAU;EAAO,CAAC;CAInF,MAAM,aAAa,OAAO,QAAQ;AAClC,YAAW,UAAU;CAGrB,MAAM,EAAE,KAAK,SAAS,WAAW;AAGjC,iBAAgB;AAEd,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,OAAO,WAAW;EA6CxB,MAAM,WAAW,IAAI,SA3CU;GAC7B;GACA;GACA;GACA,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,cAAc,KAAK;GACnB,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,oBAAoB,KAAK;GACzB,YAAY,EACV,QAAQ,KAAK,QACd;GACD,eAAe;AACb,eAAW,KAAK;AAChB,eAAW,QAAQ,WAAW;;GAEhC,cAAc;AACZ,cAAU,KAAK;AACf,eAAW,QAAQ,UAAU;;GAE/B,eAAe;AACb,cAAU,MAAM;AAChB,eAAW,QAAQ,WAAW;;GAEhC,aAAa,UAAU;AACrB,eAAW,QAAQ,aAAa,MAAM;;GAExC,eAAe,aAAa;AAC1B,YAAQ,SAAS;AACjB,eAAW,QAAQ,eAAe,SAAS;;GAE7C,eAAe,SAAS;AACtB,eAAW,QAAQ,eAAe,KAAK;;GAEzC,UAAU,UAAU;AAElB,eAAW,KAAK;AAChB,eAAW,QAAQ,UAAU,MAAM;;GAEtC,CAEoC;AACrC,cAAY,UAAU;AAEtB,eAAa;AACX,YAAS,SAAS;AAClB,eAAY,UAAU;AACtB,cAAW,MAAM;AACjB,aAAU,MAAM;;IAIjB;EAAC;EAAK;EAAS;EAAO,CAAC;AA0B1B,QAAO;EACL,UAxBe,kBAAkB;AACjC,eAAY,SAAS,UAAU;KAC9B,EAAE,CAAC;EAuBJ,cArBmB,kBAAkB;AACrC,eAAY,SAAS,cAAc;KAClC,EAAE,CAAC;EAoBJ,OAlBY,kBAAkB;AAC9B,eAAY,SAAS,OAAO;KAC3B,EAAE,CAAC;EAiBJ,cAfmB,aAAa,aAAqB,iBAA0B;AAC/E,eAAY,SAAS,aAAa,aAAa,aAAa;KAC3D,EAAE,CAAC;EAcJ,WAZgB,aACf,WAAmB,WAA0B,aAAsB;AAClE,eAAY,SAAS,UAAU,WAAW,WAAW,SAAS;KAEhE,EAAE,CACH;EAQC;EACA;EACA,WAAW,KAAK;EAChB,WAAW,KAAK;EAChB,cAAc,KAAK;EACpB"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/use-checkout.ts"],"sourcesContent":["/**\n * useCheckout Hook\n *\n * React hook for Commerce Engine Checkout integration.\n * Handles checkout initialization, state management, and cleanup.\n *\n * @example\n * ```tsx\n * import { useCheckout } from \"@commercengine/react\";\n *\n * function MyStore() {\n * const { openCart, openCheckout, cartCount, isReady } = useCheckout({\n * storeId: \"store_xxx\",\n * apiKey: \"ak_xxx\",\n * theme: \"dark\",\n * onComplete: (order) => {\n * console.log(\"Order placed:\", order.orderNumber);\n * window.location.href = \"/thank-you\";\n * },\n * });\n *\n * return (\n * <button onClick={openCart} disabled={!isReady}>\n * Cart ({cartCount})\n * </button>\n * );\n * }\n * ```\n */\n\nimport {\n type AuthChangeData,\n type AuthMode,\n type CartData,\n Checkout,\n type CheckoutConfig,\n type Environment,\n type ErrorData,\n type OrderData,\n type QuickBuyConfig,\n type SessionMode,\n} from \"@commercengine/js\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Options for useCheckout hook\n */\nexport interface UseCheckoutOptions {\n /**\n * Your Commerce Engine Store ID\n * @example \"store_abc123\"\n */\n storeId?: string;\n\n /**\n * Your Commerce Engine API Key\n * @example \"ak_test_xyz789\"\n */\n apiKey?: string;\n\n /**\n * Checkout URL (overrides environment detection)\n * Only needed for custom checkout deployments\n */\n url?: string;\n\n /**\n * Environment for checkout URL resolution\n * - 'production': checkout.commercengine.com (default)\n * - 'staging': staging.checkout.commercengine.com\n *\n * For local development, use the `url` option instead.\n */\n environment?: Environment;\n\n /**\n * Theme preference\n * @default \"system\"\n */\n theme?: \"light\" | \"dark\" | \"system\";\n\n /**\n * Z-index for the checkout overlay\n * @default 99999\n */\n zIndex?: number;\n\n /**\n * Authentication mode\n * - 'managed': Checkout manages token lifecycle (default)\n * - 'provided': Parent manages tokens, checkout uses in-memory only\n * @default \"managed\"\n */\n authMode?: AuthMode;\n\n /**\n * Initial access token (if user already logged in)\n */\n accessToken?: string;\n\n /**\n * Initial refresh token\n */\n refreshToken?: string;\n\n /**\n * Quick buy configuration for \"Buy Now\" flows\n * When provided, adds the product to cart on initialization\n */\n quickBuy?: QuickBuyConfig;\n\n /**\n * Session behavior when quick buy is used\n * @default \"continue-existing\"\n */\n sessionMode?: SessionMode;\n\n /**\n * Auto-detect quick buy params from parent page URL\n * When enabled, SDK parses window.location.search for:\n * - product_id, variant_id, qty/quantity, session_mode\n * Useful for ad-driven traffic to embedded checkout pages\n * @default false\n */\n autoDetectQuickBuy?: boolean;\n\n /**\n * Called when checkout iframe is ready\n */\n onReady?: () => void;\n\n /**\n * Called when checkout is opened\n */\n onOpen?: () => void;\n\n /**\n * Called when checkout is closed\n */\n onClose?: () => void;\n\n /**\n * Called when order is completed\n */\n onComplete?: (order: OrderData) => void;\n\n /**\n * Called when cart state changes\n */\n onCartUpdate?: (cart: CartData) => void;\n\n /**\n * Called when auth state changes\n */\n onAuthChange?: (auth: AuthChangeData) => void;\n\n /**\n * Called when checkout encounters a configuration error\n */\n onError?: (error: ErrorData) => void;\n}\n\n/**\n * Return value from useCheckout hook\n */\nexport interface UseCheckoutReturn {\n /**\n * Open the cart drawer\n */\n openCart: () => void;\n\n /**\n * Open the checkout drawer directly (for Buy Now flow)\n */\n openCheckout: () => void;\n\n /**\n * Close the checkout overlay\n */\n close: () => void;\n\n /**\n * Update auth tokens (when user logs in/out on parent site)\n */\n updateTokens: (accessToken: string, refreshToken?: string) => void;\n\n /**\n * Add item to cart\n * @param productId - Product ID (required)\n * @param variantId - Variant ID (required, null for non-variant products)\n * @param quantity - Quantity to add (default: 1)\n */\n addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n\n /**\n * Whether checkout is ready to use\n */\n isReady: boolean;\n\n /**\n * Whether checkout overlay is currently open\n */\n isOpen: boolean;\n\n /**\n * Number of items in cart\n */\n cartCount: number;\n\n /**\n * Cart subtotal amount\n */\n cartTotal: number;\n\n /**\n * Cart currency code\n */\n cartCurrency: string;\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * React hook for Commerce Engine Checkout\n *\n * @param options - Checkout configuration\n * @returns Checkout state and methods\n */\nexport function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn {\n const checkoutRef = useRef<Checkout | null>(null);\n const [isReady, setIsReady] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const [cart, setCart] = useState<CartData>({ count: 0, total: 0, currency: \"INR\" });\n\n // Store options in ref to avoid recreating checkout on callback changes\n // This allows stable callbacks while still using latest callback values\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n // Destructure stable keys for dependency array\n const { url, storeId, apiKey, environment } = options;\n\n // Initialize checkout on mount or when key config changes\n useEffect(() => {\n // Skip on server\n if (typeof window === \"undefined\") return;\n\n // Get current options from ref for non-key values\n const opts = optionsRef.current;\n\n const config: CheckoutConfig = {\n url,\n storeId,\n apiKey,\n environment,\n theme: opts.theme,\n authMode: opts.authMode,\n accessToken: opts.accessToken,\n refreshToken: opts.refreshToken,\n quickBuy: opts.quickBuy,\n sessionMode: opts.sessionMode,\n autoDetectQuickBuy: opts.autoDetectQuickBuy,\n appearance: {\n zIndex: opts.zIndex,\n },\n onReady: () => {\n setIsReady(true);\n optionsRef.current.onReady?.();\n },\n onOpen: () => {\n setIsOpen(true);\n optionsRef.current.onOpen?.();\n },\n onClose: () => {\n setIsOpen(false);\n optionsRef.current.onClose?.();\n },\n onComplete: (order) => {\n optionsRef.current.onComplete?.(order);\n },\n onCartUpdate: (cartData) => {\n setCart(cartData);\n optionsRef.current.onCartUpdate?.(cartData);\n },\n onAuthChange: (auth) => {\n optionsRef.current.onAuthChange?.(auth);\n },\n onError: (error) => {\n // Still set ready so buttons are enabled (error drawer will show)\n setIsReady(true);\n optionsRef.current.onError?.(error);\n },\n };\n\n const checkout = new Checkout(config);\n checkoutRef.current = checkout;\n\n return () => {\n checkout.destroy();\n checkoutRef.current = null;\n setIsReady(false);\n setIsOpen(false);\n };\n // Only reinitialize when URL, credentials, or environment change\n // Other options like theme, tokens, callbacks are read from optionsRef\n }, [url, storeId, apiKey, environment]);\n\n // Stable callback refs\n const openCart = useCallback(() => {\n checkoutRef.current?.openCart();\n }, []);\n\n const openCheckout = useCallback(() => {\n checkoutRef.current?.openCheckout();\n }, []);\n\n const close = useCallback(() => {\n checkoutRef.current?.close();\n }, []);\n\n const updateTokens = useCallback((accessToken: string, refreshToken?: string) => {\n checkoutRef.current?.updateTokens(accessToken, refreshToken);\n }, []);\n\n const addToCart = useCallback(\n (productId: string, variantId: string | null, quantity?: number) => {\n checkoutRef.current?.addToCart(productId, variantId, quantity);\n },\n []\n );\n\n return {\n openCart,\n openCheckout,\n close,\n updateTokens,\n addToCart,\n isReady,\n isOpen,\n cartCount: cart.count,\n cartTotal: cart.total,\n cartCurrency: cart.currency,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0OA,SAAgB,YAAY,SAAgD;CAC1E,MAAM,cAAc,OAAwB,KAAK;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,MAAM,WAAW,SAAmB;EAAE,OAAO;EAAG,OAAO;EAAG,UAAU;EAAO,CAAC;CAInF,MAAM,aAAa,OAAO,QAAQ;AAClC,YAAW,UAAU;CAGrB,MAAM,EAAE,KAAK,SAAS,QAAQ,gBAAgB;AAG9C,iBAAgB;AAEd,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,OAAO,WAAW;EA8CxB,MAAM,WAAW,IAAI,SA5CU;GAC7B;GACA;GACA;GACA;GACA,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,cAAc,KAAK;GACnB,UAAU,KAAK;GACf,aAAa,KAAK;GAClB,oBAAoB,KAAK;GACzB,YAAY,EACV,QAAQ,KAAK,QACd;GACD,eAAe;AACb,eAAW,KAAK;AAChB,eAAW,QAAQ,WAAW;;GAEhC,cAAc;AACZ,cAAU,KAAK;AACf,eAAW,QAAQ,UAAU;;GAE/B,eAAe;AACb,cAAU,MAAM;AAChB,eAAW,QAAQ,WAAW;;GAEhC,aAAa,UAAU;AACrB,eAAW,QAAQ,aAAa,MAAM;;GAExC,eAAe,aAAa;AAC1B,YAAQ,SAAS;AACjB,eAAW,QAAQ,eAAe,SAAS;;GAE7C,eAAe,SAAS;AACtB,eAAW,QAAQ,eAAe,KAAK;;GAEzC,UAAU,UAAU;AAElB,eAAW,KAAK;AAChB,eAAW,QAAQ,UAAU,MAAM;;GAEtC,CAEoC;AACrC,cAAY,UAAU;AAEtB,eAAa;AACX,YAAS,SAAS;AAClB,eAAY,UAAU;AACtB,cAAW,MAAM;AACjB,aAAU,MAAM;;IAIjB;EAAC;EAAK;EAAS;EAAQ;EAAY,CAAC;AA0BvC,QAAO;EACL,UAxBe,kBAAkB;AACjC,eAAY,SAAS,UAAU;KAC9B,EAAE,CAAC;EAuBJ,cArBmB,kBAAkB;AACrC,eAAY,SAAS,cAAc;KAClC,EAAE,CAAC;EAoBJ,OAlBY,kBAAkB;AAC9B,eAAY,SAAS,OAAO;KAC3B,EAAE,CAAC;EAiBJ,cAfmB,aAAa,aAAqB,iBAA0B;AAC/E,eAAY,SAAS,aAAa,aAAa,aAAa;KAC3D,EAAE,CAAC;EAcJ,WAZgB,aACf,WAAmB,WAA0B,aAAsB;AAClE,eAAY,SAAS,UAAU,WAAW,WAAW,SAAS;KAEhE,EAAE,CACH;EAQC;EACA;EACA,WAAW,KAAK;EAChB,WAAW,KAAK;EAChB,cAAc,KAAK;EACpB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@commercengine/react",
3
- "version": "0.1.0",
3
+ "version": "0.2.1",
4
4
  "description": "Commerce Engine Checkout - React SDK",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -23,7 +23,7 @@
23
23
  "dist"
24
24
  ],
25
25
  "dependencies": {
26
- "@commercengine/js": "0.1.0"
26
+ "@commercengine/js": "0.2.0"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "react": ">=17.0.0"