npm - @paydock/client-sdk - Versions diffs - 1.105.1 → 1.105.56-beta - Mend

@paydock/client-sdk 1.105.1 → 1.105.56-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 (649) hide show

package/docs/html/layout.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
+    <title></title>
+</head>
+<body>
+<div id="container">
+    <header>
+        <a href="/">
+            <img alt="logo" class="logo" src="https://staging.powerboard.commbank.com.au/images/logo_cba.png" height="63px" width="150px"/>
+        </a>
+    </header>
+    <div style="display: flex">
+        <nav>
+            <ul>
+                <li>
+                    <a href="#client-sdk">Client-sdk</a>
+                    <ul>
+                        <li><a href="#other-information">Other information</a></li>
+                        <li><a href="#get-started">Get started</a></li>
+                        <li><a href="#download-from-cdn">Download from CDN</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#widget">Widget</a>
+                    <ul>
+                        <li><a href="#widget-simple-example">Simple example</a></li>
+                        <li><a href="#widget-advanced-example">Advanced example</a></li>
+                        <li><a href="#classes">Classes</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#payment-sources-widget">Payment sources widget</a>
+                    <ul>
+                        <li><a href="#payment-sources-simple-example">Simple example</a></li>
+                        <li><a href="#payment-sources-advanced-example">Advanced example</a></li>
+                        <li><a href="#classes-1">Classes</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#checkout-button">Checkout button</a>
+                    <ul>
+                        <li><a href="#checkout-button-simple-example">Simple example</a></li>
+                        <li><a href="#checkout-button-advanced-example">Advanced example</a></li>
+                        <li><a href="#classes-2">Classes</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#canvas3ds">Canvas3ds</a>
+                    <ul>
+                        <li><a href="#canvas3ds-simple-example">Simple example</a></li>
+                        <li><a href="#canvas3ds-advanced-example">Advanced example</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#wallet-buttons">Wallet Buttons</a>
+                    <ul>
+                        <li><a href="#wallet-buttons-simple-example">Simple example</a></li>
+                        <li><a href="#wallet-buttons-advanced-example">Advanced example</a></li>
+                        <li><a href="#classes-3">Classes</a></li>
+                        <li><a href="#express-wallet-buttons">Express Wallet Buttons</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#click-to-pay">Click To Pay</a>
+                    <ul>
+                        <li><a href="#click-to-pay-simple-example">Click To Pay simple example</a></li>
+                        <li><a href="#customize-your-click-to-pay-checkout">Click To Pay customizations and advanced example</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+        <div id="content"><!--{{content}}--></div>
+    </div>
+</div>
+</body>
+</html>

package/docs/html/marked.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,20 @@
+For browser environments, you can import the Client SDK directly from our CDN to
+your project's HTML. To accomplish this, include 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,43 @@
+## 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`
+```javascript
+// ES2015 / TypeScript
+import { HtmlWidget } from '@paydock/client-sdk';
+const widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
+widget.load();
+```
+```javascript
+// UMD
+const 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/docs/partials/header.hbs ADDED Viewed

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

package/docs/paypal-data-collector-examples.md ADDED Viewed

@@ -0,0 +1,58 @@
+## PayPalDataCollector Widget
+Widget that collect browser-based data to help reduce fraud. Upon checkout, these data elements are sent directly to PayPal Risk Services for fraud and risk assessment.
+The general flow to use the widgets is:
+1. Initialize the PayPal Data Collector Widget, providing a Source Website Identifier (Flow ID), plus optional config parameters for the widget. The general format is:
+```js
+vat paypalDataCollector = new paydock.PayPalDataCollector(
+    sourceWebsiteIdentifier,
+    widgetConfigParams,
+);
+```
+2. Handle the `collectDeviceData` function, that will return the generated correlation ID, like following:
+```js
+const collectedDeviceData = await paypalDataCollector.collectDeviceData();
+const correlationId = collectedDeviceData.correlation_id;
+```
+3. Use freely the correlation_id value as is needed.
+4. Handle the `onError` callback.
+5. If you are using Content Security Policy (CSP), you must allowlist the paypal fraudnet script URL: `https://c.paypal.com`. See reference [here](https://developer.paypal.com/limited-release/fraudnet/integrate/#link-contentsecuritypolicyintegration).
+### PayPalDataCollector Widget example
+A full description of the config parameters for [PayPalDataCollector](#PayPalDataCollector) meta parameters can be found [here](#PayPalDataCollectorConfig). Below you will find a fully working html example.
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Using PayDock PayPalDataCollector Widget!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    let payPalDataCollector = new paydock.PayPalDataCollector(
+        sourceWebsiteIdentifier,
+        {
+            mouse_movement: true
+        }
+    );
+    payPalDataCollector.setEnv('test');
+    payPalDataCollector.onError(function(error) {
+        console.log("On Error Callback", error);
+    });
+    const collectedDeviceData = await payPalDataCollector.collectDeviceData();
+    //Here when the promise is resolved, it should be able to see the correlation_id.
+    const correlationId = collectedDeviceData.correlation_id
+</script>
+</html>
+```