FindMyAddress for Payment
Special integration of FindMyAddress plugin for Payment application.
Getting Started
How start to use FindMyAddress for Payment.
The plugin is related with countries select element on Payment form, if the selected country in form match with one of countries declared in option countries the plugin will be enabled.
Quick start (CDN)
html
<head>
<link href="https://libs.iraiser.eu/libs/payment-find-my-address/v{version}/payment-find-my-address.min.css"/>
<script src="https://libs.iraiser.eu/libs/payment-find-my-address/v{version}/payment-find-my-address.min.js"></script>
</head>
You can choose one specific version by replacing tag {version}.
You can also choose one major version by replacing /v{version}/ by /production/v{version}/ (v1, v2, ect...) or /latest/ folder to target the latest version.
Style customization
CSS custom properties
| CSS Custom property | Description |
|---|---|
--pay-icon-background-image | Change the icon background image. |
--pay-icon-background-position | Change the icon background position. |
--pay-icon-background-size | Change the icon background size. |
--pay-icon-top | Change the icon position top. |
--pay-icon-right | Change the icon position right. |
JavaScript API
For an initiate FindMyAddress for Payment, you need to create one JSON object $findMyAddressOptions with dedicated options:
Options
| Name | Default | Description | Mandatory |
|---|---|---|---|
api | '' | See FindMyAddress documentation. | Yes |
key | '' | See FindMyAddress documentation. | Yes |
countries | [] | If the array is empty, the plugin will not be enable. You need one country. See FindMyAddress documentation. | Yes |
limit | 5 | See FindMyAddress documentation. | No |
loader | false | See FindMyAddress documentation. | No |
navigation | true | See FindMyAddress documentation. | No |
context | true | See FindMyAddress documentation. | No |
width | auto | See FindMyAddress documentation. | No |
placeholder | true | See FindMyAddress documentation. | No |
placeholderText | '' | See FindMyAddress documentation. | No |
noResultText | '' | See FindMyAddress documentation. | No |
dropdownClass | '' | See FindMyAddress documentation. | No |
dropdownItemClass | '' | See FindMyAddress documentation. | No |
hiddenFields | true | Show or hide the form fields. | No |
addressLine2Field | true | Allow to auto prefill the secondary address field. | No |
addressComplementaryField | true | Allow to display the complementary address field. | No |
houseNumberField | '' | Allow to auto prefill on designated house number field. | No |
Some options came from FindMyAddress, look the documentation for more information.
JSON object
Example of configuration with all options:
html
<script>
let $findMyAddressOptions = {
api: 'loqate',
key: 'your_own_loqate_key',
countries: ['FR', 'GB'],
limit: 5,
loader: false,
navigation: true,
context: false,
width: 'auto',
placeholder: true,
placeholderText: 'Find your address...',
noResultText: 'We can\'t find your address, sorry.',
dropdownClass: '',
dropdownItemClass: '',
hiddenFields: true,
addressLine2Field: false,
addressComplementaryField: false,
houseNumberField: ''
};
function findMyAddressOnPropose($data) {
console.log($data);
}
function findMyAddressOnComplete($data) {
console.log($data);
}
function findMyAddressOnError($data) {
console.log($data);
}
</script>