Skip to content

Configuration

Configuration Options

Full Configurationtypescript
import { SpaceInvoices } from "@spaceinvoices/embed-sdk";

const _si = new SpaceInvoices({
  // Required
  apiKey: "ek_live_your_entity_api_key",
  entityId: "ent_123",

  // Optional: Custom base URL (for self-hosted)
  baseUrl: "https://eu.spaceinvoices.com",

  // Optional: UI language (defaults to browser detection)
  locale: "en",

  // Optional: Theme customization
  theme: {
    primary: "#6366f1",
    radius: 8,
  },

  // Callbacks
  onAction: (_action) => {},
  onReady: () => {},
  onError: (error) => console.error("Error:", error),
  onClose: () => {},
});

Required Options

OptionTypeDescription
apiKeystringEntity API key (ek_live_* or ek_sandbox_*)
entityIdstringEntity ID to operate on

Optional Options

OptionTypeDescription
baseUrlstringCustom base URL for self-hosted deployments
localeEmbedLocaleUI language (en, sl, de, it, fr, es, pt, nl, pl, hr). Defaults to browser language detection.
themeThemeConfigTheme customization options

Callbacks

CallbackParametersDescription
onAction(action: EmbedAction)Called when user performs an action
onReady()Called when embed is fully loaded
onError(error: EmbedError)Called on errors
onClose()Called when embed is closed

Open Options

When calling open() or navigate(), you can pass additional options:

Open Optionstypescript
// Open in a specific container
si.open("invoices", {
  container: "#my-container",
});

// Open a specific invoice
si.open("invoice", {
  container: "#my-container",
  id: "inv_123",
});

// Pre-fill a new invoice
si.open("invoice/new", {
  container: "#my-container",
  prefill: {
    client: { name: "Acme Corp" },
    items: [{ name: "Service", price: 100 }],
  },
});
OptionTypeDescription
containerstring | HTMLElementContainer element or selector
idstringDocument/customer ID for single-item views
prefillRecord<string, unknown>Pre-fill data for creation forms

Methods

MethodDescription
open(view, options?)Open a view in a container
navigate(view, options?)Navigate to a different view
updateTheme(theme)Update theme dynamically
setLocale(locale)Change UI language dynamically
close()Close and unmount the embed
ready()Returns promise that resolves when ready
getInstance()Get current embed instance
destroy()Destroy SDK and clean up

Next Steps

  • Views — All available views
  • Theming — Customize appearance
  • Events — Handle user actions