Checkout Form Integration Example - Places Autocomplete JS

Checkout Form Integration

This example demonstrates how to integrate the Places Autocomplete component into a typical checkout form. When a user selects an address, the form fields are automatically populated with the details from the Google Places API.

Implementation:

<script>
import { PlacesAutocomplete } from 'places-autocomplete-js';

document.addEventListener('DOMContentLoaded', () => {
  try {
    const autocomplete = new PlacesAutocomplete({
      containerId: 'autocomplete-container',
      googleMapsApiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // Replace with your actual key
      onResponse: (placeDetails) => {
          // Reset fields
          document.getElementById('address1')!.innerText = '';
          document.getElementById('city')!.innerText = '';
          document.getElementById('postcode')!.innerText = '';
          document.getElementById('country')!.innerText = '';

          // Extract address components
          // 'street_number' is used for the house number
          const streetNumber = 
            placeDetails.addressComponents.find((c) => 
              c.types.includes('street_number'))?.longText || '';

          
          // 'route' is used for the street name
          const route = 
            placeDetails.addressComponents.find((c) => 
              c.types.includes('route'))?.longText || '';

          // 'address1' is used for the full address line 1  
          // Concatenate street number and route
          document.getElementById('address1')!.innerText = 
            (streetNumber).concat(' ', route).trim();

          // 'postal_town' is used for the city
          document.getElementById('city')!.innerText = 
            placeDetails.addressComponents.find((c) => 
              c.types.includes('postal_town'))?.longText || '';

          // 'postal_code' is used for the postcode
          document.getElementById('postcode')!.innerText = 
            placeDetails.addressComponents.find((c) => 
              c.types.includes('postal_code'))?.longText || '';

          // 'country' is used for the country
          document.getElementById('country')!.innerText = 
            placeDetails.addressComponents.find((c) => 
              c.types.includes('country'))?.longText || '';

      },
      onError: (error) => {
          console.error('Autocomplete Error:', error.message || error);
      },
      requestParams: {
          region: 'GB', // Example region
          includedRegionCodes: ['GB'], // Example countries
      },
      options: {
          placeholder: 'Start typing your address...',
          clear_input:false // Retain input value after selection
      }
    });

  } catch (error) {
    console.error("Failed to initialize PlacesAutocomplete:", error.message);
  }


</script>

...
<div id="autocomplete-container"></div>

<div>
  <label for="address1">Address:</label>
  <input type="text" id="address1"></input>
</div>
<div>
  <label for="city">City:</label>
  <input id="city"></input>
</div>
<div>
  <label for="postcode">Postal Code:</label>
  <input type="text" id="postcode"></input>
</div>
<div>
  <label for="country">Country:</label>
  <input type="text" id="country"></input>
</div>