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 propertyDescription
--pay-icon-background-imageChange the icon background image.
--pay-icon-background-positionChange the icon background position.
--pay-icon-background-sizeChange the icon background size.
--pay-icon-topChange the icon position top.
--pay-icon-rightChange the icon position right.

JavaScript API

For an initiate FindMyAddress for Payment, you need to create one JSON object $findMyAddressOptions with dedicated options:

Options

NameDefaultDescriptionMandatory
api
string
''
"addok" or "loqate"
See FindMyAddress documentation.Yes
key
string
''See FindMyAddress documentation.Yes
countries
array
[]If the array is empty, the plugin will not be enable. You need one country.
See FindMyAddress documentation.
Yes
limit
integer
5See FindMyAddress documentation.No
loader
boolean
falseSee FindMyAddress documentation.No
navigation
boolean
trueSee FindMyAddress documentation.No
context
boolean
trueSee FindMyAddress documentation.No
width
string
auto
"auto", element or value
See FindMyAddress documentation.No
placeholder
string
trueSee FindMyAddress documentation.No
placeholderText
boolean
''See FindMyAddress documentation.No
noResultText
string
''See FindMyAddress documentation.No
dropdownClass
string
''See FindMyAddress documentation.No
dropdownItemClass
string
''See FindMyAddress documentation.No
hiddenFields
boolean
trueShow or hide the form fields.No
addressLine2Field
boolean
trueAllow to auto prefill the secondary address field.No
addressComplementaryField
boolean
trueAllow to display the complementary address field.No
houseNumberField
string
''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>