@libreapps/checkout 2.0.1

package/embed/libreapps-checkout.ts

@@ -0,0 +1,172 @@
+/**
+ * @libreapps/checkout - Embed Script
+ *
+ * Drop-in checkout button/widget for any website
+ * Similar to Stripe's checkout.js
+ *
+ * Usage:
+ * <script src="https://js.libreapps.com/checkout.js"></script>
+ * <button data-libreapps-checkout data-libreapps-key="pk_live_xxx" data-libreapps-amount="1999" data-libreapps-currency="usd">
+ *   Pay $19.99
+ * </button>
+ */
+
+import { LibreAppsCheckout } from '../client'
+import type { CheckoutOptions, CreateSessionParams } from '../types'
+
+interface LibreAppsCheckoutEmbed {
+  /** Initialize with API key */
+  init: (apiKey: string, options?: Partial<CheckoutOptions>) => void
+
+  /** Create checkout session and redirect */
+  checkout: (params: CreateSessionParams) => Promise<void>
+
+  /** Open checkout in popup */
+  popup: (params: CreateSessionParams) => Promise<Window | null>
+
+  /** Create checkout client */
+  createClient: (options: CheckoutOptions) => LibreAppsCheckout
+}
+
+declare global {
+  interface Window {
+    LibreAppsCheckout: LibreAppsCheckoutEmbed
+  }
+}
+
+// Global state
+let globalClient: LibreAppsCheckout | null = null
+let globalApiKey: string | null = null
+let globalOptions: Partial<CheckoutOptions> = {}
+
+const LibreAppsCheckoutEmbed: LibreAppsCheckoutEmbed = {
+  init(apiKey: string, options: Partial<CheckoutOptions> = {}) {
+    globalApiKey = apiKey
+    globalOptions = options
+    globalClient = new LibreAppsCheckout({ apiKey, ...options })
+
+    // Auto-bind buttons with data attributes
+    if (typeof document !== 'undefined') {
+      document.addEventListener('DOMContentLoaded', bindCheckoutButtons)
+      // Also bind immediately if DOM is ready
+      if (document.readyState !== 'loading') {
+        bindCheckoutButtons()
+      }
+    }
+  },
+
+  async checkout(params: CreateSessionParams) {
+    if (!globalClient) {
+      throw new Error('LibreAppsCheckout not initialized. Call LibreAppsCheckout.init(apiKey) first.')
+    }
+
+    const session = await globalClient.createSession(params)
+    globalClient.redirectToCheckout(session.id)
+  },
+
+  async popup(params: CreateSessionParams) {
+    if (!globalClient) {
+      throw new Error('LibreAppsCheckout not initialized. Call LibreAppsCheckout.init(apiKey) first.')
+    }
+
+    const session = await globalClient.createSession(params)
+    return globalClient.openPopup(session.id)
+  },
+
+  createClient(options: CheckoutOptions) {
+    return new LibreAppsCheckout(options)
+  }
+}
+
+/**
+ * Bind click handlers to elements with data-libreapps-checkout attribute
+ */
+function bindCheckoutButtons() {
+  const buttons = document.querySelectorAll('[data-libreapps-checkout]')
+
+  buttons.forEach(button => {
+    if (button.getAttribute('data-libreapps-bound')) return
+    button.setAttribute('data-libreapps-bound', 'true')
+
+    button.addEventListener('click', async (e) => {
+      e.preventDefault()
+
+      const el = e.currentTarget as HTMLElement
+
+      // Get config from data attributes
+      const apiKey = el.getAttribute('data-libreapps-key') || globalApiKey
+      if (!apiKey) {
+        console.error('LibreAppsCheckout: No API key provided')
+        return
+      }
+
+      // Parse line items from data attributes
+      const amount = parseInt(el.getAttribute('data-libreapps-amount') || '0', 10)
+      const currency = el.getAttribute('data-libreapps-currency') || 'usd'
+      const name = el.getAttribute('data-libreapps-name') || 'Purchase'
+      const description = el.getAttribute('data-libreapps-description') || undefined
+      const imageUrl = el.getAttribute('data-libreapps-image') || undefined
+      const productId = el.getAttribute('data-libreapps-product') || undefined
+      const sku = el.getAttribute('data-libreapps-sku') || undefined
+      const quantity = parseInt(el.getAttribute('data-libreapps-quantity') || '1', 10)
+
+      // Success/cancel URLs
+      const successUrl = el.getAttribute('data-libreapps-success-url') || undefined
+      const cancelUrl = el.getAttribute('data-libreapps-cancel-url') || undefined
+
+      // Popup mode
+      const usePopup = el.hasAttribute('data-libreapps-popup')
+
+      // Create or use existing client
+      const client = globalClient || new LibreAppsCheckout({
+        apiKey,
+        ...globalOptions
+      })
+
+      try {
+        // Disable button
+        el.setAttribute('disabled', 'true')
+        const originalText = el.textContent
+        el.textContent = 'Loading...'
+
+        const session = await client.createSession({
+          lineItems: [{
+            productId,
+            sku,
+            name,
+            description,
+            imageUrl,
+            quantity,
+            unitPrice: amount,
+            currency
+          }],
+          successUrl,
+          cancelUrl,
+          currency
+        })
+
+        if (usePopup) {
+          client.openPopup(session.id)
+          el.removeAttribute('disabled')
+          el.textContent = originalText
+        } else {
+          client.redirectToCheckout(session.id)
+        }
+      } catch (error) {
+        console.error('LibreAppsCheckout error:', error)
+        el.removeAttribute('disabled')
+        el.textContent = 'Error - Try Again'
+      }
+    })
+  })
+}
+
+// Export for bundler usage
+export { LibreAppsCheckoutEmbed }
+
+// Attach to window for script tag usage
+if (typeof window !== 'undefined') {
+  window.LibreAppsCheckout = LibreAppsCheckoutEmbed
+}
+
+export default LibreAppsCheckoutEmbed

