Documentation

Shipping Checkout Example

A demo for the Address Autocomplete function to create a typical store checkout with autofill of the forms.

Select Country

Shipping Address

Billing Address

HTML Code

The below example uses the Slpy JS library to enable address autocomplete.

Also available from NPM with npm install slpy. See the Slpy JS Github for more info.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Hello World!</title>
  <!-- CSS -->
  <link href="https://api.slpy.com/lib/slpy/latest/slpy-style.css" rel="stylesheet">
  <!-- JS -->
  <script src="https://api.slpy.com/lib/slpy/latest/slpy.js"></script>
</head>
<body>
	<!-- Example Checkout Form Styling -->
	<style>
		.address-form input,
		.address-form textarea {
			padding: 10px;
			margin: 5px;
			border: 1px solid #ccc;
			border-radius: 3px;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
		.address-form h3 {
			color: #5f5f5f;
			padding: 10px 0px;
		}
		.street {
			display: block;
			width: 100%;
			max-width: 450px;
		}
	</style>

	<form id="checkout-form" class="address-form" action="">
		<h3> Shipping Address </h3>
		<div>
			<input name="street-ship" placeholder="Street" autocomplete="shipping address-line1" class="street">
			<input name="city-ship" placeholder="City" autocomplete="shipping address-level2">
			<input name="region-ship" placeholder="State/Region" autocomplete="shipping address-level1">
			<input name="postcode-ship" placeholder="Postcode" autocomplete="shipping postal-code">
		</div>
		<h3> Billing Address </h3>
		<div>
			<input name="street-bill" placeholder="Street" autocomplete="billing address-line1" class="street">
			<input name="city-bill" placeholder="City" autocomplete="billing address-level2">
			<input name="region-bill" placeholder="State/Region" autocomplete="billing address-level1">
			<input name="postcode-bill" placeholder="Postcode" autocomplete="billing postal-code">
		</div>
	</form>

	<script>
		var options = {
			apiKey: 'your_api_key',
			country: 'us'
		};
		slpy.addressAutocomplete("checkout-form", options);
    </script>
</body>
</html>

Autocomplete Reference

Visit the Autocomplete and Autofill Documentation for more information about settings and features.


Next Steps

Enhance your search with Maps or Autocomplete

Search & Geocoding

  • Add a search bar to your map.
  • Translate addresses to coordinates
  • Search for points of interest.

Maps

  • Display your location
  • Provide context to an address
  • Add popups for more information