# Web


Integrate the Marketfront SDK into your website using the `@gett-co/marketfront` package.

## Prerequisites

Before you begin, make sure you have:

- An [API key](/distribution-partners/shared-guides/authentication) from the developer portal
- A sandbox session token (see [Authentication guide](/distribution-partners/shared-guides/authentication))
- Node.js 18+ and npm/pnpm/yarn

## Install the SDK

Add the Marketfront SDK to your project.

First, configure registry access in your project's `.npmrc`:

```ini
@gett-co:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GETT_NPM_TOKEN}
```

Then install the package:

```bash
npm install @gett-co/marketfront
```

## Create a Session

Your backend creates a session with the user's context. The session token authorizes the SDK to load the ordering experience.

```typescript title="server.ts"
// Server-side: create a session for the authenticated user
const response = await fetch('https://api.gett-tech.com/v1/marketfront/session/create', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    partnerUserId: 'user_12345',
    email: 'jane@example.com',
    firstName: 'Jane',
  }),
});

const { token, expiresAt } = await response.json();
// Pass token to your frontend
```

:::tip[Anonymous Browsing]
The `session-token` attribute is optional. Without one, the SDK loads in anonymous browsing mode — users can browse stores and menus, and the embed prompts for sign-in when they reach a checkout action. See the [Sessions guide](/distribution-partners/marketfront-sdk/guides/sessions#how-the-sdk-manages-sign-in) for details on the in-embed sign-in flow.
:::

## Mount the SDK

The `<gett-marketfront>` Web Component auto-registers when you import the package. Just add it to your page.

### Vanilla TypeScript

```typescript
import '@gett-co/marketfront';

// The element is auto-registered. Just add it to the DOM:
const el = document.createElement('gett-marketfront');
el.sessionToken = token;
el.addEventListener('order-complete', (e) => {
  console.log('Order placed:', e.detail.id);
  window.location.href = `/order/${e.detail.id}`;
});

document.getElementById('container')!.appendChild(el);
```

Or use it directly in HTML:

```html
<gett-marketfront session-token="tok_abc123"></gett-marketfront>

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

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

### React

For TSX consumers, opt into intrinsic-element typing for `<gett-marketfront>` by adding the subpath to your `tsconfig.json`:

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

This is a pure type-only side-file — no runtime React code is shipped by the SDK.

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

```tsx
import '@gett-co/marketfront';

function OrderPage({ sessionToken }: { sessionToken: string }) {
  return (
    <gett-marketfront
      session-token={sessionToken}
      onready={() => console.log('Loaded')}
      onorder-complete={(e) => console.log('Order:', e.detail.id)}
    />
  );
}
```

### Vue

```vue
<script setup lang="ts">
import '@gett-co/marketfront';

const props = defineProps<{ sessionToken: string }>();
</script>

<template>
  <gett-marketfront
    :session-token="props.sessionToken"
    @order-complete="(e: CustomEvent) => console.log('Order:', e.detail.id)"
  />
</template>
```

### Angular

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
import '@gett-co/marketfront';

@Component({
  selector: 'app-order',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <gett-marketfront
      [attr.session-token]="sessionToken"
      (order-complete)="onOrder($event)"
    ></gett-marketfront>
  `,
})
export class OrderComponent {
  @Input() sessionToken!: string;

  onOrder(event: CustomEvent) {
    console.log('Order placed:', event.detail.id);
  }
}
```

## Handle Events

Subscribe to lifecycle events with `addEventListener`. Every event is a
[CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)
with its payload in `event.detail`.

```typescript
import '@gett-co/marketfront';

const el = document.querySelector('gett-marketfront')!;

el.addEventListener('ready', () => console.log('Marketfront initialized'));
el.addEventListener('error', (e) =>
  console.error(`[${e.detail.code}] ${e.detail.message}`)
);
el.addEventListener('store-selected', (e) => console.log('Store:', e.detail));
el.addEventListener('item-added', (e) => console.log('Item:', e.detail));
el.addEventListener('checkout-started', (e) => console.log('Checkout:', e.detail));
el.addEventListener('order-complete', (e) =>
  console.log('Order placed:', e.detail.id)
);
```

See the [Events Guide](/distribution-partners/marketfront-sdk/guides/events) for detailed event handling and the [SDK Reference](/distribution-partners/marketfront-sdk/sdk-reference/events) for complete type definitions.

## Sandbox Environment

Use the sandbox environment to develop and test your integration without affecting production data. The sandbox provides test stores, test payment methods, and simulated order completion.

:::info
The sandbox uses the same base URL as production — `https://api.gett-tech.com`. Your sandbox API key scopes requests to the sandbox environment.
:::

In the sandbox, orders are automatically completed after placement. No real payments are processed.

Test stores are pre-configured in the sandbox environment. After creating your sandbox API key in the [partner portal](https://developer.gett-tech.com), you will receive access to test stores for your integration.

Test payment methods are available in the sandbox -- no real payments are processed. Use any valid-format card number (e.g., `4242 4242 4242 4242`) to simulate successful payments.

For sandbox credentials and test store details, contact [partners@gett-tech.com](mailto:partners@gett-tech.com) or visit the partner portal.

### Going to Production

When you're ready, switch from sandbox to production:

1. Use your **Production API Key** instead of the sandbox key

The base URL is unchanged — your key selects the environment. No client-side SDK changes are needed -- the session token handles everything.

## Next Steps

Explore the [SDK Reference](/distribution-partners/marketfront-sdk/sdk-reference) for all configuration options, read the [Events Guide](/distribution-partners/marketfront-sdk/guides/events) for detailed event handling, and review the [Sessions guide](/distribution-partners/marketfront-sdk/guides/sessions) to learn about session creation and user context.