@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 - Not officially supported . They are handled differently by different tools / settings!
 ❌
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>
```

## Constants

<dl>
<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_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_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_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> | 
| UNIONPAY | <code>string</code> | <code>&quot;unionpay&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> | 
| INJECT_CUSTOMER_DATA | <code>string</code> | <code>&quot;inject_customer_data&quot;</code> | 


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

This widget provides a list of previously added (saved) payment-sources by customer_id or reference.
The widget provides an opportunity to use events to track the process of selecting payment-sources and provide meta information about the payment-sources.

Payment-source requires a query_token that represents a pre-generated and secure token for limiting the list
payment-sources, for a specific user or reference.

In order to generate this token, you need to send a GET request to [getCustomerList](#get-customer-list-with-parameters)
where required query parameter must be id or reference. In response you get response.query_token which you can use in the widget.

## Payment sources simple example

### Container

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

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


### Initialization
```javascript
var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
list.load();
```

```javascript
// ES2015 | TypeScript

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

var list = new HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
list.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: 40%;height: 300px;}</style>
</head>
<body>
    <div id="list"></div>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
    <script>
        var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
        list.load();
    </script>
</body>
</html>
```


## Payment sources advanced example

### Customization

```javascript
list.setStyles({
    icon_size: 'small'
});
```

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

### Settings

```javascript

list.filterByTypes(['card', 'checkout']); // filter by any payment source types
list.filterByGatewayIds(['gateway1']); // also other filters

list.setRefId('id'); // your unique identifier to identify the data

list.setLimit(4); // Pagination elements will show if count of elements more then argument passed

list.onSelectInsert('input[name="ps_id"]', 'payment_source_id'); // insert one-time-token to your input after finish checkout

list.on('select', function(data) {
    console.log(data);
});
```

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

### Full example

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>iframe {border: 0;width: 40%;height: 300px;}</style>
</head>
<body>
    <div id="list"></div>
    <input type="text" name="ps_id" />
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
    <script>
        var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
        list.filterByTypes(['card', 'checkout']);
        list.filterByGatewayIds(['gateway1']);
        list.setRefId('id');
        list.setLimit(4);
        list.setStyles({
            icon_size: 'small'
        });

        list.load();

        list.onSelectInsert('input[name="ps_id"]', 'payment_source_id');
        list.on('select', function(data) {
            console.log(data);
        });
    </script>
</body>
</html>
```

## Classes

<dl>
<dt><a href="#user-content-psw_HtmlPaymentSourceWidget">HtmlPaymentSourceWidget</a> ⇐ <code><a href="#user-content-psw_PaymentSourceWidget">PaymentSourceWidget</a></code></dt>
<dd><p>Class HtmlPaymentSourceWidget include method for working on html</p>
</dd>
<dt><a href="#user-content-psw_PaymentSourceWidget">PaymentSourceWidget</a></dt>
<dd><p>Class PaymentSourceWidget include method for for creating iframe url</p>
</dd>
</dl>

## Constants

<dl>
<dt><a href="#user-content-psw_EVENT">EVENT</a> : <code>object</code></dt>
<dd><p>List of available event&#39;s name</p>
</dd>
<dt><a href="#user-content-psw_STYLE">STYLE</a> : <code>object</code></dt>
<dd><p>List of available style params for widget</p>
</dd>
<dt><a href="#user-content-psw_PAYMENT_SOURCE_TYPE">PAYMENT_SOURCE_TYPE</a> : <code>object</code></dt>
<dd><p>List of available payment source types</p>
</dd>
</dl>

## Typedefs

<dl>
<dt><a href="#user-content-psw_listener--PaymentSourceWidget">listener--PaymentSourceWidget</a> : <code>function</code></dt>
<dd><p>This callback will be called for each event in payment source widget</p>
</dd>
</dl>

## Interfaces

<dl>
<dt><a href="#user-content-psw_IEventSelectData">IEventSelectData</a></dt>
<dd><p>Interface of data from event.</p>
</dd>
<dt><a href="#user-content-psw_IEventPaginationData">IEventPaginationData</a></dt>
<dd><p>Interface of data from event.</p>
</dd>
<dt><a href="#user-content-psw_IEventAfterLoadData">IEventAfterLoadData</a></dt>
<dd><p>Interface of data from event.</p>
</dd>
<dt><a href="#user-content-psw_IEventFinishData">IEventFinishData</a></dt>
<dd><p>Interface of data from event.</p>
</dd>
<dt><a href="#user-content-psw_IEventSizeData">IEventSizeData</a></dt>
<dd><p>Interface of data from event.</p>
</dd>
<dt><a href="#user-content-psw_IStyles">IStyles</a></dt>
<dd><p>Interface for classes that represent widget&#39;s styles.</p>
</dd>
</dl>

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

## IEventSelectData
Interface of data from event.

**Kind**: global interface  

| Param | Type |
| --- | --- |
| event | <code>string</code> | 
| purpose | <code>string</code> | 
| message_source | <code>string</code> | 
| [ref_id] | <code>string</code> | 
| customer_id | <code>string</code> | 
| payment_source_id | <code>string</code> | 
| gateway_id | <code>string</code> | 
| primary | <code>boolean</code> | 
| [widget_id] | <code>string</code> | 
| [card_number_last4] | <code>string</code> | 
| [card_scheme] | <code>string</code> | 
| gateway_type | <code>string</code> | 
| [checkout_email] | <code>string</code> | 
| payment_source_type | <code>string</code> | 
| [account_name] | <code>string</code> | 
| [account_number] | <code>string</code> | 

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

