Canadian checkout demo
International Split FieldsShows a simple checkout page, configured for capturing a Canadian address. The autocomplete widget provides the search capability and the selected address elements are populated into the relevant form fields.
See the Pen Canadian checkout demo by Addressfinder (@addressfinder) on CodePen.
Related code examples
-
Canadian Map Demo - Search for a Canadian address and display the position on a map. Use the GPS coordinates that are returned with our address metadata.#International #Maps #Open Street Map
-
International Address Autocomplete - Demonstrates how to use the widget to search for addresses within 10 different countries.#International #Multiple Countries
-
Manual address entry - Autocomplete only for street name, suburb and city/town. It also collects coordinates for the location. All other fields must be entered manually.#GPS #Location #Manual #Split Fields #Street
-
Populate fields using querySelector function - Most of our code examples use the ID of a form input field to populate data when an address is autocompleted. However, not all forms use "IDs" to Identify fields. In this example we use the querySelector function to identify the fields and populate the data. In this case we use the field's name to identify the fields.#Split Fields #User Interface
-
Split address into seperate fields - The address is split into seperate fields (unit number, property number, street etc).#Metadata #Split Fields