Collect customer's payment address on website and verify it

This code sample shows how to create address collection forms. You can verify the entered address with the Geocoding API.

by Geoapify

HTML

<script src="https://unpkg.com/@geoapify/geocoder-autocomplete@1.5.1/dist/index.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@geoapify/geocoder-autocomplete@1.5.1/styles/minimal.css">
<div class="address-collection-container">
  <div class="address-row">
    <div class="address-field-with-label main-part  margin-right">
      <label for="street">Street:</label><br>
      <div id="street" class="address-field autocomplete-container"></div>
    </div>
    
    <div class="address-field-with-label">
      <label for="housenumber">House number:</label><br>
      <input id="housenumber" class="geoapify-autocomplete-input small-input"/>
    </div>
  </div>

  <div class="address-row">
    <div class="address-field-with-label main-part">
      <label for="address-additional">Apartment, suite (optional):</label><br>
      <input id="address-additional" class="geoapify-autocomplete-input"/>
    </div>
  </div>

  <div class="address-row">
  
    <div class="address-field-with-label main-part  margin-right">
      <label for="city">City:</label><br>
      <div id="city" class="address-field autocomplete-container"></div>
    </div>
  
    <div class="address-field-with-label">
      <label for="postcode">ZIP code:</label><br>
      <input id="postcode" class="geoapify-autocomplete-input small-input"/>
    </div>
  </div>

  <div class="address-row">  
    <div class="address-field-with-label main-part  margin-right">
      <label for="state">State:</label><br>
      <div id="state" class="address-field autocomplete-container"></div>
    </div>
  
    <div class="address-field-with-label main-part">
      <label for="country">Country:</label><br>
      <div id="country" class="address-field autocomplete-container"></div>
    </div>
  </div>

  <div id="message" class="message-container"></div>
  <div class="button-container"><button onclick="checkAddress()">Check address</button></div>
</div>

CSS

.address-collection-container {
  max-width: 500px;
  margin: auto;
}

.autocomplete-container {
    position: relative;
}

.address-row {
  display: flex;
  flex-direction: row;
  
  margin-bottom: 10px;
}

.address-row  .main-part {
  flex: 1
}

.small-input {
  width: 90px;
}

.margin-right {
  margin-right: 10px
}

.message-container {
  margin-top: 10px;
}

.button-container {
  margin-top: 20px;
  text-align: right
}

.warning-input {
   border-color: #ffb610;
}

.message-container {
  color: grey;
}

JavaScript

// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
const myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

const streetInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("street"),
  myAPIKey, {
  	type: "street",
    allowNonVerifiedHouseNumber: true,
    allowNonVerifiedStreet: true,
    skipDetails: true,
    skipIcons: true,
    placeholder: " "
  });

const stateInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("state"),
  myAPIKey, {
    type: "state",
    skipDetails: true,
    placeholder: " ",
    skipIcons: true
  });

const cityInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("city"),
  myAPIKey, {
    type: "city",
    skipDetails: true,
    skipIcons: true,
    placeholder: " "
  });


const countryInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("country"),
  myAPIKey, {
    type: "country",
    skipDetails: true,
    placeholder: " ",
    skipIcons: true
  });

const postcodeElement = document.getElementById("postcode");
const housenumberElement = document.getElementById("housenumber");

streetInput.on('select', (street) => {
  if (street) {
    streetInput.setValue(street.properties.street || '');
  }

  if (street && street.properties.housenumber) {
    housenumberElement.value = street.properties.housenumber;
  }

  if (street && street.properties.postcode) {
    postcodeElement.value = street.properties.postcode;
  }

  if (street && street.properties.city) {
    cityInput.setValue(street.properties.city);
  }

  if (street && street.properties.state) {
    stateInput.setValue(street.properties.state);
  }

  if (street && street.properties.country) {
    countryInput.setValue(street.properties.country);
  }
});

cityInput.on('select', (city) => {

  if (city) {
    cityInput.setValue(city.properties.city || '');
  }

  if (city && city.properties.postcode) {
    postcodeElement.value =...