npm - @paydock/client-sdk - Versions diffs - 1.112.0 → 1.112.4-beta - Mend

@paydock/client-sdk 1.112.0 → 1.112.4-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 (132) hide show

package/docs/api-widget.md CHANGED Viewed

@@ -15,6 +15,14 @@
 </dd>
 </dl>
+## Members
+<dl>
+<dt><a href="#user-content-w_PURPOSE">PURPOSE</a> : <code>object</code></dt>
+<dd><p>Purposes</p>
+</dd>
+</dl>
 ## Constants
 <dl>
@@ -27,9 +35,6 @@
 <dt><a href="#user-content-w_PAYMENT_TYPE">PAYMENT_TYPE</a> : <code>object</code></dt>
 <dd><p>List of available payment source types</p>
 </dd>
-<dt><a href="#user-content-w_PURPOSE">PURPOSE</a> : <code>object</code></dt>
-<dd><p>Purposes</p>
-</dd>
 <dt><a href="#user-content-w_FORM_FIELD">FORM_FIELD</a> : <code>object</code></dt>
 <dd><p>Current constant include available type of fields which can be included to widget</p>
 </dd>
@@ -2267,6 +2272,19 @@ Method for setting a custom language code
 ```javascript
 config.setLanguage('en');
 ```
+<a name="w_PURPOSE" id="w_PURPOSE" href="#user-content-w_PURPOSE">&nbsp;</a>
+## PURPOSE : <code>object</code>
+Purposes
+**Kind**: global variable
+| Param | Type | Default |
+| --- | --- | --- |
+| PAYMENT_SOURCE | <code>string</code> | <code>&quot;payment_source&quot;</code> |
+| CARD_PAYMENT_SOURCE_WITH_CVV | <code>string</code> | <code>&quot;card_payment_source_with_cvv&quot;</code> |
+| CARD_PAYMENT_SOURCE_WITHOUT_CVV | <code>string</code> | <code>&quot;card_payment_source_without_cvv&quot;</code> |
 <a name="w_EVENT" id="w_EVENT" href="#user-content-w_EVENT">&nbsp;</a>
 ## EVENT : <code>object</code>
@@ -2316,19 +2334,6 @@ List of available payment source types
 | BANK_ACCOUNT | <code>string</code> | <code>&quot;bank_account&quot;</code> |
 | CHECKOUT | <code>string</code> | <code>&quot;checkout&quot;</code> |
-<a name="w_PURPOSE" id="w_PURPOSE" href="#user-content-w_PURPOSE">&nbsp;</a>
-## PURPOSE : <code>object</code>
-Purposes
-**Kind**: global constant
-| Param | Type | Default |
-| --- | --- | --- |
-| PAYMENT_SOURCE | <code>string</code> | <code>&quot;payment_source&quot;</code> |
-| CARD_PAYMENT_SOURCE_WITH_CVV | <code>string</code> | <code>&quot;card_payment_source_with_cvv&quot;</code> |
-| CARD_PAYMENT_SOURCE_WITHOUT_CVV | <code>string</code> | <code>&quot;card_payment_source_without_cvv&quot;</code> |
 <a name="w_FORM_FIELD" id="w_FORM_FIELD" href="#user-content-w_FORM_FIELD">&nbsp;</a>
 ## FORM\_FIELD : <code>object</code>

package/docs/click-to-pay.md CHANGED Viewed

@@ -103,6 +103,7 @@ When the flow type is src, masked checkoutData available is also returned
 | --- | --- | --- |
 | type | <code>string</code> | type of the checkout, can be `src` or `manual`. |
 | token | <code>string</code> | one time token value. |
+| token_type | <code>string</code> | one time token type value, can be `card` or `card_scheme_token`. |
 | [checkoutData] | <code>object</code> | Optional checkout data related to the checkout information. Only available on src flow. |
 | [checkoutData.card_number_bin] | <code>string</code> | The BIN of the card used for the transaction. |
 | [checkoutData.card_number_last4] | <code>string</code> | The last four digits of the card number. |

package/docs/fraud-prevention-examples.md ADDED Viewed

