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