Address field for your checkout

<AddressInput /> from @afrihex/react is a ready-made address field. Customers can give their address however they normally would:

They type	They get
`GA-183-8164` or `ga1838164`	That GhanaPostGPS address, straight away
`Accra Mall`	Place suggestions as they type
`adjacent Goil filling station, Madina Zongo Junction`	The Goil station near that junction, first in the list
Use my current location	Their GPS position

Whatever they choose, onSelect receives the coordinates, the GhanaPostGPS code, street, area and region, and directions a rider can follow, such as "Opposite Nick Petroleum filling station, Gbatsuna".

1. Create a publishable key

A publishable key (afx_pub_…) is made for web pages. It only works from the websites you list, can only look up addresses, and counts against your daily quota. Your secret key stays on your server.

In your dashboard, open Publishable keys, choose Create publishable key and list your sites, for example:

https://yourshop.com
https://*.yourshop.com
http://localhost:3000

The same key can also work in your mobile apps: add their Android package names or iOS bundle IDs under Mobile apps. See the Dart and Flutter SDK.

Or create one with your secret key:

curl -X POST https://api.afrihex.com/v2/me/publishable-keys \
  -H "X-API-Key: $AFRIHEX_SECRET_KEY" -H "Content-Type: application/json" \
  -d '{"name": "Checkout", "allowed_origins": ["https://yourshop.com", "http://localhost:3000"]}'

2. Add the field

npm install @afrihex/react

import { AddressInput } from '@afrihex/react'

export function DeliveryAddress({ onChange }) {
  return (
    <AddressInput
      publishableKey="afx_pub_…"
      onSelect={(address) => onChange(address)}
    />
  )
}

That's all. It works in React 17+, Next.js (App and Pages router), Vite and Remix, with no CSS to import.

3. Save the address

{
  "label": "Accra Mall, Shiashie, Greater Accra",
  "lat": 5.6222784,
  "lng": -0.1734473,
  "gps_code": "GL-152-3846",
  "street": "Tetteh Quarshie Interchange",
  "area": "Shiashie",
  "region": "Greater Accra",
  "directions": "At Accra Mall, Shiashie",
  "source": "search",
  "input": "accra mall"
}

Save lat, lng and gps_code with the order, and send directions and input to the rider. On your server, trips.create from the SDK takes the GhanaPostGPS code or the coordinates directly.

Options

Prop	Default
`near`		`{ lat, lng }` to put nearby places first, e.g. your shop
`locateButton`	`true`	Show Use my current location
`showSummary`	`true`	Show the chosen code, area and directions under the field
`limit`	`6`	Number of suggestions
`onClear`		The customer edited a chosen address
`onError`		Network, quota or key problems; `error.code` says which
`labels`	English	Your own text for the built-in messages

Style it with CSS variables (--afx-accent, --afx-radius, --afx-border, --afx-bg, --afx-font) on .afx-ai. It follows dark mode by default.

If it shows nothing

Open the browser console. The component explains key problems there:

Error	Fix
`ORIGIN_NOT_ALLOWED`	Add this site, exactly as in the address bar (scheme, host and port), to the key's websites
`INVALID_API_KEY`	The key was revoked or mistyped
`PUBLISHABLE_KEY_SCOPE`	A publishable key was used for something other than an address lookup; use your secret key on your server

Not using React? The address picker guide builds the same field with plain HTML and a small server.

1. Create a publishable key​

2. Add the field​

3. Save the address​

Options​

If it shows nothing​

1. Create a publishable key

2. Add the field

3. Save the address

Options

If it shows nothing