Checkout widget

npm install @quantaroute/checkout maplibre-gl

import 'maplibre-gl/dist/maplibre-gl.css';
import '@quantaroute/checkout/style.css';
import { CheckoutWidget } from '@quantaroute/checkout';

export default function CheckoutPage() {
  return (
    <CheckoutWidget
      apiKey={process.env.NEXT_PUBLIC_QUANTAROUTE_KEY!}
      onComplete={(address) => {
        console.log(address.digipin);           // "39J-438-TJC7"
        console.log(address.pincode);           // "110011"
        console.log(address.formattedAddress);  // "Flat 4B, Floor 3rd, ..."
      }}
    />
  );
}

// app/checkout/page.tsx
'use client';

import dynamic from 'next/dynamic';

const CheckoutWidget = dynamic(
  () => import('@quantaroute/checkout').then((m) => m.CheckoutWidget),
  { ssr: false }
);

export default function CheckoutPage() {
  return (
    <CheckoutWidget
      apiKey={process.env.NEXT_PUBLIC_QUANTAROUTE_KEY!}
      onComplete={(addr) => console.log(addr)}
    />
  );
}

npm install @quantaroute/checkout expo-osm-sdk expo-location

# Add @quantaroute/checkout/plugin to app.json, then rebuild:
npx expo run:ios
npx expo run:android

<CheckoutWidget
  apiKey={process.env.NEXT_PUBLIC_QUANTAROUTE_KEY!}
  merchantId={process.env.NEXT_PUBLIC_MERCHANT_ID!}
  supabaseFunctionBaseUrl={process.env.NEXT_PUBLIC_SUPABASE_FUNCTION_URL!}
  enableEmailAuth={true}
  enableSearch={true}
  onComplete={(addr) => console.log(addr)}
  onCheckoutEvent={(event) => console.log('[checkout]', event.type, event)}
/>

interface CompleteAddress {
  digipin: string;          // "39J-438-TJC7"
  lat: number;              // 28.61390
  lng: number;              // 77.20900

  // Auto-filled from QuantaRoute API
  state: string;            // "Delhi"
  district: string;         // "New Delhi"
  division: string;         // "New Delhi Central"
  locality: string;         // "Nirman Bhawan SO"
  pincode: string;          // "110011"
  delivery: string;         // "Delivery" | "Non Delivery"
  country: string;          // "India"

  // Manual entry by user
  flatNumber: string;       // "4B"
  floorNumber: string;      // "3rd"
  buildingName: string;     // "Sunshine Apartments"
  streetName: string;       // "MG Road, Action Area"

  formattedAddress: string; // "4B, 3rd Floor, Sunshine Apartments, ..."
  sessionId?: string;       // QuantaRoute checkout session — correlate with webhooks
}

import {
  MapPinSelector,
  AddressForm,
  getDigiPin,
  isWithinIndia
} from '@quantaroute/checkout';

// Offline DigiPin — no API call
const dp = getDigiPin(28.6139, 77.2090); // "39J-438-TJC7"