@paydock/client-sdk 1.103.1 → 1.104.1-beta

package/docs/html/marked.js

@@ -0,0 +1,23 @@
+var fs = require('fs');
+var marked = require('marked');
+var hljs = require('highlight.js');
+var renderer = new marked.Renderer();
+var src = fs.readFileSync('./README.md', 'utf8');
+var tmpl = fs.readFileSync('docs/html/layout.html', 'utf8');
+var html = marked.marked(src, {
+	renderer: renderer,
+	highlight: function(code, lang) {
+		var language = hljs.getLanguage(lang) ? lang : 'plaintext';
+		return hljs.highlight(code, { language: language }).value;
+	},
+});
+var buffer = Buffer.from(tmpl
+		.replace('<!--{{content}}-->', html),
+	'utf8'
+);
+fs.writeFile('docs/html/readme.html', buffer, function(error) {
+	if (error)
+		console.log(error);
+});
+console.log('----Complete---');
+

package/docs/html/style.css

@@ -0,0 +1,365 @@
+/* sass-ified from npm-website */
+.body {
+    margin: 0;
+    color: #333;
+    font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
+}
+.logo {
+    margin-right: 15px;
+    padding: 5px;
+}
+
+ol {
+    list-style-position: outside;
+    font-weight: 600;
+    margin-bottom: 20px;
+    margin-left: 16px;
+}
+
+ol li {
+    margin-bottom: 2px;
+}
+
+li {
+    font-weight: 400;
+}
+
+h1 {
+    margin: 24px 0 16px 0;
+    padding: 0;
+    padding-bottom: 7px;
+    line-height: 1.2;
+    white-space: normal;
+    text-transform: none;
+    letter-spacing: -0.8px;
+    font-weight: 700;
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
+    font-size: 2.25rem;
+}
+
+> h1 a {
+    color: text-color;
+    text-decoration: none;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 600;
+    font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
+}
+
+> h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+    font-weight: 700;
+    text-decoration: none;
+}
+
+> h2 a:hover,
+h3 a:hover,
+h4 a:hover,
+h5 a:hover,
+h6 a:hover {
+    text-decoration: underline;
+}
+
+> h1,
+h2 {
+    border-bottom: 1px solid greigh6;
+    margin: 8px 0 16px 0;
+}
+
+h2 {
+    letter-spacing: -0.3px;
+    font-size: 1.875rem;
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
+    padding-bottom: 8px;
+}
+
+h3 {
+    margin: 16px 0 4px 0;
+    font-size: 1.25rem;
+    letter-spacing: -.03rem;
+    font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
+}
+
+h4,
+h5,
+h6 {
+    margin: 16px 0 4px 0;
+}
+
+ol ol,
+ul ol,
+ol ul,
+ul ul {
+    margin: 0 0 0 0;
+}
+
+p,
+li {
+    color: #333;
+    font-size: 18px;
+    margin-top: 0;
+    margin-bottom: 4px;
+    line-height: 1.20;
+    letter-spacing: 0.1px;
+    font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
+}
+
+p a,
+li a {
+    font-weight: 600;
+    color: #cb3837;
+    text-decoration: none;
+    font-size: 1em;
+}
+
+th {
+    font-weight: bold;
+}
+
+td,
+th {
+    background: #fff;
+    border: 1px solid greigh6;
+}
+
+img {
+    max-width: 100%;
+}
+
+h1:hover .deep-link .deep-link-icon,
+h2:hover .deep-link .deep-link-icon,
+h3:hover .deep-link .deep-link-icon,
+h4:hover .deep-link .deep-link-icon,
+h5:hover .deep-link .deep-link-icon,
+h6:hover .deep-link .deep-link-icon,
+.deep-link:hover .deep-link-icon,
+.deep-link-icon:hover {
+    visibility: visible;
+}
+
+.deep-link {
+    float: left;
+    margin-left: -20px;
+    padding-right: 4px;
+}
+
+.deep-link .deep-link-icon {
+    visibility: hidden;
+}
+
+blockquote {
+    background: #efefef;
+    padding: 1px 16px;
+    margin-left: 0;
+    margin-right: 0;
+    border-left: #cecece solid 10px;
+    border-radius: 3px;
+}
+
+table {
+    display: block;
+    white-space: normal;
+    overflow-x: auto;
+    width: max-content;
+    max-width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+td, th {
+    padding: 9px 13px;
+    border: 1px solid #d8d8d8;
+}
+
+tr:nth-child(2n) td {
+    background-color: #f4f4f4;
+}
+
+
+pre {
+    color: #000;
+    margin-bottom: 16px;
+    margin-top: 0;
+    padding: 12px;
+    font-size: 1em;
+    background: #f7f7f7;
+    border-radius: 2px;
+    overflow-x: auto;
+}
+
+p code {
+    font-size: 0.9em;
+    border-radius: 2px;
+    background: #f7f7f7;
+    padding: 0px 5px;
+    font-variant-ligatures: none;
+    font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
+    letter-spacing: 0px;
+    line-height: 24px;
+}
+
+dt a {
+    color: #cb3837;
+    text-decoration: none;
+    font-size: 1em;
+}
+
+:root {
+    background-color: #fff;
+}
+
+button, input, optgroup, select, textarea {
+    font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
+}
+
+*, *:before, *:after {
+    box-sizing: border-box;
+}
+
+.body {
+    min-height: 100vh;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+section {
+    width: 66%;
+    margin: 0 auto;
+}
+
+.body main {
+    position: relative;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+
+a {
+    color: black;
+}
+
+a {
+    text-decoration: none;
+}
+
+li, li {
+    padding: 3px;
+}
+
+code {
+    font-feature-settings: none;
+    font-variant-ligatures: none;
+    font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
+    letter-spacing: 0px;
+    line-height: 24px;
+}
+
+:-moz-ui-invalid {
+    box-shadow: none;
+}
+
+body {
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+    font-size: 16px;
+    line-height: 1.5;
+    word-wrap: break-word;
+    background: #F9F9F9;
+}
+
+.sidebar {
+    margin: 0;
+    padding: 0;
+    width: 200px;
+    background-color: #f1f1f1;
+    position: fixed;
+    height: 100%;
+    overflow: auto;
+}
+
+
+#container {
+    width: 80%;
+    margin: 0 auto;
+}
+
+#content {
+    width: 80%;
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    background: white;
+}
+
+#content h1:first-child {
+    margin-top: 0px;
+}
+
+nav {
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    background: white;
+    margin-right: 10px;
+    min-width: fit-content;
+}
+
+nav > ul {
+    position: sticky;
+    top: 5px;
+    margin: 10px 0px;
+    padding: 0;
+    list-style-type: none;
+    font-size: 14px;
+}
+
+ul {
+    list-style-type: none;
+}
+
+nav > ul > li {
+    min-width: 125px;
+    padding: 0px 15px;
+}
+
+nav > ul > li > ul {
+    padding-left: 25px;
+}
+
+nav > ul > li > ul > li {
+    font-size: 0.8em;
+}
+
+nav .selected {
+    color: #111;
+    font-weight: bold;
+}
+
+nav .selected:hover {
+    text-decoration: none;
+}
+
+header {
+    display: flex;
+}
+
+header a {
+    width: 27%;
+}
+
+header h1 { margin: 0; }