package/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @libreapps/checkout/hooks
+ */
+
+export { CheckoutProvider, useCheckout } from './use-checkout'
+export type { CheckoutProviderProps } from './use-checkout'

package/hooks/use-checkout.tsx

@@ -0,0 +1,244 @@
+'use client'
+
+/**
+ * @libreapps/checkout - useCheckout hook
+ *
+ * React hook for managing checkout state
+ */
+
+import { useState, useCallback, useEffect, createContext, useContext } from 'react'
+import type { ReactNode } from 'react'
+import { LibreAppsCheckout } from '../client'
+import type {
+  CheckoutOptions,
+  CheckoutSession,
+  CheckoutState,
+  CheckoutStep,
+  CheckoutAddress,
+  CheckoutResult,
+  CheckoutError,
+  CreateSessionParams
+} from '../types'
+
+interface CheckoutContextValue extends CheckoutState {
+  /** Checkout client instance */
+  checkout: LibreAppsCheckout | null
+
+  /** Create a new session */
+  createSession: (params: CreateSessionParams) => Promise<CheckoutSession>
+
+  /** Load existing session */
+  loadSession: (sessionId: string) => Promise<CheckoutSession>
+
+  /** Update shipping address */
+  updateShipping: (address: CheckoutAddress) => Promise<void>
+
+  /** Update billing address */
+  updateBilling: (address: CheckoutAddress) => Promise<void>
+
+  /** Apply promo code */
+  applyPromo: (code: string) => Promise<void>
+
+  /** Confirm payment */
+  confirmPayment: (paymentMethod: Parameters<LibreAppsCheckout['confirmPayment']>[1]) => Promise<CheckoutResult>
+
+  /** Cancel checkout */
+  cancel: () => Promise<void>
+
+  /** Go to step */
+  goToStep: (step: CheckoutStep) => void
+
+  /** Go to next step */
+  nextStep: () => void
+
+  /** Go to previous step */
+  prevStep: () => void
+
+  /** Redirect to hosted checkout */
+  redirectToHosted: () => void
+
+  /** Open popup checkout */
+  openPopup: () => Window | null
+}
+
+const CheckoutContext = createContext<CheckoutContextValue | null>(null)
+
+const STEP_ORDER: CheckoutStep[] = ['cart', 'shipping', 'payment', 'confirmation']
+
+export interface CheckoutProviderProps {
+  /** Checkout options */
+  options: CheckoutOptions
+
+  /** Initial session ID to load */
+  sessionId?: string
+
+  /** Children */
+  children: ReactNode
+}
+
+export function CheckoutProvider({ options, sessionId, children }: CheckoutProviderProps) {
+  const [checkout] = useState(() => new LibreAppsCheckout(options))
+  const [state, setState] = useState<CheckoutState>({
+    step: 'cart',
+    session: null,
+    isLoading: false,
+    error: null,
+    isProcessing: false
+  })
+
+  // Load session on mount if sessionId provided
+  useEffect(() => {
+    if (sessionId) {
+      loadSession(sessionId)
+    }
+  }, [sessionId])
+
+  const createSession = useCallback(async (params: CreateSessionParams) => {
+    setState(s => ({ ...s, isLoading: true, error: null }))
+    try {
+      const session = await checkout.createSession(params)
+      setState(s => ({ ...s, session, isLoading: false }))
+      return session
+    } catch (err) {
+      const error = err as CheckoutError
+      setState(s => ({ ...s, error, isLoading: false }))
+      throw error
+    }
+  }, [checkout])
+
+  const loadSession = useCallback(async (id: string) => {
+    setState(s => ({ ...s, isLoading: true, error: null }))
+    try {
+      const session = await checkout.retrieveSession(id)
+      setState(s => ({ ...s, session, isLoading: false }))
+      return session
+    } catch (err) {
+      const error = err as CheckoutError
+      setState(s => ({ ...s, error, isLoading: false }))
+      throw error
+    }
+  }, [checkout])
+
+  const updateShipping = useCallback(async (address: CheckoutAddress) => {
+    if (!state.session) throw new Error('No session')
+    setState(s => ({ ...s, isLoading: true, error: null }))
+    try {
+      const session = await checkout.updateShipping(state.session.id, address)
+      setState(s => ({ ...s, session, isLoading: false }))
+    } catch (err) {
+      const error = err as CheckoutError
+      setState(s => ({ ...s, error, isLoading: false }))
+      throw error
+    }
+  }, [checkout, state.session])
+
+  const updateBilling = useCallback(async (address: CheckoutAddress) => {
+    if (!state.session) throw new Error('No session')
+    setState(s => ({ ...s, isLoading: true, error: null }))
+    try {
+      const session = await checkout.updateBilling(state.session.id, address)
+      setState(s => ({ ...s, session, isLoading: false }))
+    } catch (err) {
+      const error = err as CheckoutError
+      setState(s => ({ ...s, error, isLoading: false }))
+      throw error
+    }
+  }, [checkout, state.session])
+
+  const applyPromo = useCallback(async (code: string) => {
+    if (!state.session) throw new Error('No session')
+    setState(s => ({ ...s, isLoading: true, error: null }))
+    try {
+      const session = await checkout.applyPromoCode(state.session.id, code)
+      setState(s => ({ ...s, session, isLoading: false }))
+    } catch (err) {
+      const error = err as CheckoutError
+      setState(s => ({ ...s, error, isLoading: false }))
+      throw error
+    }
+  }, [checkout, state.session])
+
+  const confirmPayment = useCallback(async (paymentMethod: Parameters<LibreAppsCheckout['confirmPayment']>[1]) => {
+    if (!state.session) throw new Error('No session')
+    setState(s => ({ ...s, isProcessing: true, error: null }))
+    try {
+      const result = await checkout.confirmPayment(state.session.id, paymentMethod)
+      setState(s => ({ ...s, isProcessing: false, step: 'confirmation' }))
+      return result
+    } catch (err) {
+      const error = err as CheckoutError
+      setState(s => ({ ...s, error, isProcessing: false }))
+      throw error
+    }
+  }, [checkout, state.session])
+
+  const cancel = useCallback(async () => {
+    if (!state.session) return
+    await checkout.cancelSession(state.session.id)
+    setState(s => ({ ...s, session: null, step: 'cart' }))
+  }, [checkout, state.session])
+
+  const goToStep = useCallback((step: CheckoutStep) => {
+    setState(s => ({ ...s, step }))
+  }, [])
+
+  const nextStep = useCallback(() => {
+    const currentIndex = STEP_ORDER.indexOf(state.step)
+    if (currentIndex < STEP_ORDER.length - 1) {
+      setState(s => ({ ...s, step: STEP_ORDER[currentIndex + 1] }))
+    }
+  }, [state.step])
+
+  const prevStep = useCallback(() => {
+    const currentIndex = STEP_ORDER.indexOf(state.step)
+    if (currentIndex > 0) {
+      setState(s => ({ ...s, step: STEP_ORDER[currentIndex - 1] }))
+    }
+  }, [state.step])
+
+  const redirectToHosted = useCallback(() => {
+    if (state.session) {
+      checkout.redirectToCheckout(state.session.id)
+    }
+  }, [checkout, state.session])
+
+  const openPopup = useCallback(() => {
+    if (state.session) {
+      return checkout.openPopup(state.session.id)
+    }
+    return null
+  }, [checkout, state.session])
+
+  const value: CheckoutContextValue = {
+    ...state,
+    checkout,
+    createSession,
+    loadSession,
+    updateShipping,
+    updateBilling,
+    applyPromo,
+    confirmPayment,
+    cancel,
+    goToStep,
+    nextStep,
+    prevStep,
+    redirectToHosted,
+    openPopup
+  }
+
+  return (
+    <CheckoutContext.Provider value={value}>
+      {children}
+    </CheckoutContext.Provider>
+  )
+}
+
+export function useCheckout(): CheckoutContextValue {
+  const context = useContext(CheckoutContext)
+  if (!context) {
+    throw new Error('useCheckout must be used within a CheckoutProvider')
+  }
+  return context
+}
+
+export default useCheckout

