@paydock/client-sdk 1.103.1 → 1.104.1-beta

package/package.json

@@ -1,31 +1,164 @@
 {
-  "name": "@paydock/client-sdk",
+  "author": {
+    "name": "Paydock, Ltd.",
+    "url": "https://paydock.com/"
+  },
+  "bugs": {
+    "email": "support@paydock.com"
+  },
   "description": "Paydock client sdk",
-  "version": "1.103.1",
   "homepage": "https://paydock.com",
-  "author": {},
-  "bugs": {
-    "url": ""
+  "files": [
+    "bundles",
+    "docs",
+    "examples",
+    "package.json",
+    "README.md",
+    "slate.md"
+  ],
+  "browser": "./bundles/widget.umd.js",
+  "main": "./bundles/index.cjs",
+  "module": "./bundles/index.mjs",
+  "types": "./bundles/index.mjs.d.ts",
+  "unpkg": "./bundles/widget.umd.js",
+  "exports": {
+    ".": {
+      "import": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      },
+      "module": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      },
+      "node": {
+        "default": "./bundles/index.cjs",
+        "types": "./bundles/index.cjs.d.ts"
+      },
+      "require": {
+        "default": "./bundles/index.cjs",
+        "types": "./bundles/index.cjs.d.ts"
+      },
+      "default": "./bundles/index.mjs.js",
+      "types": "./bundles/index.mjs.d.ts"
+    },
+    "./api": {
+      "import": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      },
+      "module": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      }
+    },
+    "./canvas3ds": {
+      "import": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      },
+      "module": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      }
+    },
+    "./checkout-button": {
+      "import": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      },
+      "module": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      }
+    },
+    "./payment-source-widget": {
+      "import": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      },
+      "module": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      }
+    },
+    "./vault-display-widget": {
+      "import": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      },
+      "module": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      }
+    },
+    "./widget": {
+      "import": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      },
+      "module": {
+        "default": "./bundles/index.mjs",
+        "types": "./bundles/index.mjs.d.ts"
+      }
+    }
   },
-  "main": "lib/index",
+  "name": "@paydock/client-sdk",
+  "version": "1.104.1-beta",
   "scripts": {
-    "build:dev": "node_modules/grunt-cli/bin/grunt build && node_modules/grunt-cli/bin/grunt replace_hosts",
-    "build:full": "node_modules/grunt-cli/bin/grunt build:full",
-    "docs:only": "node_modules/grunt-cli/bin/grunt docs:only",
-    "docs:update": "node_modules/grunt-cli/bin/grunt docs",
-    "lint": "tslint -c tslint.json 'src/**/*.ts{,x}'"
+    "build:doc": "node docs/html/marked.js",
+    "build:js": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "bundle:css": "grunt replace:css",
+    "bundle:html": "grunt replace:html",
+    "bundle:js": "run-s clean:bundles build:js",
+    "clean:bundles": "rimraf ./bundles/",
+    "clean:lib": "rimraf ./lib/",
+    "compute:checksums:bundles": "find ./bundles -type f -exec sha256sum {} \\;",
+    "compute:sha:bundles:short": "npm run compute:sha:bundles | tail -1 | cut -c 1-7",
+    "compute:sha:bundles": "npm run compute:checksums:bundles | sha256sum",
+    "doc:cba": "run-s clean:lib tsc:cba markdown:cba",
+    "doc:paydock": "run-s clean:lib tsc:paydock markdown:paydock",
+    "lint": "tslint -c tslint.json 'src/**/*.ts{,x}'",
+    "markdown:cba": "grunt cba_docs",
+    "markdown:paydock": "grunt docs",
+    "publish:local": "./publish-to-local-registry.sh",
+    "replace:hosts": "grunt replace_hosts",
+    "test:browsers": "karma start --browsers Chrome,Firefox,ChromeHeadlessNoSandbox --single-run",
+    "test:chromium": "karma start --browsers ChromeHeadlessNoSandbox --single-run",
+    "test": "run-s test:chromium",
+    "tsc:cba": "tsc --project tsconfig.cba.json",
+    "tsc:paydock": "tsc --project tsconfig.paydock.json",
+    "typecheck": "tsc -b"
+  },
+  "dependencies": {
+    "@auspayplus/open-payments-checkout": "1.7.3",
+    "@stripe/stripe-js": "^1.11.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.3",
-    "@babel/core": "^7.23.3",
-    "@babel/plugin-external-helpers": "^7.0.0",
-    "@babel/plugin-transform-modules-umd": "^7.0.0",
-    "@babel/plugin-transform-object-assign": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/runtime-corejs2": "^7.0.0",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.24.0",
+    "@babel/plugin-external-helpers": "^7.23.3",
+    "@babel/plugin-transform-modules-umd": "^7.23.3",
+    "@babel/plugin-transform-object-assign": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.24.0",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/runtime": "^7.24.0",
+    "@babel/runtime-corejs2": "^7.24.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/pluginutils": "^5.1.0",
+    "@types/applepayjs": "^3.0.1",
     "@types/es6-promise": "^3.3.0",
+    "@types/googlepay": "^0.6.3",
+    "@types/jasmine": "^5.1.4",
+    "@types/jasmine-ajax": "^3.3.5",
+    "@types/jquery": "^3.5.29",
     "babelify": "^10.0.0",
     "base64-js": "^1.2.0",
     "browser-resolve": "^1.11.2",
@@ -34,16 +167,10 @@
     "buffer": "^5.0.5",
     "fs": "0.0.2",
     "grunt": "^1.6.1",
-    "grunt-babel": "^8.0.0",
     "grunt-cli": "^1.2.0",
-    "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-watch": "^1.0.0",
     "grunt-jsdoc-to-markdown": "^6.0.0",
-    "grunt-karma": "^4.0.2",
     "grunt-replace": "^2.0.2",
-    "grunt-rollup": "^11.5.0",
     "grunt-template-render": "0.0.1",
-    "grunt-ts": "^6.0.0-beta.22",
     "highlight.js": "^11.5.1",
     "ieee754": "^1.1.8",
     "include-all": "^0.1.6",
@@ -54,27 +181,22 @@
     "karma": "^6.4.2",
     "karma-browserify": "^8.1.0",
     "karma-chrome-launcher": "^2.2.0",
+    "karma-cli": "^2.0.0",
     "karma-firefox-launcher": "^1.0.1",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-ajax": "^0.1.13",
     "karma-mocha-reporter": "^2.2.2",
-    "karma-typescript": "^5.5.4",
     "marked": "^4.0.14",
+    "npm-run-all": "^4.1.5",
     "process": "^0.11.9",
-    "rollup": "^1.32.1",
-    "rollup-plugin-babel": "^4.0.1",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-uglify": "^6.0.4",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.13.0",
+    "rollup-plugin-dts": "^6.1.0",
     "tsify": "^3.0.1",
+    "tslib": "^2.6.2",
     "tslint": "^5.8.0",
-    "typescript": "3.9.7"
-  },
-  "dependencies": {
-    "@auspayplus/open-payments-checkout": "1.7.3",
-    "@stripe/stripe-js": "^1.11.0",
-    "@types/applepayjs": "^3.0.1",
-    "@types/googlepay": "^0.6.3"
+    "typescript": "^4.9.5",
+    "zod": "^3.22.4"
   },
   "overrides": {
     "grunt-ts": {
@@ -87,11 +209,11 @@
   },
   "license": "UNLICENSED",
   "keywords": [
-    "paydock",
-    "widget",
     "client-sdk",
+    "es2015",
+    "paydock",
     "sdk",
     "typeScript",
-    "es2015"
+    "widget"
   ]
 }