package/docs/install/npm.content.md

@@ -0,0 +1,16 @@
+Our NPM package is compatible with all package managers (e.g., `npm`, `yarn`,
+`pnpm`, `bun`). Using `npm` the following command would add the Client SDK as a
+production dependency.
+
+```bash
+npm install @paydock/client-sdk
+```
+
+After installation is complete, if you are developing in NodeJS environments or
+using tools that expect your JavaScript code to be in CJS format (e.g., Jest,
+Karma, RequireJS, Webpack), you can import the Client SDK using CommonJS modules.
+For these environments the UMD format (`@paydock/client-sdk/bundles/widget.umd.js`)
+can also be used as a fallback. Alternatively, in case you are developing in
+projects that have access to modern bundlers such as Vite or others (e.g., SPA
+libs or SSR Metaframeworks), you can import the Client SDK features using ESM
+through named imports or namespaced imports.

package/docs/install/npm.example.md

@@ -0,0 +1,24 @@
+```cjs
+// module import - CommonJS/Node projects ✅
+const paydock = require('@paydock/client-sdk')
+const api = new paydock.Api('publicKey');
+```
+
+```mjs
+// named import - ESM projects or TypeScript projects ✅
+import { HtmlWidget } from '@paydock/client-sdk'
+const widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
+```
+
+```mjs
+// namespaced import - ESM projects or TypeScript projects ✅
+import * as Paydock from '@paydock/client-sdk'
+const widget = new Paydock.HtmlWidget('#selector', 'publicKey', 'gatewayId');
+```
+
+```js
+// default import - We do not provide default exports. They are handled differently by different tools!
+ ❌
+import paydock from '@paydock/client-sdk'
+>>> "Uncaught SyntaxError: The requested module does not provide an export named 'default'"
+```

