@paydock/client-sdk
Version:
Paydock client sdk
130 lines (96 loc) • 3.58 kB
Markdown
## 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
<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
<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>
```