## IEventPaginationData
Interface of data from event.

**Kind**: global interface  

| Param | Type |
| --- | --- |
| event | <code>string</code> | 
| purpose | <code>string</code> | 
| message_source | <code>string</code> | 
| [ref_id] | <code>string</code> | 
| total_item | <code>number</code> | 
| skip | <code>number</code> | 
| limit | <code>number</code> | 

<a name="psw_IEventAfterLoadData" id="psw_IEventAfterLoadData" href="#user-content-psw_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. |
| total_item | <code>number</code> | Pagination param. Total item count |
| skip | <code>number</code> | Pagination param. Skip items from first item |
| limit | <code>number</code> | Pagination param. Query limit |

<a name="psw_IEventFinishData" id="psw_IEventFinishData" href="#user-content-psw_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. |

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

## IEventSizeData
Interface of data from event.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| event | <code>number</code> | The name of the event. |
| purpose | <code>number</code> | A system variable that states the purpose of the event. |
| message_source | <code>string</code> | A system variable that identifies the event source. |
| [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. |
| height | <code>number</code> | Height of iFrame |
| width | <code>number</code> | Width of iFrame |

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

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

**Kind**: global interface  

| Param | Type |
| --- | --- |
| [background_color] | <code>string</code> | 
| [background_active_color] | <code>string</code> | 
| [text_color] | <code>string</code> | 
| [border_color] | <code>string</code> | 
| [font_size] | <code>string</code> | 
| [icon_size] | <code>string</code> | 

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

## HtmlPaymentSourceWidget ⇐ [<code>PaymentSourceWidget</code>](#user-content-psw_PaymentSourceWidget)
Class HtmlPaymentSourceWidget include method for working on html

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

* [HtmlPaymentSourceWidget](#user-content-psw_HtmlPaymentSourceWidget) ⇐ [<code>PaymentSourceWidget</code>](#user-content-psw_PaymentSourceWidget)
    * [new HtmlPaymentSourceWidget(selector, publicKey, queryToken)](#user-content-psw_new_HtmlPaymentSourceWidget_new)
    * [.load()](#user-content-psw_HtmlPaymentSourceWidget+load)
    * [.on(eventName, cb)](#user-content-psw_HtmlPaymentSourceWidget+on)
    * [.hide([saveSize])](#user-content-psw_HtmlPaymentSourceWidget+hide)
    * [.show()](#user-content-psw_HtmlPaymentSourceWidget+show)
    * [.reload()](#user-content-psw_HtmlPaymentSourceWidget+reload)
    * [.onSelectInsert(selector, dataType)](#user-content-psw_HtmlPaymentSourceWidget+onSelectInsert)
    * [.setStyles(fields)](#user-content-psw_PaymentSourceWidget+setStyles)
    * [.setRefId(refId)](#user-content-psw_PaymentSourceWidget+setRefId)
    * [.setLimit(count)](#user-content-psw_PaymentSourceWidget+setLimit)
    * [.setEnv(env, [alias])](#user-content-psw_PaymentSourceWidget+setEnv)
    * [.getIFrameUrl()](#user-content-psw_PaymentSourceWidget+getIFrameUrl)
    * [.filterByGatewayIds(ids)](#user-content-psw_PaymentSourceWidget+filterByGatewayIds)
    * [.filterByTypes(types)](#user-content-psw_PaymentSourceWidget+filterByTypes)
    * [.setLanguage(code)](#user-content-psw_PaymentSourceWidget+setLanguage)

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

### new HtmlPaymentSourceWidget(selector, publicKey, queryToken)

| Param | Type | Description |
| --- | --- | --- |
| selector | <code>string</code> | Selector of html element. Container for widget |
| publicKey | <code>string</code> | PayDock users public key |
| queryToken | <code>string</code> | PayDock's query token that represents params to search customer by id or reference |

**Example**  

```javascript
* var widget = new HtmlPaymentSourceWidget('#widget', 'publicKey','queryToken');
```
<a name="psw_HtmlPaymentSourceWidget+load" id="psw_HtmlPaymentSourceWidget+load" href="#user-content-psw_HtmlPaymentSourceWidget+load">&nbsp;</a>

### htmlPaymentSourceWidget.load()
The final method to beginning, the load process of widget to html

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

### htmlPaymentSourceWidget.on(eventName, cb)
Listen to events of widget

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

| Param | Type | Description |
| --- | --- | --- |
| eventName | <code>string</code> | Available event names [EVENT](#user-content-psw_EVENT) |
| cb | [<code>listener--PaymentSourceWidget</code>](#user-content-psw_listener--PaymentSourceWidget) |  |

**Example**  

```javascript
widget.on('select', function (data) {
     console.log(data);
});
```
<a name="psw_HtmlPaymentSourceWidget+hide" id="psw_HtmlPaymentSourceWidget+hide" href="#user-content-psw_HtmlPaymentSourceWidget+hide">&nbsp;</a>

### htmlPaymentSourceWidget.hide([saveSize])
Using this method you can hide widget after load

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

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [saveSize] | <code>boole