@@ -0,0 +1,196 @@
+# 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="../../../bundles/widget.umd.js"></script>
+  <style>
+    body {
+      min-width: 320px;
+      max-width: 1440px;
+      min-height: 100svh;
+    }
+    main {
+      padding: 2rem;
+      margin: 0 auto;
+    }
+    .forter-test {
+      padding: 1rem;
+      border-radius: 8px;
+      background: #f5f5f5;
+    }
+    .status-card {
+      background: white;
+      padding: 1rem;
+      border-radius: 4px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .status {
+      display: inline-block;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-weight: 500;
+    }
+    .status.success {
+      background: #e6ffe6;
+      color: #006600;
+    }
+    .status.pending {
+      background: rgb(255, 249, 205);
+      color: rgb(255, 204, 0);
+    }
+    .status.error {
+      background: #ffe6e6;
+      color: #cc0000;
+    }
+    .error {
+      display: inline-block;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      background: #ffe6e6;
+      color: #cc0000;
+      font-weight: 500;
+    }
+    code {
+      background: #f0f0f0;
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+      font-family: monospace;
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>Real time user behaviour anaylsis - Forter example</h1>
+    <div class="forter-test">
+      <h2>Forter Integration Test</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 { FraudPreventionEvents, 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(FraudPreventionEvents.namespace, (event) => {
+      switch (event.detail.type) {
+        case FraudPreventionEvents.types.fingerprintTokenReady: {
+          token = event.detail.payload.token;
+          break;
+        }
+        case FraudPreventionEvents.types.fingerprintTokenError: {
+          errorCode = event.detail.payload.code;
+          break;
+        }
+        default: {
+          throw new Error(
+            `${FraudPreventionEvents.namespace} emitted an unsupported event: ${JSON.stringify(event.detail)}.`,
+          );
+        }
+      }
+      render();
+    });
+    new FraudPreventionService().withForter({
+      siteId: 'YOUR_SITE_ID_OR_SUBSITE_ID',
+      mode: 'test',
+      csp: false, // set to true if your website uses Content-Security-Policies
+    });
+  </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`, `script-src-element` 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
+script-src-elem 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/install/npm.example.md CHANGED Viewed

@@ -17,7 +17,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'"

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

@@ -0,0 +1,59 @@
+## 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(
+        'FLOW_ID',
+        {
+            mouse_movement: true
+        }
+    );
+    payPalDataCollector.setEnv('test');
+    payPalDataCollector.onError(function(error) {
+        console.log("On Error Callback", error);
+    });
+    payPalDataCollector.collectDeviceData().then(function(collectedDeviceData) {
+      //Here when the promise is resolved, it should be able to see the correlation_id.
+      const correlationId = collectedDeviceData.correlation_id;
+      console.log("On Success", correlationId);
+    });
+</script>
+</html>
+```

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

@@ -0,0 +1,149 @@
+## Classes
+<dl>
+<dt><a href="#PayPalDataCollector">PayPalDataCollector</a></dt>
+<dd><p>PayPal Data Collector Widget constructor</p>
+</dd>
+</dl>
+## Typedefs
+<dl>
+<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onError method.</p>
+</dd>
+</dl>
+## Interfaces
+<dl>
+<dt><a href="#PayPalDataCollectorConfig">PayPalDataCollectorConfig</a> : <code>object</code></dt>
+<dd><p>Interface of data used for PayPal configuration. For further information refer to <a href="https://developer.paypal.com/sdk/js/reference/#style">the documentation</a>.</p>
+</dd>
+<dt><a href="#CollectedDeviceData">CollectedDeviceData</a> : <code>object</code></dt>
+<dd><p>Data object with the corresponding <code>correlation_id</code>.</p>
+</dd>
+<dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
+<dd><p>Interface for IOnErrorEventData</p>
+</dd>
+</dl>
+<a name="PayPalDataCollectorConfig" id="PayPalDataCollectorConfig" href="#PayPalDataCollectorConfig">&nbsp;</a>
+## PayPalDataCollectorConfig : <code>object</code>
+Interface of data used for PayPal configuration. For further information refer to [the documentation](https://developer.paypal.com/sdk/js/reference/#style).
+**Kind**: global interface
+| Param | Type | Description |
+| --- | --- | --- |
+| [mouse_movement] | <code>boolean</code> | Used for indicating if is enabled mouse movement collection. |
+<a name="CollectedDeviceData" id="CollectedDeviceData" href="#CollectedDeviceData">&nbsp;</a>
+## CollectedDeviceData : <code>object</code>
+Data object with the corresponding `correlation_id`.
+**Kind**: global interface
+| Param | Type | Description |
+| --- | --- | --- |
+| [correlation_id] | <code>string</code> | The correlation ID that was used on the subsecuent requests. |
+<a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData">&nbsp;</a>
+## IOnErrorEventData : <code>object</code>
+Interface for IOnErrorEventData
+**Kind**: global interface
+| Param | Type | Description |
+| --- | --- | --- |
+| error_code | <code>string</code> | Error code. One of 'promise_not_enabled' or 'script_error'. |
+<a name="PayPalDataCollector" id="PayPalDataCollector" href="#PayPalDataCollector">&nbsp;</a>
+## PayPalDataCollector
+PayPal Data Collector Widget constructor
+**Kind**: global class
+* [PayPalDataCollector](#PayPalDataCollector)
+    * [new PayPalDataCollector([flowId], [config])](#new_PayPalDataCollector_new)
+    * [.collectDeviceData()](#PayPalDataCollector+collectDeviceData) ⇒ [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData)
+    * [.onError([callback])](#PayPalDataCollector+onError)
+    * [.setEnv(env)](#PayPalDataCollector+setEnv)
+<a name="new_PayPalDataCollector_new" id="new_PayPalDataCollector_new" href="#new_PayPalDataCollector_new">&nbsp;</a>
+### new PayPalDataCollector([flowId], [config])
+| Param | Type | Description |
+| --- | --- | --- |
+| [flowId] | <code>string</code> | This string identifies the source website of the FraudNet request. |
+| [config] | [<code>PayPalDataCollectorConfig</code>](#PayPalDataCollectorConfig) | Extra configuration for the widget. |
+**Example**
+```js
+var payPalDataCollector = new PayPalDataCollector('FLOW_ID', {});
+```
+<a name="PayPalDataCollector+collectDeviceData" id="PayPalDataCollector+collectDeviceData" href="#PayPalDataCollector+collectDeviceData">&nbsp;</a>
+### payPalDataCollector.collectDeviceData() ⇒ [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData)
+After configuring the PayPalDataCollector Widget, starts the process and returns
+the correlation id used among the requests asynchronously.
+**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
+**Returns**: [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData) - Promise when resolved, returns an object
+that contains the `correlation_id` key.
+**Example**
+```js
+const collectedDeviceData = await payPalDataCollectorWidget.collectDeviceData();
+console.log(collectedDeviceData.correlation_id)
+```
+<a name="PayPalDataCollector+onError" id="PayPalDataCollector+onError" href="#PayPalDataCollector+onError">&nbsp;</a>
+### payPalDataCollector.onError([callback])
+If the process fails, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
+**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
+**Example**
+```js
+PayPalDataCollector.onError((eventData) => console.log('Some error occur'));
+```
+<a name="PayPalDataCollector+setEnv" id="PayPalDataCollector+setEnv" href="#PayPalDataCollector+setEnv">&nbsp;</a>
+### payPalDataCollector.setEnv(env)
+Current method can change environment. By default environment = test.
+This method does not affect Paydock's API calls or environments, is only for PayPal Data Collector
+script, in order to know if the script is injected on a live server or is a testing
+environment. The available values are `test` and `live`. This should match with the used
+`gateway.mode` in Paydock to process the transaction.
+**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)
+| Param | Type | Description |
+| --- | --- | --- |
+| env | <code>string</code> | test, live |
+**Example**
+```js
+PayPalDataCollector.setEnv('live');
+```
+<a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback">&nbsp;</a>
+## OnErrorCallback : <code>function</code>
+Callback for onError method.
+**Kind**: global typedef
+| Param | Type |
+| --- | --- |
+| data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) \| <code>null</code> |

package/docs/paypal-save-payment-source-examples.md ADDED Viewed

@@ -0,0 +1,63 @@
+## PayPalSavePaymentSource Widget
+PayPalSavePaymentSource Widget allows to obtain a Paydock one time token linked with a Paypal payment source from the customer.
+The general flow to use the widgets is:
+1. Configure your PayPal gateway and connect it using Paydock API or Dashboard.
+2. Create a container in your site
+```html
+<div id="widget"></div>
+```
+3. Initialize the specific `PayPalSavePaymentSourceWidget`, providing your Access token or Public Key, the Gateway ID that Paydock provides plus required and optional config parameter for the widget in use. The general format is:
+```js
+new paydock.PayPalSavePaymentSourceWidget(
+    "#widget",
+    accessTokenOrPublicKey,
+    gatewayId,
+    widgetSpecificConfig,
+);
+```
+4. Handle the `onSuccess`, `onError` and `onCancel` for paypal setup token results.
+5. If `onSuccess` event is emmited, event data should contain `token` and `email` ready to use.
+### Example
+A full description of the config parameters for [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget) meta parameters can be found [here](#PayPalSavePaymentSourceWidgetConfig). 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 PayPalSavePaymentSourceWidget!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    let button = new paydock.PayPalSavePaymentSourceWidget(
+        "#widget",
+        accessTokenOrPublicKey,
+        gatewayId,
+        {
+            style: {
+                layout: 'vertical',
+                color:  'gold',
+                shape:  'pill',
+                label:  'paypal'
+            }
+        }
+    );
+    payPalSavePaymentSourceWidget.onSuccess((data) => console.log('On success: ', data));
+    payPalSavePaymentSourceWidget.onError((data) => console.log('On error: ', data));
+    payPalSavePaymentSourceWidget.onCancel(() => console.log('On cancelled'));
+    button.setEnv('sandbox');
+    button.load();
+</script>
+</html>
+```