npm - @paydock/client-sdk - Versions diffs - 1.122.3-beta → 1.123.2-beta - Mend

@paydock/client-sdk 1.122.3-beta → 1.123.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 (82) hide show

package/README.md CHANGED Viewed

@@ -59,7 +59,7 @@ const widget = new Paydock.HtmlWidget('#selector', 'publicKey', 'gatewayId');
 ```
 ```js
-// default import - We do not provide default exports. They are handled differently by different tools!
+// 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'"
@@ -939,10 +939,10 @@ The method to set meta information for the checkout page
 ```javascript
 config.setMeta({
-            brand_name: 'paydock',
-            reference: '15',
-            email: 'wault@paydock.com'
-        });
+              brand_name: 'paydock',
+              reference: '15',
+              email: 'wault@paydock.com'
+          });
 ```
 <a name="w_HtmlMultiWidget+load" id="w_HtmlMultiWidget+load" href="#user-content-w_HtmlMultiWidget+load">&nbsp;</a>
@@ -8442,6 +8442,162 @@ List of available event data types
 | SUCCESS | <code>string</code> | <code>&quot;Success&quot;</code> |  |
+# 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:
+```
 ## PayPalSavePaymentSource Widget
 PayPalSavePaymentSource Widget allows to obtain a Paydock one time token linked with a Paypal payment source from the customer.