Happypath™ Checkout · React-komponent

Få riktig dør i det ordren legges inn

Happypath Checkout er en komponent for kassen i nettbutikken. Kunden velger hvem som skal motta og hvilken inngang budet skal bruke. Du lagrer en dør-ID og en lenke med gangvei sammen med ordren.

Snakk med oss Se pakken på npm

Happypath Checkout i en kasse: levering til Happypath i Colletts gate 43, valgt inngang med bilde og hva vi vet om den — Den ekte komponenten i demobutikken vår, med levering til Happypath-kontoret.

Tre valg

Fra adresse til inngang på sekunder

Kunden søker opp adressen, og komponenten viser det Happypath vet om stedet.

Søk på adresse eller bedrift. Adresser kommer først, og en bedrift fører til gateadressen sin.
Hvem skal motta? En søkbar liste over bedrifter og leiligheter på adressen, merket Bedrift eller Enhet.
Hvilken dør? Alle kartlagte innganger på kart og i liste, med bilder, gangvei og hva vi vet om heis, etasje og ringeklokke.

Happypath Checkout på mobil med mottaker, kart over inngangene og detaljer om valgt dør

Mangler døren?

Samle den inn mens kunden er i kassen

«Ser du ikke døren din?» er alltid tilgjengelig. Kunden kan vise inngangen med en gang i et vindu på nettbrettstørrelse, eller få en lenke og gjøre det senere.

Samme Collection-flyt som mottakere får fra bud.
Lenken sender dere selv, på SMS, e-post eller i appen deres.
En ordre uten dør kan fortsatt gå gjennom når lenken er sendt.

Collection-flyten åpnet i et vindu i demobutikkens kasse, med valg av inngang på satellittkart

Dette lagrer du

Ren JSON på ordren

Lagre valget sammen med ordren slik det er. Lenken med veibeskrivelse går til budet, og DoorSummary viser valget på ordrebekreftelsen.

Dør-ID og lenke med veibeskrivelse når en dør er valgt.
Status på innsamlingen når kunden brukte en innsamlingslenke.
onValidityChange forteller deg når «Bestill» kan aktiveres.

DoorSelection

{
  "label": "Happypath — Colletts gate 43, 0456 OSLO",
  "streetAddressId": "str_VtExpcARXZd3",
  "happypathTenantId": "tnt_BiAljmn4mZwC",
  "happypathDoorId": "edo_…",
  "doorType": "MAIN_ENTRANCE",
  "directionsUrl": "https://go.happypath.no/v/edo_…"
}

Installasjon

Noen få linjer i kassen

React 18 eller nyere, ESM og CommonJS, med TypeScript-typer. Fungerer med Next.js (App og Pages Router), Vite, Remix og webpack.

Kom i gang

npm install @happypath-as/checkout-widget

import { HappypathProvider, HappypathCheckout } from '@happypath-as/checkout-widget';
import '@happypath-as/checkout-widget/styles.css';

<HappypathProvider apiKey="HP_PUBLIC_..." locale="nb">
  <HappypathCheckout
    value={selection}
    onChange={setSelection}
    onValidityChange={setValid}
    customerReference={orderId}
    brandColor="#1E5A6E"
  />
</HappypathProvider>

Laget for nettbutikker

Nøkkel og godkjente domener

Lag en publiserbar nøkkel (HP_PUBLIC_) i partnerportalen og godkjenn domenene til nettbutikken. Den virker bare fra domener du har godkjent, og kan bare søke, vise innganger og lage innsamlingslenker. Den hemmelige API-nøkkelen blir på serveren deres.

Deres kanal, deres melding

Innsamlingslenken går ut gjennom deres egen SMS, e-post eller app. Happypath sender ikke meldinger til kunden.

Ditt uttrykk

Merkefargen din på kart og dørikoner, CSS-variabler for resten, og tekster på norsk og engelsk.

Søk i ditt land

Adresse- og bedriftssøket er avgrenset til landet ditt, med adresser først.

Prøv det i kassen din

Få en publiserbar nøkkel, eller la oss vise deg demobutikken med en adresse du kjenner.

Snakk med oss npm-pakken