API Reference

Address component

The Sparqle Address Component is a lightweight Javascript component that provides a way to input, autocomplete and verify an address, most likely as part of a webshop checkout.

1. Add the Javascript library

Insert the script tag that loads the component in the <head>

<script src="https://cdn-stage.sparqle.com/address/latest/component.bundle.js"></script>

NB: the latest version is targeted here, as you can see in the url. It is also possible, and preferred to target specific versions eg: https://cdn-stage.sparqle.com/delivery-methods/v1.0/component.bundle.js. See next paragraph for more info.

Versioning and releases

Sparqle applies semantic versioning for the component. Every release, major, minor and patch is published in 4 ways:

  • As the Patch version: delivery-methods/v0.1.12/component.bundle.js
  • As the latest Minor: delivery-methods/v0.1/component.bundle.js
  • As the latest Major: delivery-methods/v0/component.bundle.js
  • As the latest: delivery-methods/latest/component.bundle.js

This allows you to subscribe to a type of release, eg:

  • if you implement v0.1 you automatically get all the patches published under that minor version.
  • if you implement latest you automatically get all version updates, including breaking ones. It is not recommended to apply this in production.

Release notes are published at the end of this page to help you decide when to upgrade the component version.

2. Add component to your delivery method form HTML

Insert the HTML component where you want it to be displayed:

<sparqle-address locale="nl_NL" country-code="NL" show-country="true"></sparqle-address>

The locale parameter represents the language in which the component will be displayed and defaults to nl_NL:

  • nl_NL for Dutch
  • en_EN for English

The country-code parameter defaults to NL and can be used to preselect a country for the address:

  • NL for the Netherlands
  • BE for Belgium

The show-country parameter is optional and defaults to false. If set to true it will result in presenting the user with a country select before entering address details. If set to false it will result in skipping the country select and use the country provided in the country-code parameter.


3. Optional configuration

Alternatively you can provide the parameters in a config object and use the components setConfiguration() method to set the properties.

3.1 Create a configuration object with the following parameters:

const configuration = {
	countryCode: "NL",
	locale: "nl_NL",
  showCountry: false
}

Target the sparqle-checkout component and set the configuration object:

const sparqleCheckout = document.querySelector('sparqle-address');

sparqleCheckout.setConfiguration(configuration);

Release notes

v0.0.10 - 08-07-2024
  • bug fix: dont show undefined suffix
v0.0.9 - 27-06-2024
  • Initial public version.