## Classes

<dl>
<dt><a href="#user-content-w_HtmlWidget">HtmlWidget</a> ⇐ <code><a href="#user-content-w_HtmlMultiWidget">HtmlMultiWidget</a></code></dt>
<dd><p>Class Widget include method for working on html and include extended by HtmlMultiWidget methods</p>
</dd>
<dt><a href="#user-content-w_HtmlMultiWidget">HtmlMultiWidget</a> ⇐ <code><a href="#user-content-w_MultiWidget">MultiWidget</a></code></dt>
<dd><p>Class HtmlMultiWidget include method for working with html</p>
</dd>
<dt><a href="#user-content-w_Configuration">Configuration</a></dt>
<dd><p>Class Configuration include methods for creating configuration token</p>
</dd>
<dt><a href="#user-content-w_MultiWidget">MultiWidget</a></dt>
<dd><p>Class MultiWidget include method for for creating iframe url</p>
</dd>
</dl>

## Members

<dl>
<dt><a href="#user-content-w_PURPOSE">PURPOSE</a> : <code>object</code></dt>
<dd><p>Purposes</p>
</dd>
</dl>

## Constants

<dl>
<dt><a href="#user-content-w_EVENT">EVENT</a> : <code>object</code></dt>
<dd><p>List of available event&#39;s name</p>
</dd>
<dt><a href="#user-content-w_VAULT_DISPLAY_EVENT">VAULT_DISPLAY_EVENT</a> : <code>object</code></dt>
<dd><p>List of available event&#39;s name</p>
</dd>
<dt><a href="#user-content-w_PAYMENT_TYPE">PAYMENT_TYPE</a> : <code>object</code></dt>
<dd><p>List of available payment source types</p>
</dd>
<dt><a href="#user-content-w_FORM_FIELD">FORM_FIELD</a> : <code>object</code></dt>
<dd><p>Current constant include available type of fields which can be included to widget</p>
</dd>
<dt><a href="#user-content-w_STYLE">STYLE</a> : <code>object</code></dt>
<dd><p>List of available style params for widget</p>
</dd>
<dt><a href="#user-content-w_TEXT">TEXT</a> : <code>object</code></dt>
<dd><p>List of available text item params for widget</p>
</dd>
<dt><a href="#user-content-w_ELEMENT">ELEMENT</a> : <code>object</code></dt>
<dd><p>List of available params for hide elements</p>
</dd>
<dt><a href="#user-content-w_SUPPORTED_CARD_TYPES">SUPPORTED_CARD_TYPES</a> : <code>object</code></dt>
<dd><p>The list of available parameters for showing card icons</p>
</dd>
<dt><a href="#user-content-w_STYLABLE_ELEMENT">STYLABLE_ELEMENT</a> : <code>object</code></dt>
<dd><p>Current constant include available type of element for styling</p>
</dd>
<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>
</dl>

## Interfaces

<dl>
<dt><a href="#user-content-w_IFormValidation">IFormValidation</a></dt>
<dd><p>Interface of data from validation event.</p>
</dd>
<dt><a href="#user-content-w_IEventMetaData">IEventMetaData</a></dt>
<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>
</dd>
<dt><a href="#user-content-w_IEventFinishData">IEventFinishData</a></dt>
<dd><p>Interface of data from event.</p>
</dd>
<dt><a href="#user-content-w_IPayPalMeta">IPayPalMeta</a></dt>
<dd><p>Interface for PayPal checkout meta information</p>
</dd>
<dt><a href="#user-content-w_IStyles">IStyles</a></dt>
<dd><p>Interface for classes that represent widget&#39;s styles.</p>
</dd>
<dt><a href="#user-content-w_ITexts">ITexts</a></dt>
<dd><p>Interface for classes that represent widget&#39;s text.</p>
</dd>
<dt><a href="#user-content-w_IBamboraMeta">IBamboraMeta</a></dt>
<dd><p>Interface for Bamboora meta information</p>
</dd>
<dt><a href="#user-content-w_IElementStyleInput">IElementStyleInput</a></dt>
<dd><p>Interface for styling input element.</p>
</dd>
<dt><a href="#user-content-w_IElementStyleSubmitButton">IElementStyleSubmitButton</a></dt>
<dd><p>Interface for styling submit_button element.</p>
</dd>
<dt><a href="#user-content-w_IElementStyleLabel">IElementStyleLabel</a></dt>
<dd><p>Interface for styling label element.</p>
</dd>
<dt><a href="#user-content-w_IElementStyleTitle">IElementStyleTitle</a></dt>
<dd><p>Interface for styling title element.</p>
</dd>
<dt><a href="#user-content-w_IElementStyleTitleDescription">IElementStyleTitleDescription</a></dt>
<dd><p>Interface for styling title_description element.</p>
</dd>
<dt><a href="#user-content-w_ITriggerData">ITriggerData</a></dt>
<dd><p>Interface for classes that represent a trigger data.</p>
</dd>
</dl>

<a name="w_IFormValidation" id="w_IFormValidation" href="#user-content-w_IFormValidation">&nbsp;</a>

## IFormValidation
Interface of data from validation event.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| 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
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> | 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, 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 |

<a name="w_IEventAfterLoadData" id="w_IEventAfterLoadData" href="#user-content-w_IEventAfterLoadData">&nbsp;</a>

## IEventAfterLoadData
Interface of data from event.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| 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>

## IEventFinishData
Interface of data from event.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| 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>

## IPayPalMeta
Interface for PayPal checkout meta information

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [brand_name] | <code>string</code> | A label that overrides the business name in the PayPal account on the PayPal hosted checkout pages |
| [cart_border_color] | <code>string</code> | The HTML hex code for your principal identifying color |
| [reference] | <code>string</code> | Merchant Customer Service number displayed on the PayPal pages |
| [email] | <code>string</code> | The consumer’s email |
| [hdr_img] | <code>string</code> | URL for the image you want to appear at the top left of the payment page |
| [logo_img] | <code>string</code> | A URL to your logo image |
| [pay_flow_color] | <code>string</code> | Sets the background color for the payment page. By default, the color is white. |
| [first_name] | <code>string</code> | The consumer’s given names |
| [last_name] | <code>string</code> | The consumer’s surname |
| [address_line] | <code>string</code> | Street address |
| [address_line2] | <code>string</code> | Second line of the address |
| [address_city] | <code>string</code> | City |
| [address_state] | <code>string</code> | State |
| [address_postcode] | <code>string</code> | Postcode |
| [address_country] | <code>string</code> | Country |
| [phone] | <code>string</code> | The consumer’s phone number in E.164 international notation (Example: +12345678901) |
| [hide_shipping_address] | <code>boolean</code> | Determines whether PayPal displays shipping address fields on the PayPal pages |

<a name="w_IStyles" id="w_IStyles" href="#user-content-w_IStyles">&nbsp;</a>

## IStyles
Interface for classes that represent widget's styles.

**Kind**: global interface  

| Param | Type |
| --- | --- |
| [background_color] | <code>string</code> | 
| [text_color] | <code>string</code> | 
| [border_color] | <code>string</code> | 
| [button_color] | <code>string</code> | 
| [error_color] | <code>string</code> | 
| [success_color] | <code>string</code> | 
| [font_size] | <code>string</code> | 
| [font_family] | <code>string</code> | 

<a name="w_ITexts" id="w_ITexts" href="#user-content-w_ITexts">&nbsp;</a>

## ITexts
Interface for classes that represent widget's text.

**Kind**: global interface  

| Param | Type |
| --- | --- |
| [title] | <code>string</code> | 
| [title_h1] | <code>string</code> | 
| [title_h2] | <code>string</code> | 
| [title_h3] | <code>string</code> | 
| [title_h4] | <code>string</code> | 
| [title_h5] | <code>string</code> | 
| [title_h6] | <code>string</code> | 
| [finish_text] | <code>string</code> | 
| [title_description] | <code>string</code> | 
| [submit_button] | <code>string</code> | 
| [submit_button_processing] | <code>string</code> | 

<a name="w_IBamboraMeta" id="w_IBamboraMeta" href="#user-content-w_IBamboraMeta">&nbsp;</a>

## IBamboraMeta
Interface for Bamboora meta information

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [customer_storage_number] | <code>string</code> | Customer storage number |
| [tokenise_algorithm] | <code>number</code> | Tokenise algorithm |

<a name="w_IElementStyleInput" id="w_IElementStyleInput" href="#user-content-w_IElementStyleInput">&nbsp;</a>

## IElementStyleInput
Interface for styling input element.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) |
| [border] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/border) |
| [border_radius] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |
| [background_color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) |
| [height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/height) |
| [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) |
| [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |
| [transition] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) |
| [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) |
| [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) |
| [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) |
| [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) |

<a name="w_IElementStyleSubmitButton" id="w_IElementStyleSubmitButton" href="#user-content-w_IElementStyleSubmitButton">&nbsp;</a>

## IElementStyleSubmitButton
Interface for styling submit_button element.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) |
| [border] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/border) |
| [border_radius] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |
| [background_color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) |
| [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) |
| [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |
| [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) |
| [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) |
| [transition] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) |
| [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) |
| [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) |
| [opacity] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) |

<a name="w_IElementStyleLabel" id="w_IElementStyleLabel" href="#user-content-w_IElementStyleLabel">&nbsp;</a>

## IElementStyleLabel
Interface for styling label element.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) |
| [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) |
| [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |
| [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) |
| [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) |
| [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) |
| [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) |

<a name="w_IElementStyleTitle" id="w_IElementStyleTitle" href="#user-content-w_IElementStyleTitle">&nbsp;</a>

## IElementStyleTitle
Interface for styling title element.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) |
| [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) |
| [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |
| [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) |
| [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) |
| [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) |
| [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) |
| ['text-align',] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) |

<a name="w_IElementStyleTitleDescription" id="w_IElementStyleTitleDescription" href="#user-content-w_IElementStyleTitleDescription">&nbsp;</a>

