npm - @paydock/client-sdk - Versions diffs - 1.106.1 → 1.107.0-beta - Mend

@paydock/client-sdk 1.106.1 → 1.107.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (490) hide show

package/docs/vault-display-example.md ADDED Viewed

@@ -0,0 +1,132 @@
+## 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
+<!DOCTYPE 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
+<!DOCTYPE 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>
+```