@paydock/client-sdk
Version:
Paydock client sdk
133 lines (99 loc) • 3.02 kB
Markdown
## Vault Display Widget
You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#vault-display-widget)
The vault display form allows viewing card number and CVV. The form can be customised according to your needs.
You can set styles as well as subscribe to widget events that help monitor user’s actions in real time.
## Vault Display 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.VaultDisplayWidget('#widget', 'token');
widget.load();
```
```javascript
// ES2015 | TypeScript
import { VaultDisplayWidget } from '@paydock/client-sdk';
var widget = new VaultDisplayWidget('#widget', 'token');
widget.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: 100%;height: 300px;}</style>
</head>
<body>
<div id="widget"></div>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
var widget = new paydock.VaultDisplayWidget('#widget', 'token');
widget.load();
</script>
</body>
</html>
```
## Widget advanced example
### Customization
```javascript
widget.setEnv('sandbox');
widget.on('after_load', function (data) {
console.log(data);
});
widget.on('cvv_secure_code_requested', function (data) {
console.log(data);
});
widget.on('card_number_secure_code_requested', function (data) {
console.log(data);
});
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 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: 450px;}</style>
</head>
<body>
<div id="widget"></div>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
var widget = new paydock.VaultDisplayWidget('#widget', 'token');
widget.setEnv('sandbox');
widget.on('after_load', function (data) {
console.log(data);
});
widget.on('cvv_secure_code_requested', function (data) {
console.log(data);
});
widget.on('card_number_secure_code_requested', function (data) {
console.log(data);
});
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'
});
widget.load();
</script>
</body>
</html>
```