package/index.ts

@@ -0,0 +1,70 @@
+/**
+ * @libreapps/checkout
+ *
+ * Embeddable checkout widget for LibreApps Commerce
+ * Similar to Stripe Checkout
+ *
+ * Usage:
+ *
+ * 1. React Integration:
+ * ```tsx
+ * import { CheckoutProvider, CheckoutForm, useCheckout } from '@libreapps/checkout'
+ *
+ * function App() {
+ *   return (
+ *     <CheckoutProvider options={{ apiKey: 'pk_live_xxx' }}>
+ *       <CheckoutForm />
+ *     </CheckoutProvider>
+ *   )
+ * }
+ * ```
+ *
+ * 2. Vanilla JS / Redirect:
+ * ```ts
+ * import { createCheckout } from '@libreapps/checkout'
+ *
+ * const checkout = createCheckout({ apiKey: 'pk_live_xxx' })
+ * const session = await checkout.createSession({
+ *   lineItems: [{ name: 'Product', unitPrice: 1999, quantity: 1 }]
+ * })
+ * checkout.redirectToCheckout(session.id)
+ * ```
+ *
+ * 3. Embed Script (no build step):
+ * ```html
+ * <script src="https://js.libreapps.com/checkout.js"></script>
+ * <button data-libreapps-checkout data-libreapps-key="pk_live_xxx" data-libreapps-amount="1999">
+ *   Pay $19.99
+ * </button>
+ * <script>
+ *   LibreAppsCheckout.init('pk_live_xxx')
+ * </script>
+ * ```
+ */
+
+// Types
+export type {
+  CheckoutOptions,
+  CheckoutAppearance,
+  CheckoutSession,
+  CheckoutLineItem,
+  CheckoutCustomer,
+  CheckoutAddress,
+  CheckoutPaymentMethod,
+  CheckoutResult,
+  CheckoutError,
+  CreateSessionParams,
+  ElementsOptions,
+  CheckoutStep,
+  CheckoutState
+} from './types'
+
+// Client
+export { LibreAppsCheckout, createCheckout } from './client'
+
+// Hooks
+export { CheckoutProvider, useCheckout } from './hooks'
+export type { CheckoutProviderProps } from './hooks'
+
+// Elements
+export { CheckoutForm } from './elements'

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@libreapps/checkout",
+  "version": "2.0.1",
+  "description": "Embeddable checkout widget for LibreApps Commerce - Stripe-like checkout experience",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "scope": "@libreapps"
+  },
+  "author": "LibreApps Contributors",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/libre-apps/UI.git",
+    "directory": "pkg/checkout"
+  },
+  "keywords": [
+    "checkout",
+    "payments",
+    "commerce",
+    "ecommerce",
+    "libreapps",
+    "libreapps",
+    "stripe",
+    "widget"
+  ],
+  "main": "index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./embed": "./embed/index.ts",
+    "./elements": "./elements/index.ts",
+    "./hooks": "./hooks/index.ts"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "lucide-react": ">=0.456.0",
+    "mobx": "^6.12.3",
+    "mobx-react-lite": "^4.0.7",
+    "next": ">=14.2.16",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@libreapps/auth": "3.0.1",
+    "@libreapps/commerce": "7.5.1",
+    "@libreapps/ui": "5.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "5.6.3"
+  },
+  "scripts": {
+    "lat": "npm show @libreapps/checkout version",
+    "pub": "npm publish",
+    "tc": "tsc",
+    "build": "tsc --outDir dist --declaration --emitDeclarationOnly false --module ESNext --esModuleInterop true --skipLibCheck true --sourceMap true"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.libreapps.base.json",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true
+  }
+}