@paydock/client-sdk 1.104.3-beta → 1.105.1

package/README.md

@@ -16,78 +16,76 @@ Also you will need added gateway ([see API Reference by gateway](https://docs.pa
 
 ## Get started
 
-The Client SDK ships in JavaScript ES6 (EcmaScript 2015) in three different
-formats (CJS, ESM and UMD) along with respective TypeScript declarations. Below,
-we exemplify how to import each format.
-
 ### With package manager
 
-Our NPM package is compatible with all package managers (e.g., `npm`, `yarn`,
-`pnpm`, `bun`). Using `npm` the following command would add the Client SDK as a
-production dependency.
+To install with package manager, enter the following command:
 
-```bash
-npm install @paydock/client-sdk
-```
+`npm install @paydock/client-sdk`
 
-After installation is complete, if you are developing in NodeJS environments or
-using tools that expect your JavaScript code to be in CJS format (e.g., Jest,
-Karma, RequireJS, Webpack), you can import the Client SDK using CommonJS modules.
-For these environments the UMD format (`@paydock/client-sdk/bundles/widget.umd.js`)
-can also be used as a fallback. Alternatively, in case you are developing in
-projects that have access to modern bundlers such as Vite or others (e.g., SPA
-libs or SSR Metaframeworks), you can import the Client SDK features using ESM
-through named imports or namespaced imports.
 
+You can use ES2015 or TypeScript modules
 
-```cjs
-// module import - CommonJS/Node projects ✅
-const paydock = require('@paydock/client-sdk')
-const api = new paydock.Api('publicKey');
-```
+`@paydock/client-sdk/widget`
 
-```mjs
-// named import - ESM projects or TypeScript projects ✅
-import { HtmlWidget } from '@paydock/client-sdk'
-const widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
-```
 
-```mjs
-// namespaced import - ESM projects or TypeScript projects ✅
-import * as Paydock from '@paydock/client-sdk'
-const widget = new Paydock.HtmlWidget('#selector', 'publicKey', 'gatewayId');
+Also can use UMD module (global visibility, see above)
+
+`@paydock/client-sdk/bundles/widget.umd.js`
+
+`@paydock/client-sdk/bundles/widget.umd.min.js`
+
+
+
+```javascript--es2015
+// ES2015 / TypeScript
+
+import { HtmlWidget } from '@paydock/client-sdk/widget';
+
+let widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
 ```
 
-```js
-// default import - We do not provide default exports. They are handled differently by different tools!
- ❌
-import paydock from '@paydock/client-sdk'
->>> "Uncaught SyntaxError: The requested module does not provide an export named 'default'"
+
+```html
+<script src="@paydock/client-sdk/bundles/widget.umd.min.js"></script>
+<script>
+    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
+</script>
 ```
 
 
+
 ### Download from CDN
 
-For browser environments, you can import the Client SDK directly from our CDN to
-your project's HTML. To accomplish this, include the Client SDK in your page
-using one and only of the two script tags below. After this step you will be
-able to access the Client SDK features via the global variable `paydock`.
+You should begin by including the library in your page.
+
+Add this script tag to your page to get started with with the url below:
+
+*Compressed version for production*
+`https://widget.paydock.com/sdk/latest/widget.umd.min.js` 
+
+*Full version for development and debug*
+`https://widget.paydock.com/sdk/latest/widget.umd.js`
 
-For production we recommend using the compressed version (`.min.js`) since
-it will result in faster loading times for your end users.
 
-- *Compressed version for production: `https://widget.paydock.com/sdk/latest/widget.umd.min.js`*
 
-- *Full version for development and debug: `https://widget.paydock.com/sdk/latest/widget.umd.js`*
 
-You may download the production version of the Client SDK scripts [here][min],
-and, the development version [here][max].
+Also can download library the [production version][min] or the [development version][max]
 
 [min]: https://widget.paydock.com/sdk/latest/widget.umd.min.js
 [max]: https://widget.paydock.com/sdk/latest/widget.umd.js
 
-For more advanced use-cases, the library has [UMD](https://github.com/umdjs/umd)
-format that can be used in RequireJS, Webpack, etc.
+
+The library will always be available via the global variable `paydock`.
+
+
+
+Also for more advanced use, the library has [UMD](https://github.com/umdjs/umd) format, thus can be used in requireJs, webpack, etc.
+
+
+
+
+
+
 
 
 ```html
@@ -97,7 +95,6 @@ format that can be used in RequireJS, Webpack, etc.
 </script>
 ```
 
-
 ## Widget
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#widget-simple-example)
 
@@ -122,11 +119,11 @@ var widget = new paydock.HtmlWidget('#widget', 'publicKey');
 widget.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { HtmlWidget } from '@paydock/client-sdk';
-
+import { HtmlWidget } from '@paydock/client-sdk/widget';
+    
 var widget = new HtmlWidget('#widget', 'publicKey');
 widget.load();
 ```
@@ -134,7 +131,7 @@ widget.load();
 Then write only need 2 lines of code in js to initialize widget
 
 
-### Full example
+### Full example 
 
 ```html
 <!DOCTYPE html>
@@ -197,9 +194,9 @@ widget.setFormFields(['phone', 'email']); // add additional fields for form of w
 widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported card types
 ```
 
-This example shows how you can use a lot of other methods to settings your form
+This example shows how you can use a lot of other methods to settings your form 
 
-### Full example
+### Full example 
 
 ```html
 <!DOCTYPE html>
@@ -220,12 +217,12 @@ This example shows how you can use a lot of other methods to settings your form
 <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
 <script>
 	var widget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
-
+	
 	widget.setSupportedCardIcons(['mastercard', 'visa']);
 	widget.setFormFields(['phone', 'email']);
 	widget.setRefId('custom-ref-id');
     widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');z
-
+	
 	widget.load();
 </script>
 </script>
@@ -286,6 +283,12 @@ This example shows how you can use a lot of other methods to settings your form
 <dt><a href="#user-content-w_STYLABLE_ELEMENT_STATE">STYLABLE_ELEMENT_STATE</a> : <code>object</code></dt>
 <dd><p>Current constant include available states of element for styling</p>
 </dd>
+<dt><a href="#user-content-w_CARD_VALIDATORS">CARD_VALIDATORS</a> : <code>Record.&lt;string, string&gt;</code></dt>
+<dd><p>List of available form field validators dedicated to cards and their definition</p>
+</dd>
+<dt><a href="#user-content-w_GENERIC_VALIDATORS">GENERIC_VALIDATORS</a> : <code>Record.&lt;string, string&gt;</code></dt>
+<dd><p>List of available generic form field validators and their definition</p>
+</dd>
 <dt><a href="#user-content-w_TRIGGER">TRIGGER</a> : <code>object</code></dt>
 <dd><p>List of available triggers</p>
 </dd>
@@ -298,7 +301,8 @@ This example shows how you can use a lot of other methods to settings your form
 <dd><p>Interface of data from validation event.</p>
 </dd>
 <dt><a href="#user-content-w_IEventMetaData">IEventMetaData</a></dt>
-<dd><p>Interface of data from event.</p>
+<dd><p>Contains basic information associated with the event and additional meta data
+specific to the event. E.g., card info, gateway info, etc.</p>
 </dd>
 <dt><a href="#user-content-w_IEventAfterLoadData">IEventAfterLoadData</a></dt>
 <dd><p>Interface of data from event.</p>
@@ -347,33 +351,34 @@ Interface of data from validation event.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| event | <code>string</code> | Event name |
-| purpose | <code>string</code> | System variable. Purpose of event |
-| message_source | <code>string</code> | System variable. Event source |
-| [ref_id] | <code>string</code> | Custom value for identify result of processed operation |
-| [form_valid] | <code>boolean</code> | Form is valid |
-| [invalid_fields] | <code>array</code> | Invalid form fields |
-| [invalid_showed_fields] | <code>array</code> | List of fields on which the error is already displayed |
-| [validators] | <code>array</code> | List of validators with fields |
+| event | <code>string</code> | The name of the event. |
+| message_source | <code>string</code> | A system variable that identifies the event source. |
+| purpose | <code>string</code> | A system variable that states the purpose of the event. |
+| [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. |
+| [form_valid] | <code>boolean</code> | Indicates wether or not the form is valid. |
+| [invalid_fields] | <code>Array.&lt;string&gt;</code> | Names of form fields with invalid data. |
+| [invalid_showed_fields] | <code>Array.&lt;string&gt;</code> | Names of invalid form fields which are already displaying the error. |
+| [validators] | <code>Partial.&lt;Record.&lt;(CardValidatorValue\|GenericValidatorValue), Array.&lt;string&gt;&gt;&gt;</code> | Object containing validator identifiers as keys and the fields subject to that validator as an array of form field names.  See list of available [Generic Vallidators](#user-content-w_GENERIC_VALIDATORS) and [Card Validators](#user-content-w_CARD_VALIDATORS), |
 
 <a name="w_IEventMetaData" id="w_IEventMetaData" href="#user-content-w_IEventMetaData">&nbsp;</a>
 
 ## IEventMetaData
-Interface of data from event.
+Contains basic information associated with the event and additional meta data
+specific to the event. E.g., card info, gateway info, etc.
 
 **Kind**: global interface  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| event | <code>string</code> | Event name |
-| purpose | <code>string</code> | System variable. Purpose of event |
-| message_source | <code>string</code> | System variable. Event source |
-| [ref_id] | <code>string</code> | Custom value for identify result of processed operation |
+| event | <code>string</code> | The name of the event. |
+| purpose | <code>string</code> | A system variable that states the purpose of the event. |
+| message_source | <code>string</code> | A system variable that identifies the event source. |
+| [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. |
 | configuration_token | <code>string</code> | Token received from our API with widget data |
 | type | <code>string</code> | Payment type 'card', 'bank_account' |
 | gateway_type | <code>string</code> | Gateway type |
 | [card_number_last4] | <code>string</code> | Last 4 digit of your card |
-| [card_scheme] | <code>string</code> | Card scheme |
+| [card_scheme] | <code>string</code> | Card scheme, e.g., (Visa, Mastercard and American Express (AmEx)) |
 | [card_number_length] | <code>number</code> | Card number length |
 | [account_name] | <code>string</code> | Bank account account name |
 | [account_number] | <code>string</code> | Bank account account number |
@@ -387,10 +392,10 @@ Interface of data from event.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| event | <code>string</code> | Event name |
-| purpose | <code>string</code> | System variable. Purpose of event |
-| message_source | <code>string</code> | System variable. Event source |
-| [ref_id] | <code>string</code> | Custom value for identify result of processed operation |
+| event | <code>string</code> | The name of the event. |
+| purpose | <code>string</code> | A system variable that states the purpose of the event. |
+| message_source | <code>string</code> | A system variable that identifies the event source. |
+| [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. |
 
 <a name="w_IEventFinishData" id="w_IEventFinishData" href="#user-content-w_IEventFinishData">&nbsp;</a>
 
@@ -401,10 +406,10 @@ Interface of data from event.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| event | <code>string</code> | Event name |
-| purpose | <code>string</code> | System variable. Purpose of event |
-| message_source | <code>string</code> | System variable. Event source |
-| [ref_id] | <code>string</code> | Custom value for identify result of processed operation |
+| event | <code>string</code> | The name of the event. |
+| purpose | <code>string</code> | A system variable that states the purpose of the event. |
+| message_source | <code>string</code> | A system variable that identifies the event source. |
+| [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. |
 | payment_source | <code>string</code> | One time token. Result from this endpoint [API docs](https://docs.paydock.com/#tokens) |
 
 <a name="w_IPayPalMeta" id="w_IPayPalMeta" href="#user-content-w_IPayPalMeta">&nbsp;</a>
@@ -618,7 +623,7 @@ Class Widget include method for working on html and include extended by HtmlMult
     * [.setFormElements(elements)](#user-content-w_HtmlWidget+setFormElements)
     * [.setMeta(object)](#user-content-w_HtmlWidget+setMeta)
     * [.load()](#user-content-w_HtmlMultiWidget+load)
-    * [.on(eventName, [cb])](#user-content-w_HtmlMultiWidget+on) ⇒ <code>Promise.&lt;(IEventData\|IEventMetaData\|IEventFinishData\|IFormValidation)&gt;</code> \| <code>void</code>
+    * [.afterLoad()](#user-content-w_HtmlMultiWidget+afterLoad)
     * [.trigger(triggers, data)](#user-content-w_HtmlMultiWidget+trigger)
     * [.getValidationState()](#user-content-w_HtmlMultiWidget+getValidationState) ⇒ [<code>IFormValidation</code>](#user-content-w_IFormValidation)
     * [.isValidForm()](#user-content-w_HtmlMultiWidget+isValidForm) ⇒ <code>boolean</code>
@@ -631,6 +636,7 @@ Class Widget include method for working on html and include extended by HtmlMult
     * [.hideElements(elements)](#user-content-w_HtmlMultiWidget+hideElements)
     * [.showElements(elements)](#user-content-w_HtmlMultiWidget+showElements)
     * [.updateFormValues(fieldValues)](#user-content-w_HtmlMultiWidget+updateFormValues)
+    * [.updateFormValue(key, value)](#user-content-w_HtmlMultiWidget+updateFormValue)
     * [.onFinishInsert(selector, dataType)](#user-content-w_HtmlMultiWidget+onFinishInsert)
     * [.interceptSubmitForm(selector)](#user-content-w_HtmlMultiWidget+interceptSubmitForm)
     * [.useCheckoutAutoSubmit()](#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit)
@@ -642,7 +648,7 @@ Class Widget include method for working on html and include extended by HtmlMult
     * [.setFormValues(fieldValues)](#user-content-w_MultiWidget+setFormValues)
     * [.setFormLabels(fieldLabels)](#user-content-w_MultiWidget+setFormLabels)
     * [.setFormPlaceholders(fieldPlaceholders)](#user-content-w_MultiWidget+setFormPlaceholders)
-    * ~~[.setIcons()](#user-content-w_MultiWidget+setIcons)~~
+    * [.setIcons()](#user-content-w_MultiWidget+setIcons)
     * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
@@ -795,51 +801,38 @@ config.setMeta({
 <a name="w_HtmlMultiWidget+load" id="w_HtmlMultiWidget+load" href="#user-content-w_HtmlMultiWidget+load">&nbsp;</a>
 
 ### htmlWidget.load()
-The final method to beginning, the load process of widget to html
+Loads the widget.
+
+Calling this method results in an iframe element being inserted and rendered in the DOM.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>load</code>](#user-content-w_HtmlMultiWidget+load)  
-<a name="w_HtmlMultiWidget+on" id="w_HtmlMultiWidget+on" href="#user-content-w_HtmlMultiWidget+on">&nbsp;</a>
+<a name="w_HtmlMultiWidget+afterLoad" id="w_HtmlMultiWidget+afterLoad" href="#user-content-w_HtmlMultiWidget+afterLoad">&nbsp;</a>
 
-### htmlWidget.on(eventName, [cb]) ⇒ <code>Promise.&lt;(IEventData\|IEventMetaData\|IEventFinishData\|IFormValidation)&gt;</code> \| <code>void</code>
-Listen to events of widget
+### htmlWidget.afterLoad()
+Registers a form validation callback for validation events.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
-**Overrides**: [<code>on</code>](#user-content-w_HtmlMultiWidget+on)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| eventName | <code>string</code> | Available event names [EVENT](#user-content-w_EVENT) |
-| [cb] | <code>listener</code> |  |
-
-**Example**  
-
-```javascript
-widget.on('form_submit', function (data) {
-     console.log(data);
-});
-// or
- widget.on('form_submit').then(function (data) {
-     console.log(data);
-});
-```
+**Overrides**: [<code>afterLoad</code>](#user-content-w_HtmlMultiWidget+afterLoad)  
 <a name="w_HtmlMultiWidget+trigger" id="w_HtmlMultiWidget+trigger" href="#user-content-w_HtmlMultiWidget+trigger">&nbsp;</a>
 
 ### htmlWidget.trigger(triggers, data)
-This callback will be called for every trigger
+Registers callback that will be invoked for every trigger.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>trigger</code>](#user-content-w_HtmlMultiWidget+trigger)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| triggers | <code>triggerName</code> | submit_form, tab |
-| data | [<code>ITriggerData</code>](#user-content-w_ITriggerData) | which will be sending to widget |
+| triggers | <code>&#x27;submit\_form&#x27;</code> \| <code>&#x27;tab&#x27;</code> | The Widget element identifier that caused the trigger. |
+| data | [<code>ITriggerData</code>](#user-content-w_ITriggerData) | Data that will be sent to the widget when the trigger occurs. |
 
 <a name="w_HtmlMultiWidget+getValidationState" id="w_HtmlMultiWidget+getValidationState" href="#user-content-w_HtmlMultiWidget+getValidationState">&nbsp;</a>
 
 ### htmlWidget.getValidationState() ⇒ [<code>IFormValidation</code>](#user-content-w_IFormValidation)
-Using this method you can get validation state information
+Gets a reference to the form current validation state.
+
+!Warning: do not directly modify the values of the returned object.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>getValidationState</code>](#user-content-w_HtmlMultiWidget+getValidationState)  
@@ -847,11 +840,13 @@ Using this method you can get validation state information
 <a name="w_HtmlMultiWidget+isValidForm" id="w_HtmlMultiWidget+isValidForm" href="#user-content-w_HtmlMultiWidget+isValidForm">&nbsp;</a>
 
 ### htmlWidget.isValidForm() ⇒ <code>boolean</code>
-Using this method you can check if the form is valid
+Checks if a given form is valid.
+
+A form is valid if all form fields are valid.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>isValidForm</code>](#user-content-w_HtmlMultiWidget+isValidForm)  
-**Returns**: <code>boolean</code> - Form is valid  
+**Returns**: <code>boolean</code> - Indicates wether or not form is valid.  
 <a name="w_HtmlMultiWidget+isInvalidField" id="w_HtmlMultiWidget+isInvalidField" href="#user-content-w_HtmlMultiWidget+isInvalidField">&nbsp;</a>
 
 ### htmlWidget.isInvalidField(field) ⇒ <code>boolean</code>
@@ -868,92 +863,96 @@ Using this method you can check if a specific form field is invalid
 <a name="w_HtmlMultiWidget+isFieldErrorShowed" id="w_HtmlMultiWidget+isFieldErrorShowed" href="#user-content-w_HtmlMultiWidget+isFieldErrorShowed">&nbsp;</a>
 
 ### htmlWidget.isFieldErrorShowed(field) ⇒ <code>boolean</code>
-Using this method you can check if an error is displayed on a specific field
+Checks if a given form field is displaying an error.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>isFieldErrorShowed</code>](#user-content-w_HtmlMultiWidget+isFieldErrorShowed)  
-**Returns**: <code>boolean</code> - Error is showed on field  
+**Returns**: <code>boolean</code> - Indicates wether or not the Error message is being displayed on the associated field.  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| field | <code>string</code> | Field name |
+| field | <code>string</code> | The form field name |
 
 <a name="w_HtmlMultiWidget+isInvalidFieldByValidator" id="w_HtmlMultiWidget+isInvalidFieldByValidator" href="#user-content-w_HtmlMultiWidget+isInvalidFieldByValidator">&nbsp;</a>
 
 ### htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ <code>boolean</code>
-Using this method you can check if a specific field is invalid
+Checks if a given form field is valid or invalid by name.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>isInvalidFieldByValidator</code>](#user-content-w_HtmlMultiWidget+isInvalidFieldByValidator)  
-**Returns**: <code>boolean</code> - Field is invalid by validator  
+**Returns**: <code>boolean</code> - Indicates wether or not the field is invalid based on validator intepretation.  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| field | <code>string</code> | Field name |
-| validator | <code>string</code> | Validator name. Available validators: `required, cardNumberValidator, expireDateValidation` |
+| field | <code>string</code> | The form field name |
+| validator |  | The name of the validator. |
 
 <a name="w_HtmlMultiWidget+hide" id="w_HtmlMultiWidget+hide" href="#user-content-w_HtmlMultiWidget+hide">&nbsp;</a>
 
 ### htmlWidget.hide([saveSize])
-Using this method you can hide widget after load
+Hides the widget.
+
+E.g., use this method to hide the widget after it loads.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>hide</code>](#user-content-w_HtmlMultiWidget+hide)  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| [saveSize] | <code>boolean</code> | <code>false</code> | using this param you can save iframe's size |
+| [saveSize] | <code>boolean</code> | <code>false</code> | Wether the original iframe element size should be saved before being hidden. |
 
 <a name="w_HtmlMultiWidget+show" id="w_HtmlMultiWidget+show" href="#user-content-w_HtmlMultiWidget+show">&nbsp;</a>
 
 ### htmlWidget.show()
-Using this method you can show widget after using hide method
+Shows the widget.
+
+E.g., use this method to show the widget after it was explicitly hidden.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>show</code>](#user-content-w_HtmlMultiWidget+show)  
 <a name="w_HtmlMultiWidget+reload" id="w_HtmlMultiWidget+reload" href="#user-content-w_HtmlMultiWidget+reload">&nbsp;</a>
 
 ### htmlWidget.reload()
-Using this method you can reload widget
+Reloads the widget.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>reload</code>](#user-content-w_HtmlMultiWidget+reload)  
 <a name="w_HtmlMultiWidget+hideElements" id="w_HtmlMultiWidget+hideElements" href="#user-content-w_HtmlMultiWidget+hideElements">&nbsp;</a>
 
 ### htmlWidget.hideElements(elements)
-Using this method you can hide any elements inside widget
+Hides the specified Widget elements by their identifier.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>hideElements</code>](#user-content-w_HtmlMultiWidget+hideElements)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| elements | <code>Array.&lt;string&gt;</code> | list of element which can be hidden [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) |
+| elements | <code>Array.&lt;string&gt;</code> | List of element which can be hidden [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) |
 
 **Example**  
-
 ```javascript
 widget.hideElements(['submit_button', 'email']);
 ```
 <a name="w_HtmlMultiWidget+showElements" id="w_HtmlMultiWidget+showElements" href="#user-content-w_HtmlMultiWidget+showElements">&nbsp;</a>
 
 ### htmlWidget.showElements(elements)
-Using this method you can show any elements inside widget
-
-* @example
-widget.showElements(['submit_button', 'email']);
+Shows the specified Widget elements by their identifier.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>showElements</code>](#user-content-w_HtmlMultiWidget+showElements)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| elements | <code>Array.&lt;string&gt;</code> | list of element which can be showed [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) |
+| elements | <code>Array.&lt;string&gt;</code> | List of elements which can be showed [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) |
 
+**Example**  
+```javascript
+widget.showElements(['submit_button', 'email']);
+```
 <a name="w_HtmlMultiWidget+updateFormValues" id="w_HtmlMultiWidget+updateFormValues" href="#user-content-w_HtmlMultiWidget+updateFormValues">&nbsp;</a>
 
 ### htmlWidget.updateFormValues(fieldValues)
-Method for update values for form fields inside the widget
+Updates the form field values inside the widget.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>updateFormValues</code>](#user-content-w_HtmlMultiWidget+updateFormValues)  
@@ -963,53 +962,71 @@ Method for update values for form fields inside the widget
 | fieldValues | <code>IFormValues</code> | Fields with values |
 
 **Example**  
-
 ```javascript
 widget.updateFormValues({
-      email: 'predefined@email.com',
-      card_name: 'Houston'
-  });
+  email: 'predefined@email.com',
+  card_name: 'Houston'
+});
+```
+<a name="w_HtmlMultiWidget+updateFormValue" id="w_HtmlMultiWidget+updateFormValue" href="#user-content-w_HtmlMultiWidget+updateFormValue">&nbsp;</a>
+
+### htmlWidget.updateFormValue(key, value)
+Updates a single form field values inside the widget by the form field name.
+
+**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
+**Overrides**: [<code>updateFormValue</code>](#user-content-w_HtmlMultiWidget+updateFormValue)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| key | <code>string</code> | The form field name |
+| value | <code>string</code> | The form field value |
+
+**Example**  
+```javascript
+widget.updateFormValue("card_name", "John Doe");
 ```
 <a name="w_HtmlMultiWidget+onFinishInsert" id="w_HtmlMultiWidget+onFinishInsert" href="#user-content-w_HtmlMultiWidget+onFinishInsert">&nbsp;</a>
 
 ### htmlWidget.onFinishInsert(selector, dataType)
-After finish event of widget, data (dataType) will be insert to input (selector)
+Inserts the event data (after finish event) onto the input field associated with the provided CSS selector.
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>onFinishInsert</code>](#user-content-w_HtmlMultiWidget+onFinishInsert)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| selector | <code>string</code> | css selector . [] # |
-| dataType | <code>string</code> | data type of IEventData object. |
+| selector | <code>string</code> | A CSS selector. E.g., ".my-class", "#my-id", or others |
+| dataType | <code>string</code> | The data type of IEventData object. |
 
 <a name="w_HtmlMultiWidget+interceptSubmitForm" id="w_HtmlMultiWidget+interceptSubmitForm" href="#user-content-w_HtmlMultiWidget+interceptSubmitForm">&nbsp;</a>
 
 ### htmlWidget.interceptSubmitForm(selector)
-Widget will intercept submit of your form for processing widget
+Intercepts a form submission and delegates processing to the widget.
 
-Process: click by submit button in your form --> submit widget ---> submit your form
+An simplified example of the process:
+- User clicks submit button in your form
+- This implicitly triggers a submission to the widget
+- The widget submits your form
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>interceptSubmitForm</code>](#user-content-w_HtmlMultiWidget+interceptSubmitForm)  
-**Note**: submit button in widget will be hidden.  
+**Note**: The widget's submit button will be hidden.  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | selector | <code>string</code> | css selector of your form |
 
 **Example**  
-
-```javascript
-<form id="myForm">
+```html
+<body>
+ <form id="myForm">
      <input name="amount">
      <button type="submit">Submit</button>
  </form>
-<!--
--->
-<script>
+ <script>
     widget.interceptSubmitForm('#myForm');
-</script>
+ </script>
+</body>
 ```
 <a name="w_HtmlMultiWidget+useCheckoutAutoSubmit" id="w_HtmlMultiWidget+useCheckoutAutoSubmit" href="#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit">&nbsp;</a>
 
@@ -1026,7 +1043,6 @@ Use this method for resize iFrame according content height
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>useAutoResize</code>](#user-content-w_HtmlMultiWidget+useAutoResize)  
 **Example**  
-
 ```javascript
 widget.useAutoResize();
 ```
@@ -1197,13 +1213,15 @@ widget.setFormPlaceholders({
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### ~~htmlWidget.setIcons()~~
-***Deprecated***
-
+### htmlWidget.setIcons()
 The method to change the widget icons
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>setIcons</code>](#user-content-w_MultiWidget+setIcons)  
+**Todo**
+
+- [ ] DEPRECATED
+
 <a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>
 
 ### htmlWidget.setHiddenElements(elements)
@@ -1331,7 +1349,7 @@ Class HtmlMultiWidget include method for working with html
 * [HtmlMultiWidget](#user-content-w_HtmlMultiWidget) ⇐ [<code>MultiWidget</code>](#user-content-w_MultiWidget)
     * [new HtmlMultiWidget(selector, publicKey, conf)](#user-content-w_new_HtmlMultiWidget_new)
     * [.load()](#user-content-w_HtmlMultiWidget+load)
-    * [.on(eventName, [cb])](#user-content-w_HtmlMultiWidget+on) ⇒ <code>Promise.&lt;(IEventData\|IEventMetaData\|IEventFinishData\|IFormValidation)&gt;</code> \| <code>void</code>
+    * [.afterLoad()](#user-content-w_HtmlMultiWidget+afterLoad)
     * [.trigger(triggers, data)](#user-content-w_HtmlMultiWidget+trigger)
     * [.getValidationState()](#user-content-w_HtmlMultiWidget+getValidationState) ⇒ [<code>IFormValidation</code>](#user-content-w_IFormValidation)
     * [.isValidForm()](#user-content-w_HtmlMultiWidget+isValidForm) ⇒ <code>boolean</code>
@@ -1344,6 +1362,7 @@ Class HtmlMultiWidget include method for working with html
     * [.hideElements(elements)](#user-content-w_HtmlMultiWidget+hideElements)
     * [.showElements(elements)](#user-content-w_HtmlMultiWidget+showElements)
     * [.updateFormValues(fieldValues)](#user-content-w_HtmlMultiWidget+updateFormValues)
+    * [.updateFormValue(key, value)](#user-content-w_HtmlMultiWidget+updateFormValue)
     * [.onFinishInsert(selector, dataType)](#user-content-w_HtmlMultiWidget+onFinishInsert)
     * [.interceptSubmitForm(selector)](#user-content-w_HtmlMultiWidget+interceptSubmitForm)
     * [.useCheckoutAutoSubmit()](#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit)
@@ -1356,7 +1375,7 @@ Class HtmlMultiWidget include method for working with html
     * [.setFormLabels(fieldLabels)](#user-content-w_MultiWidget+setFormLabels)
     * [.setFormPlaceholders(fieldPlaceholders)](#user-content-w_MultiWidget+setFormPlaceholders)
     * [.setFormElements(elements)](#user-content-w_MultiWidget+setFormElements)
-    * ~~[.setIcons()](#user-content-w_MultiWidget+setIcons)~~
+    * [.setIcons()](#user-content-w_MultiWidget+setIcons)
     * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
@@ -1394,58 +1413,47 @@ var widget = new MultiWidget('#widget', 'publicKey',[ With Configurations
 <a name="w_HtmlMultiWidget+load" id="w_HtmlMultiWidget+load" href="#user-content-w_HtmlMultiWidget+load">&nbsp;</a>
 
 ### htmlMultiWidget.load()
-The final method to beginning, the load process of widget to html
-
-**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
-<a name="w_HtmlMultiWidget+on" id="w_HtmlMultiWidget+on" href="#user-content-w_HtmlMultiWidget+on">&nbsp;</a>
+Loads the widget.
 
-### htmlMultiWidget.on(eventName, [cb]) ⇒ <code>Promise.&lt;(IEventData\|IEventMetaData\|IEventFinishData\|IFormValidation)&gt;</code> \| <code>void</code>
-Listen to events of widget
+Calling this method results in an iframe element being inserted and rendered in the DOM.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
+<a name="w_HtmlMultiWidget+afterLoad" id="w_HtmlMultiWidget+afterLoad" href="#user-content-w_HtmlMultiWidget+afterLoad">&nbsp;</a>
 
-| Param | Type | Description |
-| --- | --- | --- |
-| eventName | <code>string</code> | Available event names [EVENT](#user-content-w_EVENT) |
-| [cb] | <code>listener</code> |  |
-
-**Example**  
+### htmlMultiWidget.afterLoad()
+Registers a form validation callback for validation events.
 
-```javascript
-widget.on('form_submit', function (data) {
-     console.log(data);
-});
-// or
- widget.on('form_submit').then(function (data) {
-     console.log(data);
-});
-```
+**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 <a name="w_HtmlMultiWidget+trigger" id="w_HtmlMultiWidget+trigger" href="#user-content-w_HtmlMultiWidget+trigger">&nbsp;</a>
 
 ### htmlMultiWidget.trigger(triggers, data)
-This callback will be called for every trigger
+Registers callback that will be invoked for every trigger.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| triggers | <code>triggerName</code> | submit_form, tab |
-| data | [<code>ITriggerData</code>](#user-content-w_ITriggerData) | which will be sending to widget |
+| triggers | <code>&#x27;submit\_form&#x27;</code> \| <code>&#x27;tab&#x27;</code> | The Widget element identifier that caused the trigger. |
+| data | [<code>ITriggerData</code>](#user-content-w_ITriggerData) | Data that will be sent to the widget when the trigger occurs. |
 
 <a name="w_HtmlMultiWidget+getValidationState" id="w_HtmlMultiWidget+getValidationState" href="#user-content-w_HtmlMultiWidget+getValidationState">&nbsp;</a>
 
 ### htmlMultiWidget.getValidationState() ⇒ [<code>IFormValidation</code>](#user-content-w_IFormValidation)
-Using this method you can get validation state information
+Gets a reference to the form current validation state.
+
+!Warning: do not directly modify the values of the returned object.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 **Returns**: [<code>IFormValidation</code>](#user-content-w_IFormValidation) - Form validation object  
 <a name="w_HtmlMultiWidget+isValidForm" id="w_HtmlMultiWidget+isValidForm" href="#user-content-w_HtmlMultiWidget+isValidForm">&nbsp;</a>
 
 ### htmlMultiWidget.isValidForm() ⇒ <code>boolean</code>
-Using this method you can check if the form is valid
+Checks if a given form is valid.
+
+A form is valid if all form fields are valid.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
-**Returns**: <code>boolean</code> - Form is valid  
+**Returns**: <code>boolean</code> - Indicates wether or not form is valid.  
 <a name="w_HtmlMultiWidget+isInvalidField" id="w_HtmlMultiWidget+isInvalidField" href="#user-content-w_HtmlMultiWidget+isInvalidField">&nbsp;</a>
 
 ### htmlMultiWidget.isInvalidField(field) ⇒ <code>boolean</code>
@@ -1461,85 +1469,89 @@ Using this method you can check if a specific form field is invalid
 <a name="w_HtmlMultiWidget+isFieldErrorShowed" id="w_HtmlMultiWidget+isFieldErrorShowed" href="#user-content-w_HtmlMultiWidget+isFieldErrorShowed">&nbsp;</a>
 
 ### htmlMultiWidget.isFieldErrorShowed(field) ⇒ <code>boolean</code>
-Using this method you can check if an error is displayed on a specific field
+Checks if a given form field is displaying an error.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
-**Returns**: <code>boolean</code> - Error is showed on field  
+**Returns**: <code>boolean</code> - Indicates wether or not the Error message is being displayed on the associated field.  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| field | <code>string</code> | Field name |
+| field | <code>string</code> | The form field name |
 
 <a name="w_HtmlMultiWidget+isInvalidFieldByValidator" id="w_HtmlMultiWidget+isInvalidFieldByValidator" href="#user-content-w_HtmlMultiWidget+isInvalidFieldByValidator">&nbsp;</a>
 
 ### htmlMultiWidget.isInvalidFieldByValidator(field, validator) ⇒ <code>boolean</code>
-Using this method you can check if a specific field is invalid
+Checks if a given form field is valid or invalid by name.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
-**Returns**: <code>boolean</code> - Field is invalid by validator  
+**Returns**: <code>boolean</code> - Indicates wether or not the field is invalid based on validator intepretation.  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| field | <code>string</code> | Field name |
-| validator | <code>string</code> | Validator name. Available validators: `required, cardNumberValidator, expireDateValidation` |
+| field | <code>string</code> | The form field name |
+| validator |  | The name of the validator. |
 
 <a name="w_HtmlMultiWidget+hide" id="w_HtmlMultiWidget+hide" href="#user-content-w_HtmlMultiWidget+hide">&nbsp;</a>
 
 ### htmlMultiWidget.hide([saveSize])
-Using this method you can hide widget after load
+Hides the widget.
+
+E.g., use this method to hide the widget after it loads.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| [saveSize] | <code>boolean</code> | <code>false</code> | using this param you can save iframe's size |
+| [saveSize] | <code>boolean</code> | <code>false</code> | Wether the original iframe element size should be saved before being hidden. |
 
 <a name="w_HtmlMultiWidget+show" id="w_HtmlMultiWidget+show" href="#user-content-w_HtmlMultiWidget+show">&nbsp;</a>
 
 ### htmlMultiWidget.show()
-Using this method you can show widget after using hide method
+Shows the widget.
+
+E.g., use this method to show the widget after it was explicitly hidden.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 <a name="w_HtmlMultiWidget+reload" id="w_HtmlMultiWidget+reload" href="#user-content-w_HtmlMultiWidget+reload">&nbsp;</a>
 
 ### htmlMultiWidget.reload()
-Using this method you can reload widget
+Reloads the widget.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 <a name="w_HtmlMultiWidget+hideElements" id="w_HtmlMultiWidget+hideElements" href="#user-content-w_HtmlMultiWidget+hideElements">&nbsp;</a>
 
 ### htmlMultiWidget.hideElements(elements)
-Using this method you can hide any elements inside widget
+Hides the specified Widget elements by their identifier.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| elements | <code>Array.&lt;string&gt;</code> | list of element which can be hidden [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) |
+| elements | <code>Array.&lt;string&gt;</code> | List of element which can be hidden [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) |
 
 **Example**  
-
 ```javascript
 widget.hideElements(['submit_button', 'email']);
 ```
 <a name="w_HtmlMultiWidget+showElements" id="w_HtmlMultiWidget+showElements" href="#user-content-w_HtmlMultiWidget+showElements">&nbsp;</a>
 
 ### htmlMultiWidget.showElements(elements)
-Using this method you can show any elements inside widget
-
-* @example
-widget.showElements(['submit_button', 'email']);
+Shows the specified Widget elements by their identifier.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| elements | <code>Array.&lt;string&gt;</code> | list of element which can be showed [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) |
+| elements | <code>Array.&lt;string&gt;</code> | List of elements which can be showed [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) |
 
+**Example**  
+```javascript
+widget.showElements(['submit_button', 'email']);
+```
 <a name="w_HtmlMultiWidget+updateFormValues" id="w_HtmlMultiWidget+updateFormValues" href="#user-content-w_HtmlMultiWidget+updateFormValues">&nbsp;</a>
 
 ### htmlMultiWidget.updateFormValues(fieldValues)
-Method for update values for form fields inside the widget
+Updates the form field values inside the widget.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 
@@ -1548,51 +1560,68 @@ Method for update values for form fields inside the widget
 | fieldValues | <code>IFormValues</code> | Fields with values |
 
 **Example**  
-
 ```javascript
 widget.updateFormValues({
-      email: 'predefined@email.com',
-      card_name: 'Houston'
-  });
+  email: 'predefined@email.com',
+  card_name: 'Houston'
+});
+```
+<a name="w_HtmlMultiWidget+updateFormValue" id="w_HtmlMultiWidget+updateFormValue" href="#user-content-w_HtmlMultiWidget+updateFormValue">&nbsp;</a>
+
+### htmlMultiWidget.updateFormValue(key, value)
+Updates a single form field values inside the widget by the form field name.
+
+**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| key | <code>string</code> | The form field name |
+| value | <code>string</code> | The form field value |
+
+**Example**  
+```javascript
+widget.updateFormValue("card_name", "John Doe");
 ```
 <a name="w_HtmlMultiWidget+onFinishInsert" id="w_HtmlMultiWidget+onFinishInsert" href="#user-content-w_HtmlMultiWidget+onFinishInsert">&nbsp;</a>
 
 ### htmlMultiWidget.onFinishInsert(selector, dataType)
-After finish event of widget, data (dataType) will be insert to input (selector)
+Inserts the event data (after finish event) onto the input field associated with the provided CSS selector.
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| selector | <code>string</code> | css selector . [] # |
-| dataType | <code>string</code> | data type of IEventData object. |
+| selector | <code>string</code> | A CSS selector. E.g., ".my-class", "#my-id", or others |
+| dataType | <code>string</code> | The data type of IEventData object. |
 
 <a name="w_HtmlMultiWidget+interceptSubmitForm" id="w_HtmlMultiWidget+interceptSubmitForm" href="#user-content-w_HtmlMultiWidget+interceptSubmitForm">&nbsp;</a>
 
 ### htmlMultiWidget.interceptSubmitForm(selector)
-Widget will intercept submit of your form for processing widget
+Intercepts a form submission and delegates processing to the widget.
 
-Process: click by submit button in your form --> submit widget ---> submit your form
+An simplified example of the process:
+- User clicks submit button in your form
+- This implicitly triggers a submission to the widget
+- The widget submits your form
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
-**Note**: submit button in widget will be hidden.  
+**Note**: The widget's submit button will be hidden.  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | selector | <code>string</code> | css selector of your form |
 
 **Example**  
-
-```javascript
-<form id="myForm">
+```html
+<body>
+ <form id="myForm">
      <input name="amount">
      <button type="submit">Submit</button>
  </form>
-<!--
--->
-<script>
+ <script>
     widget.interceptSubmitForm('#myForm');
-</script>
+ </script>
+</body>
 ```
 <a name="w_HtmlMultiWidget+useCheckoutAutoSubmit" id="w_HtmlMultiWidget+useCheckoutAutoSubmit" href="#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit">&nbsp;</a>
 
@@ -1607,7 +1636,6 @@ Use this method for resize iFrame according content height
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 **Example**  
-
 ```javascript
 widget.useAutoResize();
 ```
@@ -1813,13 +1841,15 @@ widget.setFormElements([
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### ~~htmlMultiWidget.setIcons()~~
-***Deprecated***
-
+### htmlMultiWidget.setIcons()
 The method to change the widget icons
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 **Overrides**: [<code>setIcons</code>](#user-content-w_MultiWidget+setIcons)  
+**Todo**
+
+- [ ] DEPRECATED
+
 <a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>
 
 ### htmlMultiWidget.setHiddenElements(elements)
@@ -2132,7 +2162,7 @@ Class MultiWidget include method for for creating iframe url
     * [.setFormLabels(fieldLabels)](#user-content-w_MultiWidget+setFormLabels)
     * [.setFormPlaceholders(fieldPlaceholders)](#user-content-w_MultiWidget+setFormPlaceholders)
     * [.setFormElements(elements)](#user-content-w_MultiWidget+setFormElements)
-    * ~~[.setIcons()](#user-content-w_MultiWidget+setIcons)~~
+    * [.setIcons()](#user-content-w_MultiWidget+setIcons)
     * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
@@ -2358,12 +2388,14 @@ widget.setFormElements([
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### ~~multiWidget.setIcons()~~
-***Deprecated***
-
+### multiWidget.setIcons()
 The method to change the widget icons
 
 **Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  
+**Todo**
+
+- [ ] DEPRECATED
+
 <a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>
 
 ### multiWidget.setHiddenElements(elements)
@@ -2660,6 +2692,32 @@ Current constant include available states of element for styling
 | FOCUS | <code>string</code> | <code>&quot;focus&quot;</code> | focus. This state applies to: input |
 | HOVER | <code>string</code> | <code>&quot;hover&quot;</code> | focus. This state applies to: submit_button |
 
+<a name="w_CARD_VALIDATORS" id="w_CARD_VALIDATORS" href="#user-content-w_CARD_VALIDATORS">&nbsp;</a>
+
+## CARD\_VALIDATORS : <code>Record.&lt;string, string&gt;</code>
+List of available form field validators dedicated to cards and their definition
+
+**Kind**: global constant  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| CVV | <code>string</code> | <code>&quot;cardCvvValidation&quot;</code> | Asserts that CVV contains zero or more digits and is a number |
+| EXPIRY_DATE | <code>string</code> | <code>&quot;expireDateValidation&quot;</code> | Asserts value is a date in the future with format MM/YY |
+| HOLDER_NAME | <code>string</code> | <code>&quot;cardHoldernameValidation&quot;</code> | Asserts value is a name that respects the ITU-T T.50 standard (@see https://www.itu.int/rec/T-REC-T.50/en) |
+| NUMBER | <code>string</code> | <code>&quot;cardNumberValidation&quot;</code> | Asserts the value matches a known card scheme and as a the correct length.     E.g., matches a 13, 16 or 19 digit bank card, **or**, a 13 to 25 digit Vii Gift card |
+| PIN | <code>string</code> | <code>&quot;cardPinValidation&quot;</code> | Asserts the value is a number with exactly 4 digits |
+
+<a name="w_GENERIC_VALIDATORS" id="w_GENERIC_VALIDATORS" href="#user-content-w_GENERIC_VALIDATORS">&nbsp;</a>
+
+## GENERIC\_VALIDATORS : <code>Record.&lt;string, string&gt;</code>
+List of available generic form field validators and their definition
+
+**Kind**: global constant  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| REQUIRED | <code>string</code> | <code>&quot;required&quot;</code> | Asserts the input or form field has a value defined truthy value |
+
 <a name="w_TRIGGER" id="w_TRIGGER" href="#user-content-w_TRIGGER">&nbsp;</a>
 
 ## TRIGGER : <code>object</code>
@@ -2707,10 +2765,10 @@ var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken
 list.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { HtmlPaymentSourceWidget } from '@paydock/client-sdk';
+import { HtmlPaymentSourceWidget } from '@paydock/client-sdk/payment-source-widget';
 
 var list = new HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
 list.load();
@@ -2916,10 +2974,10 @@ Interface of data from event.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| event | <code>string</code> | Event name |
-| purpose | <code>string</code> | System variable. Purpose of event |
-| message_source | <code>string</code> | System variable. Event source |
-| [ref_id] | <code>string</code> | Custom value for identify result of processed operation |
+| event | <code>string</code> | The name of the event. |
+| purpose | <code>string</code> | A system variable that states the purpose of the event. |
+| message_source | <code>string</code> | A system variable that identifies the event source. |
+| [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. |
 | total_item | <code>number</code> | Pagination param. Total item count |
 | skip | <code>number</code> | Pagination param. Skip items from first item |
 | limit | <code>number</code> | Pagination param. Query limit |
@@ -2933,10 +2991,10 @@ Interface of data from event.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| event | <code>string</code> | Event name |
-| purpose | <code>string</code> | System variable. Purpose of event |
-| message_source | <code>string</code> | System variable. Event source |
-| [ref_id] | <code>string</code> | Custom value for identify result of processed operation |
+| event | <code>string</code> | The name of the event. |
+| purpose | <code>string</code> | A system variable that states the purpose of the event. |
+| message_source | <code>string</code> | A system variable that identifies the event source. |
+| [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. |
 
 <a name="psw_IEventSizeData" id="psw_IEventSizeData" href="#user-content-psw_IEventSizeData">&nbsp;</a>
 
@@ -2947,10 +3005,10 @@ Interface of data from event.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| event | <code>number</code> | Event name |
-| purpose | <code>number</code> | System variable. Purpose of event |
-| message_source | <code>string</code> | System variable. Event source |
-| [ref_id] | <code>string</code> | Custom value for identify result of processed operation |
+| event | <code>number</code> | The name of the event. |
+| purpose | <code>number</code> | A system variable that states the purpose of the event. |
+| message_source | <code>string</code> | A system variable that identifies the event source. |
+| [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. |
 | height | <code>number</code> | Height of iFrame |
 | width | <code>number</code> | Width of iFrame |
 
@@ -3423,7 +3481,7 @@ You must create a button to turn it into checkout-button
 var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
 
@@ -4566,11 +4624,11 @@ This wrapper helps you to work with paydock api emdpoints
 var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { Api } from '@paydock/client-sdk';
-
+import { Api } from '@paydock/client-sdk/api';
+    
 var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
 ```
 
@@ -4583,11 +4641,11 @@ var response = await new paydock.Api('publicKey').setEnv('env').charge().preAuth
     });
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { Api } from '@paydock/client-sdk';
-
+import { Api } from '@paydock/client-sdk/api';
+    
 var response = await new Api('publicKey').setEnv('env').charge().preAuth({
       amount: 100,
       currency: 'AUD',
@@ -4597,7 +4655,7 @@ var response = await new Api('publicKey').setEnv('env').charge().preAuth({
 
 Then write only need 2 lines of code in js to make request
 
-### Initialization full example
+### Initialization full example 
 
 ```html
 <!DOCTYPE html>
@@ -4644,10 +4702,10 @@ var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
 canvas3ds.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { Canvas3ds } from '@paydock/client-sdk';
+import { Canvas3ds } from '@paydock/client-sdk/canvas3ds';
 
 var list = new Canvas3ds('#widget', 'token');
 list.load();
@@ -4868,7 +4926,7 @@ After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds`
 ## Vault Display Widget
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#vault-display-widget)
 
-The vault display form allows viewing card number and CVV. The form can be customised according to your needs.
+The vault display form allows viewing card number and CVV. The form can be customised according to your needs. 
 You can set styles as well as subscribe to widget events that help monitor user’s actions in real time.
 
 ## Vault Display Widget simple example
@@ -4888,18 +4946,18 @@ var widget = new paydock.VaultDisplayWidget('#widget', 'token');
 widget.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { VaultDisplayWidget } from '@paydock/client-sdk';
-
+import { VaultDisplayWidget } from '@paydock/client-sdk/vault-display-widget';
+    
 var widget = new VaultDisplayWidget('#widget', 'token');
 widget.load();
 ```
 
 Then write only need 2 lines of code in js to initialize widget
 
-### Full example
+### Full example 
 
 ```html
 <!DOCTYPE html>
@@ -4910,9 +4968,9 @@ Then write only need 2 lines of code in js to initialize widget
     <style>iframe {border: 0;width: 100%;height: 300px;}</style>
 </head>
 <body>
-
+        
     <div id="widget"></div>
-
+   
     <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
         var widget = new paydock.VaultDisplayWidget('#widget', 'token');
@@ -4950,9 +5008,9 @@ widget.setStyles({
 });
 ```
 
-This example shows how you can use a lot of other methods to settings your form
+This example shows how you can use a lot of other methods to settings your form 
 
-### Full example
+### Full example 
 
 ```html
 <!DOCTYPE html>
@@ -4963,27 +5021,27 @@ This example shows how you can use a lot of other methods to settings your form
     <style>iframe {border: 0;width: 40%;height: 450px;}</style>
 </head>
 <body>
-
+        
     <div id="widget"></div>
-
+   
     <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
         var widget = new paydock.VaultDisplayWidget('#widget', 'token');
 
         widget.setEnv('sandbox');
-
+        
         widget.on('after_load', function (data) {
           console.log(data);
         });
-
+        
         widget.on('cvv_secure_code_requested', function (data) {
           console.log(data);
         });
-
+        
         widget.on('card_number_secure_code_requested', function (data) {
           console.log(data);
         });
-
+        
         widget.setStyles({
             background_color: 'rgb(0, 0, 0)',
             border_color: 'yellow',
@@ -5127,7 +5185,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -5152,7 +5210,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -5176,7 +5234,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -5245,6 +5303,14 @@ In some situations you may want to forcibly close the checkout so that your user
 button.close();
 ```
 
+### Performing actions when the wallet button is clicked
+
+In some situations you may want to perform some validations or actions when the user clicks on the wallet button, for which you can use this method. Currently supported by Paypal, ApplePay and GooglePay wallets.
+
+```javascript
+button.onClick(() => console.log("Perform actions on button click"));
+```
+
 ### Performing actions when shipping info is updated
 
 In Flypay, Paypal, ApplePay via MPGS and GooglePay via MPGS integrations after each shipping info update the `onUpdate(data)` will be called with the selected shipping address information, plus selected shipping method when applicable for Paypal, ApplePay and GooglePay. Merchants should handle this callback, recalculate shipping costs in their server by analyzing the new data, and submit a backend to backend request to `POST charges/:id` with the new total amount and shipping amount (you can find the documentation of this call in the PayDock API documentation).
@@ -5372,30 +5438,51 @@ _(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_l
 <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
 <script>
     let button = new paydock.WalletButtons(
-          "#widget",
-          charge_token,
-          {
-               request_shipping: true,
-               pay_later: true,
-               standalone: false,
-               style: {
-                    layout: 'horizontal',
-                    color: 'blue',
-                    shape: 'rect',
-                    label: 'paypal',
-               },
-          }
-     );
+        "#widget",
+        charge_token,
+        {
+            request_shipping: true,
+            pay_later: true,
+            standalone: false,
+            style: {
+                layout: 'horizontal',
+                color: 'blue',
+                shape: 'rect',
+                label: 'paypal',
+            },
+        }
+    );
     button.setEnv('sandbox');
     button.onUnavailable(() => console.log("No wallet buttons available"));
     button.onUpdate((data) => {
-          console.log("Updating amount via a backend to backend call to POST charges/:id");
-          // call `POST charges/:id` to modify charge
-          button.update({ success: true });
-     });
+        console.log("Updating amount via a backend to backend call to POST charges/:id");
+        // call `POST charges/:id` to modify charge
+        button.update({ success: true });
+    });
     button.onPaymentSuccessful((data) => console.log("The payment was successful"));
     button.onPaymentError((data) => console.log("The payment was not successful"));
     button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
+
+    // Example 1: Asynchronous onClick handler
+    const asyncLogic = async () => {
+        // Perform asynchronous logic. Expectation is that a Promise is returned and attached to response via `attachResult`,
+        // and resolve or reject of it will dictate how wallet behaves.
+    }
+
+    button.onClick(({ data: { attachResult } }) => {
+        // Promise is attached to the result. On Paypal, when promise is resolved, the user Journey will continue.
+        // If no promise is attached then the Paypal journey will not depend on the promise being resolved or rejected
+        attachResult(asyncLogic());
+    });
+
+    // Example 2: Synchronous onClick handler
+    // button.onClick(({ data: { attachResult } }) => {
+    //     // Perform synchronous logic
+    //     console.log("Synchronous onClick: Button clicked");
+    //     // Optionally return a boolean flag to halt the operation
+    //     attachResult(false);
+    // });
+
     button.load();
 </script>
 </html>
@@ -5529,6 +5616,7 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `ra
     button.onUnavailable(() => console.log("No wallet buttons available"));
     button.onPaymentSuccessful((data) => console.log("The payment was successful"));
     button.onPaymentError((data) => console.log("The payment was not successful"));
+    button.onClick(() => console.log("On WalletButton Click"));
     button.onUpdate((data) => {
         console.log("Updating amount via a backend to backend call to POST charges/:id");
         // call `POST charges/:id` to modify charge
@@ -5561,7 +5649,6 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `ra
 Also, for **ApplePay via MPGS** you can initialize the `ApplePayPaymentRequest` with your own values instead of using the default ones. Below you can see an example on how to initialize the `ApplePayPaymentRequest` with the `raw_data_initialization` meta field.
 
 Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpecification` with your own values instead of using the default ones. Below you can see an example on how to initialize the `PaymentMethodSpecification` with the `raw_data_initialization` meta field.
-
 ### ApplePay and GooglePay via MPGS Raw data initialization example
 
 ```html
@@ -5693,6 +5780,24 @@ Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpeci
 ## Interfaces
 
 <dl>
+<dt><a href="#IEventData">IEventData</a></dt>
+<dd><p>Interface of data from events.</p>
+</dd>
+<dt><a href="#IWalletPaymentSuccessful">IWalletPaymentSuccessful</a></dt>
+<dd><p>Interface of data from a successful payment result.</p>
+</dd>
+<dt><a href="#IWalletUpdate">IWalletUpdate</a></dt>
+<dd><p>Interface of data from an update event.</p>
+</dd>
+<dt><a href="#IWalletOnClick">IWalletOnClick</a></dt>
+<dd><p>Interface of data from a wallet onClick event.</p>
+</dd>
+<dt><a href="#IWalletUnavailable">IWalletUnavailable</a></dt>
+<dd><p>Interface of data from an unavailable event.</p>
+</dd>
+<dt><a href="#IWalletUpdateData">IWalletUpdateData</a></dt>
+<dd><p>Interface of data for wallet button <code>update</code> call.</p>
+</dd>
 <dt><a href="#IWalletMeta">IWalletMeta</a> : <code>object</code></dt>
 <dd><p>Interface of data used by the wallet checkout and payment proccess.</p>
 </dd>
@@ -5707,6 +5812,100 @@ Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpeci
 </dd>
 </dl>
 
+<a name="IEventData" id="IEventData" href="#IEventData">&nbsp;</a>
+
+## IEventData
+Interface of data from events.
+
+**Kind**: global interface  
+
+| Param | Type |
+| --- | --- |
+| event | <code>string</code> | 
+| data | <code>void</code> \| [<code>IWalletPaymentSuccessful</code>](#IWalletPaymentSuccessful) \| [<code>IWalletUpdate</code>](#IWalletUpdate) \| [<code>IWalletUnavailable</code>](#IWalletUnavailable) \| [<code>IWalletOnClick</code>](#IWalletOnClick) \| <code>any</code> | 
+
+<a name="IWalletPaymentSuccessful" id="IWalletPaymentSuccessful" href="#IWalletPaymentSuccessful">&nbsp;</a>
+
+## IWalletPaymentSuccessful
+Interface of data from a successful payment result.
+
+**Kind**: global interface  
+
+| Param | Type |
+| --- | --- |
+| id | <code>string</code> | 
+| amount | <code>number</code> | 
+| currency | <code>string</code> | 
+| status | <code>string</code> | 
+| [payer_name] | <code>string</code> | 
+| [payer_email] | <code>string</code> | 
+| [payer_phone] | <code>string</code> | 
+
+<a name="IWalletUpdate" id="IWalletUpdate" href="#IWalletUpdate">&nbsp;</a>
+
+## IWalletUpdate
+Interface of data from an update event.
+
+**Kind**: global interface  
+
+| Param | Type |
+| --- | --- |
+| [wallet_response_code] | <code>string</code> | 
+| [wallet_session_id] | <code>string</code> | 
+| [payment_source] | <code>object</code> | 
+| [payment_source.wallet_payment_method_id] | <code>string</code> | 
+| [payment_source.card_number_last4] | <code>string</code> | 
+| [payment_source.card_scheme] | <code>string</code> | 
+| [wallet_loyalty_account] | <code>object</code> | 
+| [wallet_loyalty_account.id] | <code>string</code> | 
+| [wallet_loyalty_account.barcode] | <code>string</code> | 
+| [shipping] | <code>object</code> | 
+| [shipping.address_line1] | <code>string</code> | 
+| [shipping.address_line2] | <code>string</code> | 
+| [shipping.address_postcode] | <code>string</code> | 
+| [shipping.address_city] | <code>string</code> | 
+| [shipping.address_state] | <code>string</code> | 
+| [shipping.address_country] | <code>string</code> | 
+| [shipping.address_company] | <code>string</code> | 
+| [shipping.post_office_box_number] | <code>string</code> | 
+| [shipping.wallet_address_id] | <code>string</code> | 
+| [shipping.wallet_address_name] | <code>string</code> | 
+| [shipping.wallet_address_created_timestamp] | <code>string</code> | 
+| [shipping.wallet_address_updated_timestamp] | <code>string</code> | 
+
+<a name="IWalletOnClick" id="IWalletOnClick" href="#IWalletOnClick">&nbsp;</a>
+
+## IWalletOnClick
+Interface of data from a wallet onClick event.
+
+**Kind**: global interface  
+
+| Param | Description |
+| --- | --- |
+| attachResult | Method to be called that attaches a result to the wallet onClick operation. When handler is synchronous, this method is optionally called with a boolean flag indicating validation result. When handler executes asynchronous operations, this method must be called with the Promise to have the wallet process wait for its completion or rejection. |
+
+<a name="IWalletUnavailable" id="IWalletUnavailable" href="#IWalletUnavailable">&nbsp;</a>
+
+## IWalletUnavailable
+Interface of data from an unavailable event.
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [wallet] | <code>string</code> | For gateways with more than one wallet button available (e.g: MPGS with ApplePay and GooglePay). Possible values for wallet are 'apple' or 'google'. |
+
+<a name="IWalletUpdateData" id="IWalletUpdateData" href="#IWalletUpdateData">&nbsp;</a>
+
+## IWalletUpdateData
+Interface of data for wallet button `update` call.
+
+**Kind**: global interface  
+
+| Param | Type |
+| --- | --- |
+| success | <code>boolean</code> | 
+
 <a name="IWalletMeta" id="IWalletMeta" href="#IWalletMeta">&nbsp;</a>
 
 ## IWalletMeta : <code>object</code>
@@ -5791,14 +5990,19 @@ Class WalletButtons to work with different E-Wallets within html (currently supp
     * [.load()](#WalletButtons+load)
     * [.update()](#WalletButtons+update)
     * [.setEnv(env, [alias])](#WalletButtons+setEnv)
+    * [.enable()](#WalletButtons+enable)
+    * [.disable()](#WalletButtons+disable)
     * [.close()](#WalletButtons+close)
-    * [.on(eventName, [cb])](#WalletButtons+on) ⇒ <code>Promise.&lt;IEventData&gt;</code> \| <code>void</code>
+    * [.on(eventName, [cb])](#WalletButtons+on) ⇒ [<code>Promise.&lt;IEventData&gt;</code>](#IEventData) \| <code>void</code>
     * [.onUnavailable([handler])](#WalletButtons+onUnavailable)
     * [.onUpdate([handler])](#WalletButtons+onUpdate)
     * [.onPaymentSuccessful([handler])](#WalletButtons+onPaymentSuccessful)
     * [.onPaymentInReview([handler])](#WalletButtons+onPaymentInReview)
     * [.onPaymentError([handler])](#WalletButtons+onPaymentError)
     * [.onAuthTokensChanged([handler])](#WalletButtons+onAuthTokensChanged)
+    * [.onClick(handler)](#WalletButtons+onClick)
+    * [.onCheckoutOpen(handler)](#WalletButtons+onCheckoutOpen)
+    * [.onCheckoutClose(handler)](#WalletButtons+onCheckoutClose)
 
 <a name="new_WalletButtons_new" id="new_WalletButtons_new" href="#new_WalletButtons_new">&nbsp;</a>
 
@@ -5909,6 +6113,26 @@ Bear in mind that you must set an environment before calling `button.load()`.
 ```js
 button.setEnv('production', 'paydock.com');
 ```
+<a name="WalletButtons+enable" id="WalletButtons+enable" href="#WalletButtons+enable">&nbsp;</a>
+
+### walletButtons.enable()
+Current method can enable the payment button. This method is only supported for Flypay V2.
+
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
+**Example**  
+```js
+button.enable();
+```
+<a name="WalletButtons+disable" id="WalletButtons+disable" href="#WalletButtons+disable">&nbsp;</a>
+
+### walletButtons.disable()
+Current method can disable the payment button. This method is only supported for Flypay V2.
+
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
+**Example**  
+```js
+button.disable('production', 'paydock.com');
+```
 <a name="WalletButtons+close" id="WalletButtons+close" href="#WalletButtons+close">&nbsp;</a>
 
 ### walletButtons.close()
@@ -5921,7 +6145,7 @@ button.close();
 ```
 <a name="WalletButtons+on" id="WalletButtons+on" href="#WalletButtons+on">&nbsp;</a>
 
-### walletButtons.on(eventName, [cb]) ⇒ <code>Promise.&lt;IEventData&gt;</code> \| <code>void</code>
+### walletButtons.on(eventName, [cb]) ⇒ [<code>Promise.&lt;IEventData&gt;</code>](#IEventData) \| <code>void</code>
 Listen to events of button. `unavailable` returns no data, `paymentSuccessful` returns IWalletPaymentSuccessful
 for Stripe or full response for Flypay, and `paymentError` an error.
 
@@ -6084,6 +6308,63 @@ button.onAuthTokensChanged().then((eventData) => {
     console.log('Authentication tokens changed:', eventData);
 });
 ```
+<a name="WalletButtons+onClick" id="WalletButtons+onClick" href="#WalletButtons+onClick">&nbsp;</a>
+
+### walletButtons.onClick(handler)
+Registers a callback function to be invoked when the wallet button gets clicked.
+There are two operational modes supported, Synchronous and Asynchronous.
+When asynchronous operations need to occur on the callback handler, attaching the Promise via `attachResult` is required to have the wallet wait for a result.
+When synchronous operations occur on the callback handler, attaching a boolean result via `attachResult` is optional to control the execution flow.
+Note this is supported for Paypal, GooglePay and ApplePay wallet buttons at the moment.
+
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | <code>listener</code> | Function to be called when the wallet button is clicked. |
+
+**Example**  
+```js
+button.onClick((data) => {
+     performValidationLogic();
+});
+```
+<a name="WalletButtons+onCheckoutOpen" id="WalletButtons+onCheckoutOpen" href="#WalletButtons+onCheckoutOpen">&nbsp;</a>
+
+### walletButtons.onCheckoutOpen(handler)
+Registers a callback function to be invoked when the wallet checkout opens.
+Note this is supported for FlypayV2 wallet button at the moment.
+
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | <code>listener</code> | Function to be called when the wallet checkout opens. |
+
+**Example**  
+```js
+button.onCheckoutOpen((data) => {
+     console.log('Checkout opens');
+});
+```
+<a name="WalletButtons+onCheckoutClose" id="WalletButtons+onCheckoutClose" href="#WalletButtons+onCheckoutClose">&nbsp;</a>
+
+### walletButtons.onCheckoutClose(handler)
+Registers a callback function to be invoked when the wallet checkout closes.
+Note this is supported for FlypayV2 wallet button at the moment.
+
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | <code>listener</code> | Function to be called when the wallet checkout closes. |
+
+**Example**  
+```js
+button.onCheckoutClose(() => {
+     console.log('Wallet checkout closes');
+});
+```
 <a name="EVENT" id="EVENT" href="#EVENT">&nbsp;</a>
 
 ## EVENT : <code>object</code>
@@ -6097,6 +6378,7 @@ List of available event's name in the wallet button lifecycle
 | UPDATE | <code>string</code> | <code>&quot;update&quot;</code> | 
 | PAYMENT_SUCCESSFUL | <code>string</code> | <code>&quot;paymentSuccessful&quot;</code> | 
 | PAYMENT_ERROR | <code>string</code> | <code>&quot;paymentError&quot;</code> | 
+| ON_CLICK | <code>string</code> | <code>&quot;onClick&quot;</code> | 
 
 
 ## Secure Remote Commerce
@@ -6128,7 +6410,7 @@ var src = new paydock.SRC(
 src.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
 import { SRC } from '@paydock/client-sdk';