@paydock/client-sdk 1.105.1 → 1.105.56-beta

package/slate.md

@@ -16,6 +16,10 @@ Also you will need added gateway ([see API Reference by gateway](https://docs.pa
 
 ## 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
 
 ```html
@@ -25,77 +29,73 @@ Also you will need added gateway ([see API Reference by gateway](https://docs.pa
 </script>
 ```
 
-You should begin by including the library in your page.
-
-Add this script tag to your page to get started with with the url below:
-
-*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`
+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`*
 
-Also can download library the [production version][min] or the [development version][max]
+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
 
-
-The library will always be available via the global variable `paydock`.
-
-
-
-Also for more advanced use, the library has [UMD](https://github.com/umdjs/umd) format, thus can be used in requireJs, webpack, etc.
-
-
-
-
-
-
-
+For more advanced use-cases, the library has [UMD](https://github.com/umdjs/umd)
+format that can be used in RequireJS, Webpack, etc.
 
 
 ### With package manager
 
-
-```javascript--es2015
-// ES2015 / TypeScript
-
-import { HtmlWidget } from '@paydock/client-sdk/widget';
-
-let widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
+```cjs
+// module import - CommonJS/Node projects ✅
+const paydock = require('@paydock/client-sdk')
+const api = new paydock.Api('publicKey');
 ```
 
-
-```html
-<script src="@paydock/client-sdk/bundles/widget.umd.min.js"></script>
-<script>
-    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
-</script>
+```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');
+```
 
-To install with package manager, enter the following command:
-
-`npm install @paydock/client-sdk`
-
-
-You can use ES2015 or TypeScript modules
-
-`@paydock/client-sdk/widget`
-
-
-Also can use UMD module (global visibility, see above)
-
-`@paydock/client-sdk/bundles/widget.umd.js`
+```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'"
+```
 
-`@paydock/client-sdk/bundles/widget.umd.min.js`
 
+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.
 
 
 ## Widget
@@ -122,11 +122,11 @@ var widget = new paydock.HtmlWidget('#widget', 'publicKey');
 widget.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { HtmlWidget } from '@paydock/client-sdk/widget';
-    
+import { HtmlWidget } from '@paydock/client-sdk';
+
 var widget = new HtmlWidget('#widget', 'publicKey');
 widget.load();
 ```
@@ -134,7 +134,7 @@ widget.load();
 Then write only need 2 lines of code in js to initialize widget
 
 
-### Full example 
+### Full example
 
 ```html
 <!DOCTYPE html>
@@ -197,9 +197,9 @@ widget.setFormFields(['phone', 'email']); // add additional fields for form of w
 widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported card types
 ```
 
-This example shows how you can use a lot of other methods to settings your form 
+This example shows how you can use a lot of other methods to settings your form
 
-### Full example 
+### Full example
 
 ```html
 <!DOCTYPE html>
@@ -220,12 +220,12 @@ This example shows how you can use a lot of other methods to settings your form
 <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
 <script>
 	var widget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
-	
+
 	widget.setSupportedCardIcons(['mastercard', 'visa']);
 	widget.setFormFields(['phone', 'email']);
 	widget.setRefId('custom-ref-id');
     widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');z
-	
+
 	widget.load();
 </script>
 </script>
@@ -262,10 +262,10 @@ var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken
 list.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { HtmlPaymentSourceWidget } from '@paydock/client-sdk/payment-source-widget';
+import { HtmlPaymentSourceWidget } from '@paydock/client-sdk';
 
 var list = new HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
 list.load();
@@ -392,7 +392,7 @@ You must create a button to turn it into checkout-button
 var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
 
@@ -622,11 +622,11 @@ This wrapper helps you to work with paydock api emdpoints
 var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { Api } from '@paydock/client-sdk/api';
-    
+import { Api } from '@paydock/client-sdk';
+
 var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
 ```
 
@@ -639,11 +639,11 @@ var response = await new paydock.Api('publicKey').setEnv('env').charge().preAuth
     });
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { Api } from '@paydock/client-sdk/api';
-    
+import { Api } from '@paydock/client-sdk';
+
 var response = await new Api('publicKey').setEnv('env').charge().preAuth({
       amount: 100,
       currency: 'AUD',
@@ -653,7 +653,7 @@ var response = await new Api('publicKey').setEnv('env').charge().preAuth({
 
 Then write only need 2 lines of code in js to make request
 
-### Initialization full example 
+### Initialization full example
 
 ```html
 <!DOCTYPE html>
@@ -700,10 +700,10 @@ var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
 canvas3ds.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { Canvas3ds } from '@paydock/client-sdk/canvas3ds';
+import { Canvas3ds } from '@paydock/client-sdk';
 
 var list = new Canvas3ds('#widget', 'token');
 list.load();
@@ -924,7 +924,7 @@ After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds`
 ## Vault Display Widget
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#vault-display-widget)
 
-The vault display form allows viewing card number and CVV. The form can be customised according to your needs. 
+The vault display form allows viewing card number and CVV. The form can be customised according to your needs.
 You can set styles as well as subscribe to widget events that help monitor user’s actions in real time.
 
 ## Vault Display Widget simple example
@@ -944,18 +944,18 @@ var widget = new paydock.VaultDisplayWidget('#widget', 'token');
 widget.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 
-import { VaultDisplayWidget } from '@paydock/client-sdk/vault-display-widget';
-    
+import { VaultDisplayWidget } from '@paydock/client-sdk';
+
 var widget = new VaultDisplayWidget('#widget', 'token');
 widget.load();
 ```
 
 Then write only need 2 lines of code in js to initialize widget
 
-### Full example 
+### Full example
 
 ```html
 <!DOCTYPE html>
@@ -966,9 +966,9 @@ Then write only need 2 lines of code in js to initialize widget
     <style>iframe {border: 0;width: 100%;height: 300px;}</style>
 </head>
 <body>
-        
+
     <div id="widget"></div>
-   
+
     <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
         var widget = new paydock.VaultDisplayWidget('#widget', 'token');
@@ -1006,9 +1006,9 @@ widget.setStyles({
 });
 ```
 
-This example shows how you can use a lot of other methods to settings your form 
+This example shows how you can use a lot of other methods to settings your form
 
-### Full example 
+### Full example
 
 ```html
 <!DOCTYPE html>
@@ -1019,27 +1019,27 @@ This example shows how you can use a lot of other methods to settings your form
     <style>iframe {border: 0;width: 40%;height: 450px;}</style>
 </head>
 <body>
-        
+
     <div id="widget"></div>
-   
+
     <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
         var widget = new paydock.VaultDisplayWidget('#widget', 'token');
 
         widget.setEnv('sandbox');
-        
+
         widget.on('after_load', function (data) {
           console.log(data);
         });
-        
+
         widget.on('cvv_secure_code_requested', function (data) {
           console.log(data);
         });
-        
+
         widget.on('card_number_secure_code_requested', function (data) {
           console.log(data);
         });
-        
+
         widget.setStyles({
             background_color: 'rgb(0, 0, 0)',
             border_color: 'yellow',
@@ -1088,7 +1088,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -1103,7 +1103,7 @@ var button = new WalletButtons(
 button.load();
 ```
 
-Flypay, Flypay V2 and Paypal wallets do not require any meta sent to the wallet, so the following is enough for initialization:
+Flypay and Paypal wallets do not require any meta sent to the wallet, so the following is enough for initialization:
 ```javascript
 let button = new paydock.WalletButtons(
     "#widget",
@@ -1113,7 +1113,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -1137,7 +1137,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -1151,6 +1151,32 @@ var button = new WalletButtons(
 button.load();
 ```
 
+For Flypay v2 wallet, the client_id is required:
+```javascript
+let button = new paydock.WalletButtons(
+    "#widget",
+    token,
+    {
+        client_id: "client_id",
+    }
+);
+button.load();
+```
+
+```javascript
+// ES2015 | TypeScript
+import { WalletButtons } from '@paydock/client-sdk';
+
+var button = new WalletButtons(
+    '#widget',
+    token,
+    {
+        client_id: "client_id",
+    }
+);
+button.load();
+```
+
 ### Setting environment
 
 Current method can change environment. By default environment = sandbox.
@@ -1451,10 +1477,11 @@ _(Required `meta` fields: - . Optional `meta` fields: -)_
 		{
             access_token: 'TOKEN',
             refresh_token: 'TOKEN',
+            client_id: 'CLIENT_ID',
         },
 	);
     button.setEnv('sandbox');
-    button.onUnavailable(() => console.log("No wallet buttons available"));
+    button.onUnavailable((data) => console.log("No wallet buttons available"));
     button.onPaymentSuccessful((data) => console.log("The payment was successful"));
     button.onPaymentError((data) => console.log("The payment was not successful"));
     button.onAuthTokensChanged((data) => console.log('Authentication tokens changed'));
@@ -1664,54 +1691,57 @@ Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpeci
 </html>
 ```
 
-## Secure Remote Commerce
-You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#SRC).
+# Click To Pay
 
-This widget provides you with the ability to easily integrate with SRC providers. Currently Visa SRC is supported.
+## Overview
 
-## SRC simple example
+Integrate with Click To Pay using Paydock's Click To Pay widget.
+For a full description of the methods and parameters, reference the [README file](https://www.npmjs.com/package/@paydock/client-sdk#ClickToPay).
 
-### Container
+## Click To Pay simple example
+
+The following section provides an example use case and integration for the widget.
+
+### Create a Container
+
+To integrate the Click To Pay checkout iFrame, create a container in your HTML code. This container serves as the placeholder for the iFrame.
 
 ```html
-<div id="checkoutButton"></div>
 <div id="checkoutIframe"></div>
 ```
 
-You must create a container for the initial checkout button, and a different one for the checkout iFrame. Inside the first tag the button will be initialized, and inside the second one the iFrame will be loaded once the button is clicked.
+### Initialize the Widget
 
+Use the following code to initialize your widget:
 
-### Initialization
 ```javascript
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.ClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key_or_access_token",
     {}, // meta
 );
 src.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
-
-import { SRC } from '@paydock/client-sdk';
-
-var src = new SRC(
-    "#checkoutButton",
+import { ClickToPay } from '@paydock/client-sdk';
+var src = new ClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key_or_access_token",
     {}, // meta
 );
 src.load();
 ```
 
-*NOTE:* it's highly recommended to use a Paydock Access Token instead of the public key for security reasons. When creating it, you will need to enable the `Secure Remote Commerce` and add a whiteliste for the domain of your checkout screen.
+*NOTE:* Paydock recommends that you use a Paydock Access Token instead of a public key for security reasons in production environments. When creating your access token, you must enable the `Secure Remote Commerce` and add a whitelist for the domain of your checkout screen.
 
 ### Full example
 
+A full example of the container and the initialized widget is as follows:
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -1721,14 +1751,12 @@ src.load();
     <style>iframe {border: 0;width: 40%;height: 300px;}</style>
 </head>
 <body>
-    <div id="checkoutButton"></div>
     <div id="checkoutIframe"></div>
     <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
-        var src = new paydock.SRC(
-            "#checkoutButton",
+        var src = new paydock.ClickToPay(
             "#checkoutIframe",
-            "scheme_service_id",
+            "service_id",
             "paydock_public_key_or_access_token",
             {},
         );
@@ -1738,50 +1766,30 @@ src.load();
 </html>
 ```
 
+## Customize your Click To Pay Checkout
 
-## SRC advanced example
+The following is an advanced example that includes customization. You can use these methods to enhance your checkout experience.
 
 ### Settings
 
 ```javascript
-
-src.setEnv('sandbox'); // set enviroment
-
-src.hideButton(); // hide button
-
-src.showButton(); // show button
-
+src.setEnv('sandbox'); // set environment
 src.hideCheckout(); // hide checkout iframe
-
 src.showCheckout(); // show checkout iframe
-
-src.on('checkoutButtonLoaded', () => {
-    console.log("Button loaded");
-});
-
-src.on('checkoutButtonClicked', () => {
-    console.log("Button clicked");
-});
-
 src.on('iframeLoaded', () => {
     console.log("Initial iframe loaded");
 });
-
 src.on('checkoutReady', () => {
     console.log("Checkout ready to be used");
 });
-
 src.on('checkoutCompleted', (token) => {
     console.log(token);
 });
-
 src.on('checkoutError', (error) => {
     console.log(error);
 });
 ```
 
-Here you can see how you can use this methods to customize your checkout experience
-
 ### Full example
 
 ```html
@@ -1793,64 +1801,72 @@ Here you can see how you can use this methods to customize your checkout experie
     <style>iframe {border: 0;width: 40%;height: 450px;}</style>
 </head>
 <body>
-    <div id="checkoutButton"></div>
     <div id="checkoutIframe"></div>
     <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
-        var src = new paydock.SRC(
-            "#checkoutButton",
+        var src = new paydock.ClickToPay(
             "#checkoutIframe",
-            "scheme_service_id",
+            "service_id",
             "paydock_public_key_or_access_token",
             {},
         );
-
+        src.on('iframeLoaded', () => {
+            console.log("Initial iframe loaded");
+        });
         src.on('checkoutReady', () => {
             console.log("Checkout ready to be used");
         });
-
         src.on('checkoutCompleted', (token) => {
             console.log(token);
         });
+        src.on('checkoutError', (error) => {
+            console.log(error);
+        });
         src.load();
     </script>
 </body>
 </html>
 ```
 
-## Customization options for address fields
-### Shipping address:
+## Customize your billing address fields
 
-To customize shipping address experience we use a flag that manages how VisaSRC requires or not shipping address to the customer. Options are NONE (default option), POSTAL_COUNTRY or ALL.
+To customize your billing address experience, Paydock uses a flag that manages whether a customer's billing address is mandatory.
+The options for this customization are NONE (default option), and POSTAL_COUNTRY or FULL.
 
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.ClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key_or_access_token",
     {
         "dpa_transaction_options": {
-            "dpa_shipping_preference": "ALL"
+            "dpa_billing_preference": "FULL"
         }
     },
 );
 ```
 
-With this the Visa popup requires the shipping address from consumer, and these information will be stored in the Paydock charge.
-
-Another option is at time of creating the charge. Say that you have a different way of collecting the shipping address (outside Paydock checkout), you can then disable the shipping address on our SRC widget and send it when creating the charge creation after getting the One Time Token out of the SRC widget:
+The Click To Pay checkout in the example requires the billing address from the customer, which is then returned as a part of the checkout data. The data is then stored and leveraged in the Paydock charge.
+You can also provide the billing address at the time of creating the charge. For example, if you have a different method for collecting the billing address, such as outside of the Click To Pay checkout, you can provide it alongside other information at the charge creation step:
+1. Disable the billing address in Paydock's Click To Pay widget.
+2. Get your One Time Token from the Click To Pay widget alongside other details that may have been collected outside the Click To Pay checkout as the shipping address.
+3. Send the billing address when creating the charge.
 
 ```
 POST v1/charges
-
 {
     "amount": "10.00",
     "currency": "AUD",
-    "token": "token",
+    "token": "one_time_token",
     "customer": {
         "payment_source": {
-            "gateway_id": "gateway_id"
+            "gateway_id": "gateway_id",
+            "address_line1": "address_line1",
+            "address_line2": "address_line2",
+            "address_city": "address_city",
+            "address_postcode": "address_postcode",
+            "address_state": "address_state",
+            "address_country": "address_country"
         }
     },
     "shipping": {
@@ -1865,60 +1881,80 @@ POST v1/charges
 }
 ```
 
-- Billing address:
+## How to customize accepted cards
+
+You can send a flag `unaccepted_card_type` to block the usage of a specific card type. The available options are 'DEBIT' and 'CREDIT'.
 
-Billing address fields are always present on the checkout and required when adding a new credit card (or for new consumer checkout). You can send billing fields on the meta data to pre-fill these fields inside the customer object:
+### Example code
+
+The following example demonstrates how to block the card:
 
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.ClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key_or_access_token",
+    "service_id",
+    "paydock_public_key",
     {
-        "customer": {
-            "email": "test@email.com",
-            "first_name": "Name",
-            "last_name": "Surname",
-            "phone": {
-                "country_code": "1",
-                "phone": "2124567890"
-            },
-            "payment_source": {
-                "address_line1": "Line 1",
-                "address_line2": "Line 2",
-                "address_city": "Miami",
-                "address_postcode": "33126",
-                "address_state": "FL",
-                "address_country": "US"
-            }
-        }
+        unaccepted_card_type: 'DEBIT'
     },
 );
 ```
 
-## Personalization Styling
+## Personalize the Style
 
-To improve the experience in the use of the widget, it is allowed to send props that customize the UI.
+Customize the look and feel of your UI. The following example demonstrates changes in the styling of the buttons.
 
 ### Example code
 
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.ClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key",
+    {},
 );
+src.setStyles({
+    enable_src_popup: true,
+    primary_button_color: 'red',
+    secondary_button_color: 'red',
+    primary_button_text_color: 'red',
+    secondary_button_text_color: 'red',
+    font_family: 'Arial',
+});
+```
 
-button.setStyles({"primary_color":"#a83232","button_text_color":"#171e9c","font_family":"sans-serif"})
+## Recognition token
 
-```
-## Event and Values
+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.
 
-| Event Value         | Type                | Description                                                    |
-| ------------------- | ------------------- | -------------------------------------------------------------- |
-| primary_color  | <code>string</code> | HEX color for the principal buttons, example : #32a852 |
-| button_text_color    | <code>string</code> | HEX color for the text of the buttons, example : #32a852|
-| font_family    | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)|
-| card_schemes    | <code>[string] - array of string</code> | Possible values "visa", "mastercard", "amex" and "discover" - Default show all logos
+### 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
+});
+```