@paydock/client-sdk 1.105.1 → 1.105.56-beta

package/docs/paypal-data-collector.md

@@ -0,0 +1,149 @@
+## Classes
+
+<dl>
+<dt><a href="#PayPalDataCollector">PayPalDataCollector</a></dt>
+<dd><p>PayPal Data Collector Widget constructor</p>
+</dd>
+</dl>
+
+## Typedefs
+
+<dl>
+<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onError method.</p>
+</dd>
+</dl>
+
+## Interfaces
+
+<dl>
+<dt><a href="#PayPalDataCollectorConfig">PayPalDataCollectorConfig</a> : <code>object</code></dt>
+<dd><p>Interface of data used for PayPal configuration. For further information refer to <a href="https://developer.paypal.com/sdk/js/reference/#style">the documentation</a>.</p>
+</dd>
+<dt><a href="#CollectedDeviceData">CollectedDeviceData</a> : <code>object</code></dt>
+<dd><p>Data object with the corresponding <code>correlation_id</code>.</p>
+</dd>
+<dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
+<dd><p>Interface for IOnErrorEventData</p>
+</dd>
+</dl>
+
+<a name="PayPalDataCollectorConfig" id="PayPalDataCollectorConfig" href="#PayPalDataCollectorConfig">&nbsp;</a>
+
+## PayPalDataCollectorConfig : <code>object</code>
+Interface of data used for PayPal configuration. For further information refer to [the documentation](https://developer.paypal.com/sdk/js/reference/#style).
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [mouse_movement] | <code>boolean</code> | Used for indicating if is enabled mouse movement collection. |
+
+<a name="CollectedDeviceData" id="CollectedDeviceData" href="#CollectedDeviceData">&nbsp;</a>
+
+## CollectedDeviceData : <code>object</code>
+Data object with the corresponding `correlation_id`.
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [correlation_id] | <code>string</code> | The correlation ID that was used on the subsecuent requests. |
+
+<a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData">&nbsp;</a>
+
+## IOnErrorEventData : <code>object</code>
+Interface for IOnErrorEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| error_code | <code>string</code> | Error code. One of 'promise_not_enabled' or 'script_error'. |
+
+<a name="PayPalDataCollector" id="PayPalDataCollector" href="#PayPalDataCollector">&nbsp;</a>
+
+## PayPalDataCollector
+PayPal Data Collector Widget constructor
+
+**Kind**: global class  
+
+* [PayPalDataCollector](#PayPalDataCollector)
+    * [new PayPalDataCollector(flowId, config)](#new_PayPalDataCollector_new)
+    * [.collectDeviceData()](#PayPalDataCollector+collectDeviceData) ⇒ [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData)
+    * [.onError([callback])](#PayPalDataCollector+onError)
+    * [.setEnv(env)](#PayPalDataCollector+setEnv)
+
+<a name="new_PayPalDataCollector_new" id="new_PayPalDataCollector_new" href="#new_PayPalDataCollector_new">&nbsp;</a>
+
+### new PayPalDataCollector(flowId, config)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| flowId | <code>string</code> | This string identifies the source website of the FraudNet request. |
+| config | [<code>PayPalDataCollectorConfig</code>](#PayPalDataCollectorConfig) | Extra configuration for the widget. |
+
+**Example**  
+```js
+var payPalDataCollector = new PayPalDataCollector('FLOW_ID', {});
+```
+<a name="PayPalDataCollector+collectDeviceData" id="PayPalDataCollector+collectDeviceData" href="#PayPalDataCollector+collectDeviceData">&nbsp;</a>
+
+### payPalDataCollector.collectDeviceData() ⇒ [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData)
+After configuring the PayPalDataCollector Widget, starts the process and returns
+the correlation id used among the requests.
+
+**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)  
+**Returns**: [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData) - Promise when resolved, returnsa an object
+that contains the `correlation_id` key.  
+**Example**  
+```js
+const collectedDeviceData = await payPalDataCollectorWidget.collectDeviceData();
+console.log(collectedDeviceData.correlation_id)
+```
+<a name="PayPalDataCollector+onError" id="PayPalDataCollector+onError" href="#PayPalDataCollector+onError">&nbsp;</a>
+
+### payPalDataCollector.onError([callback])
+If the process fails, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
+
+**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
+
+**Example**  
+```js
+PayPalDataCollector.onError((eventData) => console.log('Some error occur'));
+```
+<a name="PayPalDataCollector+setEnv" id="PayPalDataCollector+setEnv" href="#PayPalDataCollector+setEnv">&nbsp;</a>
+
+### payPalDataCollector.setEnv(env)
+Current method can change environment. By default environment = test.
+This method does not affect Paydock's API calls or environments, is only for PayPal Data Collector
+script, in order to know if the script is injected on a live server or is a testing
+environment. The available values are `test` and `live`. This should match with the used
+`gateway.mode` in Paydock to process the transaction.
+
+**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| env | <code>string</code> | test, live |
+
+**Example**  
+```js
+PayPalDataCollector.setEnv('live');
+```
+<a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback">&nbsp;</a>
+
+## OnErrorCallback : <code>function</code>
+Callback for onError method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) \| <code>null</code> | 
+

package/docs/paypal-save-payment-source-examples.md

@@ -0,0 +1,63 @@
+## PayPalSavePaymentSource Widget
+
+PayPalSavePaymentSource Widget allows to obtain a Paydock one time token linked with a Paypal payment source from the customer.
+
+The general flow to use the widgets is:
+1. Configure your PayPal gateway and connect it using Paydock API or Dashboard.
+2. Create a container in your site
+```html
+<div id="widget"></div>
+```
+3. Initialize the specific `PayPalSavePaymentSourceWidget`, providing your Access token or Public Key, the Gateway ID that Paydock provides plus required and optional config parameter for the widget in use. The general format is:
+```js
+new paydock.PayPalSavePaymentSourceWidget(
+    "#widget",
+    accessTokenOrPublicKey,
+    gatewayId,
+    widgetSpecificConfig,
+);
+```
+4. Handle the `onSuccess`, `onError` and `onCancel` for paypal setup token results.
+5. If `onSuccess` event is emmited, event data should contain `token` and `email` ready to use.
+
+### Example
+
+A full description of the config parameters for [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget) meta parameters can be found [here](#PayPalSavePaymentSourceWidgetConfig). Below you will find a fully working html example.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Using PayDock PayPalSavePaymentSourceWidget!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    let button = new paydock.PayPalSavePaymentSourceWidget(
+        "#widget",
+        accessTokenOrPublicKey,
+        gatewayId,
+        {
+            style: {
+                layout: 'vertical',
+                color:  'gold',
+                shape:  'pill',
+                label:  'paypal'
+            }
+        }
+    );
+
+    payPalSavePaymentSourceWidget.onSuccess((data) => console.log('On success: ', data));
+    payPalSavePaymentSourceWidget.onError((data) => console.log('On error: ', data));
+    payPalSavePaymentSourceWidget.onCancel(() => console.log('On cancelled'));
+
+    button.setEnv('sandbox');
+
+    button.load();
+</script>
+</html>
+```

package/docs/paypal-save-payment-source.md

@@ -0,0 +1,256 @@
+## Classes
+
+<dl>
+<dt><a href="#PayPalSavePaymentSourceWidget">PayPalSavePaymentSourceWidget</a></dt>
+<dd><p>PayPal Save Payment Source Widget constructor</p>
+</dd>
+</dl>
+
+## Typedefs
+
+<dl>
+<dt><a href="#OnSuccessCallback">OnSuccessCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onSuccess method.</p>
+</dd>
+<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onError method.</p>
+</dd>
+<dt><a href="#OnCancelCallback">OnCancelCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onCancel method.</p>
+</dd>
+</dl>
+
+## Interfaces
+
+<dl>
+<dt><a href="#PayPalSavePaymentSourceWidgetConfig">PayPalSavePaymentSourceWidgetConfig</a> : <code>object</code></dt>
+<dd><p>Interface of data used for PayPal configuration. For further information refer to <a href="https://developer.paypal.com/sdk/js/reference/#style">the documentation</a>.</p>
+</dd>
+<dt><a href="#ErrorCodes">ErrorCodes</a> : <code>object</code></dt>
+<dd><p>Interface of possible error codes inside onError event data.</p>
+</dd>
+<dt><a href="#IOnSuccessEventData">IOnSuccessEventData</a> : <code>object</code></dt>
+<dd><p>Interface for IOnSuccessEventData</p>
+</dd>
+<dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
+<dd><p>Interface for IOnErrorEventData</p>
+</dd>
+<dt><a href="#IOnCancelEventData">IOnCancelEventData</a> : <code>object</code></dt>
+<dd><p>Interface for IOnCancelEventData</p>
+</dd>
+</dl>
+
+<a name="PayPalSavePaymentSourceWidgetConfig" id="PayPalSavePaymentSourceWidgetConfig" href="#PayPalSavePaymentSourceWidgetConfig">&nbsp;</a>
+
+## PayPalSavePaymentSourceWidgetConfig : <code>object</code>
+Interface of data used for PayPal configuration. For further information refer to [the documentation](https://developer.paypal.com/sdk/js/reference/#style).
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [style.layout] | <code>&#x27;vertical&#x27;</code> \| <code>&#x27;horizontal&#x27;</code> | Used for indicating the PayPal Button layout. |
+| [style.color] | <code>&#x27;blue&#x27;</code> \| <code>&#x27;gold&#x27;</code> \| <code>&#x27;silver&#x27;</code> \| <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Used for indicating the main color of the PayPal Button. |
+| [style.shape] | <code>&#x27;rect&#x27;</code> \| <code>&#x27;sharp&#x27;</code> \| <code>&#x27;pill&#x27;</code> | Used for indicating the shape of the PayPal Button. |
+| [style.label] | <code>&#x27;paypal&#x27;</code> \| <code>&#x27;checkout&#x27;</code> \| <code>&#x27;buynow&#x27;</code> \| <code>&#x27;pay&#x27;</code> | Used for indicating the label of the PayPal Button. |
+| [style.disableMaxWidth] | <code>boolean</code> | Used for indicating if the max width will be disabled. |
+| [style.disableMaxHeight] | <code>boolean</code> | Used for indicating the max height will be disabled. |
+| [style.height] | <code>number</code> | Used for indicating the height of the PayPal Button, if disableMaxHeight is true. |
+| [style.borderRadius] | <code>number</code> | Used for indicating the border radius of the PayPal Button. |
+| [style.tagline] | <code>boolean</code> | Used for indicating the tagline of the PayPal Button. |
+| [message.amount] | <code>number</code> | Used for indicating an amount before the payment. |
+| [message.align] | <code>&#x27;center&#x27;</code> \| <code>&#x27;left&#x27;</code> \| <code>&#x27;right&#x27;</code> | Used for indicating the align of the message. |
+| [message.color] | <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Used for indicating the color of the message. |
+| [message.position] | <code>&#x27;top&#x27;</code> \| <code>&#x27;bottom&#x27;</code> | Used for indicating the position of the message. |
+
+<a name="ErrorCodes" id="ErrorCodes" href="#ErrorCodes">&nbsp;</a>
+
+## ErrorCodes : <code>object</code>
+Interface of possible error codes inside onError event data.
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [unavailable] | <code>string</code> | Error code when an error occurs loading the widget. |
+| [onPaypalVaultSetupTokenError] | <code>string</code> | Error code when an error occrus on PayPal side. |
+| [onGetIdTokenError] | <code>string</code> | Error code when trying to get ID token from PayPal. |
+| [onGetWalletConfigError] | <code>string</code> | Error code when trying to get wallet config from Paydock. |
+| [onGetSetupTokenError] | <code>string</code> | Error code when trying to get the setup token from PayPal. |
+| [onOneTimeTokenError] | <code>string</code> | Error code when trying to get the one time token from Paydock. |
+
+<a name="IOnSuccessEventData" id="IOnSuccessEventData" href="#IOnSuccessEventData">&nbsp;</a>
+
+## IOnSuccessEventData : <code>object</code>
+Interface for IOnSuccessEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>EVENTS</code> | Event Name is 'ON_SUCCESS' |
+| data | <code>object</code> | Data object |
+| data.token | <code>string</code> | One Time Token to be exchanged for a Paydock Customer. |
+| [data.email] | <code>string</code> | Paypal account customer email if retrieved from Paypal servers. |
+
+<a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData">&nbsp;</a>
+
+## IOnErrorEventData : <code>object</code>
+Interface for IOnErrorEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>EVENTS</code> | Event Name is 'ON_ERROR' |
+| data | <code>object</code> | Error data object |
+| data.error_code | [<code>ErrorCodes</code>](#ErrorCodes) | Error code. One of ErrorCodes. |
+| [data.details] | <code>string</code> | Error details. |
+| [data.message] | <code>string</code> | Error message. |
+
+<a name="IOnCancelEventData" id="IOnCancelEventData" href="#IOnCancelEventData">&nbsp;</a>
+
+## IOnCancelEventData : <code>object</code>
+Interface for IOnCancelEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>EVENTS</code> | Event Name is 'ON_CANCEL' |
+
+<a name="PayPalSavePaymentSourceWidget" id="PayPalSavePaymentSourceWidget" href="#PayPalSavePaymentSourceWidget">&nbsp;</a>
+
+## PayPalSavePaymentSourceWidget
+PayPal Save Payment Source Widget constructor
+
+**Kind**: global class  
+
+* [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget)
+    * [new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)](#new_PayPalSavePaymentSourceWidget_new)
+    * [.load()](#PayPalSavePaymentSourceWidget+load)
+    * [.setEnv(env, [alias])](#PayPalSavePaymentSourceWidget+setEnv)
+    * [.onSuccess([callback])](#PayPalSavePaymentSourceWidget+onSuccess)
+    * [.onError([callback])](#PayPalSavePaymentSourceWidget+onError)
+    * [.onCancel([callback])](#PayPalSavePaymentSourceWidget+onCancel)
+
+<a name="new_PayPalSavePaymentSourceWidget_new" id="new_PayPalSavePaymentSourceWidget_new" href="#new_PayPalSavePaymentSourceWidget_new">&nbsp;</a>
+
+### new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| selector | <code>string</code> | Selector of html element. Container for PayPal Save Payment Source Widget. |
+| publicKey | <code>string</code> | PayDock users public key. |
+| gatewayId | <code>string</code> | PayDock's PayPal gatewayId. |
+| config | [<code>PayPalSavePaymentSourceWidgetConfig</code>](#PayPalSavePaymentSourceWidgetConfig) | Extra configuration for the widget, like styles. |
+
+**Example**  
+```js
+var payPalSavePaymentSourceWidget = new PayPalSavePaymentSourceWidget('#paypalButton', 'public_key', 'gateway_id');
+```
+<a name="PayPalSavePaymentSourceWidget+load" id="PayPalSavePaymentSourceWidget+load" href="#PayPalSavePaymentSourceWidget+load">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.load()
+The final method after configuring the PayPalSavePaymentSource Widget to
+start the load process.
+
+**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+<a name="PayPalSavePaymentSourceWidget+setEnv" id="PayPalSavePaymentSourceWidget+setEnv" href="#PayPalSavePaymentSourceWidget+setEnv">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.setEnv(env, [alias])
+Current method can change environment. By default environment = sandbox.
+Also we can change domain alias for this environment. By default domain_alias = paydock.com
+
+**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| env | <code>string</code> | sandbox, production |
+| [alias] | <code>string</code> | Own domain alias |
+
+**Example**  
+```js
+payPalSavePaymentSourceWidget.setEnv('production');
+```
+<a name="PayPalSavePaymentSourceWidget+onSuccess" id="PayPalSavePaymentSourceWidget+onSuccess" href="#PayPalSavePaymentSourceWidget+onSuccess">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.onSuccess([callback])
+If the setup token was successfully approved and a OTT was generated, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
+
+**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnSuccessCallback</code>](#OnSuccessCallback) | Function to be called when the result is successful. |
+
+**Example**  
+```js
+payPalSavePaymentSourceWidget.onSuccess((eventData) => console.log('One time token and email obtained successfully'));
+```
+<a name="PayPalSavePaymentSourceWidget+onError" id="PayPalSavePaymentSourceWidget+onError" href="#PayPalSavePaymentSourceWidget+onError">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.onError([callback])
+If in the process for obtaining the setup token fails, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
+
+**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
+
+**Example**  
+```js
+payPalSavePaymentSourceWidget.onError((eventData) => console.log('Some error occurred'));
+```
+<a name="PayPalSavePaymentSourceWidget+onCancel" id="PayPalSavePaymentSourceWidget+onCancel" href="#PayPalSavePaymentSourceWidget+onCancel">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.onCancel([callback])
+If in the process for obtaining the setup token was cancelled, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
+
+**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnCancelCallback</code>](#OnCancelCallback) | Function to be called when the operation is cancelled. |
+
+**Example**  
+```js
+payPalSavePaymentSourceWidget.onCancel(() => console.log('Operation cancelled'));
+```
+<a name="OnSuccessCallback" id="OnSuccessCallback" href="#OnSuccessCallback">&nbsp;</a>
+
+## OnSuccessCallback : <code>function</code>
+Callback for onSuccess method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>IOnSuccessEventData</code>](#IOnSuccessEventData) | 
+
+<a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback">&nbsp;</a>
+
+## OnErrorCallback : <code>function</code>
+Callback for onError method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) | 
+
+<a name="OnCancelCallback" id="OnCancelCallback" href="#OnCancelCallback">&nbsp;</a>
+
+## OnCancelCallback : <code>function</code>
+Callback for onCancel method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>IOnCancelEventData</code>](#IOnCancelEventData) | 
+

package/docs/ps-examples.md

@@ -0,0 +1,129 @@
+## 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>
+```