Invoices

Creating a Session Token

You can create a session token for this web component by using the request template below with the Salable API.

JavaScript
cURL

const response = await fetch('https://api.salable.app/sessions', {
  method: 'POST',
  headers: {
    'x-api-key': 'YOUR_SALABLE_API_TOKEN',
    version: 'v3',
  },
  body: JSON.stringify({
    scope: 'web-components:invoices',
    metadata: {
      subscriptionUuid: 'YOUR_SUBSCRIPTION_UUID',
    },
  }),
});

const { sessionToken } = await response.json();

curl
    -XPOST
    -H 'x-api-key: YOUR_SALABLE_API_TOKEN'
    -H 'version: v3'
    -d '{ "scope": "web-components:invoices", "metadata": {"subscriptionUuid": "YOUR_SUBSCRIPTION_UUID"} }'
    'https://api.salable.app/sessions'

See the entire API docs for creating sessions for web components.

Examples

HTML/JavaScript
Svelte
React
Next.js Pages Router
Next.js App Router

<!doctype html>
<head>
    <title>Salable Invoices Web Component Example</title>
    <script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@salable/web-components@latest/loader/index.es2017.js';
        defineCustomElements();
    </script>
</head>
<body>
    <salable-invoices class="theme" session-token="YOUR_SESSION_TOKEN" subscription-uuid="YOUR_SUBSCRIPTION_UUID" limit="3"></salable-invoices>
</body>
</html>

+page.svelte

<script>
  import { defineCustomElements } from '@salable/web-components/loader';
  defineCustomElements();
</script>

<salable-invoices
  class="theme"
  session-token="YOUR_SESSION_TOKEN"
  subscription-uuid="YOUR_SUBSCRIPTION_UUID"
  limit="3"
></salable-invoices>

+page.js

export const ssr = false;

import { defineCustomElements, SalableInvoices } from '@salable/react-web-components';

defineCustomElements();

export default function SalableInvoicesDemo() {
  return (
    <SalableInvoices
      sessionToken="YOUR_SESSION_TOKEN"
      subscriptionUuid="YOUR_SUBSCRIPTION_UUID"
      limit={3}
    />
  );
}

import dynamic from 'next/dynamic';
import { useEffect } from 'react';

const SalableInvoices = dynamic(
  () => import('@salable/react-web-components').then((module) => module.SalableInvoices),
  { ssr: false }
);

export default function SalableInvoicesDemo() {
  useEffect(() => {
    import('@salable/react-web-components').then((module) => {
      const { defineCustomElements } = module;
      defineCustomElements();
    });
  }, []);

  return (
    <SalableInvoices
      sessionToken="YOUR_SESSION_TOKEN"
      subscriptionUuid="YOUR_SUBSCRIPTION_UUID"
      limit={3}
    />
  );
}

'use client';

import { defineCustomElements, SalableInvoices } from '@salable/react-web-components';

defineCustomElements();

export default function SalableInvoicesDemo() {
  return (
    <SalableInvoices
      sessionToken="YOUR_SESSION_TOKEN"
      subscriptionUuid="YOUR_SUBSCRIPTION_UUID"
      limit={3}
    />
  );
}

Properties

Property	Attribute	Description	Type	Default
`sessionToken` (required)	`session-token`	The generated token for this session	`string`	`undefined`
`subscriptionUuid` (required)	`subscription-uuid`	The uuid of the subscription that you want to display invoices for.	`string`	`undefined`
`limit`	`limit`	The number of rows to display per page	`number`	`25`

Creating a Session Token​

Examples​

Properties​

Creating a Session Token

Examples

Properties