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/fraud-prevention-examples.md ADDED Viewed

@@ -0,0 +1,154 @@
+# Fraud prevention
+The Fraud Prevention module allows you to add security layers to your payment workflows
+by integrating with any of our underlying fraud prevention providers.
+## Real time user behavior analysis
+### Forter
+One of Forter's key features is our ability to track the user's real-time behavior on
+the site and use it to separate fraudsters from legitimate buyers. To take advantage
+of Forter's technology, a JavaScript snippet needs to be placed on EVERY page
+of your commerce site beginning with the homepage and up to and including the final
+"Thank you for your purchase" page.
+The integration is simple and straightforward - you only need to configure event
+listeners and then instantiate a FraudPreventionService with your site configuration.
+Additional setup is required in case your website uses Content Security Policies (CSP)
+#### Forter: Code snippet
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Real time user behaviour anaylsis - Forter example</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
+</head>
+<body>
+  <main>
+    <h1>Real time user behaviour anaylsis - Forter example</h1>
+    <div class="forter-test">
+      <h2>Forter Integration</h2>
+      <div class="status-card">
+        <p>
+          <strong>Integration Status:</strong>
+          <span data-fraud-prevention="status-indicator" class="status pending">
+            Pending
+          </span>
+        </p>
+        <p>
+          <strong>Token Value:</strong>
+          <code data-fraud-prevention="forter-token">Not available</code>
+        </p>
+        <p data-fraud-prevention="error-container" style="display: none;">
+          <strong>Error Code:</strong>
+          <span data-fraud-prevention="error-code" class="error"></span>
+        </p>
+      </div>
+    </div>
+  </main>
+  <script>
+    const { FRAUD_PREVENTION_EVENTS, FraudPreventionService } = window.paydock
+    let token = '';
+    let errorCode = '';
+    const render = () => {
+      const statusIndicator = document.querySelector('[data-fraud-prevention="status-indicator"]');
+      const tokenValue = document.querySelector('[data-fraud-prevention="forter-token"]');
+      const errorContainer = document.querySelector('[data-fraud-prevention="error-container"]');
+      const errorCodeElement = document.querySelector('[data-fraud-prevention="error-code"]');
+      if (token) {
+        statusIndicator.className = 'status success';
+        statusIndicator.textContent = 'Active';
+        tokenValue.textContent = token;
+      } else {
+        statusIndicator.className = 'status pending';
+        statusIndicator.textContent = 'Pending';
+        tokenValue.textContent = 'Not available';
+      }
+      if (errorCode) {
+        errorCodeElement.textContent = errorCode;
+        errorContainer.style.display = 'block';
+      } else {
+        errorContainer.style.display = 'none';
+      }
+    };
+    document.addEventListener(FRAUD_PREVENTION_EVENTS.NAMESPACE, (event) => {
+      switch (event.detail.type) {
+        case FRAUD_PREVENTION_EVENTS.TYPES.FINTERPRINT_TOKEN_READY: {
+          token = event.detail.payload.token;
+          break;
+        }
+        case FRAUD_PREVENTION_EVENTS.TYPES.FINGERPRINT_TOKEN_ERROR: {
+          errorCode = event.detail.payload.code;
+          break;
+        }
+        default: {
+          throw new Error(
+            `${FRAUD_PREVENTION_EVENTS.NAMESPACE} emitted an unsupported event: ${JSON.stringify(event.detail)}.`,
+          );
+        }
+      }
+      render();
+    });
+    const fraudPreventionServiceConfig = {
+      environmentId: 'sandbox',
+      mode: 'test'
+    }
+    // Set "csp" to true if your website uses Content Security Policies
+    const csp = false;
+    new FraudPreventionService(fraudPreventionServiceConfig)
+      .withForter({
+        siteId: 'example_site_id_or_subsite_id',
+        csp,
+      });
+    // new FraudPreventionService(fraudPreventionServiceConfig)
+    //   .withAccessTokenStrategy("eyJhb_access_token_example_...")
+    //   .withForter({
+    //     providerId: environment.forter.serviceId,
+    //     csp,
+    //   });
+    // new FraudPreventionService(fraudPreventionServiceConfig)
+    //   .withPublicKeyStrategy("pk_example_...")
+    //   .withForter({
+    //     providerId: environment.forter.serviceId,
+    //     csp,
+    //   });
+  </script>
+</body>
+</html>
+```
+#### Forter: Content Security Policies
+If your site enforces Content Security Policies (CSP), make sure to:
+1. Set the `csp` option to `true` when invoking `withForter` on your `FraudPreventionService` instance.
+2. Allowlist Forter's domains on `connect-src`, `script-src` and `worker-src` as shown below.
+```bash
+connect-src https://*.forter.com wss://cdn0.forter.com https://d2o5idwacg3gyw.cloudfront.net https://dz8rit8v72mig.cloudfront.net https://db7q4jg5rkhk8.cloudfront.net https://1.1.1.1 https://d94qwxh6czci4.cloudfront.net https://dr6vcclmzwk74.cloudfront.net https://d6rak4b14t5gp.cloudfront.net https://d3k4bt74u9esq1.cloudfront.net https://d1ezzflfzltk6e.cloudfront.net https://d3nocrch4qti4v.cloudfront.net https://duuytoqss3gu4.cloudfront.net https://df45ay5pw60dy.cloudfront.net
+script-src https://*.forter.com https://dlthst9q2beh8.cloudfront.net https://d2nww8zpyj5pk0.cloudfront.net https://d2w2nqfk3z9hdt.cloudfront.net
+worker-src blob:
+```

package/docs/fraud-prevention.md ADDED Viewed

File without changes

package/docs/header.md ADDED Viewed

@@ -0,0 +1,15 @@
+# Client-sdk
+It is a solution for collecting and handling payment sources in secure way.
+With SDK you can create a payment form widget as an independent part or insert use inside your form.
+The SDK supports methods for customization of widget by your needs (styling, form fields, etc)
+## Other information
+To work with the widget you will need public_key or access_token ([see Authentication](https://docs.paydock.com/#authentication))
+Also you will need added gateway ([see API Reference by gateway](https://docs.paydock.com/#gateways))

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 - Not officially supported . They are handled differently by different tools / settings!
+ ❌
+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.