Web Integration

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

Installation

Install the package using your preferred package manager. Ex:

pnpm install @gett/marketfront

Quick Start

import { MarketfrontClient } from '@gett/marketfront';

// Get session token from your backend
const sessionResponse = await fetch('/api/gett/session');
const { sessionToken } = await sessionResponse.json();

const client = new MarketfrontClient({
  sessionToken: sessionToken
});

// Mount to any DOM element
client.mount('#gett-marketfront-placeholder');

Better User Experience

Include logged-in user information when creating sessions to provide a seamless ordering experience. See Sessions for details on including user data.

Verify It Works

Add event callbacks to confirm the integration:

const client = new MarketfrontClient({
  sessionToken: sessionToken,

  onReady: () => console.log("Marketfront ready"),
  onStoreSelected: (store) => console.log("Store:", store.name),
  onItemAdded: (item) => console.log("Item added:", item.name),
  onOrderComplete: (order) => {
    console.log("Order placed:", order.id);
    // Navigate to confirmation page
    window.location.href = `/order/${order.id}`;
  },
});

client.mount("#gett-marketfront");

For details on session creation, see Sessions. Theming and configuration options are managed via the Partner Dashboard—see the Feature Comparison for what's configurable.

Framework Examples

React

import { useEffect, useRef } from 'react';
import { MarketfrontClient } from '@gett/marketfront';

function OrderPage() {
  const containerRef = useRef<HTMLDivElement>(null);
  const clientRef = useRef<MarketfrontClient | null>(null);

  useEffect(() => {
    const init = async () => {
      const sessionResponse = await fetch('/api/gett/session');
      const { sessionToken } = await sessionResponse.json();

      clientRef.current = new MarketfrontClient({
        sessionToken,
        onOrderComplete: (order) => console.log('Order:', order.id),
      });

      if (containerRef.current) {
        clientRef.current.mount(containerRef.current);
      }
    };

    init();
    return () => clientRef.current?.unmount();
  }, []);

  return <div ref={containerRef} style={{ minHeight: 600 }} />;
}

Vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { MarketfrontClient } from '@gett/marketfront';

const container = ref<HTMLElement>();
let client: MarketfrontClient | null = null;

onMounted(async () => {
  const sessionResponse = await fetch('/api/gett/session');
  const { sessionToken } = await sessionResponse.json();

  client = new MarketfrontClient({
    sessionToken,
    onOrderComplete: (order) => console.log('Order:', order.id),
  });

  if (container.value) {
    client.mount(container.value);
  }
});

onUnmounted(() => client?.unmount());
</script>

<template>
  <div ref="container" style="min-height: 600px" />
</template>

Angular

import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MarketfrontClient } from '@gett/marketfront';

@Component({
  selector: 'app-order',
  template: '<div #container style="min-height: 600px"></div>',
})
export class OrderComponent implements OnInit, OnDestroy {
  @ViewChild('container', { static: true }) container!: ElementRef;
  private client?: MarketfrontClient;

  async ngOnInit(): Promise<void> {
    const response = await fetch('/api/gett/session');
    const { sessionToken } = await response.json();

    this.client = new MarketfrontClient({
      sessionToken,
      onOrderComplete: (order) => console.log('Order:', order.id),
    });

    this.client.mount(this.container.nativeElement);
  }

  ngOnDestroy(): void {
    this.client?.unmount();
  }
}

Next Steps

• Events — Handle user actions and order lifecycle
• Sessions — Session creation details