Skip to main content

Displaying Pickup Points

To offer pickup point delivery, your customers need a way to select a convenient location. You can achieve this in two ways:

  1. NowPost Maps Widget (Recommended): A pre-built, interactive map UI.
  2. Direct API Integration: Fetch raw data and build your own UI.

Option 1: NowPost Maps Widget​

The easiest way to integrate. It handles geolocation, searching, and map rendering for you.

Installation​

Add the script to your page:

<script src="https://js.nowpost.com/widget.js"></script>

Usage​

const widget = new NowPost.Widget({
  key: 'pk_test_...', // Your Public Key
  country: 'NG',      // ISO country code (optional)
  theme: {            // Customize colors (optional)
    primary: '#16a34a' 
  },
  onSelect: (point) => {
    // efficient way to handle selection
    console.log('User selected:', point.name, point.id);
    
    // Update your form
    document.getElementById('shipping_method').value = 'pickup';
    document.getElementById('pudo_id').value = point.id;
    
    widget.close();
  }
});

// Open the widget when user clicks a button
document.getElementById('btn-select-location').addEventListener('click', () => {
  widget.open();
});

Option 2: Direct API Integration​

If you want complete control over the UI (e.g., a simple dropdown list or your own map), use our API.

Fetching Points​

Endpoint: GET /api/v1/pudo-points

Parameters:

  • lat (optional): User's latitude
  • lng (optional): User's longitude
  • radius (optional): Search radius in km (default: 5)
  • city (optional): Filter by city

Example Request​

curl "https://api.nowpost.com/api/v1/pudo-points?lat=6.5244&lng=3.3792" \
  -H "Authorization: Bearer <YOUR_PUBLIC_KEY>"

Example Response​

{
  "data": [
    {
      "id": "pudo_12345",
      "name": "Supermart Ikeja",
      "address": "12 Allen Avenue, Ikeja",
      "city": "Lagos",
      "opening_hours": "Mon-Sat 9am-6pm",
      "distance_km": 0.5,
      "coordinates": {
        "lat": 6.5250,
        "lng": 3.3795
      }
    },
    ...
  ]
}

Building the UI​

  1. Ask for the user's location or city.
  2. Call the API with those coordinates.
  3. Display the list of data returned.
  4. When a user clicks one, save the id for the order creation step.