package/docs/install/umd.content.md

@@ -0,0 +1,21 @@
+For browser environments, you can import the Client SDK directly from our CDN to
+your project's HTML. To accomplish this being by including the Client SDK
+in your page using one and only of the two script tags below. After this step
+you will be able to access the Client SDK features via the global
+variable `paydock`.
+
+For production we recommend using the compressed version (`.min.js`) since
+it will result in faster loading times for your end users.
+
+- *Compressed version for production: `https://widget.paydock.com/sdk/latest/widget.umd.min.js`*
+
+- *Full version for development and debug: `https://widget.paydock.com/sdk/latest/widget.umd.js`*
+
+You may download the production version of the Client SDK scripts [here][min],
+and, the development version [here][max].
+
+[min]: https://widget.paydock.com/sdk/latest/widget.umd.min.js
+[max]: https://widget.paydock.com/sdk/latest/widget.umd.js
+
+For more advanced use-cases, the library has [UMD](https://github.com/umdjs/umd)
+format that can be used in RequireJS, Webpack, etc.

package/docs/install/umd.example.md

@@ -0,0 +1,6 @@
+```html
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
+<script>
+    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
+</script>
+```

package/docs/install.md

@@ -0,0 +1,53 @@
+## Get started
+
+### Install with package manager
+
+To install with package manager, enter the following command:
+
+`npm install @paydock/client-sdk`
+
+You will be available such modules:
+
+1. You can use UMD module as global lib
+`@paydock/client-sdk/bundles/widget.umd.js`
+`@paydock/client-sdk/bundles/widget.umd.min.js`
+
+2. You can use ES2015 or TypeScript modules
+`@paydock/client-sdk/widget`
+
+
+
+```javascript
+// ES2015 / TypeScript
+
+import { HtmlWidget } from '@paydock/client-sdk';
+
+let widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
+widget.load();
+```
+
+
+```javascript--umd
+// UMD
+
+var widget = new paydock.HtmlWidget('#selector', 'publicKey', 'gatewayId');
+widget.load();
+```
+
+
+
+
+### Download from CDN
+
+You can download and use UMD module as global lib [production version][min] or the [development version][max]
+
+[min]: https://widget.paydock.com/sdk/latest/widget.umd.min.js
+[max]: https://widget.paydock.com/sdk/latest/widget.umd.js
+
+```html
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.js"></script>
+```
+
+
+

package/docs/install.readme.t.md

@@ -0,0 +1,17 @@
+## Get started
+
+The Client SDK ships in JavaScript ES6 (EcmaScript 2015) in three different
+formats (CJS, ESM and UMD) along with respective TypeScript declarations. Below,
+we exemplify how to import each format.
+
+### With package manager
+
+<%= render('/docs/install/npm.content.md') %>
+
+<%= render('/docs/install/npm.example.md') %>
+
+### Download from CDN
+
+<%= render('/docs/install/umd.content.md') %>
+
+<%= render('/docs/install/umd.example.md') %>

package/docs/install.slate.t.md

@@ -0,0 +1,17 @@
+## Get started
+
+The Client SDK ships in JavaScript ES6 (EcmaScript 2015) in three different
+formats (CJS, ESM and UMD) along with respective TypeScript declarations. Below,
+we exemplify how to import each format.
+
+### Download from CDN
+
+<%= render('/docs/install/umd.example.md') %>
+
+<%= render('/docs/install/umd.content.md') %>
+
+### With package manager
+
+<%= render('/docs/install/npm.example.md') %>
+
+<%= render('/docs/install/npm.content.md') %>

package/docs/license.md

@@ -0,0 +1,2 @@
+## License
+Copyright (c) 2023 paydock

package/docs/partials/header.hbs

@@ -0,0 +1,3 @@
+<a name="{{{anchorName}}}" id="{{{anchorName}}}" href="#{{{anchorName}}}">&nbsp;</a>
+
+{{>heading-indent}}{{>sig-name}}

package/docs/ps-examples.md

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