Copy page

Getting Started

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 from the developer portal
• A sandbox session token (see Authentication guide)
• 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:

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

Then install the package:

Code
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.

server.ts
// Server-side: create a session for the authenticated user
const response = await fetch('https://api-sandbox.gett-tech.com/v1/marketplace/session/create', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    partnerUserId: 'user_12345',
    email: '[email protected]',
    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 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

Code
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:

Code
<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:

Code
{
  "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:

Code
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

Code
<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

Code
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 with its payload in event.detail.

Code
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 for detailed event handling and the SDK Reference 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.

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, 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 [email protected] or visit the partner portal.

Going to Production

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

1. Update your API endpoint from api-sandbox.gett-tech.com to api.gett-tech.com
2. Use your Production API Key instead of the sandbox key

No client-side SDK changes are needed -- the session token handles everything.

Next Steps

Explore the SDK Reference for all configuration options, read the Events Guide for detailed event handling, and review the Sessions guide to learn about session creation and user context.