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
-
American address autocomplete - This example demonstrates searching for an address within the USA.#International
-
American address autocomplete with state selector - Demonstrates how the widget can update a select element containing all the American states.#International #State
-
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
-
Common Plugin code with State field mapping - This example demonstrates how to map variable state field options so that the state/region information returned from the Addressfinder service is used to populate the State select box each time an address is captured.#International #Region #State
-
Form without address line 2 - The example shows the basic use case of the AddressFinder widget but on a form that has fewer address fields. This form only has one "address line" so the widget has been modified to combine the 'Address_Line_1' and 'Address_Line_2' elements when populating the content into the appropriate field.#DOM #Logic #Split Fields #Street