npm - @paydock/client-sdk - Versions diffs - 0.0.3 → 0.1.2-beta - Mend

@paydock/client-sdk 0.0.3 → 0.1.2-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 (531) hide show

package/docs/ps-examples.md ADDED Viewed

@@ -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>
+```

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>
+```