FindMyAddress for Payment

Special integration of FindMyAddress plugin for Payment application.

Getting Started

How start to use FindMyAddress for Payment.

You can make test on playground.

The plugin is related with country select element on Payment form, if the selected country match with one of countries declared in option countries the plugin will be enabled.

Installing

Quick start (CDN)

html

<head>
    <link href="https://assets.iraiser.eu/payment-find-my-address/5.0.0/payment-find-my-address.min.css" rel="stylesheet">
    <script src="https://assets.iraiser.eu/payment-find-my-address/5.0.0/payment-find-my-address.min.js"></script>
</head>

You can choose one specific version like: 5.0.0, 5.0, 5.x or latest.

Usage

JavaScript

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

javascript

let $findMyAddressOptions = {
    api: 'loqate',
    key: 'your_own_loqate_key', // Only if "loqate" is choosen.
    countries: ['FR', 'GB'], // Or '*' for all countries.
    limit: 5,
    loader: false,
    navigation: true,
    width: 'auto',
    placeholder: true,
    noResultText: '',
    hidden: true,
    pencil: true,
    fillSecondAddressField: false,
    additionalAddressField: false,
    houseNumberField: '',
    dropdownClass: '',
    dropdownItemClass: '',
    prefix: 'reserved',
    onProposal: (data) => {
    },
    onComplete: (data) => {
    },
    onError: (data) => {
    }
};

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.
`--pay-tooltip-font-family`	Change the tooltip font family.
`--pay-tooltip-font-size`	Change the tooltip font size.

JavaScript API

Options

Name	Default	Description	Mandatory
`api` string	`'loqate'` "addok" or "loqate"	See FindMyAddress documentation.	Yes
`key` string	`''`	See FindMyAddress documentation.	Yes
`countries` array or '*'	`''`	List of countries allowed to activate the plugin, connected with country select element. See FindMyAddress documentation.	Yes Sets `['FR']` with `addok` api. Set `*` for allow all countries.
`limit` integer	`5`	See FindMyAddress documentation.	No
`loader` boolean	`false`	See FindMyAddress documentation.	No
`width` string	`auto` "auto", element or value	See FindMyAddress documentation.	No
`placeholder` boolean, string	`true`	See FindMyAddress documentation.	No
`noResultText` string	`''`	See FindMyAddress documentation.	No
`hidden` boolean	`true`	Show or hide the form fields.	No
`pencil` boolean	`true`	Display or not the pencil element, work only if `hidden` is `true`.	No
`fillSecondAddressField` boolean	`false`	Prefill the secondary address field with information from `line2`, `line3`, `line4` & `line5`.	No
`additionalAddressField` boolean	`false`	Display the additional address field. Note: will automatically displayed if `fillSecondAddressField` is `true`.	No
`additionalPlaceholder` string	`''`	Sets placeholder for additional address field.	No
`houseNumberField` string	`''`	Allow to auto prefill on targeted house number field. Class or ID.	No
`dropdownClass` string	`''`	See FindMyAddress documentation.	No
`dropdownItemClass` string	`''`	See FindMyAddress documentation.	No
`prefix` string	`reserved`	Choose prefix for name of hidden additional fields.	No

Some options came from FindMyAddress, look the documentation for more information.

Each HTML element modified by this plugin have the attributes data-js-origin="pay-find-my-address" added.

Callbacks

Name	Default	Description
`onProposal`	`data`	Return the total number of results proposal.
`onComplete`	`data`	Return the total number of selected address.
`onError`	`data`	Return the total number of API error.

Public methods

List of public methods available on global (window) scope PaymentFindMyAddress.

Name	Options	Description
`run`	`none`	Initialize the plugin.
`update`	`country` string	Reload the plugin with possibility to change country.
`destroy`	`none`	Destroy the plugin.

Usage example: PaymentFindMyAddress.update('GB');.

coloriage.