@paydock/client-sdk 1.113.2 → 1.114.7-beta

package/docs/api-widget.md

@@ -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>
@@ -421,6 +426,7 @@ Class Widget include method for working on html and include extended by HtmlMult
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
     * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
+    * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
     * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
     * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
     * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)
@@ -1052,6 +1058,18 @@ Current method can set icons of supported card types
 ```javascript
 widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
 ```
+<a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>
+
+### htmlWidget.hideUiErrors()
+Current method can hide prevent the widget from showing the error messages
+
+**Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
+**Overrides**: [<code>hideUiErrors</code>](#user-content-w_MultiWidget+hideUiErrors)  
+**Example**  
+
+```javascript
+widget.hideUiErrors('id');
+```
 <a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>
 
 ### htmlWidget.setEnv(env, [alias])
@@ -1146,6 +1164,7 @@ Class HtmlMultiWidget include method for working with html
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
     * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
+    * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
     * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
     * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
     * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)
@@ -1678,6 +1697,18 @@ Current method can set icons of supported card types
 ```javascript
 widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
 ```
+<a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>
+
+### htmlMultiWidget.hideUiErrors()
+Current method can hide prevent the widget from showing the error messages
+
+**Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
+**Overrides**: [<code>hideUiErrors</code>](#user-content-w_MultiWidget+hideUiErrors)  
+**Example**  
+
+```javascript
+widget.hideUiErrors('id');
+```
 <a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>
 
 ### htmlMultiWidget.setEnv(env, [alias])
@@ -1931,6 +1962,7 @@ Class MultiWidget include method for for creating iframe url
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
     * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons)
+    * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors)
     * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv)
     * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl)
     * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage)
@@ -2218,6 +2250,17 @@ Current method can set icons of supported card types
 ```javascript
 widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);
 ```
+<a name="w_MultiWidget+hideUiErrors" id="w_MultiWidget+hideUiErrors" href="#user-content-w_MultiWidget+hideUiErrors">&nbsp;</a>
+
+### multiWidget.hideUiErrors()
+Current method can hide prevent the widget from showing the error messages
+
+**Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  
+**Example**  
+
+```javascript
+widget.hideUiErrors('id');
+```
 <a name="w_MultiWidget+setEnv" id="w_MultiWidget+setEnv" href="#user-content-w_MultiWidget+setEnv">&nbsp;</a>
 
 ### multiWidget.setEnv(env, [alias])
@@ -2267,6 +2310,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 +2372,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-examples.md

@@ -229,39 +229,3 @@ src.setStyles({
     font_family: 'Arial',
 });
 ```
-
-## Recognition token
-
-In order to store user information for further payments, click to pay provides a recognition token that is used to load user information.
-If you already have a recognitionToken stored, you can use it in meta to load the user information.
-
-### Storage suggestions
-Merchant can store the tokens by dropping the token as a 1st party cookie in the browser, and must ensure to manage all the security aspects around dropping/storing the cookie by following the security standards:
-
-- `Expiration Date=` cookie should be set to expire at a max 180 days
-- `Secure` flag
-- `httpOnly` flag
-- `sameSite=` strict
-- `Value=` recognition token JWT
-
-### Example code
-
-```javascript
-var src = new paydock.ClickToPay(
-    "#checkoutIframe",
-    "service_id",
-    "paydock_public_key",
-    {
-        "recognition_token": "eyJraWQiOiIy...",
-    },
-);
-src.on('recognitionTokenRequested', (data) => {
-    console.log('Recognition token was found: ' + data.data.recognitionToken);
-    // Add recognition token to your store
-});
-
-src.on('recognitionTokenDropped', () => {
-    console.log('Recognition token was droped');
-    // Delete recognition token from your store
-});
-```

package/docs/click-to-pay.md

@@ -78,7 +78,6 @@ Interface of data used for the Mastercard Checkout. For further information refe
 | [customer.phone.country_code] | <code>string</code> | Customer phone country code (example "1" for US). |
 | [customer.phone.phone] | <code>string</code> | Customer phone number. |
 | [unaccepted_card_type] | <code>string</code> | Used to block a specific card type. Options are 'CREDIT', 'DEBIT'. |
-| [recognition_token] | <code>string</code> | Used for Click to Pay to load user information and preferences. |
 
 <a name="EventData" id="EventData" href="#EventData">&nbsp;</a>
 
@@ -104,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. |
@@ -321,8 +321,6 @@ List of available event's name in the Click To Pay checkout lifecycle
 | CHECKOUT_POPUP_CLOSE | <code>string</code> | <code>&quot;checkoutPopupClose&quot;</code> | Event sent when Click To Pay checkout flow is closed, regardless of embedded or windowed mode. |
 | CHECKOUT_COMPLETED | <code>string</code> | <code>&quot;checkoutCompleted&quot;</code> | Event sent on successful checkout by customer. Check [data](#EventDataCheckoutCompletedData) for more information. |
 | CHECKOUT_ERROR | <code>string</code> | <code>&quot;checkoutError&quot;</code> | Event sent on error checkout by customer. Check [data](#EventData) for more information. |
-| RECOGNITION_TOKEN_REQUESTED | <code>string</code> | <code>&quot;recognitionTokenRequested&quot;</code> | Event sent when a recognition token was found on the mastercard SDK response. |
-| RECOGNITION_TOKEN_DROPPED | <code>string</code> | <code>&quot;recognitionTokenDropped&quot;</code> | Event sent when a recognition token needs to be dropped for user be no longer remembered. |
 
 <a name="EVENT_DATA_TYPE" id="EVENT_DATA_TYPE" href="#EVENT_DATA_TYPE">&nbsp;</a>
 

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

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

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

@@ -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>
+```