@paydock/client-sdk/README.md

Paydock client sdk

# Client-sdk

It is a solution for collecting and handling payment sources in secure way.

With SDK you can create a payment form widget as an independent part or insert use inside your form.

The SDK supports methods for customization of widget by your needs (styling, form fields, etc)

## Other information 

To work with the widget you will need public_key or access_token ([see Authentication](https://docs.paydock.com/#authentication))

Also you will need added gateway ([see API Reference by gateway](https://docs.paydock.com/#gateways))



## Get started

The Client SDK ships in JavaScript ES6 (EcmaScript 2015) in three different
formats (CJS, ESM and UMD) along with respective TypeScript declarations. Below,
we exemplify how to import each format.

### With package manager

Our NPM package is compatible with all package managers (e.g., `npm`, `yarn`,
`pnpm`, `bun`). Using `npm` the following command would add the Client SDK as a
production dependency.

```bash
npm install @paydock/client-sdk
```

After installation is complete, if you are developing in NodeJS environments or
using tools that expect your JavaScript code to be in CJS format (e.g., Jest,
Karma, RequireJS, Webpack), you can import the Client SDK using CommonJS modules.
For these environments the UMD format (`@paydock/client-sdk/bundles/widget.umd.js`)
can also be used as a fallback. Alternatively, in case you are developing in
projects that have access to modern bundlers such as Vite or others (e.g., SPA
libs or SSR Metaframeworks), you can import the Client SDK features using ESM
through named imports or namespaced imports.


```cjs
// module import - CommonJS/Node projects ✅
const paydock = require('@paydock/client-sdk')
const api = new paydock.Api('publicKey');
```

```mjs
// named import - ESM projects or TypeScript projects ✅
import { HtmlWidget } from '@paydock/client-sdk'
const widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
```

```mjs
// namespaced import - ESM projects or TypeScript projects ✅
import * as Paydock from '@paydock/client-sdk'
const widget = new Paydock.HtmlWidget('#selector', 'publicKey', 'gatewayId');
```

```js
// default import - We do not provide default exports. They are handled differently by different tools!
 ❌
import paydock from '@paydock/client-sdk'
>>> "Uncaught SyntaxError: The requested module does not provide an export named 'default'"
```


### Download from CDN

For browser environments, you can import the Client SDK directly from our CDN to
your project's HTML. To accomplish this, include the Client SDK in your page
using one and only of the two script tags below. After this step you will be
able to access the Client SDK features via the global variable `paydock`.

For production we recommend using the compressed version (`.min.js`) since
it will result in faster loading times for your end users.

- *Compressed version for production: `https://widget.paydock.com/sdk/latest/widget.umd.min.js`*

- *Full version for development and debug: `https://widget.paydock.com/sdk/latest/widget.umd.js`*

You may download the production version of the Client SDK scripts [here][min],
and, the development version [here][max].

[min]: https://widget.paydock.com/sdk/latest/widget.umd.min.js
[max]: https://widget.paydock.com/sdk/latest/widget.umd.js

For more advanced use-cases, the library has [UMD](https://github.com/umdjs/umd)
format that can be used in RequireJS, Webpack, etc.


```html
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
<script>
    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
</script>
```


## Widget

You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#widget-simple-example)

A payment form where it is possible to enter card data/bank accounts and then receive a one-time
token for charges, subscriptions etc. This form can be customized, you can customize the fields and set styles.
It is possible in real-time to monitor the actions of user with widget and get information about payment-source using events.

## Widget simple example

### Container

```html
<div id="widget"></div>
```

You must create a container for the widget. Inside this tag, the widget will be initialized

### Initialization

```javascript
var widget = new paydock.HtmlWidget('#widget', 'publicKey');
widget.load();
```

```javascript
// ES2015 | TypeScript

import { HtmlWidget } from '@paydock/client-sdk';

var widget = new HtmlWidget('#widget', 'publicKey');
widget.load();
```

Then write only need 2 lines of code in js to initialize widget

### Full example

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>iframe {border: 0;width: 100%;height: 300px;}</style>
</head>
<body>
    <form id="paymentForm">
        <div id="widget"></div>
        <input name="payment_source_token" id="payment_source_token" type="hidden">
    </form>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
    <script>
        var widget = new paydock.HtmlWidget('#widget', 'publicKey');
        widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');
        widget.load();
    </script>
</body>
</html>
```

## Widget advanced example

### Customization

```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'
 });
```

This example shows how you can customize to your needs and design

### Customization from html

```html
<div id="widget"
  widget-style="text-color: #FFFFAA; border-color: #yellow"
  title="Payment form"
  finish-text="Payment resource was successfully accepted"></div>
```

This example shows how you can set style and texts from html

### Settings

```javascript
widget.setRefId('id'); // your unique identifier to identify the data

widget.setFormFields(['phone', 'email']); // add additional fields for form of widget

widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported card types
```

This example shows how you can use a lot of other methods to settings your form

### Error handling

## Overview

Error events are emitted when an error occurs during widget operations. These events provide detailed information about the error, including its category, cause, and contextual details.

## Error Event Structure

### Base Properties

| Property | Type | Description |
|----------|------|-------------|
| `event` | `string` | Always set to `"error"` |
| `purpose` | `string` | Indicates the purpose of the action that triggered the error event (e.g., `"payment_source"`) |
| `message_source` | `string` | Source of the message (e.g., `"widget.paydock"`) |
| `ref_id` | `string` | Reference ID for the operation |
| `widget_id` | `string` | Unique identifier of the widget instance |
| `error` | `object` | Error object containing error information |

### Error Object Properties

The `error` object contains detailed information about the error:

| Property | Type | Description |
|----------|------|-------------|
| `category` | `string` | High-level error classification |
| `cause` | `string` | Specific error cause |
| `retryable` | `boolean` | Indicates if the operation can be retried |
| `details` | `object` | Additional error context |

## Error Categories

| Category | Description |
|----------|-------------|
| `configuration` | Configuration-related errors |
| `identity_access_management` | Authentication and authorization errors |
| `internal` | Internal system errors |
| `process` | Process and operation errors |
| `resource` | Resource-related errors |
| `validation` | Input validation errors |

## Error Causes

| Cause | Category | Description |
|-------|----------|-------------|
| `aborted` | `process` | Operation was aborted |
| `access_forbidden` | `identity` | Access to resource is forbidden |
| `already_exists` | `validation` | Resource already exists |
| `canceled` | `process` | Operation was canceled |
| `invalid_configuration` | `configuration` | Invalid widget configuration |
| `invalid_input` | `validation` | Invalid input provided |
| `not_found` | `resource` | Requested resource not found |
| `not_implemented` | `process` | Requested feature not implemented |
| `rate_limited` | `process` | Too many requests |
| `server_busy` | `process` | Server is too busy to handle request |
| `service_unreachable` | `process` | Unable to reach required service |
| `unauthorized` | `identity` | Authentication required |
| `unknown_error` | `internal` | Unexpected error occurred |
| `unprocessable_entity` | `validation` | Valid input but cannot be processed |

## Error Details Object

| Property | Type | Description |
|----------|------|-------------|
| `cause` | `string` | Matches the top-level error cause |
| `contextId` | `string` | Context identifier (usually matches widget_id) |
| `message` | `string` | Human-readable error message |
| `timestamp` | `string` | ISO 8601 timestamp of when the error occurred |

## Example

```javascript
widget.hideUiErrors(); // hide default UI errors and handle errors by listening to error events with widget.on('error')

widget.on('error', (error) => {
    console.log(error);
    // {
    //     "event": "error",
    //     "purpose": "payment_source",
    //     "message_source": "widget.paydock",
    //     "ref_id": "",
    //     "widget_id": "d4744f30-dcf5-168e-7f78-c8273a3401d4",
    //     "error": {
    //         "category": "process",
    //         "cause": "service_unreachable",
    //         "details": {
    //             "cause": "service_unreachable",
    //             "contextId": "d4744f30-dcf5-168e-7f78-c8273a3401d4",
    //             "message": "The service is not availabe",
    //             "timestamp": "2025-02-13T09:30:21.157Z"
    //         },
    //         "retryable": false
    //     }
    // }
});
```

## Handling Errors (Tips)

When handling errors, consider:

1. Check the `retryable` flag to determine if the operation can be retried
2. Use the `category` for high-level error handling logic
3. Use the `cause` for specific error handling cases
4. The `contextId` can be used for error tracking and debugging
5. The `timestamp` helps with error logging and debugging

### Full example

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>iframe {border: 0;width: 100%;height: 400px;}</style>
</head>
<body>
<form id="paymentForm">
    <div id="widget"
        widget-style="text-color: #FFFFAA; border-color: #yellow"
        title="Payment form"
        finish-text="Payment resource was successfully accepted">
    </div>

    <div 
        id="error" 
        style="
            display: none;
            max-width: 600px;
            margin: 16px auto;
            padding: 16px 20px;
            border-radius: 8px;
            background-color: #FEF2F2;
            border: 1px solid #FEE2E2;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            font-family: system-ui, -apple-system, sans-serif;
            color: #991B1B;
            line-height: 1.5;
            font-size: 14px;
        "
        title="error"
        >
        <div style="display: flex; align-items: flex-start; gap: 12px;">
            <div>
                <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Access Error</h4>
                <div id="error-message"></div>
            </div>
        </div>
    </div> 
</form>

<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
<script>
 var widget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');

 widget.setSupportedCardIcons(['mastercard', 'visa']);
 widget.setFormFields(['phone', 'email']);
 widget.setRefId('custom-ref-id');
    widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');

    widget.on('error', ({ error }) => {
        document.getElementById('error-message').textContent = error.details.message;
        document.getElementById('error').style.display = 'block';
    });
 widget.load();
</script>

</body>
</html>
```

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