Add the UPCS Map to a Checkout Page

If your checkout runs on a platform with an existing UPCS plugin (WordPress/WooCommerce, PrestaShop or OpenCart), use that plugin from the plugins page. For a custom-built checkout, the embeddable map slots in as one extra step in the delivery section.

Placement

Put the map after the address fields and before payment. The customer has already told you roughly where they are; the map then refines it to an exact point. Offer a short sentence: "Pin your exact delivery spot (optional)". Because UPCS complements, rather than replaces, the postal address, keep every normal address field.

Wiring

1. Your server creates a session when the checkout step loads: embed a map on a website.
2. The map's onSelect writes the code and coordinates into hidden fields; see handling the onSelect response.
3. On submit, your server validates and stores them with the order: save the code with an order.

UPCS.mount('#delivery-map', {
  sessionToken: token,
  height: '360px',
  onSelect: (r) => {
    form.upcs_code.value = r.upcs_code;
    form.lat.value = r.latitude;
    form.lng.value = r.longitude;
    summary.textContent = r.upcs_code + (r.address ? ' - ' + r.address : '');
  },
  onError: () => summary.textContent = 'Map unavailable. Continue with your address.'
});

Failure must never block the sale

A map is an enhancement. If the session call fails, the script cannot load or the session expires, the customer should still complete checkout with a normal address. Handle expiry as in handle onError and session_expired.

Layout and accessibility

• On phones, give the map enough height to pan comfortably but not so much that the page becomes a trap for scrolling.
• Show the selected code as text near the map, so it can be read and copied.
• Make sure keyboard users can skip the map to the next field.

Server checks

Re-look up the posted code before storing: look up a UPCS code with the API. Mind the key's hourly limit and cache where sensible.