SvelteKit Localized Pricing with ApogeoAPI in 30 Lines (Server Hooks)

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';
import { APOGEOAPI_KEY } from '$env/static/private';
const APOGEO = 'https://api.apogeoapi.com/v1/api/geo';
export const handle: Handle = async ({ event, resolve }) => {
const ip =
event.request.headers.get('x-forwarded-for')?.split(',')[0] ??
event.getClientAddress();
if (ip && APOGEOAPI_KEY) {
try {
const res = await fetch(`${APOGEO}/ip/${ip}`, {
headers: { 'X-API-Key': APOGEOAPI_KEY },
});
if (res.ok) {
const data = await res.json();
event.locals.geo = {
country: data.country?.iso2,
currency: data.country?.currency,
rate: data.country?.currencyRate, // USD → local
};
}
} catch {
// fail-open
}
}
return resolve(event);
};

// src/app.d.ts
declare global {
namespace App {
interface Locals {
geo?: {
country?: string;
currency?: string;
rate?: number;
};
}
}
}
export {};

// src/routes/pricing/+page.server.ts
import type { PageServerLoad } from './$types';
const PLANS = [
{ name: 'Basic', usd: 19 },
{ name: 'Starter', usd: 29 },
{ name: 'Professional', usd: 79 },
];
export const load: PageServerLoad = async ({ locals }) => {
const { currency, rate } = locals.geo ?? {};
const plans = PLANS.map((p) => ({
...p,
localPrice:
currency && rate && currency !== 'USD'
? new Intl.NumberFormat(undefined, {
style: 'currency',
currency,
maximumFractionDigits: 0,
}).format(p.usd * rate)
: null,
}));
return { plans, currency };
};

import type { PageData } from './$types';
export let data: PageData;

- **{plan.name}**: ${plan.usd} USD {#if plan.localPrice} ≈ {plan.localPrice} {/if}

const res = await event.fetch(`${APOGEO}/ip/${ip}`, {
headers: { 'X-API-Key': APOGEOAPI_KEY },
// SvelteKit-specific: cache by URL for 1h on the server
cache: 'force-cache',
});