package/slate.md

@@ -16,6 +16,10 @@ Also you will need added gateway ([see API Reference by gateway](https://docs.pa
 
 ## 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
 
 ```html
@@ -25,77 +29,74 @@ Also you will need added gateway ([see API Reference by gateway](https://docs.pa
 </script>
 ```
 
-You should begin by including the library in your page.
-
-Add this script tag to your page to get started with with the url below:
 
-*Compressed version for production*
-`https://widget.paydock.com/sdk/latest/widget.umd.min.js` 
+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`.
 
-*Full version for development and debug*
-`https://widget.paydock.com/sdk/latest/widget.umd.js`
+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`*
 
-
-Also can download library the [production version][min] or the [development version][max]
+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
 
-
-The library will always be available via the global variable `paydock`.
-
-
-
-Also for more advanced use, the library has [UMD](https://github.com/umdjs/umd) format, thus can be used in requireJs, webpack, etc.
-
-
-
-
-
-
-
+For more advanced use-cases, the library has [UMD](https://github.com/umdjs/umd)
+format that can be used in RequireJS, Webpack, etc.
 
 
 ### With package manager
 
-
-```javascript--es2015
-// ES2015 / TypeScript
-
-import { HtmlWidget } from '@paydock/client-sdk/widget';
-
-let widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
+```cjs
+// module import - CommonJS/Node projects ✅
+const paydock = require('@paydock/client-sdk')
+const api = new paydock.Api('publicKey');
 ```
 
-
-```html
-<script src="@paydock/client-sdk/bundles/widget.umd.min.js"></script>
-<script>
-    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
-</script>
+```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');
+```
 
-To install with package manager, enter the following command:
-
-`npm install @paydock/client-sdk`
-
-
-You can use ES2015 or TypeScript modules
-
-`@paydock/client-sdk/widget`
-
-
-Also can use UMD module (global visibility, see above)
-
-`@paydock/client-sdk/bundles/widget.umd.js`
+```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'"
+```
 
-`@paydock/client-sdk/bundles/widget.umd.min.js`
 
+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.
 
 
 ## Widget
@@ -122,11 +123,11 @@ var widget = new paydock.HtmlWidget('#widget', 'publicKey');
 widget.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { HtmlWidget } from '@paydock/client-sdk/widget';
-    
+import { HtmlWidget } from '@paydock/client-sdk';
+
 var widget = new HtmlWidget('#widget', 'publicKey');
 widget.load();
 ```
@@ -134,7 +135,7 @@ widget.load();
 Then write only need 2 lines of code in js to initialize widget
 
 
-### Full example 
+### Full example
 
 ```html
 <!DOCTYPE html>
@@ -197,9 +198,9 @@ widget.setFormFields(['phone', 'email']); // add additional fields for form of w
 widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported card types
 ```
 
-This example shows how you can use a lot of other methods to settings your form 
+This example shows how you can use a lot of other methods to settings your form
 
-### Full example 
+### Full example
 
 ```html
 <!DOCTYPE html>
@@ -220,12 +221,12 @@ This example shows how you can use a lot of other methods to settings your form
 <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
 <script>
 	var widget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
-	
+
 	widget.setSupportedCardIcons(['mastercard', 'visa']);
 	widget.setFormFields(['phone', 'email']);
 	widget.setRefId('custom-ref-id');
     widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');z
-	
+
 	widget.load();
 </script>
 </script>
@@ -262,10 +263,10 @@ var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken
 list.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { HtmlPaymentSourceWidget } from '@paydock/client-sdk/payment-source-widget';
+import { HtmlPaymentSourceWidget } from '@paydock/client-sdk';
 
 var list = new HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
 list.load();
@@ -392,7 +393,7 @@ You must create a button to turn it into checkout-button
 var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
 
@@ -622,11 +623,11 @@ This wrapper helps you to work with paydock api emdpoints
 var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { Api } from '@paydock/client-sdk/api';
-    
+import { Api } from '@paydock/client-sdk';
+
 var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
 ```
 
@@ -639,11 +640,11 @@ var response = await new paydock.Api('publicKey').setEnv('env').charge().preAuth
     });
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { Api } from '@paydock/client-sdk/api';
-    
+import { Api } from '@paydock/client-sdk';
+
 var response = await new Api('publicKey').setEnv('env').charge().preAuth({
       amount: 100,
       currency: 'AUD',
@@ -653,7 +654,7 @@ var response = await new Api('publicKey').setEnv('env').charge().preAuth({
 
 Then write only need 2 lines of code in js to make request
 
-### Initialization full example 
+### Initialization full example
 
 ```html
 <!DOCTYPE html>
@@ -700,10 +701,10 @@ var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
 canvas3ds.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { Canvas3ds } from '@paydock/client-sdk/canvas3ds';
+import { Canvas3ds } from '@paydock/client-sdk';
 
 var list = new Canvas3ds('#widget', 'token');
 list.load();
@@ -924,7 +925,7 @@ After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds`
 ## 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. 
+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
@@ -944,18 +945,18 @@ var widget = new paydock.VaultDisplayWidget('#widget', 'token');
 widget.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { VaultDisplayWidget } from '@paydock/client-sdk/vault-display-widget';
-    
+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 
+### Full example
 
 ```html
 <!DOCTYPE html>
@@ -966,9 +967,9 @@ Then write only need 2 lines of code in js to initialize widget
     <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');
@@ -1006,9 +1007,9 @@ widget.setStyles({
 });
 ```
 
-This example shows how you can use a lot of other methods to settings your form 
+This example shows how you can use a lot of other methods to settings your form
 
-### Full example 
+### Full example
 
 ```html
 <!DOCTYPE html>
@@ -1019,27 +1020,27 @@ This example shows how you can use a lot of other methods to settings your form
     <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',
@@ -1088,7 +1089,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -1113,7 +1114,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -1137,7 +1138,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -1664,7 +1665,7 @@ var src = new paydock.SRC(
 src.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
 import { SRC } from '@paydock/client-sdk';

package/.nvmrc

@@ -1 +0,0 @@
-18

package/api.d.ts

@@ -1 +0,0 @@
-export * from './lib/api';

package/api.js

@@ -1 +0,0 @@
-export * from './lib/api';

package/canvas3ds.d.ts

@@ -1 +0,0 @@
-export * from './lib/canvas-3ds';

package/canvas3ds.js

@@ -1 +0,0 @@
-export * from './lib/canvas-3ds';

package/checkout-button.d.ts

@@ -1 +0,0 @@
-export * from './lib/checkout-button';

package/checkout-button.js

@@ -1 +0,0 @@
-export * from './lib/checkout-button';

package/inicialization-guide.md

@@ -1,7 +0,0 @@
-**Initialization guide**: https://paydock.atlassian.net/wiki/spaces/PD/pages/1931837503/Initialization+guide
-
-For work local:
-1. npm i
-2. install grunt global
-3. grunt build
-4. grunt replace_host