Skip to content
Space Invoices Documentation

Framework Examples

React

React Exampletypescript
import { SpaceInvoices } from "@spaceinvoices/embed-sdk";
import { useEffect, useRef } from "react";

function _InvoiceEmbed({ entityId, apiKey }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const sdkRef = useRef<SpaceInvoices | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    sdkRef.current = new SpaceInvoices({
      apiKey,
      entityId,
      onAction: (action) => {
        if (action.type === "document_created") {
        }
      },
    });

    sdkRef.current.open("invoices", {
      container: containerRef.current,
    });

    return () => {
      sdkRef.current?.destroy();
    };
  }, [apiKey, entityId]);

  return <div ref={containerRef} style={{ height: "600px" }} />;
}

Vue

Vue Examplehtml
<template>
  <div ref="container" style="height: 600px" />
</template>

<script setup>

import { SpaceInvoices } from "@spaceinvoices/embed-sdk";
import { onMounted, onUnmounted, ref } from "vue";

const props = defineProps({
  apiKey: String,
  entityId: String,
});

const container = ref(null);
let sdk = null;

onMounted(() => {
  sdk = new SpaceInvoices({
    apiKey: props.apiKey,
    entityId: props.entityId,
    onAction: (action) => {
      console.log("Action:", action);
    },
  });

  sdk.open("invoices", { container: container.value });
});

onUnmounted(() => {
  sdk?.destroy();
});
</script>

Next.js

Next.js Exampletypescript
"use client";

import { SpaceInvoices } from "@spaceinvoices/embed-sdk";
import { useEffect, useRef } from "react";

export function InvoiceEmbed({ entityId, apiKey }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const sdkRef = useRef<SpaceInvoices | null>(null);

  useEffect(() => {
    // Only run on client
    if (typeof window === "undefined" || !containerRef.current) return;

    sdkRef.current = new SpaceInvoices({
      apiKey,
      entityId,
    });

    sdkRef.current.open("invoices", {
      container: containerRef.current,
    });

    return () => {
      sdkRef.current?.destroy();
    };
  }, [apiKey, entityId]);

  return <div ref={containerRef} className="h-[600px]" />;
}

Vanilla JavaScript

Vanilla JavaScripthtml
<!DOCTYPE html>
<html>
<head>
  <title>Space Invoices Embed</title>
  <style>
    #invoice-embed {
      height: 600px;
      border: 1px solid #e5e5e5;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div id="invoice-embed"></div>

  <script src="https://unpkg.com/@spaceinvoices/embed-sdk"></script>
  <script>
    const si = new SpaceInvoices.SpaceInvoices({
      apiKey: 'ek_live_your_entity_api_key',
      entityId: 'ent_123',
      onAction: (action) => {
        console.log('Action:', action.type, action.data);
      },
      onError: (error) => {
        console.error('Error:', error.message);
      }
    });

    si.open('invoices', {
      container: '#invoice-embed'
    });
  </script>
</body>
</html>

Best Practices

  1. Always clean up — Call destroy() when unmounting components
  2. Handle loading states — Use onReady to show loading indicators
  3. Handle errors — Implement onError for graceful error handling
  4. Responsive containers — Use CSS to make containers responsive

Container Styling

Ensure your container has a height:

.embed-container {
  height: 600px;
  /* Or responsive height */
  height: calc(100vh - 200px);
  min-height: 400px;
}

Next Steps