Copy page

SDK Reference

Web Component

<gett-marketfront>

Web Component that embeds the Marketfront ordering experience. Zero dependencies, works in any framework.

Quick Start

Code
<gett-marketfront session-token="tok_abc123"></gett-marketfront>

<script type="module">
  import '@gett-co/marketfront'; // auto-registers the element

  const el = document.querySelector('gett-marketfront');
  el.addEventListener('order-complete', (e) => {
    console.log('Order placed:', e.detail.id);
  });
</script>

Attributes

Attribute	Type	Description
session-token	string	Partner session token. Optional for anonymous browsing.
base-url	string	Override base URL (development only).

Properties

Properties reflect to/from their corresponding attributes.

Property	Type	Attribute
sessionToken	string | null	session-token
baseUrl	string | null	base-url

Methods

setSessionToken(token: string): void

Update the session token without remounting the iframe. Useful for upgrading from anonymous browsing to an authenticated session.

Code
const el = document.querySelector('gett-marketfront');
el.setSessionToken('new_token_from_backend');

Throws: Error if the iframe is not mounted.

CSS Parts

Part	Description
::part(container)	The iframe wrapper <div> inside the shadow DOM.

Static Members

Member	Value
observedAttributes	["session-token", "base-url"]

register(tagName?: string): void

Register the <gett-marketfront> custom element. Called automatically when the package is imported, but safe to call multiple times.

Code
import { register } from '@gett-co/marketfront';

// Use default tag name
register();

// Or use a custom tag name
register('my-marketfront');

MarketfrontAttributes

TypeScript type for React JSX usage. Opt in via tsconfig so <gett-marketfront> is type-safe in JSX:

Code
{
  "compilerOptions": {
    "types": ["@gett-co/marketfront/react"]
  }
}

React 19 binds on* props on custom elements case-preservingly, so the JSX prop names mirror the dispatched kebab-case event names:

Code
import '@gett-co/marketfront';

function OrderPage({ token }: { token: string }) {
  return (
    <gett-marketfront
      session-token={token}
      onorder-complete={(e) => console.log(e.detail.id)}
    />
  );
}