@happypath/door-selector

Minimal (early preview) React SDK for collecting a Happypath doorId (and optional tenantId) during checkout/booking flows.

Install

pnpm add @happypath/door-selector

Usage

import { HappypathProvider, DoorSelector, type DoorSelection } from '@happypath/door-selector';
import '@happypath/door-selector/styles.css';

export function Checkout() {
  const [selection, setSelection] = React.useState<DoorSelection | null>(null);
  const [valid, setValid] = React.useState(false);

  return (
    <HappypathProvider apiKey="HP_PUBLIC_..." environment="sandbox" apiBaseUrl="https://api-sandbox.happypath.no">
      <DoorSelector value={selection ?? undefined} onChange={setSelection} onValidityChange={setValid} />
      <button disabled={!valid}>Place order</button>
    </HappypathProvider>
  );
}

Backend requirements (MVP)

This SDK expects a backend endpoint that exchanges a publishable key for a short-lived Bearer token:

• POST /api/sdk/auth/exchange → returns { token, expiresAt }
• GET /api/sdk/ping → requires Authorization: Bearer <token>

In this monorepo, these endpoints live in the Entry app at:

• apps/entry/app/api/sdk/auth/exchange/route.ts
• apps/entry/app/api/sdk/ping/route.ts