## IElementStyleTitleDescription
Interface for styling title_description element.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) |
| [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) |
| [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |
| [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) |
| [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) |
| [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) |
| [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) |
| ['text-align',] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) |

<a name="w_ITriggerData" id="w_ITriggerData" href="#user-content-w_ITriggerData">&nbsp;</a>

## ITriggerData
Interface for classes that represent a trigger data.

**Kind**: global interface  

| Param | Type |
| --- | --- |
| [configuration_token] | <code>string</code> | 
| [tab_number] | <code>string</code> | 
| [elements] | <code>string</code> | 
| [form_values] | <code>string</code> | 

<a name="w_HtmlWidget" id="w_HtmlWidget" href="#user-content-w_HtmlWidget">&nbsp;</a>

## HtmlWidget ⇐ [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)
Class Widget include method for working on html and include extended by HtmlMultiWidget methods

**Kind**: global class  
**Extends**: [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget), [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

* [HtmlWidget](#user-content-w_HtmlWidget) ⇐ [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)
    * [new HtmlWidget(selector, publicKey, [gatewayID], [paymentType], [purpose])](#user-content-w_new_HtmlWidget_new)
    * [.setWebHookDestination(url)](#user-content-w_HtmlWidget+setWebHookDestination)
    * [.setSuccessRedirectUrl(url)](#user-content-w_HtmlWidget+setSuccessRedirectUrl)
    * [.setErrorRedirectUrl(url)](#user-content-w_HtmlWidget+setErrorRedirectUrl)
    * [.setFormFields(fields)](#user-content-w_HtmlWidget+setFormFields)
    * [.setFormElements(elements)](#user-content-w_HtmlWidget+setFormElements)
    * [.setMeta(object)](#user-content-w_HtmlWidget+setMeta)
    * [.load()](#user-content-w_HtmlMultiWidget+load)
    * [.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>
    * [.isInvalidField(field)](#user-content-w_HtmlMultiWidget+isInvalidField) ⇒ <code>boolean</code>
    * [.isFieldErrorShowed(field)](#user-content-w_HtmlMultiWidget+isFieldErrorShowed) ⇒ <code>boolean</code>
    * [.isInvalidFieldByValidator(field, validator)](#user-content-w_HtmlMultiWidget+isInvalidFieldByValidator) ⇒ <code>boolean</code>
    * [.hide([saveSize])](#user-content-w_HtmlMultiWidget+hide)
    * [.show()](#user-content-w_HtmlMultiWidget+show)
    * [.reload()](#user-content-w_HtmlMultiWidget+reload)
    * [.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)
    * [.useAutoResize()](#user-content-w_HtmlMultiWidget+useAutoResize)
    * [.setStyles(fields)](#user-content-w_MultiWidget+setStyles)
    * [.usePhoneCountryMask([options])](#user-content-w_MultiWidget+usePhoneCountryMask)
    * [.setTexts(fields)](#user-content-w_MultiWidget+setTexts)
    * [.setElementStyle(element, [state], styles)](#user-content-w_MultiWidget+setElementStyle)
    * [.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)~~
    * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
    * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
    * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
    * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
    * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
    * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
    * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
    * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)

<a name="w_new_HtmlWidget_new" id="w_new_HtmlWidget_new" href="#user-content-w_new_HtmlWidget_new">&nbsp;</a>

### new HtmlWidget(selector, publicKey, [gatewayID], [paymentType], [purpose])

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| selector | <code>string</code> |  | Selector of html element. Container for widget |
| publicKey | <code>string</code> |  | PayDock users public key |
| [gatewayID] | <code>string</code> | <code>&quot;default&quot;</code> | ID of a gateway connected to PayDock. By default or if put 'default', it will use the selected default gateway. If put 'not_configured', it won’t use gateway to create downstream token. |
| [paymentType] | <code>string</code> | <code>&quot;card&quot;</code> | Type of payment source which shows in widget form. Available parameters : “card”, “bank_account”. |
| [purpose] | <code>string</code> | <code>&quot;payment_source&quot;</code> | Purpose of widget form. Available parameters: ‘payment_source’, ‘card_payment_source_with_cvv’, ‘card_payment_source_without_cvv’ |

**Example**  

```javascript
var widget = new HtmlWidget('#widget', 'publicKey', 'gatewayID'); // short

var widget = new HtmlWidget('#widget', 'publicKey', 'gatewayID', 'bank_account', 'payment_source'); // extend

var widget = new HtmlWidget('#widget', 'publicKey', 'not_configured'); // without gateway
```
<a name="w_HtmlWidget+setWebHookDestination" id="w_HtmlWidget+setWebHookDestination" href="#user-content-w_HtmlWidget+setWebHookDestination">&nbsp;</a>

### htmlWidget.setWebHookDestination(url)
Destination, where customer will receive all successful responses.
Response will contain “data” object with “payment_source” or other parameters, in depending on 'purpose'

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  

| Param | Type | Description |
| --- | --- | --- |
| url | <code>string</code> | Your endpoint for post request. |

**Example**  

```javascript
widget.setWebHookDestination('http://google.com');
```
<a name="w_HtmlWidget+setSuccessRedirectUrl" id="w_HtmlWidget+setSuccessRedirectUrl" href="#user-content-w_HtmlWidget+setSuccessRedirectUrl">&nbsp;</a>

### htmlWidget.setSuccessRedirectUrl(url)
URL to which the Customer will be redirected to after the success finish

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  

| Param | Type |
| --- | --- |
| url | <code>string</code> | 

**Example**  

```javascript
widget.setSuccessRedirectUrl('google.com/search?q=success');
```
<a name="w_HtmlWidget+setErrorRedirectUrl" id="w_HtmlWidget+setErrorRedirectUrl" href="#user-content-w_HtmlWidget+setErrorRedirectUrl">&nbsp;</a>

### htmlWidget.setErrorRedirectUrl(url)
URL to which the Customer will be redirected to if an error is triggered in the process of operation

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  

| Param | Type |
| --- | --- |
| url | <code>string</code> | 

**Example**  

```javascript
widget.setErrorRedirectUrl('google.com/search?q=error');
```
<a name="w_HtmlWidget+setFormFields" id="w_HtmlWidget+setFormFields" href="#user-content-w_HtmlWidget+setFormFields">&nbsp;</a>

### htmlWidget.setFormFields(fields)
Set list with widget form field, which will be shown in form. Also you can set the required validation for these fields

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  

| Param | Type | Description |
| --- | --- | --- |
| fields | <code>Array.&lt;string&gt;</code> | name of fields which can be shown in a widget. If after a name of a field, you put “*”, this field will be required on client-side. (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) [FORM_FIELD](#user-content-w_FORM_FIELD) |

**Example**  

```javascript
widget.setFormFields(['phone', 'email', 'first_name*']);
```
<a name="w_HtmlWidget+setFormElements" id="w_HtmlWidget+setFormElements" href="#user-content-w_HtmlWidget+setFormElements">&nbsp;</a>

### htmlWidget.setFormElements(elements)
The method to set the full configuration for the all specific form elements (visibility, required, label, placeholder, value)
You can also use the other method for the partial configuration like: setFormFields, setFormValues, setFormPlaceholder, setFormLabel

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setFormElements</code>](#user-content-w_MultiWidget+setFormElements)  

| Param | Type | Description |
| --- | --- | --- |
| elements | <code>Array.&lt;Object&gt;</code> | List of elements |
| elements[].field | <code>string</code> | Field name of element. If after a name of a field, you put “*”, this field will be required on client-side. (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) [FORM_FIELD](#user-content-w_FORM_FIELD) |
| elements[].placeholder | <code>string</code> | Set custom placeholders in form fields |
| elements[].label | <code>string</code> | Set a custom labels near the form field |
| elements[].value | <code>string</code> | Set predefined values for the form field |

**Example**  

```javascript
widget.setFormElements([
      {
          field:  'card_name*',
          placeholder: 'Input your card holder name...',
          label: 'Card Holder Name',
          value: 'Houston',
      },
      {
          field:  'email',
          placeholder: 'Input your email, like test@example.com',
          label: 'Email for the receipt',
          value: 'predefined@email.com',
      },
  ])
```
<a name="w_HtmlWidget+setMeta" id="w_HtmlWidget+setMeta" href="#user-content-w_HtmlWidget+setMeta">&nbsp;</a>

### htmlWidget.setMeta(object)
The method to set meta information for the checkout page

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  

| Param | Type | Description |
| --- | --- | --- |
| object | [<code>IPayPalMeta</code>](#user-content-w_IPayPalMeta) \| [<code>IBamboraMeta</code>](#user-content-w_IBamboraMeta) | data which can be shown on checkout page [IPayPalMeta](#user-content-w_IPayPalMeta) [IBamboraMeta](#user-content-w_IBamboraMeta) |

**Example**  

```javascript
config.setMeta({
            brand_name: 'paydock',
            reference: '15',
            email: 'wault@paydock.com'
        });
```
<a name="w_HtmlMultiWidget+load" id="w_HtmlMultiWidget+load" href="#user-content-w_HtmlMultiWidget+load">&nbsp;</a>

### htmlWidget.load()
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+afterLoad" id="w_HtmlMultiWidget+afterLoad" href="#user-content-w_HtmlMultiWidget+afterLoad">&nbsp;</a>

### htmlWidget.afterLoad()
Registers a form validation callback for validation events.

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**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)
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>&#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)
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)  
**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>

### htmlWidget.isValidForm() ⇒ <code>boolean</code>
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> - 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>
Using this method you can check if a specific form field is invalid

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>isInvalidField</code>](#user-content-w_HtmlMultiWidget+isInvalidField)  
**Returns**: <code>boolean</code> - Field is invalid  

| Param | Type | Description |
| --- | --- | --- |
| field | <code>string</code> | Field name |

<a name="w_HtmlMultiWidget+isFieldErrorShowed" id="w_HtmlMultiWidget+isFieldErrorShowed" href="#user-content-w_HtmlMultiWidget+isFieldErrorShowed">&nbsp;</a>

### htmlWidget.isFieldErrorShowed(field) ⇒ <code>boolean</code>
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> - Indicates wether or not the Error message is being displayed on the associated field.  

| Param | Type | Description |
| --- | --- | --- |
| 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>
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> - Indicates wether or not the field is invalid based on validator intepretation.  

| Param | Type | Description |
| --- | --- | --- |
| 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])
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> | 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()
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()
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)
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) |

**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)
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 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)
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)  

| Param | Type | Description |
| --- | --- | --- |
| fieldValues | <code>IFormValues</code> | Fields with values |

**Example**  
```javascript
widget.updateFormValues({
  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)
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> | 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)
Intercepts a form submission and delegates processing to the widget.

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**: The widget's submit button will be hidden.  

| Param | Type | Description |
| --- | --- | --- |
| selector | <code>string</code> | css selector of your form |

**Example**  
```html
<body>
 <form id="myForm">
     <input name="amount">
     <button type="submit">Submit</button>
 </form>
 <script>
    widget.interceptSubmitForm('#myForm');
 </script>
</body>
```
<a name="w_HtmlMultiWidget+useCheckoutAutoSubmit" id="w_HtmlMultiWidget+useCheckoutAutoSubmit" href="#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit">&nbsp;</a>

### htmlWidget.useCheckoutAutoSubmit()
This method hides a submit button and automatically execute form submit

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>useCheckoutAutoSubmit</code>](#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit)  
<a name="w_HtmlMultiWidget+useAutoResize" id="w_HtmlMultiWidget+useAutoResize" href="#user-content-w_HtmlMultiWidget+useAutoResize">&nbsp;</a>

### htmlWidget.useAutoResize()
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();
```
<a name="w_MultiWidget+setStyles" id="w_MultiWidget+setStyles" href="#user-content-w_MultiWidget+setStyles">&nbsp;</a>

### htmlWidget.setStyles(fields)
Object contain styles for widget

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setStyles</code>](#user-content-w_MultiWidget+setStyles)  

| Param | Type | Description |
| --- | --- | --- |
| fields | [<code>IStyles</code>](#user-content-w_IStyles) | name of styles which can be shown in widget [STYLE](#user-content-w_STYLE) |

**Example**  

```javascript
widget.setStyles({
      background_color: 'rgb(0, 0, 0)',
      border_color: 'yellow',
      text_color: '#FFFFAA',
      button_color: 'rgba(255, 255, 255, 0.9)',
      font_size: '20px'
      fort_family: 'fantasy'
  });
```
<a name="w_MultiWidget+usePhoneCountryMask" id="w_MultiWidget+usePhoneCountryMask" href="#user-content-w_MultiWidget+usePhoneCountryMask">&nbsp;</a>

### htmlWidget.usePhoneCountryMask([options])
Method to set a country code mask for the phone input.

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>usePhoneCountryMask</code>](#user-content-w_MultiWidget+usePhoneCountryMask)  

| Param | Type | Description |
| --- | --- | --- |
| [options] | <code>object</code> | Options for configure the phone mask. |
| [options.default_country] | <code>string</code> | Set a default country for the mask. |
| [options.preferred_countries] | <code>Array.&lt;string&gt;</code> | Set list of preferred countries for the top of the select box . |
| [options.only_countries] | <code>Array.&lt;string&gt;</code> | Set list of countries to show in the select box. |

**Example**  

```javascript
widget.usePhoneCountryMask();
```
**Example**  

```javascript
widget.usePhoneCountryMask({
      default_country: 'au',
      preferred_countries: ['au', 'gb'],
      only_countries: ['au', 'gb', 'us', 'ua']
  });
```
<a name="w_MultiWidget+setTexts" id="w_MultiWidget+setTexts" href="#user-content-w_MultiWidget+setTexts">&nbsp;</a>

### htmlWidget.setTexts(fields)
Method for set different texts inside the widget

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setTexts</code>](#user-content-w_MultiWidget+setTexts)  

| Param | Type | Description |
| --- | --- | --- |
| fields | [<code>ITexts</code>](#user-content-w_ITexts) | name of text items which can be shown in widget [TEXT](#user-content-w_TEXT) |

**Example**  

```javascript
widget.setTexts({
      title: 'Your card',
      finish_text: 'Payment resource was successfully accepted',
      title_description: '* indicates required field',
      submit_button: 'Save',
      submit_button_processing: 'Load...',
  });
```
<a name="w_MultiWidget+setElementStyle" id="w_MultiWidget+setElementStyle" href="#user-content-w_MultiWidget+setElementStyle">&nbsp;</a>

### htmlWidget.setElementStyle(element, [state], styles)
Method for set styles for different elements and states

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setElementStyle</code>](#user-content-w_MultiWidget+setElementStyle)  

| Param | Type | Description |
| --- | --- | --- |
| element | <code>string</code> | type of element for styling. These elements are available [STYLABLE_ELEMENT](#user-content-w_STYLABLE_ELEMENT) |
| [state] | <code>string</code> | state of element for styling. These states are available [STYLABLE_ELEMENT_STATE](#user-content-w_STYLABLE_ELEMENT_STATE) |
| styles | [<code>IElementStyleInput</code>](#user-content-w_IElementStyleInput) \| [<code>IElementStyleSubmitButton</code>](#user-content-w_IElementStyleSubmitButton) \| [<code>IElementStyleLabel</code>](#user-content-w_IElementStyleLabel) \| [<code>IElementStyleTitle</code>](#user-content-w_IElementStyleTitle) \| [<code>IElementStyleTitleDescription</code>](#user-content-w_IElementStyleTitleDescription) | styles list |

**Example**  

```javascript
widget.setElementStyle('input', {
  border: 'green solid 1px'
});

widget.setElementStyle('input', 'focus', {
  border: 'blue solid 1px'
});

widget.setElementStyle('input', 'error', {
 border: 'red solid 1px'
});
```
<a name="w_MultiWidget+setFormValues" id="w_MultiWidget+setFormValues" href="#user-content-w_MultiWidget+setFormValues">&nbsp;</a>

### htmlWidget.setFormValues(fieldValues)
The method to set the predefined values for the form fields inside the widget

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setFormValues</code>](#user-content-w_MultiWidget+setFormValues)  

| Param | Type | Description |
| --- | --- | --- |
| fieldValues | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), The object value is what we are expecting |

**Example**  

```javascript
widget.setFormValues({
      email: 'predefined@email.com',
      card_name: 'Houston'
  });
```
<a name="w_MultiWidget+setFormLabels" id="w_MultiWidget+setFormLabels" href="#user-content-w_MultiWidget+setFormLabels">&nbsp;</a>

### htmlWidget.setFormLabels(fieldLabels)
The method to set custom form field labels

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setFormLabels</code>](#user-content-w_MultiWidget+setFormLabels)  

| Param | Type | Description |
| --- | --- | --- |
| fieldLabels | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), The object value is what we are expecting |

**Example**  

```javascript
widget.setFormPlaceholders({
      card_name: 'Card Holder Name',
      email: 'Email For Receipt'
  })
```
<a name="w_MultiWidget+setFormPlaceholders" id="w_MultiWidget+setFormPlaceholders" href="#user-content-w_MultiWidget+setFormPlaceholders">&nbsp;</a>

### htmlWidget.setFormPlaceholders(fieldPlaceholders)
The method to set custom form fields placeholders

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setFormPlaceholders</code>](#user-content-w_MultiWidget+setFormPlaceholders)  

| Param | Type | Description |
| --- | --- | --- |
| fieldPlaceholders | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), Value of object is expected placeholder |

**Example**  

```javascript
widget.setFormPlaceholders({
      card_name: 'Input your card holder name...',
      email: 'Input your email, like test@example.com'
  })
```
<a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>

### ~~htmlWidget.setIcons()~~
***Deprecated***

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)  
<a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>

### htmlWidget.setHiddenElements(elements)
Using this method you can set hidden elements inside widget

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setHiddenElements</code>](#user-content-w_MultiWidget+setHiddenElements)  

| 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) |

**Example**  

```javascript
widget.setHiddenElements(['submit_button', 'email']);
```
<a name="w_MultiWidget+setRefId" id="w_MultiWidget+setRefId" href="#user-content-w_MultiWidget+setRefId">&nbsp;</a>

### htmlWidget.setRefId(refId)
Current method can set custom ID to identify the data in the future

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setRefId</code>](#user-content-w_MultiWidget+setRefId)  

| Param | Type | Description |
| --- | --- | --- |
| refId | <code>string</code> | custom id |

**Example**  

```javascript
widget.setRefId('id');
```
<a name="w_MultiWidget+useGatewayFieldValidation" id="w_MultiWidget+useGatewayFieldValidation" href="#user-content-w_MultiWidget+useGatewayFieldValidation">&nbsp;</a>

### htmlWidget.useGatewayFieldValidation()
Current method can add visual validation from gateway to widget's form fields

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>useGatewayFieldValidation</code>](#user-content-w_MultiWidget+useGatewayFieldValidation)  
**Example**  

```javascript
widget.useGatewayFieldValidation();
```
<a name="w_MultiWidget+setSupportedCardIcons" id="w_MultiWidget+setSupportedCardIcons" href="#user-content-w_MultiWidget+setSupportedCardIcons">&nbsp;</a>

### htmlWidget.setSupportedCardIcons(elements, validateCardNumberInput)
Current method can set icons of supported card types

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setSupportedCardIcons</code>](#user-content-w_MultiWidget+setSupportedCardIcons)  

| Param | Type | Description |
| --- | --- | --- |
| elements | <code>Array.&lt;string&gt;</code> | [SUPPORTED_CARD_TYPES](#user-content-w_SUPPORTED_CARD_TYPES) |
| validateCardNumberInput | <code>boolean</code> | [validateCardNumberInput=false] - using this param you allow validation for card number input on supported card types |

**Example**  

```javascript
widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
```
<a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>

### htmlWidget.hideUiErrors()
Current method can hide prevent the widget from showing the error messages

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>hideUiErrors</code>](#user-content-w_MultiWidget+hideUiErrors)  
**Example**  

```javascript
widget.hideUiErrors('id');
```
<a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>

### htmlWidget.setEnv(env, [alias])
Current method can change environment. By default environment = sandbox.
Also we can change domain alias for this environment. By default domain_alias = paydock.com

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setEnv</code>](#user-content-w_MultiWidget+setEnv)  

| Param | Type | Description |
| --- | --- | --- |
| env | <code>string</code> | sandbox, production |
| [alias] | <code>string</code> | Own domain alias |

**Example**  

```javascript
widget.setEnv('production', 'paydock.com');
```
<a name="w_MultiWidget+loadIFrameUrl" id="w_MultiWidget+loadIFrameUrl" href="#user-content-w_MultiWidget+loadIFrameUrl">&nbsp;</a>

### htmlWidget.loadIFrameUrl()
Method for creating iframe url

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>loadIFrameUrl</code>](#user-content-w_MultiWidget+loadIFrameUrl)  
**Example**  

```javascript
widget.loadIFrameUrl(function (url) {
     console.log(url);
}, function (errors) {
     console.log(errors);
});
```
<a name="w_MultiWidget+setLanguage" id="w_MultiWidget+setLanguage" href="#user-content-w_MultiWidget+setLanguage">&nbsp;</a>

### htmlWidget.setLanguage(code)
Method for setting a custom language code

**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
**Overrides**: [<code>setLanguage</code>](#user-content-w_MultiWidget+setLanguage)  

| Param | Type | Description |
| --- | --- | --- |
| code | <code>string</code> | ISO 639-1 |

**Example**  

```javascript
config.setLanguage('en');
```
<a name="w_HtmlMultiWidget" id="w_HtmlMultiWidget" href="#user-content-w_HtmlMultiWidget">&nbsp;</a>

## HtmlMultiWidget ⇐ [<code>MultiWidget</code>](#user-content-w_MultiWidget)
Class HtmlMultiWidget include method for working with html

**Kind**: global class  
**Extends**: [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

* [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)
    * [.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>
    * [.isInvalidField(field)](#user-content-w_HtmlMultiWidget+isInvalidField) ⇒ <code>boolean</code>
    * [.isFieldErrorShowed(field)](#user-content-w_HtmlMultiWidget+isFieldErrorShowed) ⇒ <code>boolean</code>
    * [.isInvalidFieldByValidator(field, validator)](#user-content-w_HtmlMultiWidget+isInvalidFieldByValidator) ⇒ <code>boolean</code>
    * [.hide([saveSize])](#user-content-w_HtmlMultiWidget+hide)
    * [.show()](#user-content-w_HtmlMultiWidget+show)
    * [.reload()](#user-content-w_HtmlMultiWidget+reload)
    * [.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)
    * [.useAutoResize()](#user-content-w_HtmlMultiWidget+useAutoResize)
    * [.setStyles(fields)](#user-content-w_MultiWidget+setStyles)
    * [.usePhoneCountryMask([options])](#user-content-w_MultiWidget+usePhoneCountryMask)
    * [.setTexts(fields)](#user-content-w_MultiWidget+setTexts)
    * [.setElementStyle(element, [state], styles)](#user-content-w_MultiWidget+setElementStyle)
    * [.setFormValues(fieldValues)](#user-content-w_MultiWidget+setFormValues)
    * [.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)~~
    * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
    * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
    * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
    * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
    * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
    * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
    * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
    * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)

<a name="w_new_HtmlMultiWidget_new" id="w_new_HtmlMultiWidget_new" href="#user-content-w_new_HtmlMultiWidget_new">&nbsp;</a>

### new HtmlMultiWidget(selector, publicKey, conf)

| Param | Type | Description |
| --- | --- | --- |
| selector | <code>string</code> | Selector of html element. Container for widget |
| publicKey | <code>string</code> | PayDock users public key |
| conf | [<code>Configuration</code>](#user-content-w_Configuration) \| <code>string</code> \| [<code>Array.&lt;Configuration&gt;</code>](#user-content-w_Configuration) \| <code>Array.&lt;string&gt;</code> | exemplar[s] Configuration class OR configuration token |

**Example**  

```javascript
var widget = new MultiWidget('#widget', 'publicKey','configurationToken'); // With a pre-created configuration token

var widget = new MultiWidget('#widget', 'publicKey',['configurationToken', 'configurationToken2']); // With pre-created configuration tokens

var widget = new MultiWidget('#widget', 'publicKey', new Configuration('gatewayId')); With Configuration

var widget = new MultiWidget('#widget', 'publicKey',[ With Configurations
     Configuration(), // default gateway_id,
     Configuration('not_configured'), // without gateway,
     Configuration('gatewayId'),
     Configuration('gatewayId', 'bank_account')
]);
```
<a name="w_HtmlMultiWidget+load" id="w_HtmlMultiWidget+load" href="#user-content-w_HtmlMultiWidget+load">&nbsp;</a>

### htmlMultiWidget.load()
Loads the 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>

### htmlMultiWidget.afterLoad()
Registers a form validation callback for validation events.

**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)
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>&#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)
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>
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> - 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>
Using this method you can check if a specific form field is invalid

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Returns**: <code>boolean</code> - Field is invalid  

| Param | Type | Description |
| --- | --- | --- |
| field | <code>string</code> | Field name |

<a name="w_HtmlMultiWidget+isFieldErrorShowed" id="w_HtmlMultiWidget+isFieldErrorShowed" href="#user-content-w_HtmlMultiWidget+isFieldErrorShowed">&nbsp;</a>

### htmlMultiWidget.isFieldErrorShowed(field) ⇒ <code>boolean</code>
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> - Indicates wether or not the Error message is being displayed on the associated field.  

| Param | Type | Description |
| --- | --- | --- |
| 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>
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> - Indicates wether or not the field is invalid based on validator intepretation.  

| Param | Type | Description |
| --- | --- | --- |
| 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])
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> | 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()
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()
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)
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) |

**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)
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 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)
Updates the form field values inside the widget.

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| fieldValues | <code>IFormValues</code> | Fields with values |

**Example**  
```javascript
widget.updateFormValues({
  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)
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> | 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)
Intercepts a form submission and delegates processing to the widget.

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**: The widget's submit button will be hidden.  

| Param | Type | Description |
| --- | --- | --- |
| selector | <code>string</code> | css selector of your form |

**Example**  
```html
<body>
 <form id="myForm">
     <input name="amount">
     <button type="submit">Submit</button>
 </form>
 <script>
    widget.interceptSubmitForm('#myForm');
 </script>
</body>
```
<a name="w_HtmlMultiWidget+useCheckoutAutoSubmit" id="w_HtmlMultiWidget+useCheckoutAutoSubmit" href="#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit">&nbsp;</a>

### htmlMultiWidget.useCheckoutAutoSubmit()
This method hides a submit button and automatically execute form submit

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
<a name="w_HtmlMultiWidget+useAutoResize" id="w_HtmlMultiWidget+useAutoResize" href="#user-content-w_HtmlMultiWidget+useAutoResize">&nbsp;</a>

### htmlMultiWidget.useAutoResize()
Use this method for resize iFrame according content height

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Example**  
```javascript
widget.useAutoResize();
```
<a name="w_MultiWidget+setStyles" id="w_MultiWidget+setStyles" href="#user-content-w_MultiWidget+setStyles">&nbsp;</a>

### htmlMultiWidget.setStyles(fields)
Object contain styles for widget

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setStyles</code>](#user-content-w_MultiWidget+setStyles)  

| Param | Type | Description |
| --- | --- | --- |
| fields | [<code>IStyles</code>](#user-content-w_IStyles) | name of styles which can be shown in widget [STYLE](#user-content-w_STYLE) |

**Example**  

```javascript
widget.setStyles({
      background_color: 'rgb(0, 0, 0)',
      border_color: 'yellow',
      text_color: '#FFFFAA',
      button_color: 'rgba(255, 255, 255, 0.9)',
      font_size: '20px'
      fort_family: 'fantasy'
  });
```
<a name="w_MultiWidget+usePhoneCountryMask" id="w_MultiWidget+usePhoneCountryMask" href="#user-content-w_MultiWidget+usePhoneCountryMask">&nbsp;</a>

### htmlMultiWidget.usePhoneCountryMask([options])
Method to set a country code mask for the phone input.

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>usePhoneCountryMask</code>](#user-content-w_MultiWidget+usePhoneCountryMask)  

| Param | Type | Description |
| --- | --- | --- |
| [options] | <code>object</code> | Options for configure the phone mask. |
| [options.default_country] | <code>string</code> | Set a default country for the mask. |
| [options.preferred_countries] | <code>Array.&lt;string&gt;</code> | Set list of preferred countries for the top of the select box . |
| [options.only_countries] | <code>Array.&lt;string&gt;</code> | Set list of countries to show in the select box. |

**Example**  

```javascript
widget.usePhoneCountryMask();
```
**Example**  

```javascript
widget.usePhoneCountryMask({
      default_country: 'au',
      preferred_countries: ['au', 'gb'],
      only_countries: ['au', 'gb', 'us', 'ua']
  });
```
<a name="w_MultiWidget+setTexts" id="w_MultiWidget+setTexts" href="#user-content-w_MultiWidget+setTexts">&nbsp;</a>

### htmlMultiWidget.setTexts(fields)
Method for set different texts inside the widget

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setTexts</code>](#user-content-w_MultiWidget+setTexts)  

| Param | Type | Description |
| --- | --- | --- |
| fields | [<code>ITexts</code>](#user-content-w_ITexts) | name of text items which can be shown in widget [TEXT](#user-content-w_TEXT) |

**Example**  

```javascript
widget.setTexts({
      title: 'Your card',
      finish_text: 'Payment resource was successfully accepted',
      title_description: '* indicates required field',
      submit_button: 'Save',
      submit_button_processing: 'Load...',
  });
```
<a name="w_MultiWidget+setElementStyle" id="w_MultiWidget+setElementStyle" href="#user-content-w_MultiWidget+setElementStyle">&nbsp;</a>

### htmlMultiWidget.setElementStyle(element, [state], styles)
Method for set styles for different elements and states

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setElementStyle</code>](#user-content-w_MultiWidget+setElementStyle)  

| Param | Type | Description |
| --- | --- | --- |
| element | <code>string</code> | type of element for styling. These elements are available [STYLABLE_ELEMENT](#user-content-w_STYLABLE_ELEMENT) |
| [state] | <code>string</code> | state of element for styling. These states are available [STYLABLE_ELEMENT_STATE](#user-content-w_STYLABLE_ELEMENT_STATE) |
| styles | [<code>IElementStyleInput</code>](#user-content-w_IElementStyleInput) \| [<code>IElementStyleSubmitButton</code>](#user-content-w_IElementStyleSubmitButton) \| [<code>IElementStyleLabel</code>](#user-content-w_IElementStyleLabel) \| [<code>IElementStyleTitle</code>](#user-content-w_IElementStyleTitle) \| [<code>IElementStyleTitleDescription</code>](#user-content-w_IElementStyleTitleDescription) | styles list |

**Example**  

```javascript
widget.setElementStyle('input', {
  border: 'green solid 1px'
});

widget.setElementStyle('input', 'focus', {
  border: 'blue solid 1px'
});

widget.setElementStyle('input', 'error', {
 border: 'red solid 1px'
});
```
<a name="w_MultiWidget+setFormValues" id="w_MultiWidget+setFormValues" href="#user-content-w_MultiWidget+setFormValues">&nbsp;</a>

### htmlMultiWidget.setFormValues(fieldValues)
The method to set the predefined values for the form fields inside the widget

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setFormValues</code>](#user-content-w_MultiWidget+setFormValues)  

| Param | Type | Description |
| --- | --- | --- |
| fieldValues | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), The object value is what we are expecting |

**Example**  

```javascript
widget.setFormValues({
      email: 'predefined@email.com',
      card_name: 'Houston'
  });
```
<a name="w_MultiWidget+setFormLabels" id="w_MultiWidget+setFormLabels" href="#user-content-w_MultiWidget+setFormLabels">&nbsp;</a>

### htmlMultiWidget.setFormLabels(fieldLabels)
The method to set custom form field labels

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setFormLabels</code>](#user-content-w_MultiWidget+setFormLabels)  

| Param | Type | Description |
| --- | --- | --- |
| fieldLabels | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), The object value is what we are expecting |

**Example**  

```javascript
widget.setFormPlaceholders({
      card_name: 'Card Holder Name',
      email: 'Email For Receipt'
  })
```
<a name="w_MultiWidget+setFormPlaceholders" id="w_MultiWidget+setFormPlaceholders" href="#user-content-w_MultiWidget+setFormPlaceholders">&nbsp;</a>

### htmlMultiWidget.setFormPlaceholders(fieldPlaceholders)
The method to set custom form fields placeholders

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setFormPlaceholders</code>](#user-content-w_MultiWidget+setFormPlaceholders)  

| Param | Type | Description |
| --- | --- | --- |
| fieldPlaceholders | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), Value of object is expected placeholder |

**Example**  

```javascript
widget.setFormPlaceholders({
      card_name: 'Input your card holder name...',
      email: 'Input your email, like test@example.com'
  })
```
<a name="w_MultiWidget+setFormElements" id="w_MultiWidget+setFormElements" href="#user-content-w_MultiWidget+setFormElements">&nbsp;</a>

### htmlMultiWidget.setFormElements(elements)
The method to set the full configuration for the all specific form elements (label, placeholder, value)
You can also use the other method for the partial configuration like: setFormValues, setFormPlaceholder, setFormLabel

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setFormElements</code>](#user-content-w_MultiWidget+setFormElements)  

| Param | Type | Description |
| --- | --- | --- |
| elements | <code>string</code> | The list of elements |
| elements[].field | <code>string</code> | Field name of the element [FORM_FIELD](#user-content-w_FORM_FIELD) |
| elements[].placeholder | <code>string</code> | Set custom form field placeholder |
| elements[].label | <code>string</code> | Set custom labels near form field |
| elements[].value | <code>string</code> | Set predefined values for the form field |

**Example**  

```javascript
widget.setFormElements([
      {
          field:  'card_name',
          placeholder: 'Input your card holder name...',
          label: 'Card Holder Name',
          value: 'Houston',
      },
      {
          field:  'email',
          placeholder: 'Input your email, like test@example.com',
          label: 'Email For Receipt',
          value: 'predefined@email.com',
      },
  ])
```
<a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>

### ~~htmlMultiWidget.setIcons()~~
***Deprecated***

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)  
<a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>

### htmlMultiWidget.setHiddenElements(elements)
Using this method you can set hidden elements inside widget

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setHiddenElements</code>](#user-content-w_MultiWidget+setHiddenElements)  

| 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) |

**Example**  

```javascript
widget.setHiddenElements(['submit_button', 'email']);
```
<a name="w_MultiWidget+setRefId" id="w_MultiWidget+setRefId" href="#user-content-w_MultiWidget+setRefId">&nbsp;</a>

### htmlMultiWidget.setRefId(refId)
Current method can set custom ID to identify the data in the future

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setRefId</code>](#user-content-w_MultiWidget+setRefId)  

| Param | Type | Description |
| --- | --- | --- |
| refId | <code>string</code> | custom id |

**Example**  

```javascript
widget.setRefId('id');
```
<a name="w_MultiWidget+useGatewayFieldValidation" id="w_MultiWidget+useGatewayFieldValidation" href="#user-content-w_MultiWidget+useGatewayFieldValidation">&nbsp;</a>

### htmlMultiWidget.useGatewayFieldValidation()
Current method can add visual validation from gateway to widget's form fields

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>useGatewayFieldValidation</code>](#user-content-w_MultiWidget+useGatewayFieldValidation)  
**Example**  

```javascript
widget.useGatewayFieldValidation();
```
<a name="w_MultiWidget+setSupportedCardIcons" id="w_MultiWidget+setSupportedCardIcons" href="#user-content-w_MultiWidget+setSupportedCardIcons">&nbsp;</a>

### htmlMultiWidget.setSupportedCardIcons(elements, validateCardNumberInput)
Current method can set icons of supported card types

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setSupportedCardIcons</code>](#user-content-w_MultiWidget+setSupportedCardIcons)  

| Param | Type | Description |
| --- | --- | --- |
| elements | <code>Array.&lt;string&gt;</code> | [SUPPORTED_CARD_TYPES](#user-content-w_SUPPORTED_CARD_TYPES) |
| validateCardNumberInput | <code>boolean</code> | [validateCardNumberInput=false] - using this param you allow validation for card number input on supported card types |

**Example**  

```javascript
widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
```
<a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>

### htmlMultiWidget.hideUiErrors()
Current method can hide prevent the widget from showing the error messages

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>hideUiErrors</code>](#user-content-w_MultiWidget+hideUiErrors)  
**Example**  

```javascript
widget.hideUiErrors('id');
```
<a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>

### htmlMultiWidget.setEnv(env, [alias])
Current method can change environment. By default environment = sandbox.
Also we can change domain alias for this environment. By default domain_alias = paydock.com

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setEnv</code>](#user-content-w_MultiWidget+setEnv)  

| Param | Type | Description |
| --- | --- | --- |
| env | <code>string</code> | sandbox, production |
| [alias] | <code>string</code> | Own domain alias |

**Example**  

```javascript
widget.setEnv('production', 'paydock.com');
```
<a name="w_MultiWidget+loadIFrameUrl" id="w_MultiWidget+loadIFrameUrl" href="#user-content-w_MultiWidget+loadIFrameUrl">&nbsp;</a>

### htmlMultiWidget.loadIFrameUrl()
Method for creating iframe url

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>loadIFrameUrl</code>](#user-content-w_MultiWidget+loadIFrameUrl)  
**Example**  

```javascript
widget.loadIFrameUrl(function (url) {
     console.log(url);
}, function (errors) {
     console.log(errors);
});
```
<a name="w_MultiWidget+setLanguage" id="w_MultiWidget+setLanguage" href="#user-content-w_MultiWidget+setLanguage">&nbsp;</a>

### htmlMultiWidget.setLanguage(code)
Method for setting a custom language code

**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
**Overrides**: [<code>setLanguage</code>](#user-content-w_MultiWidget+setLanguage)  

| Param | Type | Description |
| --- | --- | --- |
| code | <code>string</code> | ISO 639-1 |

**Example**  

```javascript
config.setLanguage('en');
```
<a name="w_Configuration" id="w_Configuration" href="#user-content-w_Configuration">&nbsp;</a>

## Configuration
Class Configuration include methods for creating configuration token

**Kind**: global class  

* [Configuration](#user-content-w_Configuration)
    * [new Configuration([gatewayID], paymentType, purpose)](#user-content-w_new_Configuration_new)
    * [.setWebHookDestination(url)](#user-content-w_Configuration+setWebHookDestination)
    * [.setSuccessRedirectUrl(url)](#user-content-w_Configuration+setSuccessRedirectUrl)
    * [.setErrorRedirectUrl(url)](#user-content-w_Configuration+setErrorRedirectUrl)
    * [.setFormFields(fields)](#user-content-w_Configuration+setFormFields)
    * [.setMeta(object)](#user-content-w_Configuration+setMeta)
    * [.setEnv(env, [alias])](#user-content-w_Configuration+setEnv)
    * [.setLabel(label)](#user-content-w_Configuration+setLabel)
    * [.createToken(accessToken, cb, errorCb)](#user-content-w_Configuration+createToken)

<a name="w_new_Configuration_new" id="w_new_Configuration_new" href="#user-content-w_new_Configuration_new">&nbsp;</a>

### new Configuration([gatewayID], paymentType, purpose)

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [gatewayID] | <code>string</code> | <code>&quot;default&quot;</code> | gateway ID. By default or if put 'default', it will use the selected default gateway. If put 'not_configured', it won’t use gateway to create downstream token. |
| paymentType | <code>string</code> |  | Type of payment source which shows in widget form. Available parameters [PAYMENT_TYPE](#user-content-w_PAYMENT_TYPE) |
| purpose | <code>string</code> |  | Param which describes payment purpose. By default uses Available parameters [PURPOSE](#user-content-w_PURPOSE) |

**Example**  

```javascript
var config = new Configuration('gatewayId'); // short

var config = new Configuration('gatewayId', 'bank_account', 'paymentSource'); // extend

var config = new Configuration('not_configured'); // without gateway
```
<a name="w_Configuration+setWebHookDestination" id="w_Configuration+setWebHookDestination" href="#user-content-w_Configuration+setWebHookDestination">&nbsp;</a>

### configuration.setWebHookDestination(url)
Destination, where customer will receive all successful responses.
Response will contain “data” object with “payment_source” or other parameters, in depending on 'purpose'

**Kind**: instance method of [<code>Configuration</code>](#user-content-w_Configuration)  

| Param | Type | Description |
| --- | --- | --- |
| url | <code>string</code> | Your endpoint for post request. |

**Example**  

```javascript
config.setWebHookDestination('http://google.com');
```
<a name="w_Configuration+setSuccessRedirectUrl" id="w_Configuration+setSuccessRedirectUrl" href="#user-content-w_Configuration+setSuccessRedirectUrl">&nbsp;</a>

### configuration.setSuccessRedirectUrl(url)
URL to which the Customer will be redirected to after the success finish

**Kind**: instance method of [<code>Configuration</code>](#user-content-w_Configuration)  

| Param | Type |
| --- | --- |
| url | <code>string</code> | 

**Example**  

```javascript
config.setSuccessRedirectUrl('google.com/search?q=success');
```
<a name="w_Configuration+setErrorRedirectUrl" id="w_Configuration+setErrorRedirectUrl" href="#user-content-w_Configuration+setErrorRedirectUrl">&nbsp;</a>

### configuration.setErrorRedirectUrl(url)
URL to which the Customer will be redirected to if an error is triggered in the process of operation

**Kind**: instance method of [<code>Configuration</code>](#user-content-w_Configuration)  

| Param | Type |
| --- | --- |
| url | <code>string</code> | 

**Example**  

```javascript
config.setErrorRedirectUrl('google.com/search?q=error');
```
<a name="w_Configuration+setFormFields" id="w_Configuration+setFormFields" href="#user-content-w_Configuration+setFormFields">&nbsp;</a>

### configuration.setFormFields(fields)
Set list with widget form field, which will be shown in form. Also you can set the required validation for these fields

**Kind**: instance method of [<code>Configuration</code>](#user-content-w_Configuration)  

| Param | Type | Description |
| --- | --- | --- |
| fields | <code>Array.&lt;string&gt;</code> | name of fields which can be shown in a widget.   If after a name of a field, you put “*”, this field will be required on client-side.   (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) [FORM_FIELD](#user-content-w_FORM_FIELD) |

**Example**  

```javascript
config.setFormFields(['phone', 'email', 'first_name*']);
```
<a name="w_Configuration+setMeta" id="w_Configuration+setMeta" href="#user-content-w_Configuration+setMeta">&nbsp;</a>

### configuration.setMeta(object)
Method for setting meta information for checkout page

**Kind**: instance method of [<code>Configuration</code>](#user-content-w_Configuration)  

| Param | Type | Description |
| --- | --- | --- |
| object | [<code>IPayPalMeta</code>](#user-content-w_IPayPalMeta) \| <code>IZipmoneyMeta</code> \| <code>IAfterpayMeta</code> \| [<code>IBamboraMeta</code>](#user-content-w_IBamboraMeta) | data which can be shown on checkout page [IPayPalMeta](#user-content-w_IPayPalMeta) [IZipmoneyMeta](IZipmoneyMeta) [IAfterpayMeta](IAfterpayMeta) [IBamboraMeta](#user-content-w_IBamboraMeta) |

**Example**  

```javascript
config.setMeta({
            brand_name: 'paydock',
            reference: '15',
            email: 'wault@paydock.com'
        });
```
<a name="w_Configuration+setEnv" id="w_Configuration+setEnv" href="#user-content-w_Configuration+setEnv">&nbsp;</a>

### configuration.setEnv(env, [alias])
Current method can change environment. By default environment = sandbox.
Also we can change domain alias for this environment. By default domain_alias = paydock.com

**Kind**: instance method of [<code>Configuration</code>](#user-content-w_Configuration)  

| Param | Type | Description |
| --- | --- | --- |
| env | <code>string</code> | sandbox, production |
| [alias] | <code>string</code> | Own domain alias |

**Example**  

```javascript
config.setEnv('production');
```
<a name="w_Configuration+setLabel" id="w_Configuration+setLabel" href="#user-content-w_Configuration+setLabel">&nbsp;</a>

### configuration.setLabel(label)
Title for tab which can be set instead of default

**Kind**: instance method of [<code>Configuration</code>](#user-content-w_Configuration)  

| Param | Type | Description |
| --- | --- | --- |
| label | <code>string</code> | Text label for tab |

**Example**  

```javascript
config.setLabel('custom label');
```
<a name="w_Configuration+createToken" id="w_Configuration+createToken" href="#user-content-w_Configuration+createToken">&nbsp;</a>

### configuration.createToken(accessToken, cb, errorCb)
createToken - method which exactly create payment one time token

**Kind**: instance method of [<code>Configuration</code>](#user-content-w_Configuration)  

| Param | Type | Description |
| --- | --- | --- |
| accessToken | <code>string</code> | Customer access token or public key which provided for each client |
| cb | <code>createToken~requestCallback</code> | The callback that handles the success response. |
| errorCb | <code>createToken~requestCallback</code> | The callback that handles the failed response. |

**Example**  

```javascript
config.createToken('582035346f65cdd57ee81192d6e5w65w4e5',
 function (data) {
     console.log(data);
 }, function (error) {
     console.log(error);
});
```
<a name="w_MultiWidget" id="w_MultiWidget" href="#user-content-w_MultiWidget">&nbsp;</a>

## MultiWidget
Class MultiWidget include method for for creating iframe url

**Kind**: global class  

* [MultiWidget](#user-content-w_MultiWidget)
    * [new MultiWidget(accessToken, conf)](#user-content-w_new_MultiWidget_new)
    * [.setStyles(fields)](#user-content-w_MultiWidget+setStyles)
    * [.usePhoneCountryMask([options])](#user-content-w_MultiWidget+usePhoneCountryMask)
    * [.setTexts(fields)](#user-content-w_MultiWidget+setTexts)
    * [.setElementStyle(element, [state], styles)](#user-content-w_MultiWidget+setElementStyle)
    * [.setFormValues(fieldValues)](#user-content-w_MultiWidget+setFormValues)
    * [.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)~~
    * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
    * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
    * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
    * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
    * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
    * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
    * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
    * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)

<a name="w_new_MultiWidget_new" id="w_new_MultiWidget_new" href="#user-content-w_new_MultiWidget_new">&nbsp;</a>

### new MultiWidget(accessToken, conf)

| Param | Type | Description |
| --- | --- | --- |
| accessToken | <code>string</code> | PayDock users access token or public key |
| conf | [<code>Configuration</code>](#user-content-w_Configuration) \| <code>string</code> \| [<code>Array.&lt;Configuration&gt;</code>](#user-content-w_Configuration) \| <code>Array.&lt;string&gt;</code> | exemplar[s] Configuration class OR configuration token |

**Example**  

```javascript
var widget = new MultiWidget('accessToken','configurationToken'); // With a pre-created configuration token

var widget = new MultiWidget('accessToken',['configurationToken', 'configurationToken2']); // With pre-created configuration tokens

var widget = new MultiWidget('accessToken', new Configuration('gatewayId')); With Configuration

var widget = new MultiWidget('accessToken',[ With Configurations
     Configuration('gatewayId'),
     Configuration('gatewayId', 'bank_account')
]);
```
<a name="w_MultiWidget+setStyles" id="w_MultiWidget+setStyles" href="#user-content-w_MultiWidget+setStyles">&nbsp;</a>

### multiWidget.setStyles(fields)
Object contain styles for widget

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| fields | [<code>IStyles</code>](#user-content-w_IStyles) | name of styles which can be shown in widget [STYLE](#user-content-w_STYLE) |

**Example**  

```javascript
widget.setStyles({
      background_color: 'rgb(0, 0, 0)',
      border_color: 'yellow',
      text_color: '#FFFFAA',
      button_color: 'rgba(255, 255, 255, 0.9)',
      font_size: '20px'
      fort_family: 'fantasy'
  });
```
<a name="w_MultiWidget+usePhoneCountryMask" id="w_MultiWidget+usePhoneCountryMask" href="#user-content-w_MultiWidget+usePhoneCountryMask">&nbsp;</a>

### multiWidget.usePhoneCountryMask([options])
Method to set a country code mask for the phone input.

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| [options] | <code>object</code> | Options for configure the phone mask. |
| [options.default_country] | <code>string</code> | Set a default country for the mask. |
| [options.preferred_countries] | <code>Array.&lt;string&gt;</code> | Set list of preferred countries for the top of the select box . |
| [options.only_countries] | <code>Array.&lt;string&gt;</code> | Set list of countries to show in the select box. |

**Example**  

```javascript
widget.usePhoneCountryMask();
```
**Example**  

```javascript
widget.usePhoneCountryMask({
      default_country: 'au',
      preferred_countries: ['au', 'gb'],
      only_countries: ['au', 'gb', 'us', 'ua']
  });
```
<a name="w_MultiWidget+setTexts" id="w_MultiWidget+setTexts" href="#user-content-w_MultiWidget+setTexts">&nbsp;</a>

### multiWidget.setTexts(fields)
Method for set different texts inside the widget

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| fields | [<code>ITexts</code>](#user-content-w_ITexts) | name of text items which can be shown in widget [TEXT](#user-content-w_TEXT) |

**Example**  

```javascript
widget.setTexts({
      title: 'Your card',
      finish_text: 'Payment resource was successfully accepted',
      title_description: '* indicates required field',
      submit_button: 'Save',
      submit_button_processing: 'Load...',
  });
```
<a name="w_MultiWidget+setElementStyle" id="w_MultiWidget+setElementStyle" href="#user-content-w_MultiWidget+setElementStyle">&nbsp;</a>

### multiWidget.setElementStyle(element, [state], styles)
Method for set styles for different elements and states

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| element | <code>string</code> | type of element for styling. These elements are available [STYLABLE_ELEMENT](#user-content-w_STYLABLE_ELEMENT) |
| [state] | <code>string</code> | state of element for styling. These states are available [STYLABLE_ELEMENT_STATE](#user-content-w_STYLABLE_ELEMENT_STATE) |
| styles | [<code>IElementStyleInput</code>](#user-content-w_IElementStyleInput) \| [<code>IElementStyleSubmitButton</code>](#user-content-w_IElementStyleSubmitButton) \| [<code>IElementStyleLabel</code>](#user-content-w_IElementStyleLabel) \| [<code>IElementStyleTitle</code>](#user-content-w_IElementStyleTitle) \| [<code>IElementStyleTitleDescription</code>](#user-content-w_IElementStyleTitleDescription) | styles list |

**Example**  

```javascript
widget.setElementStyle('input', {
  border: 'green solid 1px'
});

widget.setElementStyle('input', 'focus', {
  border: 'blue solid 1px'
});

widget.setElementStyle('input', 'error', {
 border: 'red solid 1px'
});
```
<a name="w_MultiWidget+setFormValues" id="w_MultiWidget+setFormValues" href="#user-content-w_MultiWidget+setFormValues">&nbsp;</a>

### multiWidget.setFormValues(fieldValues)
The method to set the predefined values for the form fields inside the widget

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| fieldValues | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), The object value is what we are expecting |

**Example**  

```javascript
widget.setFormValues({
      email: 'predefined@email.com',
      card_name: 'Houston'
  });
```
<a name="w_MultiWidget+setFormLabels" id="w_MultiWidget+setFormLabels" href="#user-content-w_MultiWidget+setFormLabels">&nbsp;</a>

### multiWidget.setFormLabels(fieldLabels)
The method to set custom form field labels

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| fieldLabels | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), The object value is what we are expecting |

**Example**  

```javascript
widget.setFormPlaceholders({
      card_name: 'Card Holder Name',
      email: 'Email For Receipt'
  })
```
<a name="w_MultiWidget+setFormPlaceholders" id="w_MultiWidget+setFormPlaceholders" href="#user-content-w_MultiWidget+setFormPlaceholders">&nbsp;</a>

### multiWidget.setFormPlaceholders(fieldPlaceholders)
The method to set custom form fields placeholders

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| fieldPlaceholders | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), Value of object is expected placeholder |

**Example**  

```javascript
widget.setFormPlaceholders({
      card_name: 'Input your card holder name...',
      email: 'Input your email, like test@example.com'
  })
```
<a name="w_MultiWidget+setFormElements" id="w_MultiWidget+setFormElements" href="#user-content-w_MultiWidget+setFormElements">&nbsp;</a>

### multiWidget.setFormElements(elements)
The method to set the full configuration for the all specific form elements (label, placeholder, value)
You can also use the other method for the partial configuration like: setFormValues, setFormPlaceholder, setFormLabel

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| elements | <code>string</code> | The list of elements |
| elements[].field | <code>string</code> | Field name of the element [FORM_FIELD](#user-content-w_FORM_FIELD) |
| elements[].placeholder | <code>string</code> | Set custom form field placeholder |
| elements[].label | <code>string</code> | Set custom labels near form field |
| elements[].value | <code>string</code> | Set predefined values for the form field |

**Example**  

```javascript
widget.setFormElements([
      {
          field:  'card_name',
          placeholder: 'Input your card holder name...',
          label: 'Card Holder Name',
          value: 'Houston',
      },
      {
          field:  'email',
          placeholder: 'Input your email, like test@example.com',
          label: 'Email For Receipt',
          value: 'predefined@email.com',
      },
  ])
```
<a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>

### ~~multiWidget.setIcons()~~
***Deprecated***

The method to change the widget icons

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  
<a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>

### multiWidget.setHiddenElements(elements)
Using this method you can set hidden elements inside widget

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| 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) |

**Example**  

```javascript
widget.setHiddenElements(['submit_button', 'email']);
```
<a name="w_MultiWidget+setRefId" id="w_MultiWidget+setRefId" href="#user-content-w_MultiWidget+setRefId">&nbsp;</a>

### multiWidget.setRefId(refId)
Current method can set custom ID to identify the data in the future

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| refId | <code>string</code> | custom id |

**Example**  

```javascript
widget.setRefId('id');
```
<a name="w_MultiWidget+useGatewayFieldValidation" id="w_MultiWidget+useGatewayFieldValidation" href="#user-content-w_MultiWidget+useGatewayFieldValidation">&nbsp;</a>

### multiWidget.useGatewayFieldValidation()
Current method can add visual validation from gateway to widget's form fields

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  
**Example**  

```javascript
widget.useGatewayFieldValidation();
```
<a name="w_MultiWidget+setSupportedCardIcons" id="w_MultiWidget+setSupportedCardIcons" href="#user-content-w_MultiWidget+setSupportedCardIcons">&nbsp;</a>

### multiWidget.setSupportedCardIcons(elements, validateCardNumberInput)
Current method can set icons of supported card types

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| elements | <code>Array.&lt;string&gt;</code> | [SUPPORTED_CARD_TYPES](#user-content-w_SUPPORTED_CARD_TYPES) |
| validateCardNumberInput | <code>boolean</code> | [validateCardNumberInput=false] - using this param you allow validation for card number input on supported card types |

**Example**  

```javascript
widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
```
<a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>

### multiWidget.hideUiErrors()
Current method can hide prevent the widget from showing the error messages

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  
**Example**  

```javascript
widget.hideUiErrors('id');
```
<a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>

### multiWidget.setEnv(env, [alias])
Current method can change environment. By default environment = sandbox.
Also we can change domain alias for this environment. By default domain_alias = paydock.com

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| env | <code>string</code> | sandbox, production |
| [alias] | <code>string</code> | Own domain alias |

**Example**  

```javascript
widget.setEnv('production', 'paydock.com');
```
<a name="w_MultiWidget+loadIFrameUrl" id="w_MultiWidget+loadIFrameUrl" href="#user-content-w_MultiWidget+loadIFrameUrl">&nbsp;</a>

### multiWidget.loadIFrameUrl()
Method for creating iframe url

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  
**Example**  

```javascript
widget.loadIFrameUrl(function (url) {
     console.log(url);
}, function (errors) {
     console.log(errors);
});
```
<a name="w_MultiWidget+setLanguage" id="w_MultiWidget+setLanguage" href="#user-content-w_MultiWidget+setLanguage">&nbsp;</a>

### multiWidget.setLanguage(code)
Method for setting a custom language code

**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  

| Param | Type | Description |
| --- | --- | --- |
| code | <code>string</code> | ISO 639-1 |

**Example**  

```javascript
config.setLanguage('en');
```
<a name="w_PURPOSE" id="w_PURPOSE" href="#user-content-w_PURPOSE">&nbsp;</a>

## PURPOSE : <code>object</code>
Purposes

**Kind**: global variable  

| Param | Type | Default |
| --- | --- | --- |
| PAYMENT_SOURCE | <code>string</code> | <code>&quot;payment_source&quot;</code> | 
| CARD_PAYMENT_SOURCE_WITH_CVV | <code>string</code> | <code>&quot;card_payment_source_with_cvv&quot;</code> | 
| CARD_PAYMENT_SOURCE_WITHOUT_CVV | <code>string</code> | <code>&quot;card_payment_source_without_cvv&quot;</code> | 

<a name="w_EVENT" id="w_EVENT" href="#user-content-w_EVENT">&nbsp;</a>

## EVENT : <code>object</code>
List of available event's name

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| AFTER_LOAD | <code>string</code> | <code>&quot;afterLoad&quot;</code> | 
| SUBMIT | <code>string</code> | <code>&quot;submit&quot;</code> | 
| FINISH | <code>string</code> | <code>&quot;finish&quot;</code> | 
| VALIDATION | <code>string</code> | <code>&quot;validation&quot;</code> | 
| VALIDATION_ERROR | <code>string</code> | <code>&quot;validationError&quot;</code> | 
| SYSTEM_ERROR | <code>string</code> | <code>&quot;systemError&quot;</code> | 
| META_CHANGE | <code>string</code> | <code>&quot;metaChange&quot;</code> | 
| RESIZE | <code>string</code> | <code>&quot;resize&quot;</code> | 

<a name="w_VAULT_DISPLAY_EVENT" id="w_VAULT_DISPLAY_EVENT" href="#user-content-w_VAULT_DISPLAY_EVENT">&nbsp;</a>

## VAULT\_DISPLAY\_EVENT : <code>object</code>
List of available event's name

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| AFTER_LOAD | <code>string</code> | <code>&quot;afterLoad&quot;</code> | 
| SYSTEM_ERROR | <code>string</code> | <code>&quot;system_error&quot;</code> | 
| CVV_SECURE_CODE_REQUESTED | <code>string</code> | <code>&quot;cvv_secure_code_requested&quot;</code> | 
| CARD_NUMBER_SECURE_CODE_REQUESTED | <code>string</code> | <code>&quot;card_number_secure_code_requested&quot;</code> | 
| ACCESS_FORBIDDEN | <code>string</code> | <code>&quot;access_forbidden&quot;</code> | 
| SESSION_EXPIRED | <code>string</code> | <code>&quot;systemError&quot;</code> | 
| SYSTEM_ERROR | <code>string</code> | <code>&quot;session_expired&quot;</code> | 
| OPERATION_FORBIDDEN | <code>string</code> | <code>&quot;operation_forbidden&quot;</code> | 

<a name="w_PAYMENT_TYPE" id="w_PAYMENT_TYPE" href="#user-content-w_PAYMENT_TYPE">&nbsp;</a>

## PAYMENT\_TYPE : <code>object</code>
List of available payment source types

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| CARD | <code>string</code> | <code>&quot;card&quot;</code> | 
| BANK_ACCOUNT | <code>string</code> | <code>&quot;bank_account&quot;</code> | 
| CHECKOUT | <code>string</code> | <code>&quot;checkout&quot;</code> | 

<a name="w_FORM_FIELD" id="w_FORM_FIELD" href="#user-content-w_FORM_FIELD">&nbsp;</a>

## FORM\_FIELD : <code>object</code>
Current constant include available type of fields which can be included to widget

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| CARD_NAME | <code>string</code> | <code>&quot;card_name&quot;</code> | 
| CARD_NUMBER | <code>string</code> | <code>&quot;card_number&quot;</code> | 
| EXPIRE_MONTH | <code>string</code> | <code>&quot;expire_month&quot;</code> | 
| EXPIRE_YEAR | <code>string</code> | <code>&quot;expire_year&quot;</code> | 
| CARD_CCV | <code>string</code> | <code>&quot;card_ccv&quot;</code> | 
| CARD_PIN | <code>string</code> | <code>&quot;card_pin&quot;</code> | 
| ACCOUNT_NAME | <code>string</code> | <code>&quot;account_name&quot;</code> | 
| ACCOUNT_BSB | <code>string</code> | <code>&quot;account_bsb&quot;</code> | 
| ACCOUNT_NUMBER | <code>string</code> | <code>&quot;account_number&quot;</code> | 
| ACCOUNT_ROUTING | <code>string</code> | <code>&quot;account_routing&quot;</code> | 
| ACCOUNT_HOLDER_TYPE | <code>string</code> | <code>&quot;account_holder_type&quot;</code> | 
| ACCOUNT_BANK_NAME | <code>string</code> | <code>&quot;account_bank_name&quot;</code> | 
| ACCOUNT_TYPE | <code>string</code> | <code>&quot;account_type&quot;</code> | 
| FIRST_NAME | <code>string</code> | <code>&quot;first_name&quot;</code> | 
| LAST_NAME | <code>string</code> | <code>&quot;last_name&quot;</code> | 
| EMAIL | <code>string</code> | <code>&quot;email&quot;</code> | 
| PHONE | <code>string</code> | <code>&quot;phone&quot;</code> | 
| PHONE2 | <code>string</code> | <code>&quot;phone2&quot;</code> | 
| ADDRESS_LINE1 | <code>string</code> | <code>&quot;address_line1&quot;</code> | 
| ADDRESS_LINE2 | <code>string</code> | <code>&quot;address_line2&quot;</code> | 
| ADDRESS_STATE | <code>string</code> | <code>&quot;address_state&quot;</code> | 
| ADDRESS_COUNTRY | <code>string</code> | <code>&quot;address_country&quot;</code> | 
| ADDRESS_CITY | <code>string</code> | <code>&quot;address_city&quot;</code> | 
| ADDRESS_POSTCODE | <code>string</code> | <code>&quot;address_postcode&quot;</code> | 
| ADDRESS_COMPANY | <code>string</code> | <code>&quot;address_company&quot;</code> | 

<a name="w_STYLE" id="w_STYLE" href="#user-content-w_STYLE">&nbsp;</a>

## STYLE : <code>object</code>
List of available style params for widget

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| BACKGROUND_COLOR | <code>string</code> | <code>&quot;background_color&quot;</code> | 
| TEXT_COLOR | <code>string</code> | <code>&quot;text_color&quot;</code> | 
| BORDER_COLOR | <code>string</code> | <code>&quot;border_color&quot;</code> | 
| BUTTON_COLOR | <code>string</code> | <code>&quot;button_color&quot;</code> | 
| ERROR_COLOR | <code>string</code> | <code>&quot;error_color&quot;</code> | 
| SUCCESS_COLOR | <code>string</code> | <code>&quot;success_color&quot;</code> | 
| FONT_SIZE | <code>string</code> | <code>&quot;font_size&quot;</code> | 
| FONT_FAMILY | <code>string</code> | <code>&quot;font_family&quot;</code> | 

<a name="w_TEXT" id="w_TEXT" href="#user-content-w_TEXT">&nbsp;</a>

## TEXT : <code>object</code>
List of available text item params for widget

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| TITLE | <code>string</code> | <code>&quot;title&quot;</code> | 
| FINISH | <code>string</code> | <code>&quot;finish_text&quot;</code> | 

<a name="w_ELEMENT" id="w_ELEMENT" href="#user-content-w_ELEMENT">&nbsp;</a>

## ELEMENT : <code>object</code>
List of available params for hide elements

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| SUBMIT_BUTTON | <code>string</code> | <code>&quot;submit_button&quot;</code> | 
| TABS | <code>string</code> | <code>&quot;tabs&quot;</code> | 

<a name="w_SUPPORTED_CARD_TYPES" id="w_SUPPORTED_CARD_TYPES" href="#user-content-w_SUPPORTED_CARD_TYPES">&nbsp;</a>

## SUPPORTED\_CARD\_TYPES : <code>object</code>
The list of available parameters for showing card icons

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| AMEX | <code>string</code> | <code>&quot;amex&quot;</code> | 
| AUSBC | <code>string</code> | <code>&quot;ausbc&quot;</code> | 
| DINERS | <code>string</code> | <code>&quot;diners&quot;</code> | 
| DISCOVER | <code>string</code> | <code>&quot;discover&quot;</code> | 
| JAPCB | <code>string</code> | <code>&quot;japcb&quot;</code> | 
| LASER | <code>string</code> | <code>&quot;laser&quot;</code> | 
| MASTERCARD | <code>string</code> | <code>&quot;mastercard&quot;</code> | 
| SOLO | <code>string</code> | <code>&quot;solo&quot;</code> | 
| VISA | <code>string</code> | <code>&quot;visa&quot;</code> | 
| VISA_WHITE | <code>string</code> | <code>&quot;visa_white&quot;</code> | 

<a name="w_STYLABLE_ELEMENT" id="w_STYLABLE_ELEMENT" href="#user-content-w_STYLABLE_ELEMENT">&nbsp;</a>

## STYLABLE\_ELEMENT : <code>object</code>
Current constant include available type of element for styling

**Kind**: global constant  

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| INPUT | <code>string</code> | <code>&quot;input.&quot;</code> | These states are available: [STYLABLE_ELEMENT_STATE.ERROR](#user-content-w_STYLABLE_ELEMENT_STATE), [STYLABLE_ELEMENT_STATE.FOCUS](#user-content-w_STYLABLE_ELEMENT_STATE).   These styles are available [IElementStyleInput](#user-content-w_IElementStyleInput) |
| SUBMIT_BUTTON | <code>string</code> | <code>&quot;submit_button&quot;</code> | These states are available: [STYLABLE_ELEMENT_STATE.HOVER](#user-content-w_STYLABLE_ELEMENT_STATE).   These styles are available [IElementStyleSubmitButton](#user-content-w_IElementStyleSubmitButton) |
| LABEL | <code>string</code> | <code>&quot;label.&quot;</code> | These styles are available [IElementStyleLabel](#user-content-w_IElementStyleLabel) |
| TITLE | <code>string</code> | <code>&quot;title.&quot;</code> | These styles are available [IElementStyleTitle](#user-content-w_IElementStyleTitle) |
| TITLE_DESCRIPTION | <code>string</code> | <code>&quot;title_description.&quot;</code> | These styles are available [IElementStyleTitleDescription](#user-content-w_IElementStyleTitleDescription) |

<a name="w_STYLABLE_ELEMENT_STATE" id="w_STYLABLE_ELEMENT_STATE" href="#user-content-w_STYLABLE_ELEMENT_STATE">&nbsp;</a>

## STYLABLE\_ELEMENT\_STATE : <code>object</code>
Current constant include available states of element for styling

**Kind**: global constant  

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| ERROR | <code>string</code> | <code>&quot;error&quot;</code> | client|server validation. This state applies to: input |
| 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>
List of available triggers

**Kind**: global constant  

| Param | Type | Default |
| --- | --- | --- |
| SUBMIT_FORM | <code>string</code> | <code>&quot;submit_form&quot;</code> | 
| CHANGE_TAB | <code>string</code> | <code>&quot;tab&quot;</code> | 
| HIDE_ELEMENTS | <code>string</code> | <code>&quot;hide_elements&quot;</code> | 
| SHOW_ELEMENTS | <code>string</code> | <code>&quot;show_elements&quot;</code> | 
| REFRESH_CHECKOUT | <code>string</code> | <code>&quot;refresh_checkout&quot;</code> | 
| UPDATE_FORM_VALUES | <code>string</code> | <code>&quot;update_form_values&quot;</code> | 
| INIT_CHECKOUT | <code>string</code> | <code>&quot;init_checkout&quot;</code> |