@paydock/client-sdk 1.105.1 → 1.105.56-beta

package/README.md

@@ -16,76 +16,78 @@ Also you will need added gateway ([see API Reference by gateway](https://docs.pa
 
 ## Get started
 
-### With package manager
-
-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)
+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.
 
-`@paydock/client-sdk/bundles/widget.umd.js`
-
-`@paydock/client-sdk/bundles/widget.umd.min.js`
+### With package manager
 
+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
+```
 
-```javascript--es2015
-// ES2015 / TypeScript
+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.
 
-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');
 ```
 
+```mjs
+// named import - ESM projects or TypeScript projects ✅
+import { HtmlWidget } from '@paydock/client-sdk'
+const widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
+```
 
-```html
-<script src="@paydock/client-sdk/bundles/widget.umd.min.js"></script>
-<script>
-    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
-</script>
+```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 - 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'"
+```
 
 
 ### Download from CDN
 
-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` 
+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`.
 
-*Full version for development and debug*
-`https://widget.paydock.com/sdk/latest/widget.umd.js`
+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.
 
 
 ```html
@@ -95,6 +97,7 @@ Also for more advanced use, the library has [UMD](https://github.com/umdjs/umd)
 </script>
 ```
 
+
 ## Widget
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#widget-simple-example)
 
@@ -119,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();
 ```
@@ -131,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>
@@ -194,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>
@@ -217,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>
@@ -648,7 +651,7 @@ Class Widget include method for working on html and include extended by HtmlMult
     * [.setFormValues(fieldValues)](#user-content-w_MultiWidget+setFormValues)
     * [.setFormLabels(fieldLabels)](#user-content-w_MultiWidget+setFormLabels)
     * [.setFormPlaceholders(fieldPlaceholders)](#user-content-w_MultiWidget+setFormPlaceholders)
-    * [.setIcons()](#user-content-w_MultiWidget+setIcons)
+    * ~~[.setIcons()](#user-content-w_MultiWidget+setIcons)~~
     * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
@@ -1213,15 +1216,13 @@ widget.setFormPlaceholders({
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### htmlWidget.setIcons()
+### ~~htmlWidget.setIcons()~~
+***Deprecated***
+
 The method to change the widget icons
 
 **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget)  
 **Overrides**: [<code>setIcons</code>](#user-content-w_MultiWidget+setIcons)  
-**Todo**
-
-- [ ] DEPRECATED
-
 <a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>
 
 ### htmlWidget.setHiddenElements(elements)
@@ -1375,7 +1376,7 @@ Class HtmlMultiWidget include method for working with html
     * [.setFormLabels(fieldLabels)](#user-content-w_MultiWidget+setFormLabels)
     * [.setFormPlaceholders(fieldPlaceholders)](#user-content-w_MultiWidget+setFormPlaceholders)
     * [.setFormElements(elements)](#user-content-w_MultiWidget+setFormElements)
-    * [.setIcons()](#user-content-w_MultiWidget+setIcons)
+    * ~~[.setIcons()](#user-content-w_MultiWidget+setIcons)~~
     * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
@@ -1841,15 +1842,13 @@ widget.setFormElements([
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### htmlMultiWidget.setIcons()
+### ~~htmlMultiWidget.setIcons()~~
+***Deprecated***
+
 The method to change the widget icons
 
 **Kind**: instance method of [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget)  
 **Overrides**: [<code>setIcons</code>](#user-content-w_MultiWidget+setIcons)  
-**Todo**
-
-- [ ] DEPRECATED
-
 <a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>
 
 ### htmlMultiWidget.setHiddenElements(elements)
@@ -2162,7 +2161,7 @@ Class MultiWidget include method for for creating iframe url
     * [.setFormLabels(fieldLabels)](#user-content-w_MultiWidget+setFormLabels)
     * [.setFormPlaceholders(fieldPlaceholders)](#user-content-w_MultiWidget+setFormPlaceholders)
     * [.setFormElements(elements)](#user-content-w_MultiWidget+setFormElements)
-    * [.setIcons()](#user-content-w_MultiWidget+setIcons)
+    * ~~[.setIcons()](#user-content-w_MultiWidget+setIcons)~~
     * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements)
     * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId)
     * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation)
@@ -2388,14 +2387,12 @@ widget.setFormElements([
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### multiWidget.setIcons()
+### ~~multiWidget.setIcons()~~
+***Deprecated***
+
 The method to change the widget icons
 
 **Kind**: instance method of [<code>MultiWidget</code>](#user-content-w_MultiWidget)  
-**Todo**
-
-- [ ] DEPRECATED
-
 <a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements">&nbsp;</a>
 
 ### multiWidget.setHiddenElements(elements)
@@ -2765,10 +2762,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();
@@ -3481,7 +3478,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
 
 
@@ -4624,11 +4621,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();
 ```
 
@@ -4641,11 +4638,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',
@@ -4655,7 +4652,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>
@@ -4702,10 +4699,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();
@@ -4926,7 +4923,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
@@ -4946,18 +4943,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>
@@ -4968,9 +4965,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');
@@ -5008,9 +5005,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>
@@ -5021,27 +5018,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',
@@ -5185,7 +5182,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -5200,7 +5197,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",
@@ -5210,7 +5207,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -5234,7 +5231,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript--es2015
+```javascript
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -5248,6 +5245,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.
@@ -5548,10 +5571,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'));
@@ -5894,6 +5918,8 @@ Interface of data from an unavailable event.
 | Param | Type | Description |
 | --- | --- | --- |
 | [wallet] | <code>string</code> | For gateways with more than one wallet button available (e.g: MPGS with ApplePay and GooglePay). Possible values for wallet are 'apple' or 'google'. |
+| [type] | <code>string</code> | Event Code. Value can be 'create_order_id_error' on FlypayV2 order creation failure. Optional for [Flypay V2]. N/A for other wallets. |
+| [error_code] | <code>string</code> | Event Error Code. Value can be any error code return from Paydock's API. Optional for [Flypay V2]. N/A for other wallets.  + |
 
 <a name="IWalletUpdateData" id="IWalletUpdateData" href="#IWalletUpdateData">&nbsp;</a>
 
@@ -5933,6 +5959,7 @@ Interface of data used by the wallet checkout and payment proccess.
 | [style.button_type] | <code>object</code> | Used to select ApplePay button type (e.g: 'buy','donate', etc), check possible values at https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css. Also select button type for GooglePay (check GooglePayStyles) and Afterpay (check AfterpayStyles). Optional for [ApplePay, GooglePay, Afterpay]. N/A for other wallets. |
 | [style.height] | <code>object</code> | Used to select Afterpay button height. Optional for [Afterpay]. N/A for other wallets. |
 | [wallets] | <code>array</code> | By default if this is not sent or empty, we will try to show either Apple Pay or Google Pay buttons. This can be limited sending the following array in this field: ['apple','google]. Optional for [Stripe, ApplePay, GooglePay]. N/A for other wallets. |
+| [client_id] | <code>string</code> | Client ID to be used in the provider system. Required for [Flypay V2]. N/A for [FlyPay, GooglePay, ApplePay, PayPal, Afterpay]. |
 
 <a name="IApplePayShippingOption" id="IApplePayShippingOption" href="#IApplePayShippingOption">&nbsp;</a>
 
@@ -6381,53 +6408,36 @@ List of available event's name in the wallet button lifecycle
 | ON_CLICK | <code>string</code> | <code>&quot;onClick&quot;</code> | 
 
 
-## Secure Remote Commerce
-You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#SRC).
-
-This widget provides you with the ability to easily integrate with SRC providers. Currently Visa SRC is supported.
+## Express Wallet Buttons
 
-## SRC simple example
-
-### Container
+Express Wallet Buttons allow to integrate with E-Wallets in an "express" operational mode, allowing to show the respective button in product or cart pages.
 
+The general flow to use the widgets is:
+1. Configure your gateway and connect it using Paydock API or Dashboard.
+2. Create a container in your site
 ```html
-<div id="checkoutButton"></div>
-<div id="checkoutIframe"></div>
+<div id="widget"></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.
-
-
-### Initialization
-```javascript
-var src = new paydock.SRC(
-    "#checkoutButton",
-    "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key_or_access_token",
-    {}, // meta
+3. Initialize the specific WalletButtonExpress, providing your Access Token (preferred) or Public Key, plus required and optional meta parameters for the wallet in use. The general format is:
+```js
+new paydock.{Provider}WalletButtonExpress(
+    "#widget",
+    accessTokenOrPublicKey,
+    gatewayId,
+    gatewaySpecificMeta,
 );
-src.load();
 ```
+4. (optional) If the screen where the button is rendered allows for cart/amount changes, call `setMeta` method to update the meta information.
+5. Handle the `onClick` callback, where you should call your server, initialize the wallet charge via `POST v1/charges/wallet` and return the wallet token.
+6. Handle the `onPaymentSuccessful`, `onPaymentError` and `onPaymentInReview` (if fraud is applicable) for payment results.
 
-```javascript--es2015
-// ES2015 | TypeScript
-
-import { SRC } from '@paydock/client-sdk';
-
-var src = new SRC(
-    "#checkoutButton",
-    "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key_or_access_token",
-    {}, // meta
-);
-src.load();
-```
+### Supported Providers
+1. [Apple Pay](#apple-pay-wallet-button-express)
+2. [Paypal](#paypal-wallet-button-express)
 
-*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.
+### Apple Pay Wallet Button Express
 
-### Full example
+A full description of the meta parameters for [ApplePayWalletButtonExpress](#ApplePayWalletButtonExpress) meta parameters can be found [here](#ApplePayWalletMeta). Below you will find a fully working html example.
 
 ```html
 <!DOCTYPE html>
@@ -6435,71 +6445,78 @@ src.load();
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
-    <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",
-            "#checkoutIframe",
-            "scheme_service_id",
-            "paydock_public_key_or_access_token",
-            {},
-        );
-        src.load();
-    </script>
+    <h2>Payment using PayDock ApplePayWalletButtonExpress!</h2>
+    <div id="widget"></div>
 </body>
-</html>
-```
-
-
-## SRC advanced example
-
-### Settings
-
-```javascript
-
-src.setEnv('sandbox'); // set enviroment
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    let button = new paydock.ApplePayWalletButtonExpress(
+        "#widget",
+        accessTokenOrPublicKey,
+        gatewayId,
+        {
+            amount_label: 'TOTAL',
+            country: 'AU',
+            currency: 'AUD',
+            amount: 15.5,
+            // merchant_capabilities: ['supports3DS', 'supportsEMV', 'supportsCredit', 'supportsDebit'],
+            // supported_networks: ['visa', 'masterCard', 'amex', 'chinaUnionPay', 'discover', 'interac', 'jcb', 'privateLabel'],
+            // required_billing_contact_fields: ['email', 'name', 'phone', 'postalAddress'], // phone and email do not work according to relevant testing
+            // required_shipping_contact_fields: ['email', 'phone'], // Workaround to pull phone and email from shipping contact instead - does not require additional shipping address information
+            // supported_countries: ["AU"],
+            // style: {
+            //     button_type: "buy",
+            //     button_style: "black",
+            // },
+        }
+    );
 
-src.hideButton(); // hide button
+    button.setEnv('sandbox');
 
-src.showButton(); // show button
+    button.onUnavailable(function() {
+        console.log("Button not available");
+    });
 
-src.hideCheckout(); // hide checkout iframe
+    button.onError(function(error) {
+        console.log("On Error Callback", error);
+    });
 
-src.showCheckout(); // show checkout iframe
+    button.onPaymentSuccessful(function(data) {
+        console.log("Payment successful");
+        console.log(data);
+    });
 
-src.on('checkoutButtonLoaded', () => {
-    console.log("Button loaded");
-});
+    button.onPaymentError(function(err) {
+        console.log("Payment error");
+        console.log(err);
+    });
 
-src.on('checkoutButtonClicked', () => {
-    console.log("Button clicked");
-});
+    button.onPaymentInReview(function(data) {
+        console.log("The payment is on fraud review");
+        console.log(data);
+    });
 
-src.on('iframeLoaded', () => {
-    console.log("Initial iframe loaded");
-});
+    button.onClick(async (data) => {
+        console.log("Button clicked", data);
 
-src.on('checkoutReady', () => {
-    console.log("Checkout ready to be used");
-});
+        const responseData = await fetch('https://your-server-url/initialize-wallet-charge');
+        const parsedData = await responseData.json();
+        return parsedData.resource.data.token;
+    });
 
-src.on('checkoutCompleted', (token) => {
-    console.log(token);
-});
+    button.onCheckoutClose(() => {
+        console.log("Checkout closed");
+    });
 
-src.on('checkoutError', (error) => {
-    console.log(error);
-});
+    button.load();
+</script>
+</html>
 ```
 
-Here you can see how you can use this methods to customize your checkout experience
-
-### Full example
+### Paypal Wallet Button Express
+A full description of the meta parameters for [PaypalWalletButtonExpress](#PaypalWalletButtonExpress) meta parameters can be found [here](#PaypalWalletMeta). Below you will find a fully working html example.
 
 ```html
 <!DOCTYPE html>
@@ -6507,276 +6524,394 @@ Here you can see how you can use this methods to customize your checkout experie
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
-    <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",
-            "#checkoutIframe",
-            "scheme_service_id",
-            "paydock_public_key_or_access_token",
-            {},
-        );
-
-        src.on('checkoutReady', () => {
-            console.log("Checkout ready to be used");
-        });
-
-        src.on('checkoutCompleted', (token) => {
-            console.log(token);
-        });
-        src.load();
-    </script>
+    <h2>Payment using PayDock PaypalWalletButtonExpress!</h2>
+    <div id="widget"></div>
 </body>
-</html>
-```
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    let button = new paydock.PaypalWalletButtonExpress(
+        "#widget",
+        accessTokenOrPublicKey,
+        gatewayId,
+        {
+            amount: 15.5,
+            currency: 'AUD',
+            pay_later: false,
+            standalone: false,
+            capture: true,
+            // style: {
+            //     layout: 'horizontal', // or 'vertical'
+            //     color: 'gold', // or 'blue', 'silver', 'black', 'white'
+            //     shape: 'rect', // or 'pill', 'sharp'
+            //     borderRadius: 5,
+            //     height: 40,
+            //     disableMaxWidth: false,
+            //     label: 'paypal', // or 'checkout', 'buynow', 'pay', 'installment'
+            //     tagline: true,
+            //     messages: {
+            //         layout: 'text', // or 'flex'
+            //         logo: {
+            //             type: 'primary', // or 'alternative', 'inline', 'none'
+            //             position: 'left', // or 'right', 'top'
+            //         },
+            //         text: {
+            //             color: 'black', // or 'white', 'monochrome', 'grayscale'
+            //             size: 10, // or 11, 12, 13, 14, 15, 16
+            //             align: 'left', // or 'center', 'right'
+            //         },
+            //         color: 'blue', // or 'black', 'white', 'white-no-border', 'gray', 'monochrome', 'grayscale'
+            //         ratio: '1x1', // or '1x4', '8x1', '20x1'
+            //     },
+            // }
+        }
+    );
 
-## Customization options for address fields
-### Shipping address:
+    button.setEnv('sandbox');
 
-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.
+    button.onUnavailable(function() {
+        console.log("Button not available");
+    });
 
-```
-var src = new paydock.SRC(
-    "#checkoutButton",
-    "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key_or_access_token",
-    {
-        "dpa_transaction_options": {
-            "dpa_shipping_preference": "ALL"
-        }
-    },
-);
-```
+    button.onError(function(error) {
+        console.log("On Error Callback", error);
+    });
 
-With this the Visa popup requires the shipping address from consumer, and these information will be stored in the Paydock charge.
+    button.onPaymentSuccessful(function(data) {
+        console.log("Payment successful");
+        console.log(data);
+    });
 
-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:
+    button.onPaymentError(function(err) {
+        console.log("Payment error");
+        console.log(err);
+    });
 
-```
-POST v1/charges
+    button.onPaymentInReview(function(data) {
+        console.log("The payment is on fraud review");
+        console.log(data);
+    });
 
-{
-    "amount": "10.00",
-    "currency": "AUD",
-    "token": "token",
-    "customer": {
-        "payment_source": {
-            "gateway_id": "gateway_id"
-        }
-    },
-    "shipping": {
-        "address_line1": "address_line1",
-        "address_line2": "address_line2",
-        "address_line3": "address_line3",
-        "address_city": "address_city",
-        "address_postcode": "address_postcode",
-        "address_state": "address_state",
-        "address_country": "address_country"
-    }
-}
-```
+    button.onClick(async (data) => {
+        console.log("Button clicked", data);
 
-- Billing address:
+        const responseData = await fetch('https://your-server-url/initialize-wallet-charge');
+        const parsedData = await responseData.json();
+        return parsedData.resource.data.token;
+    });
 
-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:
+    button.onCheckoutClose(() => {
+        console.log("Checkout closed");
+    });
 
+    button.load();
+</script>
+</html>
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
-    "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key_or_access_token",
-    {
-        "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"
-            }
-        }
-    },
-);
-```
-
-## Personalization Styling
 
-To improve the experience in the use of the widget, it is allowed to send props that customize the UI.
+## Classes
 
-### Example code
-
-```
-var src = new paydock.SRC(
-    "#checkoutButton",
-    "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key",
-);
-
-button.setStyles({"primary_color":"#a83232","button_text_color":"#171e9c","font_family":"sans-serif"})
+<dl>
+<dt><a href="#ApplePayWalletButtonExpress">ApplePayWalletButtonExpress</a> ⇐ <code>BaseWalletButton</code></dt>
+<dd><p>Class ApplePayWalletButtonExpress to work with Apple Pay Wallet.</p>
+</dd>
+<dt><a href="#PaypalWalletButtonExpress">PaypalWalletButtonExpress</a> ⇐ <code>BaseWalletButton</code></dt>
+<dd><p>Class PaypalWalletButtonExpress to work with Paypal Wallet.</p>
+</dd>
+</dl>
 
-```
-## Event and Values
+## Constants
 
-| 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
+<dl>
+<dt><a href="#EVENT">EVENT</a> : <code>object</code></dt>
+<dd><p>List of available event&#39;s name in the wallet button lifecycle</p>
+</dd>
+</dl>
 
-## Classes
+## Typedefs
 
 <dl>
-<dt><a href="#SRC">SRC</a></dt>
-<dd><p>Class SRC include methods for interacting with different secure remote commerce options such as Visa SRC</p>
+<dt><a href="#OnClickCallback">OnClickCallback</a> ⇒ <code>Promise.&lt;string&gt;</code></dt>
+<dd><p>Callback for onClick method.</p>
+</dd>
+<dt><a href="#OnPaymentSuccessfulCallback">OnPaymentSuccessfulCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onPaymentSuccessful method.</p>
+</dd>
+<dt><a href="#OnPaymentInReviewCallback">OnPaymentInReviewCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onPaymentInReview method.</p>
+</dd>
+<dt><a href="#OnPaymentErrorCallback">OnPaymentErrorCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onPaymentError method.</p>
+</dd>
+<dt><a href="#OnCheckoutCloseCallback">OnCheckoutCloseCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onCheckoutClose method.</p>
+</dd>
+<dt><a href="#OnUnavailableCallback">OnUnavailableCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onUnavailable method.</p>
+</dd>
+<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onError method.</p>
 </dd>
 </dl>
 
 ## Interfaces
 
 <dl>
-<dt><a href="#IVisaSRCMeta">IVisaSRCMeta</a> : <code>object</code></dt>
-<dd><p>Interface of data used for the Visa Checkout.</p>
+<dt><a href="#ApplePayWalletMeta">ApplePayWalletMeta</a> : <code>object</code></dt>
+<dd><p>Interface for configuration metadata specific to ApplePay integration in the wallet checkout and payment process.</p>
+</dd>
+<dt><a href="#PaypalWalletMeta">PaypalWalletMeta</a> : <code>object</code></dt>
+<dd><p>Interface for configuration metadata specific to PayPal integration in the wallet checkout and payment process.
+For in-depth information, please refer to the <a href="https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/">Paypal documentation</a>.</p>
+</dd>
+<dt><a href="#OnClickEventData">OnClickEventData</a> : <code>object</code></dt>
+<dd><p>Interface for OnClickEventData</p>
+</dd>
+<dt><a href="#OnCloseEventData">OnCloseEventData</a> : <code>object</code></dt>
+<dd><p>Interface for OnCloseEventData</p>
+</dd>
+<dt><a href="#OnPaymentSuccessfulEventData">OnPaymentSuccessfulEventData</a> : <code>object</code></dt>
+<dd><p>Interface for OnPaymentSuccessfulEventData. For final secure results, fetch backend to backend data.</p>
+</dd>
+<dt><a href="#OnPaymentInReviewEventData">OnPaymentInReviewEventData</a> : <code>object</code></dt>
+<dd><p>Interface for OnPaymentInReviewEventData. For final secure results, fetch backend to backend data.</p>
+</dd>
+<dt><a href="#OnPaymentErrorEventData">OnPaymentErrorEventData</a> : <code>object</code></dt>
+<dd><p>Interface for OnPaymentErrorEventData. For final secure results, fetch backend to backend data.</p>
+</dd>
+<dt><a href="#OnUnavailableEventData">OnUnavailableEventData</a> : <code>object</code></dt>
+<dd><p>Interface for OnUnavailableEventData</p>
+</dd>
+<dt><a href="#OnErrorEventData">OnErrorEventData</a> : <code>object</code></dt>
+<dd><p>Interface for OnErrorEventData</p>
 </dd>
 </dl>
 
-<a name="IVisaSRCMeta" id="IVisaSRCMeta" href="#IVisaSRCMeta">&nbsp;</a>
+<a name="ApplePayWalletMeta" id="ApplePayWalletMeta" href="#ApplePayWalletMeta">&nbsp;</a>
 
-## IVisaSRCMeta : <code>object</code>
-Interface of data used for the Visa Checkout.
+## ApplePayWalletMeta : <code>object</code>
+Interface for configuration metadata specific to ApplePay integration in the wallet checkout and payment process.
 
 **Kind**: global interface  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| [srci_transaction_id] | <code>string</code> | Used to identify the SRC Id. |
-| [dpa_data] | <code>object</code> | Object where the DPA creation data is stored. |
-| [dpa_data.dpa_presentation_name] | <code>string</code> | Name in which the DPA is presented in. |
-| [dpa_data.dpa_uri] | <code>string</code> | Used for indicating the DPA URI. |
-| [dpa_transaction_options] | <code>object</code> | Object that stores options for creating a trasaction with DPA. |
-| [dpa_transaction_options.dpa_locale] | <code>string</code> | DPA’s preferred locale, example en_US. |
-| [dpa_transaction_options.dpa_accepted_billing_countries] | <code>Array</code> | Used to indicate list of accepted billing countries for DPA. |
-| [dpa_transaction_options.dpa_accepted_shipping_countries] | <code>Array</code> | Used to indicate list of accepted shipping countries for DPA. |
-| [dpa_transaction_options.dpa_billing_preference] | <code>string</code> | Used for listing the enumeration for billing preferences for DPA. Options are 'ALL', 'POSTAL_COUNTRY' and 'NONE'. |
-| [dpa_transaction_options.dpa_shipping_preference] | <code>string</code> | Used for listing the enumeration for shipping preferences for DPA. Options are 'ALL', 'POSTAL_COUNTRY' and 'NONE'. |
-| [dpa_transaction_options.consumer_name_requested] | <code>boolean</code> | Used to check if the name of the consumer is needed. |
-| [dpa_transaction_options.consumer_email_address_requested] | <code>boolean</code> | Used to check if the email of the consumer is needed. |
-| [dpa_transaction_options.consumer_phone_number_requested] | <code>boolean</code> | Used to check if the phone number of the consumer is needed. |
-| [dpa_transaction_options.payment_options] | <code>object</code> | Object used to check the payment options that are included. |
-| [dpa_transaction_options.payment_options.dpa_dynamic_data_ttl_minutes] | <code>number</code> | The minimum requested validity period for the transaction credentials. |
-| [dpa_transaction_options.payment_options.dynamic_data_type] | <code>string</code> | Used for listing the enumeration for dynamic data types. Options are 'TAVV' and 'DTVV'. |
-| [dpa_transaction_options.payment_options.dpa_pan_requested] | <code>boolean</code> | Used to check if PAN number was requested. |
-| [dpa_transaction_options.review_action] | <code>string</code> | Used for listing the enumeration of review actions. Options are 'pay' and 'continue'. |
-| [dpa_transaction_options.checkout_description] | <code>string</code> | Used for indicating the description of the checkout. |
-| [dpa_transaction_options.transaction_type] | <code>string</code> | Used for listing the enumeration of the type of the transaction. 'PURCHASE', 'BILL_PAYMENT' and 'MONEY_TRANSFER' |
-| [dpa_transaction_options.order_type] | <code>string</code> | Used for listing the enumeration of the type of the order. Options are 'REAUTHORIZATION', 'RECURRING' and 'INSTALLMENT'. |
-| [dpa_transaction_options.transaction_amount] | <code>object</code> | Object used to describe the details of the transaction. |
-| [dpa_transaction_options.transaction_amount.transaction_amount] | <code>number</code> | Used to indicate the amount of the transaction. |
-| [dpa_transaction_options.transaction_amount.transaction_currency_code] | <code>string</code> | Used to indicate the currency code of the transaction. 3 letter ISO code format. |
-| [dpa_transaction_options.merchant_order_id] | <code>string</code> | Used to indicate the merchants order Id. |
-| [dpa_transaction_options.merchant_category_code] | <code>string</code> | Used to indicate the merchants category code. |
-| [dpa_transaction_options.merchant_country_code] | <code>string</code> | Used to indicate the merchants country code. 2 letter ISO code format. |
-| [customer] | <code>object</code> | Object where the customer data is stored to prefill in the checkout. |
-| [customer.email] | <code>string</code> | Customer email. |
-| [customer.first_name] | <code>string</code> | Customer first name. |
-| [customer.last_name] | <code>string</code> | Customer last name. |
-| [customer.phone] | <code>object</code> | Object where the customer phone is stored. |
-| [customer.phone.country_code] | <code>string</code> | Customer phone country code (example "1" for US). |
-| [customer.phone.phone] | <code>string</code> | Customer phone number. |
-| [customer.payment_source] | <code>object</code> | Object where the customer billing address data is stored. |
-| [customer.payment_source.address_line1] | <code>string</code> | Customer billing address line 1. |
-| [customer.payment_source.address_line2] | <code>string</code> | Customer billing address line 2. |
-| [customer.payment_source.address_city] | <code>string</code> | Customer billing address city. |
-| [customer.payment_source.address_postcode] | <code>string</code> | Customer billing address postcode. |
-| [customer.payment_source.address_state] | <code>string</code> | Customer billing address state code (if applicable for the country, example "FL" for Florida). |
-| [customer.payment_source.address_country] | <code>string</code> | Customer billing address country code (example "US"). |
+| amount_label | <code>string</code> | Label shown next to the total amount to be paid, used in ApplePay popups. |
+| country | <code>string</code> | Country of the user in 2 letter ISO code format, required for ApplePay. |
+| currency | <code>string</code> | Currency of the transaction. ISO 4217 currency code format. |
+| amount | <code>number</code> | Total transaction amount number. **Note:** this amount will be presented in the payment sheet regardless of amount sent in the Wallet Initialization Backend to Backend call. Use `setMeta` method to keep it up to date. |
+| [merchant_capabilities] | <code>Array.&lt;(&#x27;supports3DS&#x27;\|&#x27;supportsEMV&#x27;\|&#x27;supportsCredit&#x27;\|&#x27;supportsDebit&#x27;)&gt;</code> | Array of capabilities that the merchant supports, influencing the transaction processing features available. |
+| [supported_networks] | <code>Array.&lt;(&#x27;visa&#x27;\|&#x27;masterCard&#x27;\|&#x27;amex&#x27;\|&#x27;chinaUnionPay&#x27;\|&#x27;discover&#x27;\|&#x27;interac&#x27;\|&#x27;jcb&#x27;\|&#x27;privateLabel&#x27;)&gt;</code> | List of payment networks supported by the merchant for ApplePay transactions. |
+| [required_billing_contact_fields] | <code>Array.&lt;(&#x27;email&#x27;\|&#x27;name&#x27;\|&#x27;phone&#x27;\|&#x27;postalAddress&#x27;)&gt;</code> | Contact fields required from the user for billing purposes, improving transaction verification and fraud prevention. Phone and email are currently not returned by Apple. |
+| [required_shipping_contact_fields] | <code>Array.&lt;(&#x27;email&#x27;\|&#x27;phone&#x27;)&gt;</code> | Shipping contact fields that are mandatory to complete the transaction. Use email and phone to collect from customer wallet in the abscense of billing one. |
+| [supported_countries] | <code>Array.&lt;string&gt;</code> | List of countries where ApplePay is supported by the merchant, restricting usage to specified regions. |
+| [style] | <code>object</code> | Styling configuration for ApplePay buttons displayed during checkout. |
+| [style.button_type] | <code>ApplePayButtonType</code> | Enum type to select the type of ApplePay button (e.g., 'buy', 'donate', etc.), providing user interface customization. |
+| [style.button_style] | <code>ApplePayButtonStyle</code> | Style applied to the ApplePay button, which can include color and form factor adjustments according to the brand's visual guidelines. |
+
+<a name="PaypalWalletMeta" id="PaypalWalletMeta" href="#PaypalWalletMeta">&nbsp;</a>
+
+## PaypalWalletMeta : <code>object</code>
+Interface for configuration metadata specific to PayPal integration in the wallet checkout and payment process.
+For in-depth information, please refer to the [Paypal documentation](https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/).
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| amount | <code>number</code> | Total amount of the transaction. Represents the money to be charged. |
+| currency | <code>string</code> | Currency of the transaction in ISO 4217 currency code format. |
+| [pay_later] | <code>boolean</code> | Flag to enable Pay Later feature of PayPal, allowing Pay in 4. Default false. |
+| [standalone] | <code>boolean</code> | Flag to specify if the PayPal standalone button should be used. Default false. |
+| [capture] | <code>boolean</code> | Flag to specify if the transaction amount should be captured immediately or authorized for later capture. Default false. |
+| [style] | <code>object</code> | Styling configurations for the PayPal widget. |
+| [style.layout] | <code>&#x27;vertical&#x27;</code> \| <code>&#x27;horizontal&#x27;</code> | Layout orientation of the PayPal button. |
+| [style.color] | <code>&#x27;gold&#x27;</code> \| <code>&#x27;blue&#x27;</code> \| <code>&#x27;silver&#x27;</code> \| <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Color theme of the PayPal button. |
+| [style.shape] | <code>&#x27;rect&#x27;</code> \| <code>&#x27;pill&#x27;</code> \| <code>&#x27;sharp&#x27;</code> | Shape of the PayPal button. |
+| [style.borderRadius] | <code>number</code> | Border radius for the button, allowing customization of corner roundness. |
+| [style.height] | <code>number</code> | Height of the PayPal button, allowing for size customization. |
+| [style.disableMaxWidth] | <code>boolean</code> | Flag to disable the maximum width constraint of the button. |
+| [style.label] | <code>&#x27;paypal&#x27;</code> \| <code>&#x27;checkout&#x27;</code> \| <code>&#x27;buynow&#x27;</code> \| <code>&#x27;pay&#x27;</code> \| <code>&#x27;installment&#x27;</code> | Label text displayed on the PayPal button. |
+| [style.tagline] | <code>boolean</code> | Flag to include or exclude a tagline beneath the button text. |
+| [style.messages] | <code>object</code> | Messaging options related to the PayPal button to enhance user interaction. |
+| [style.messages.layout] | <code>&#x27;text&#x27;</code> \| <code>&#x27;flex&#x27;</code> | Layout type for the messages displayed near the PayPal button. |
+| [style.messages.logo] | <code>object</code> | Configuration for the logo to be displayed with the PayPal button. |
+| [style.messages.logo.type] | <code>&#x27;primary&#x27;</code> \| <code>&#x27;alternative&#x27;</code> \| <code>&#x27;inline&#x27;</code> \| <code>&#x27;none&#x27;</code> | Type of logo to display. |
+| [style.messages.logo.position] | <code>&#x27;left&#x27;</code> \| <code>&#x27;right&#x27;</code> \| <code>&#x27;top&#x27;</code> | Position of the logo relative to the button or message. |
+| [style.messages.text] | <code>object</code> | Text styling within the message component. |
+| [style.messages.text.color] | <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> \| <code>&#x27;monochrome&#x27;</code> \| <code>&#x27;grayscale&#x27;</code> | Color of the message text. |
+| [style.messages.text.size] | <code>10</code> \| <code>11</code> \| <code>12</code> \| <code>13</code> \| <code>14</code> \| <code>15</code> \| <code>16</code> | Font size of the message text. |
+| [style.messages.text.align] | <code>&#x27;left&#x27;</code> \| <code>&#x27;center&#x27;</code> \| <code>&#x27;right&#x27;</code> | Text alignment within the message area. |
+| [style.messages.color] | <code>&#x27;blue&#x27;</code> \| <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> \| <code>&#x27;white-no-border&#x27;</code> \| <code>&#x27;gray&#x27;</code> \| <code>&#x27;monochrome&#x27;</code> \| <code>&#x27;grayscale&#x27;</code> | Background color of the message area. |
+| [style.messages.ratio] | <code>&#x27;1x1&#x27;</code> \| <code>&#x27;1x4&#x27;</code> \| <code>&#x27;8x1&#x27;</code> \| <code>&#x27;20x1&#x27;</code> | Aspect ratio of the message area, affecting its layout and display. |
+
+<a name="OnClickEventData" id="OnClickEventData" href="#OnClickEventData">&nbsp;</a>
+
+## OnClickEventData : <code>object</code>
+Interface for OnClickEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>string</code> | Event Name is 'onClick' |
+
+<a name="OnCloseEventData" id="OnCloseEventData" href="#OnCloseEventData">&nbsp;</a>
+
+## OnCloseEventData : <code>object</code>
+Interface for OnCloseEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>string</code> | Event Name is 'onCheckoutClose' |
+| [chargeId] | <code>string</code> | chargeId in case it's already set after onClick event |
 
-<a name="SRC" id="SRC" href="#SRC">&nbsp;</a>
+<a name="OnPaymentSuccessfulEventData" id="OnPaymentSuccessfulEventData" href="#OnPaymentSuccessfulEventData">&nbsp;</a>
 
-## SRC
-Class SRC include methods for interacting with different secure remote commerce options such as Visa SRC
+## OnPaymentSuccessfulEventData : <code>object</code>
+Interface for OnPaymentSuccessfulEventData. For final secure results, fetch backend to backend data.
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>string</code> | Event Name is 'paymentSuccessful' |
+| chargeId | <code>string</code> | chargeId set after onClick event |
+| data.id | <code>string</code> | Charge ID returned by server |
+| data.amount | <code>string</code> | Charge amount returned by server |
+| data.currency | <code>string</code> | Charge currency returned by server |
+| data.status | <code>string</code> | Charge status returned by server |
+
+<a name="OnPaymentInReviewEventData" id="OnPaymentInReviewEventData" href="#OnPaymentInReviewEventData">&nbsp;</a>
+
+## OnPaymentInReviewEventData : <code>object</code>
+Interface for OnPaymentInReviewEventData. For final secure results, fetch backend to backend data.
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>string</code> | Event Name is 'paymentInReview' |
+| chargeId | <code>string</code> | chargeId set after onClick event |
+| data.id | <code>string</code> | Charge ID returned by server |
+| data.amount | <code>string</code> | Charge amount returned by server |
+| data.currency | <code>string</code> | Charge currency returned by server |
+| data.status | <code>string</code> | Charge status returned by server |
+
+<a name="OnPaymentErrorEventData" id="OnPaymentErrorEventData" href="#OnPaymentErrorEventData">&nbsp;</a>
+
+## OnPaymentErrorEventData : <code>object</code>
+Interface for OnPaymentErrorEventData. For final secure results, fetch backend to backend data.
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>string</code> | Event Name is 'paymentError' |
+| chargeId | <code>string</code> | chargeId set after onClick event |
+| [data.message] | <code>string</code> | Error message |
+| [data.code] | <code>string</code> | Error code |
+
+<a name="OnUnavailableEventData" id="OnUnavailableEventData" href="#OnUnavailableEventData">&nbsp;</a>
+
+## OnUnavailableEventData : <code>object</code>
+Interface for OnUnavailableEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>string</code> | Event Name is 'unavailable' |
+
+<a name="OnErrorEventData" id="OnErrorEventData" href="#OnErrorEventData">&nbsp;</a>
+
+## OnErrorEventData : <code>object</code>
+Interface for OnErrorEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>string</code> | Event Name is 'error' |
+| [chargeId] | <code>string</code> | chargeId in case it's already set after onClick event |
+| [data] | <code>Error</code> | Error object if present |
+
+<a name="ApplePayWalletButtonExpress" id="ApplePayWalletButtonExpress" href="#ApplePayWalletButtonExpress">&nbsp;</a>
+
+## ApplePayWalletButtonExpress ⇐ <code>BaseWalletButton</code>
+Class ApplePayWalletButtonExpress to work with Apple Pay Wallet.
 
 **Kind**: global class  
+**Extends**: <code>BaseWalletButton</code>  
 
-* [SRC](#SRC)
-    * [new SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, meta)](#new_SRC_new)
-    * [.setStyles(fields)](#SRC+setStyles)
-    * [.load()](#SRC+load)
-    * [.setEnv(env, [alias])](#SRC+setEnv)
-    * [.getEnv()](#SRC+getEnv)
-    * [.on(eventName, [cb])](#SRC+on) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
-    * [.hideButton([saveSize])](#SRC+hideButton)
-    * [.showButton()](#SRC+showButton)
-    * [.hideCheckout([saveSize])](#SRC+hideCheckout)
-    * [.showCheckout()](#SRC+showCheckout)
-    * [.reload()](#SRC+reload)
-    * [.useAutoResize()](#SRC+useAutoResize)
+* [ApplePayWalletButtonExpress](#ApplePayWalletButtonExpress) ⇐ <code>BaseWalletButton</code>
+    * [new ApplePayWalletButtonExpress(selector, publicKeyOrAccessToken, gatewayId, meta)](#new_ApplePayWalletButtonExpress_new)
+    * [.load()](#ApplePayWalletButtonExpress+load)
+    * [.setMeta(meta)](#ApplePayWalletButtonExpress+setMeta)
+    * [.setEnv(env, [alias])](#BaseWalletButton+setEnv)
+    * [.onClick(handler)](#BaseWalletButton+onClick)
+    * [.onPaymentSuccessful([handler])](#BaseWalletButton+onPaymentSuccessful)
+    * [.onPaymentInReview([handler])](#BaseWalletButton+onPaymentInReview)
+    * [.onPaymentError([handler])](#BaseWalletButton+onPaymentError)
+    * [.onCheckoutClose(handler)](#BaseWalletButton+onCheckoutClose)
+    * [.onUnavailable(handler)](#BaseWalletButton+onUnavailable)
+    * [.onError(handler)](#BaseWalletButton+onError)
 
-<a name="new_SRC_new" id="new_SRC_new" href="#new_SRC_new">&nbsp;</a>
+<a name="new_ApplePayWalletButtonExpress_new" id="new_ApplePayWalletButtonExpress_new" href="#new_ApplePayWalletButtonExpress_new">&nbsp;</a>
 
-### new SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, meta)
+### new ApplePayWalletButtonExpress(selector, publicKeyOrAccessToken, gatewayId, meta)
 
 | Param | Type | Description |
 | --- | --- | --- |
-| button_selector | <code>string</code> | Selector of html element. Container for SRC checkout button. |
-| iframe_selector | <code>string</code> | Selector of html element. Container for SRC checkout iFrame. |
-| service_id | <code>string</code> | Card Scheme Service ID |
-| public_key_or_access_token | <code>string</code> | Paydock public key or Access Token |
-| meta | [<code>IVisaSRCMeta</code>](#IVisaSRCMeta) | Data that configures the SRC checkout |
+| selector | <code>string</code> | Selector of html element. Container for the ApplePayWalletButtonExpress. |
+| publicKeyOrAccessToken | <code>string</code> | Public key or Access token for the ApplePayWalletButtonExpress. |
+| gatewayId | <code>string</code> | Gateway ID for the ApplePayWalletButtonExpress. |
+| meta | [<code>ApplePayWalletMeta</code>](#ApplePayWalletMeta) | data that configures the Apple Pay Wallet. |
 
 **Example**  
 ```js
-var SRC = new SRC('#checkoutButton', '#checkoutIframe', 'service_id', 'public_key', {});
+var button = new ApplePayWalletButtonExpress('#wallet-buttons', 'publicKeyOrAccessToken', 'gatewayId', meta);
 ```
-<a name="SRC+setStyles" id="SRC+setStyles" href="#SRC+setStyles">&nbsp;</a>
+<a name="ApplePayWalletButtonExpress+load" id="ApplePayWalletButtonExpress+load" href="#ApplePayWalletButtonExpress+load">&nbsp;</a>
 
-### srC.setStyles(fields)
-Object contain styles for widget - call before `.load()`.
+### applePayWalletButtonExpress.load()
+Initializes the availability checks and inserts the button if possible.
+Otherwise function onUnavailable(handler: VoidFunction) will be called.
+**Important**: Is required to invoke this method to render the wallet button.
+
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Example**  
+```js
+button.load();
+```
+<a name="ApplePayWalletButtonExpress+setMeta" id="ApplePayWalletButtonExpress+setMeta" href="#ApplePayWalletButtonExpress+setMeta">&nbsp;</a>
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+### applePayWalletButtonExpress.setMeta(meta)
+Call this method if updating the originally-provided meta object after order information changed.
+For example, if the order amount has changed from the time where the button was originally rendered.
+
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| fields | <code>IStyles</code> | name of styles which can be shown in widget [STYLE](STYLE) |
+| meta | [<code>ApplePayWalletMeta</code>](#ApplePayWalletMeta) | // data that configures the Apple Pay Wallet. |
 
 **Example**  
 ```js
-widget.setStyles({
-      button_text_color: '#32a852',
-      primary_color: '#32a852',
-      font_family: 'sans-serif',
-      card_schemes: ['visa']
-  });
+button.setMeta(meta);
 ```
-<a name="SRC+load" id="SRC+load" href="#SRC+load">&nbsp;</a>
-
-### srC.load()
-The final method after configuring the SRC to start the load process of SRC checkout
-
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
-<a name="SRC+setEnv" id="SRC+setEnv" href="#SRC+setEnv">&nbsp;</a>
+<a name="BaseWalletButton+setEnv" id="BaseWalletButton+setEnv" href="#BaseWalletButton+setEnv">&nbsp;</a>
 
-### srC.setEnv(env, [alias])
+### applePayWalletButtonExpress.setEnv(env, [alias])
 Current method can change environment. By default environment = sandbox.
 Also we can change domain alias for this environment. By default domain_alias = paydock.com
+Bear in mind that you must set an environment before calling `button.load()`.
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Overrides**: [<code>setEnv</code>](#BaseWalletButton+setEnv)  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -6785,126 +6920,1620 @@ Also we can change domain alias for this environment. By default domain_alias =
 
 **Example**  
 ```js
-SRC.setEnv('production');
+button.setEnv('production', 'paydock.com');
 ```
-<a name="SRC+getEnv" id="SRC+getEnv" href="#SRC+getEnv">&nbsp;</a>
+<a name="BaseWalletButton+onClick" id="BaseWalletButton+onClick" href="#BaseWalletButton+onClick">&nbsp;</a>
 
-### srC.getEnv()
-Method to read the current environment
+### applePayWalletButtonExpress.onClick(handler)
+Registers a callback function to be invoked when the wallet button gets clicked.
+**Note:** is mandatory to handle this event to perform the wallet initialization (and optionally any validation logic).
+The event handler needs to return the wallet token string in order for the Wallet charge processing to proceed, or throw an error in case of failure or validation errors.
+**Note:** this callback may be called multiple times as the customer closes the payment checkout and re-clicks the button.
+It's the merchant's responsibility to handle this situation and evaluate in each case if generating a new WalletCharge Token is required or the previous one can be used in each case, depending on order data and updates.
+In case a new one needs to be generated, remember it will need to be preceded by a `setMeta` call.
+
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Overrides**: [<code>onClick</code>](#BaseWalletButton+onClick)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | [<code>OnClickCallback</code>](#OnClickCallback) | Function to be called when the wallet button is clicked. |
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
 **Example**  
 ```js
-SRC.getEnv();
+button.onClick(async (data) => {
+     const responseData = await fetch('https://your-server.com/init-wallet-charge');
+     return responseData.walletToken;
+});
 ```
-<a name="SRC+on" id="SRC+on" href="#SRC+on">&nbsp;</a>
+<a name="BaseWalletButton+onPaymentSuccessful" id="BaseWalletButton+onPaymentSuccessful" href="#BaseWalletButton+onPaymentSuccessful">&nbsp;</a>
 
-### srC.on(eventName, [cb]) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
-Listen to events of SRC
+### applePayWalletButtonExpress.onPaymentSuccessful([handler])
+If the payment was successful, 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>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Overrides**: [<code>onPaymentSuccessful</code>](#BaseWalletButton+onPaymentSuccessful)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| eventName | <code>string</code> | Available event names [EVENT](#EVENT) |
-| [cb] | <code>listener</code> |  |
+| [handler] | [<code>OnPaymentSuccessfulCallback</code>](#OnPaymentSuccessfulCallback) | Function to be called when the payment was successful. |
 
 **Example**  
 ```js
-SRC.on('checkoutCompleted', function (token) {
-     console.log(token);
+button.onPaymentSuccessful((data) => {
+     console.log('Payment successful!');
 });
-// or
-SRC.on('checkoutCompleted').then(function (token) {
-     console.log(token);
+```
+**Example**  
+```js
+button.onPaymentSuccessful().then((data) => console.log('Payment successful!'));
+```
+<a name="BaseWalletButton+onPaymentInReview" id="BaseWalletButton+onPaymentInReview" href="#BaseWalletButton+onPaymentInReview">&nbsp;</a>
+
+### applePayWalletButtonExpress.onPaymentInReview([handler])
+If the payment was left in fraud review, 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>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Overrides**: [<code>onPaymentInReview</code>](#BaseWalletButton+onPaymentInReview)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [handler] | [<code>OnPaymentInReviewCallback</code>](#OnPaymentInReviewCallback) | Function to be called when the payment was left in fraud review status. |
+
+**Example**  
+```js
+button.onPaymentInReview((data) => {
+     console.log('Payment in fraud review');
 });
 ```
-<a name="SRC+hideButton" id="SRC+hideButton" href="#SRC+hideButton">&nbsp;</a>
+**Example**  
+```js
+button.onPaymentInReview().then((data) => console.log('Payment in fraud review'));
+```
+<a name="BaseWalletButton+onPaymentError" id="BaseWalletButton+onPaymentError" href="#BaseWalletButton+onPaymentError">&nbsp;</a>
 
-### srC.hideButton([saveSize])
-Using this method you can hide button
+### applePayWalletButtonExpress.onPaymentError([handler])
+If the payment was not successful, 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>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Overrides**: [<code>onPaymentError</code>](#BaseWalletButton+onPaymentError)  
 
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| [saveSize] | <code>boolean</code> | <code>false</code> | using this param you can save iframe's size (if applicable) |
+| Param | Type | Description |
+| --- | --- | --- |
+| [handler] | [<code>OnPaymentErrorCallback</code>](#OnPaymentErrorCallback) | Function to be called when the payment was not successful. |
+
+**Example**  
+```js
+button.onPaymentError((err) => {
+     console.log('Payment not successful');
+});
+```
+**Example**  
+```js
+button.onPaymentError().then((err) => console.log('Payment not successful'));
+```
+<a name="BaseWalletButton+onCheckoutClose" id="BaseWalletButton+onCheckoutClose" href="#BaseWalletButton+onCheckoutClose">&nbsp;</a>
+
+### applePayWalletButtonExpress.onCheckoutClose(handler)
+Registers a callback function to be invoked when the wallet checkout closes.
+
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Overrides**: [<code>onCheckoutClose</code>](#BaseWalletButton+onCheckoutClose)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | [<code>OnCheckoutCloseCallback</code>](#OnCheckoutCloseCallback) | Function to be called when the wallet checkout closes. |
 
 **Example**  
 ```js
-SRC.hideButton();
+button.onCheckoutClose(() => {
+     console.log('Wallet checkout closes');
+});
 ```
-<a name="SRC+showButton" id="SRC+showButton" href="#SRC+showButton">&nbsp;</a>
+<a name="BaseWalletButton+onUnavailable" id="BaseWalletButton+onUnavailable" href="#BaseWalletButton+onUnavailable">&nbsp;</a>
+
+### applePayWalletButtonExpress.onUnavailable(handler)
+Registers a callback function to be invoked when the wallet is not available in the current context.
 
-### srC.showButton()
-Using this method you can show the SRC button after using hideButton method
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Overrides**: [<code>onUnavailable</code>](#BaseWalletButton+onUnavailable)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | [<code>OnUnavailableCallback</code>](#OnUnavailableCallback) | Function to be called when the wallet is not available in the current context. |
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
 **Example**  
 ```js
-SRC.showButton();
+button.onUnavailable(() => {
+     console.log('Wallet not available');
+});
 ```
-<a name="SRC+hideCheckout" id="SRC+hideCheckout" href="#SRC+hideCheckout">&nbsp;</a>
+<a name="BaseWalletButton+onError" id="BaseWalletButton+onError" href="#BaseWalletButton+onError">&nbsp;</a>
 
-### srC.hideCheckout([saveSize])
-Using this method you can hide checkout after load and button click
+### applePayWalletButtonExpress.onError(handler)
+Registers a callback function to be invoked when an error that is not related to payment execution occurs.
+For example, if the amount of the wallet token injected via the `onClick` event handler does not match the amount provided via the initial `meta` or `setMeta` method.
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>ApplePayWalletButtonExpress</code>](#ApplePayWalletButtonExpress)  
+**Overrides**: [<code>onError</code>](#BaseWalletButton+onError)  
 
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| [saveSize] | <code>boolean</code> | <code>false</code> | using this param you can save iframe's size (if applicable) |
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when the WalletButton has an error. |
 
 **Example**  
 ```js
-SRC.hideCheckout();
+button.onError((error) => {
+     console.log('WalletButtonExpress error', error);
+});
 ```
-<a name="SRC+showCheckout" id="SRC+showCheckout" href="#SRC+showCheckout">&nbsp;</a>
+<a name="PaypalWalletButtonExpress" id="PaypalWalletButtonExpress" href="#PaypalWalletButtonExpress">&nbsp;</a>
 
-### srC.showCheckout()
-Using this method you can show checkout after using hideCheckout method
+## PaypalWalletButtonExpress ⇐ <code>BaseWalletButton</code>
+Class PaypalWalletButtonExpress to work with Paypal Wallet.
+
+**Kind**: global class  
+**Extends**: <code>BaseWalletButton</code>  
+
+* [PaypalWalletButtonExpress](#PaypalWalletButtonExpress) ⇐ <code>BaseWalletButton</code>
+    * [new PaypalWalletButtonExpress(selector, publicKeyOrAccessToken, gatewayId, meta)](#new_PaypalWalletButtonExpress_new)
+    * [.load()](#PaypalWalletButtonExpress+load)
+    * [.setMeta(meta)](#PaypalWalletButtonExpress+setMeta)
+    * [.setEnv(env, [alias])](#BaseWalletButton+setEnv)
+    * [.onClick(handler)](#BaseWalletButton+onClick)
+    * [.onPaymentSuccessful([handler])](#BaseWalletButton+onPaymentSuccessful)
+    * [.onPaymentInReview([handler])](#BaseWalletButton+onPaymentInReview)
+    * [.onPaymentError([handler])](#BaseWalletButton+onPaymentError)
+    * [.onCheckoutClose(handler)](#BaseWalletButton+onCheckoutClose)
+    * [.onUnavailable(handler)](#BaseWalletButton+onUnavailable)
+    * [.onError(handler)](#BaseWalletButton+onError)
+
+<a name="new_PaypalWalletButtonExpress_new" id="new_PaypalWalletButtonExpress_new" href="#new_PaypalWalletButtonExpress_new">&nbsp;</a>
+
+### new PaypalWalletButtonExpress(selector, publicKeyOrAccessToken, gatewayId, meta)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| selector | <code>string</code> | Selector of html element. Container for the PaypalWalletButtonExpress. |
+| publicKeyOrAccessToken | <code>string</code> | Public key or Access token for the PaypalWalletButtonExpress. |
+| gatewayId | <code>string</code> | Gateway ID for the PaypalWalletButtonExpress. |
+| meta | [<code>PaypalWalletMeta</code>](#PaypalWalletMeta) | data that configures the Paypal Wallet. |
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
 **Example**  
 ```js
-SRC.showCheckout()
+var button = new PaypalWalletButtonExpress('#wallet-buttons', 'publicKeyOrAccessToken', 'gatewayId', meta);
 ```
-<a name="SRC+reload" id="SRC+reload" href="#SRC+reload">&nbsp;</a>
+<a name="PaypalWalletButtonExpress+load" id="PaypalWalletButtonExpress+load" href="#PaypalWalletButtonExpress+load">&nbsp;</a>
 
-### srC.reload()
-Using this method you can reload the whole checkout
+### paypalWalletButtonExpress.load()
+Initializes the availability checks and inserts the button if possible.
+Otherwise function onUnavailable(handler: VoidFunction) will be called.
+**Important**: Is required to invoke this method to render the wallet button.
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
 **Example**  
 ```js
-SRC.reload()
+button.load();
 ```
-<a name="SRC+useAutoResize" id="SRC+useAutoResize" href="#SRC+useAutoResize">&nbsp;</a>
+<a name="PaypalWalletButtonExpress+setMeta" id="PaypalWalletButtonExpress+setMeta" href="#PaypalWalletButtonExpress+setMeta">&nbsp;</a>
 
-### srC.useAutoResize()
-Use this method for resize checkout iFrame according to content height, if applicable
+### paypalWalletButtonExpress.setMeta(meta)
+Call this method if updating the originally-provided meta object after order information changed.
+For example, if the order amount has changed from the time where the button was originally rendered.
+
+**Kind**: instance method of [<code>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| meta | [<code>PaypalWalletMeta</code>](#PaypalWalletMeta) | // data that configures the Paypal Wallet. |
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
 **Example**  
 ```js
-SRC.useAutoResize();
+button.setMeta(meta);
 ```
-<a name="EVENT" id="EVENT" href="#EVENT">&nbsp;</a>
+<a name="BaseWalletButton+setEnv" id="BaseWalletButton+setEnv" href="#BaseWalletButton+setEnv">&nbsp;</a>
 
-## EVENT : <code>enum</code>
-List of available event's name in the SRC checkout lifecycle
+### paypalWalletButtonExpress.setEnv(env, [alias])
+Current method can change environment. By default environment = sandbox.
+Also we can change domain alias for this environment. By default domain_alias = paydock.com
+Bear in mind that you must set an environment before calling `button.load()`.
 
-**Kind**: global enum  
+**Kind**: instance method of [<code>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+**Overrides**: [<code>setEnv</code>](#BaseWalletButton+setEnv)  
 
-| Param | Type | Default |
+| Param | Type | Description |
 | --- | --- | --- |
-| CHECKOUT_BUTTON_LOADED | <code>string</code> | <code>&quot;checkoutButtonLoaded&quot;</code> | 
-| CHECKOUT_BUTTON_CLICKED | <code>string</code> | <code>&quot;checkoutButtonClicked&quot;</code> | 
-| IFRAME_LOADED | <code>string</code> | <code>&quot;iframeLoaded&quot;</code> | 
-| CHECKOUT_READY | <code>string</code> | <code>&quot;checkoutReady&quot;</code> | 
-| CHECKOUT_COMPLETED | <code>string</code> | <code>&quot;checkoutCompleted&quot;</code> | 
-| CHECKOUT_ERROR | <code>string</code> | <code>&quot;checkoutError&quot;</code> | 
+| env | <code>string</code> | sandbox, production |
+| [alias] | <code>string</code> | Own domain alias |
+
+**Example**  
+```js
+button.setEnv('production', 'paydock.com');
+```
+<a name="BaseWalletButton+onClick" id="BaseWalletButton+onClick" href="#BaseWalletButton+onClick">&nbsp;</a>
+
+### paypalWalletButtonExpress.onClick(handler)
+Registers a callback function to be invoked when the wallet button gets clicked.
+**Note:** is mandatory to handle this event to perform the wallet initialization (and optionally any validation logic).
+The event handler needs to return the wallet token string in order for the Wallet charge processing to proceed, or throw an error in case of failure or validation errors.
+**Note:** this callback may be called multiple times as the customer closes the payment checkout and re-clicks the button.
+It's the merchant's responsibility to handle this situation and evaluate in each case if generating a new WalletCharge Token is required or the previous one can be used in each case, depending on order data and updates.
+In case a new one needs to be generated, remember it will need to be preceded by a `setMeta` call.
+
+**Kind**: instance method of [<code>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+**Overrides**: [<code>onClick</code>](#BaseWalletButton+onClick)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | [<code>OnClickCallback</code>](#OnClickCallback) | Function to be called when the wallet button is clicked. |
+
+**Example**  
+```js
+button.onClick(async (data) => {
+     const responseData = await fetch('https://your-server.com/init-wallet-charge');
+     return responseData.walletToken;
+});
+```
+<a name="BaseWalletButton+onPaymentSuccessful" id="BaseWalletButton+onPaymentSuccessful" href="#BaseWalletButton+onPaymentSuccessful">&nbsp;</a>
+
+### paypalWalletButtonExpress.onPaymentSuccessful([handler])
+If the payment was successful, 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>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+**Overrides**: [<code>onPaymentSuccessful</code>](#BaseWalletButton+onPaymentSuccessful)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [handler] | [<code>OnPaymentSuccessfulCallback</code>](#OnPaymentSuccessfulCallback) | Function to be called when the payment was successful. |
+
+**Example**  
+```js
+button.onPaymentSuccessful((data) => {
+     console.log('Payment successful!');
+});
+```
+**Example**  
+```js
+button.onPaymentSuccessful().then((data) => console.log('Payment successful!'));
+```
+<a name="BaseWalletButton+onPaymentInReview" id="BaseWalletButton+onPaymentInReview" href="#BaseWalletButton+onPaymentInReview">&nbsp;</a>
+
+### paypalWalletButtonExpress.onPaymentInReview([handler])
+If the payment was left in fraud review, 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>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+**Overrides**: [<code>onPaymentInReview</code>](#BaseWalletButton+onPaymentInReview)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [handler] | [<code>OnPaymentInReviewCallback</code>](#OnPaymentInReviewCallback) | Function to be called when the payment was left in fraud review status. |
+
+**Example**  
+```js
+button.onPaymentInReview((data) => {
+     console.log('Payment in fraud review');
+});
+```
+**Example**  
+```js
+button.onPaymentInReview().then((data) => console.log('Payment in fraud review'));
+```
+<a name="BaseWalletButton+onPaymentError" id="BaseWalletButton+onPaymentError" href="#BaseWalletButton+onPaymentError">&nbsp;</a>
+
+### paypalWalletButtonExpress.onPaymentError([handler])
+If the payment was not successful, 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>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+**Overrides**: [<code>onPaymentError</code>](#BaseWalletButton+onPaymentError)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [handler] | [<code>OnPaymentErrorCallback</code>](#OnPaymentErrorCallback) | Function to be called when the payment was not successful. |
+
+**Example**  
+```js
+button.onPaymentError((err) => {
+     console.log('Payment not successful');
+});
+```
+**Example**  
+```js
+button.onPaymentError().then((err) => console.log('Payment not successful'));
+```
+<a name="BaseWalletButton+onCheckoutClose" id="BaseWalletButton+onCheckoutClose" href="#BaseWalletButton+onCheckoutClose">&nbsp;</a>
+
+### paypalWalletButtonExpress.onCheckoutClose(handler)
+Registers a callback function to be invoked when the wallet checkout closes.
+
+**Kind**: instance method of [<code>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+**Overrides**: [<code>onCheckoutClose</code>](#BaseWalletButton+onCheckoutClose)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | [<code>OnCheckoutCloseCallback</code>](#OnCheckoutCloseCallback) | Function to be called when the wallet checkout closes. |
+
+**Example**  
+```js
+button.onCheckoutClose(() => {
+     console.log('Wallet checkout closes');
+});
+```
+<a name="BaseWalletButton+onUnavailable" id="BaseWalletButton+onUnavailable" href="#BaseWalletButton+onUnavailable">&nbsp;</a>
+
+### paypalWalletButtonExpress.onUnavailable(handler)
+Registers a callback function to be invoked when the wallet is not available in the current context.
+
+**Kind**: instance method of [<code>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+**Overrides**: [<code>onUnavailable</code>](#BaseWalletButton+onUnavailable)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | [<code>OnUnavailableCallback</code>](#OnUnavailableCallback) | Function to be called when the wallet is not available in the current context. |
+
+**Example**  
+```js
+button.onUnavailable(() => {
+     console.log('Wallet not available');
+});
+```
+<a name="BaseWalletButton+onError" id="BaseWalletButton+onError" href="#BaseWalletButton+onError">&nbsp;</a>
+
+### paypalWalletButtonExpress.onError(handler)
+Registers a callback function to be invoked when an error that is not related to payment execution occurs.
+For example, if the amount of the wallet token injected via the `onClick` event handler does not match the amount provided via the initial `meta` or `setMeta` method.
+
+**Kind**: instance method of [<code>PaypalWalletButtonExpress</code>](#PaypalWalletButtonExpress)  
+**Overrides**: [<code>onError</code>](#BaseWalletButton+onError)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when the WalletButton has an error. |
+
+**Example**  
+```js
+button.onError((error) => {
+     console.log('WalletButtonExpress error', error);
+});
+```
+<a name="EVENT" id="EVENT" href="#EVENT">&nbsp;</a>
+
+## EVENT : <code>object</code>
+List of available event's name in the wallet button lifecycle
+
+**Kind**: global constant  
+
+| Param | Type | Default |
+| --- | --- | --- |
+| UNAVAILABLE | <code>string</code> | <code>&quot;unavailable&quot;</code> | 
+| ERROR | <code>string</code> | <code>&quot;error&quot;</code> | 
+| PAYMENT_SUCCESSFUL | <code>string</code> | <code>&quot;paymentSuccessful&quot;</code> | 
+| PAYMENT_ERROR | <code>string</code> | <code>&quot;paymentError&quot;</code> | 
+| PAYMENT_IN_REVIEW | <code>string</code> | <code>&quot;paymentInReview&quot;</code> | 
+| ON_CLICK | <code>string</code> | <code>&quot;onClick&quot;</code> | 
+| ON_CHECKOUT_CLOSE | <code>string</code> | <code>&quot;onCheckoutClose&quot;</code> | 
+
+<a name="OnClickCallback" id="OnClickCallback" href="#OnClickCallback">&nbsp;</a>
+
+## OnClickCallback ⇒ <code>Promise.&lt;string&gt;</code>
+Callback for onClick method.
+
+**Kind**: global typedef  
+**Returns**: <code>Promise.&lt;string&gt;</code> - walletToken string result  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>OnClickEventData</code>](#OnClickEventData) | 
+
+<a name="OnPaymentSuccessfulCallback" id="OnPaymentSuccessfulCallback" href="#OnPaymentSuccessfulCallback">&nbsp;</a>
+
+## OnPaymentSuccessfulCallback : <code>function</code>
+Callback for onPaymentSuccessful method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>OnPaymentSuccessfulEventData</code>](#OnPaymentSuccessfulEventData) | 
+
+<a name="OnPaymentInReviewCallback" id="OnPaymentInReviewCallback" href="#OnPaymentInReviewCallback">&nbsp;</a>
+
+## OnPaymentInReviewCallback : <code>function</code>
+Callback for onPaymentInReview method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>OnPaymentInReviewEventData</code>](#OnPaymentInReviewEventData) | 
+
+<a name="OnPaymentErrorCallback" id="OnPaymentErrorCallback" href="#OnPaymentErrorCallback">&nbsp;</a>
+
+## OnPaymentErrorCallback : <code>function</code>
+Callback for onPaymentError method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>OnPaymentErrorEventData</code>](#OnPaymentErrorEventData) | 
+
+<a name="OnCheckoutCloseCallback" id="OnCheckoutCloseCallback" href="#OnCheckoutCloseCallback">&nbsp;</a>
+
+## OnCheckoutCloseCallback : <code>function</code>
+Callback for onCheckoutClose method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>OnCloseEventData</code>](#OnCloseEventData) | 
+
+<a name="OnUnavailableCallback" id="OnUnavailableCallback" href="#OnUnavailableCallback">&nbsp;</a>
+
+## OnUnavailableCallback : <code>function</code>
+Callback for onUnavailable method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>OnUnavailableEventData</code>](#OnUnavailableEventData) | 
+
+<a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback">&nbsp;</a>
+
+## OnErrorCallback : <code>function</code>
+Callback for onError method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>OnErrorEventData</code>](#OnErrorEventData) | 
+
+
+# Click To Pay
+
+## Overview
+
+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).
+
+## 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="checkoutIframe"></div>
+```
+
+### Initialize the Widget
+
+Use the following code to initialize your widget:
+
+```javascript
+var src = new paydock.ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key_or_access_token",
+    {}, // meta
+);
+src.load();
+```
+
+```javascript
+// ES2015 | TypeScript
+import { ClickToPay } from '@paydock/client-sdk';
+var src = new ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key_or_access_token",
+    {}, // meta
+);
+src.load();
+```
+
+*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">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>iframe {border: 0;width: 40%;height: 300px;}</style>
+</head>
+<body>
+    <div id="checkoutIframe"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+    <script>
+        var src = new paydock.ClickToPay(
+            "#checkoutIframe",
+            "service_id",
+            "paydock_public_key_or_access_token",
+            {},
+        );
+        src.load();
+    </script>
+</body>
+</html>
+```
+
+## Customize your Click To Pay Checkout
+
+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 environment
+src.hideCheckout(); // hide checkout iframe
+src.showCheckout(); // show checkout iframe
+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);
+});
+```
+
+### Full example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>iframe {border: 0;width: 40%;height: 450px;}</style>
+</head>
+<body>
+    <div id="checkoutIframe"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+    <script>
+        var src = new paydock.ClickToPay(
+            "#checkoutIframe",
+            "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>
+```
+
+## Customize your billing address fields
+
+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.ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key_or_access_token",
+    {
+        "dpa_transaction_options": {
+            "dpa_billing_preference": "FULL"
+        }
+    },
+);
+```
+
+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": "one_time_token",
+    "customer": {
+        "payment_source": {
+            "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": {
+        "address_line1": "address_line1",
+        "address_line2": "address_line2",
+        "address_line3": "address_line3",
+        "address_city": "address_city",
+        "address_postcode": "address_postcode",
+        "address_state": "address_state",
+        "address_country": "address_country"
+    }
+}
+```
+
+## 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'.
+
+### Example code
+
+The following example demonstrates how to block the card:
+
+```
+var src = new paydock.ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key",
+    {
+        unaccepted_card_type: 'DEBIT'
+    },
+);
+```
+
+## Personalize the Style
+
+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.ClickToPay(
+    "#checkoutIframe",
+    "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',
+});
+```
+
+## 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
+});
+```
+
+## Classes
+
+<dl>
+<dt><a href="#ClickToPay">ClickToPay</a> ⇐ <code>SRC</code></dt>
+<dd><p>Class ClickToPay include methods for interacting with the ClickToPay checkout and Manual Card option</p>
+</dd>
+</dl>
+
+## Interfaces
+
+<dl>
+<dt><a href="#IMastercardSRCMeta">IMastercardSRCMeta</a> : <code>object</code></dt>
+<dd><p>Interface of data used for the Mastercard Checkout. For further information refer to <a href="https://developer.mastercard.com/unified-checkout-solutions/documentation/sdk-reference/init">the documentation</a>.</p>
+</dd>
+<dt><a href="#EventData">EventData</a> : <code>object</code></dt>
+<dd><p>Interface for data returned in callbacks</p>
+</dd>
+<dt><a href="#EventDataCheckoutCompletedData">EventDataCheckoutCompletedData</a> : <code>object</code></dt>
+<dd><p>Event data returned for checkoutCompleted callback, holding the One Time Token and the flow type completed.
+When the flow type is src, masked checkoutData available is also returned</p>
+</dd>
+<dt><a href="#IStyles">IStyles</a> : <code>object</code></dt>
+<dd><p>Interface for style configs inyected to the Click to Pay checkout</p>
+</dd>
+</dl>
+
+<a name="IMastercardSRCMeta" id="IMastercardSRCMeta" href="#IMastercardSRCMeta">&nbsp;</a>
+
+## IMastercardSRCMeta : <code>object</code>
+Interface of data used for the Mastercard Checkout. For further information refer to [the documentation](https://developer.mastercard.com/unified-checkout-solutions/documentation/sdk-reference/init).
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [disable_summary_screen] | <code>boolean</code> | Boolean flag that controls if a final summary screen is presented in the checkout flow. |
+| [dpa_data] | <code>object</code> | Object where the DPA creation data is stored. |
+| [dpa_data.dpa_presentation_name] | <code>string</code> | Name in which the DPA is presented. |
+| [dpa_data.dpa_uri] | <code>string</code> | Used for indicating the DPA URI. |
+| [dpa_data.dpa_address] | <code>string</code> | Address associated with the DPA. |
+| [dpa_data.dpa_email_address] | <code>string</code> | Email address for DPA communication. |
+| [dpa_data.dpa_phone_number] | <code>object</code> | Phone number structure for DPA communication. |
+| [dpa_data.dpa_phone_number.country_code] | <code>string</code> | The country code of the phone number. |
+| [dpa_data.dpa_phone_number.phone_number] | <code>string</code> | The phone number part of the phone number. |
+| [dpa_data.dpa_logo_uri] | <code>string</code> | URI for the DPA logo. |
+| [dpa_data.dpa_supported_email_address] | <code>string</code> | Supported email address for DPA support. |
+| [dpa_data.dpa_supported_phone_number] | <code>object</code> | Supported phone number for DPA support. |
+| [dpa_data.dpa_supported_phone_number.country_code] | <code>string</code> | The country code of the phone number. |
+| [dpa_data.dpa_supported_phone_number.phone_number] | <code>string</code> | The phone number part of the phone number. |
+| [dpa_data.dpa_support_uri] | <code>string</code> | URI for DPA support. |
+| [dpa_data.application_type] | <code>string</code> | Application type, either 'WEB_BROWSER' or 'MOBILE_APP'. |
+| [co_brand_names] | <code>Array.&lt;string&gt;</code> | List of co-brand names associated with the Click to Pay experience. |
+| [checkout_experience] | <code>string</code> | Checkout experience type, either 'WITHIN_CHECKOUT' or 'PAYMENT_SETTINGS'. |
+| [services] | <code>string</code> | Services offered, such as 'INLINE_CHECKOUT' or 'INLINE_INSTALLMENTS'. |
+| [dpa_transaction_options] | <code>object</code> | Object that stores options for creating a transaction with DPA. |
+| [dpa_transaction_options.dpa_locale] | <code>string</code> | DPA’s preferred locale, example en_US. |
+| [dpa_transaction_options.dpa_accepted_billing_countries] | <code>Array.&lt;string&gt;</code> | List of accepted billing countries for DPA in ISO 3166-1 alpha-2 format. |
+| [dpa_transaction_options.dpa_billing_preference] | <code>string</code> | Billing preferences for DPA, options are 'FULL', 'POSTAL_COUNTRY', 'NONE'. |
+| [dpa_transaction_options.payment_options] | <code>Array.&lt;object&gt;</code> | Payment options included in the transaction. |
+| [dpa_transaction_options.payment_options.dynamic_data_type] | <code>string</code> | Dynamic data types. |
+| [dpa_transaction_options.order_type] | <code>string</code> | Type of the order, options are 'SPLIT_SHIPMENT', 'PREFERRED_CARD'. |
+| [dpa_transaction_options.three_ds_preference] | <code>string</code> | Preference for 3DS usage in the transaction. |
+| [dpa_transaction_options.confirm_payment] | <code>boolean</code> | Indicates if payment confirmation is required. |
+| [dpa_transaction_options.consumer_name_requested] | <code>boolean</code> | Indicates if consumer name is requested. |
+| [dpa_transaction_options.consumer_email_address_requested] | <code>boolean</code> | Indicates if consumer email address is requested. |
+| [dpa_transaction_options.consumer_phone_number_requested] | <code>boolean</code> | Indicates if consumer phone number is requested. |
+| [dpa_transaction_options.transaction_amount] | <code>object</code> | Details of the transaction amount. |
+| [dpa_transaction_options.transaction_amount.transaction_amount] | <code>number</code> | Amount of the transaction. |
+| [dpa_transaction_options.transaction_amount.transaction_currency_code] | <code>string</code> | Currency code of the transaction in 3 letter ISO code format. |
+| [dpa_transaction_options.merchant_order_id] | <code>string</code> | Merchant's order ID. |
+| [dpa_transaction_options.merchant_category_code] | <code>string</code> | Merchant's category code. |
+| [dpa_transaction_options.merchant_country_code] | <code>string</code> | Merchant's country code in ISO 3166-1 alpha-2 format. |
+| [customer] | <code>object</code> | Object where the customer data is stored to prefill in the checkout. |
+| [customer.email] | <code>string</code> | Customer email. |
+| [customer.first_name] | <code>string</code> | Customer first name. |
+| [customer.last_name] | <code>string</code> | Customer last name. |
+| [customer.phone] | <code>object</code> | Object where the customer phone is stored. |
+| [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>
+
+## EventData : <code>object</code>
+Interface for data returned in callbacks
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | [<code>EVENT\_DATA\_TYPE</code>](#EVENT_DATA_TYPE) | Event type of type [EVENT_DATA_TYPE](#EVENT_DATA_TYPE) |
+| data | <code>string</code> \| [<code>EventDataCheckoutCompletedData</code>](#EventDataCheckoutCompletedData) | optional data returning a string for checkoutError event or [EventDataCheckoutCompletedData](#EventDataCheckoutCompletedData) for checkoutCompleted |
+
+<a name="EventDataCheckoutCompletedData" id="EventDataCheckoutCompletedData" href="#EventDataCheckoutCompletedData">&nbsp;</a>
+
+## EventDataCheckoutCompletedData : <code>object</code>
+Event data returned for checkoutCompleted callback, holding the One Time Token and the flow type completed.
+When the flow type is src, masked checkoutData available is also returned
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | type of the checkout, can be `src` or `manual`. |
+| token | <code>string</code> | one time token value. |
+| [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. |
+| [checkoutData.card_scheme] | <code>string</code> | The card scheme. Values: visa, mastercard, amex, diners, discover. |
+| [checkoutData.card_type] | <code>string</code> | The type of card. Values: credit, debit, prepaid, combo, flex. |
+| [checkoutData.address_line1] | <code>string</code> | Address line 1 for billing address. |
+| [checkoutData.address_line2] | <code>string</code> | Address line 2 for billing address. |
+| [checkoutData.address_line3] | <code>string</code> | Address line 3 for billing address. |
+| [checkoutData.address_city] | <code>string</code> | City for billing address. |
+| [checkoutData.address_postcode] | <code>string</code> | Postal code for billing address. |
+| [checkoutData.address_state] | <code>string</code> | State or province for billing address. |
+| [checkoutData.address_country] | <code>string</code> | Country for billing address. |
+| [checkoutData.shipping] | <code>object</code> | Optional shipping information. |
+| [checkoutData.shipping.address_line1] | <code>string</code> | Address line 1 for shipping address. |
+| [checkoutData.shipping.address_line2] | <code>string</code> | Address line 2 for shipping address. |
+| [checkoutData.shipping.address_line3] | <code>string</code> | Address line 3 for shipping address. |
+| [checkoutData.shipping.address_city] | <code>string</code> | City for shipping address. |
+| [checkoutData.shipping.address_postcode] | <code>string</code> | Postal code for shipping address. |
+| [checkoutData.shipping.address_state] | <code>string</code> | State or province for shipping address. |
+| [checkoutData.shipping.address_country] | <code>string</code> | Country for shipping address. |
+
+<a name="IStyles" id="IStyles" href="#IStyles">&nbsp;</a>
+
+## IStyles : <code>object</code>
+Interface for style configs inyected to the Click to Pay checkout
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [primary_button_color] | <code>string</code> | Color Code for primary button. |
+| [primary_button_text_color] | <code>string</code> | Color Code for primary button text. |
+| [secondary_button_color] | <code>string</code> | Color Code for secondary button. |
+| [secondary_button_text_color] | <code>string</code> | Color Code for secondary button text. |
+| [font_family] | <code>string</code> | Font family to be used. |
+| [enable_src_popup] | <code>boolean</code> | Boolean flag to make the Click to Pay checkout show in a popup window instead of embedded in iframe. |
+
+<a name="ClickToPay" id="ClickToPay" href="#ClickToPay">&nbsp;</a>
+
+## ClickToPay ⇐ <code>SRC</code>
+Class ClickToPay include methods for interacting with the ClickToPay checkout and Manual Card option
+
+**Kind**: global class  
+**Extends**: <code>SRC</code>  
+
+* [ClickToPay](#ClickToPay) ⇐ <code>SRC</code>
+    * [new ClickToPay(iframe_selector, service_id, public_key_or_access_token, meta)](#new_ClickToPay_new)
+    * [.load()](#ClickToPay+load)
+    * [.setStyles(fields)](#SRC+setStyles)
+    * [.setEnv(env, [alias])](#SRC+setEnv)
+    * [.getEnv()](#SRC+getEnv)
+    * [.on(eventName, [cb])](#SRC+on) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
+    * [.hideCheckout([saveSize])](#SRC+hideCheckout)
+    * [.showCheckout()](#SRC+showCheckout)
+    * [.reload()](#SRC+reload)
+    * [.useAutoResize()](#SRC+useAutoResize)
+
+<a name="new_ClickToPay_new" id="new_ClickToPay_new" href="#new_ClickToPay_new">&nbsp;</a>
+
+### new ClickToPay(iframe_selector, service_id, public_key_or_access_token, meta)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| iframe_selector | <code>string</code> | Selector of html element. Container for Click To Pay checkout iFrame. |
+| service_id | <code>string</code> | Card Scheme Service ID |
+| public_key_or_access_token | <code>string</code> | Paydock public key or Access Token |
+| meta | <code>IClickToPayMeta</code> | Data that configures the Click To Pay checkout |
+
+**Example**  
+```js
+var mastercardSRC = new ClickToPay('#checkoutIframe', 'service_id', 'public_key', {});
+```
+<a name="ClickToPay+load" id="ClickToPay+load" href="#ClickToPay+load">&nbsp;</a>
+
+### clickToPay.load()
+The final method after configuring the SRC to start the load process of Click To Pay checkout
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+<a name="SRC+setStyles" id="SRC+setStyles" href="#SRC+setStyles">&nbsp;</a>
+
+### clickToPay.setStyles(fields)
+Object contain styles for widget - call before `.load()`.
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Overrides**: [<code>setStyles</code>](#SRC+setStyles)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| fields | [<code>IStyles</code>](#IStyles) | name of styles which can be shown in widget [STYLE](STYLE) |
+
+**Example**  
+```js
+widget.setStyles({
+    enable_src_popup: true
+    primary_button_color: 'red',
+    secondary_button_color: 'blue',
+    primary_button_text_color: 'white',
+    secondary_button_text_color: 'white',
+    font_family: 'Arial',
+});
+```
+<a name="SRC+setEnv" id="SRC+setEnv" href="#SRC+setEnv">&nbsp;</a>
+
+### clickToPay.setEnv(env, [alias])
+Current method can change environment. By default environment = sandbox.
+Also we can change domain alias for this environment. By default domain_alias = paydock.com
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Overrides**: [<code>setEnv</code>](#SRC+setEnv)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| env | <code>string</code> | sandbox, production |
+| [alias] | <code>string</code> | Own domain alias |
+
+**Example**  
+```js
+SRC.setEnv('production');
+```
+<a name="SRC+getEnv" id="SRC+getEnv" href="#SRC+getEnv">&nbsp;</a>
+
+### clickToPay.getEnv()
+Method to read the current environment
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Overrides**: [<code>getEnv</code>](#SRC+getEnv)  
+**Example**  
+```js
+SRC.getEnv();
+```
+<a name="SRC+on" id="SRC+on" href="#SRC+on">&nbsp;</a>
+
+### clickToPay.on(eventName, [cb]) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
+Listen to events of SRC
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Overrides**: [<code>on</code>](#SRC+on)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| eventName | <code>string</code> | Available event names [EVENT](#EVENT) |
+| [cb] | <code>listener</code> | The callback to handle the event. When available, it will send back data of type [EventData](#EventData) |
+
+**Example**  
+```js
+SRC.on('checkoutCompleted', function (token) {
+     console.log(token);
+});
+// or
+SRC.on('checkoutCompleted').then(function (token) {
+     console.log(token);
+});
+```
+<a name="SRC+hideCheckout" id="SRC+hideCheckout" href="#SRC+hideCheckout">&nbsp;</a>
+
+### clickToPay.hideCheckout([saveSize])
+Using this method you can hide checkout after load and button click
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Overrides**: [<code>hideCheckout</code>](#SRC+hideCheckout)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [saveSize] | <code>boolean</code> | <code>false</code> | using this param you can save iframe's size (if applicable) |
+
+**Example**  
+```js
+SRC.hideCheckout();
+```
+<a name="SRC+showCheckout" id="SRC+showCheckout" href="#SRC+showCheckout">&nbsp;</a>
+
+### clickToPay.showCheckout()
+Using this method you can show checkout after using hideCheckout method
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Overrides**: [<code>showCheckout</code>](#SRC+showCheckout)  
+**Example**  
+```js
+SRC.showCheckout()
+```
+<a name="SRC+reload" id="SRC+reload" href="#SRC+reload">&nbsp;</a>
+
+### clickToPay.reload()
+Using this method you can reload the whole checkout
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Overrides**: [<code>reload</code>](#SRC+reload)  
+**Example**  
+```js
+SRC.reload()
+```
+<a name="SRC+useAutoResize" id="SRC+useAutoResize" href="#SRC+useAutoResize">&nbsp;</a>
+
+### clickToPay.useAutoResize()
+Use this method for resize checkout iFrame according to content height, if applicable
+
+**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
+**Overrides**: [<code>useAutoResize</code>](#SRC+useAutoResize)  
+**Example**  
+```js
+SRC.useAutoResize();
+```
+<a name="EVENT" id="EVENT" href="#EVENT">&nbsp;</a>
+
+## EVENT : <code>enum</code>
+List of available event's name in the Click To Pay checkout lifecycle
+
+**Kind**: global enum  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| IFRAME_LOADED | <code>string</code> | <code>&quot;iframeLoaded&quot;</code> | Initial event sent when IFrame is initially loaded. |
+| CHECKOUT_READY | <code>string</code> | <code>&quot;checkoutReady&quot;</code> | Event sent when checkout is loaded and ready to be used by customer. Leverage alongside [showCheckout](#SRC+showCheckout) and [hideCheckout](#SRC+hideCheckout). |
+| CHECKOUT_POPUP_OPEN | <code>string</code> | <code>&quot;checkoutPopupOpen&quot;</code> | Event sent when Click To Pay checkout flow is started, regardless of embedded or windowed mode. |
+| 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>
+
+## EVENT\_DATA\_TYPE : <code>enum</code>
+List of available event data types
+
+**Kind**: global enum  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| CRITICAL_ERROR | <code>string</code> | <code>&quot;CriticalError&quot;</code> | in this error scenario the checkout is understood to be in a non-recoverable state and should be closed by the merchant and give alternate payment options to the user |
+| USER_ERROR | <code>string</code> | <code>&quot;UserError&quot;</code> | in this error scenario the error in likely a user input error and the checkout is in a recoverable state, so the user will be kept within the checkout and can retry the flow |
+| SUCCESS | <code>string</code> | <code>&quot;Success&quot;</code> |  |
+
+
+## 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>
+```
+
+## Classes
+
+<dl>
+<dt><a href="#PayPalSavePaymentSourceWidget">PayPalSavePaymentSourceWidget</a></dt>
+<dd><p>PayPal Save Payment Source Widget constructor</p>
+</dd>
+</dl>
+
+## Typedefs
+
+<dl>
+<dt><a href="#OnSuccessCallback">OnSuccessCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onSuccess method.</p>
+</dd>
+<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onError method.</p>
+</dd>
+<dt><a href="#OnCancelCallback">OnCancelCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onCancel method.</p>
+</dd>
+</dl>
+
+## Interfaces
+
+<dl>
+<dt><a href="#PayPalSavePaymentSourceWidgetConfig">PayPalSavePaymentSourceWidgetConfig</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="#ErrorCodes">ErrorCodes</a> : <code>object</code></dt>
+<dd><p>Interface of possible error codes inside onError event data.</p>
+</dd>
+<dt><a href="#IOnSuccessEventData">IOnSuccessEventData</a> : <code>object</code></dt>
+<dd><p>Interface for IOnSuccessEventData</p>
+</dd>
+<dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
+<dd><p>Interface for IOnErrorEventData</p>
+</dd>
+<dt><a href="#IOnCancelEventData">IOnCancelEventData</a> : <code>object</code></dt>
+<dd><p>Interface for IOnCancelEventData</p>
+</dd>
+</dl>
+
+<a name="PayPalSavePaymentSourceWidgetConfig" id="PayPalSavePaymentSourceWidgetConfig" href="#PayPalSavePaymentSourceWidgetConfig">&nbsp;</a>
+
+## PayPalSavePaymentSourceWidgetConfig : <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 |
+| --- | --- | --- |
+| [style.layout] | <code>&#x27;vertical&#x27;</code> \| <code>&#x27;horizontal&#x27;</code> | Used for indicating the PayPal Button layout. |
+| [style.color] | <code>&#x27;blue&#x27;</code> \| <code>&#x27;gold&#x27;</code> \| <code>&#x27;silver&#x27;</code> \| <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Used for indicating the main color of the PayPal Button. |
+| [style.shape] | <code>&#x27;rect&#x27;</code> \| <code>&#x27;sharp&#x27;</code> \| <code>&#x27;pill&#x27;</code> | Used for indicating the shape of the PayPal Button. |
+| [style.label] | <code>&#x27;paypal&#x27;</code> \| <code>&#x27;checkout&#x27;</code> \| <code>&#x27;buynow&#x27;</code> \| <code>&#x27;pay&#x27;</code> | Used for indicating the label of the PayPal Button. |
+| [style.disableMaxWidth] | <code>boolean</code> | Used for indicating if the max width will be disabled. |
+| [style.disableMaxHeight] | <code>boolean</code> | Used for indicating the max height will be disabled. |
+| [style.height] | <code>number</code> | Used for indicating the height of the PayPal Button, if disableMaxHeight is true. |
+| [style.borderRadius] | <code>number</code> | Used for indicating the border radius of the PayPal Button. |
+| [style.tagline] | <code>boolean</code> | Used for indicating the tagline of the PayPal Button. |
+| [message.amount] | <code>number</code> | Used for indicating an amount before the payment. |
+| [message.align] | <code>&#x27;center&#x27;</code> \| <code>&#x27;left&#x27;</code> \| <code>&#x27;right&#x27;</code> | Used for indicating the align of the message. |
+| [message.color] | <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Used for indicating the color of the message. |
+| [message.position] | <code>&#x27;top&#x27;</code> \| <code>&#x27;bottom&#x27;</code> | Used for indicating the position of the message. |
+
+<a name="ErrorCodes" id="ErrorCodes" href="#ErrorCodes">&nbsp;</a>
+
+## ErrorCodes : <code>object</code>
+Interface of possible error codes inside onError event data.
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [unavailable] | <code>string</code> | Error code when an error occurs loading the widget. |
+| [onPaypalVaultSetupTokenError] | <code>string</code> | Error code when an error occrus on PayPal side. |
+| [onGetIdTokenError] | <code>string</code> | Error code when trying to get ID token from PayPal. |
+| [onGetWalletConfigError] | <code>string</code> | Error code when trying to get wallet config from Paydock. |
+| [onGetSetupTokenError] | <code>string</code> | Error code when trying to get the setup token from PayPal. |
+| [onOneTimeTokenError] | <code>string</code> | Error code when trying to get the one time token from Paydock. |
+
+<a name="IOnSuccessEventData" id="IOnSuccessEventData" href="#IOnSuccessEventData">&nbsp;</a>
+
+## IOnSuccessEventData : <code>object</code>
+Interface for IOnSuccessEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>EVENTS</code> | Event Name is 'ON_SUCCESS' |
+| data | <code>object</code> | Data object |
+| data.token | <code>string</code> | One Time Token to be exchanged for a Paydock Customer. |
+| [data.email] | <code>string</code> | Paypal account customer email if retrieved from Paypal servers. |
+
+<a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData">&nbsp;</a>
+
+## IOnErrorEventData : <code>object</code>
+Interface for IOnErrorEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>EVENTS</code> | Event Name is 'ON_ERROR' |
+| data | <code>object</code> | Error data object |
+| data.error_code | [<code>ErrorCodes</code>](#ErrorCodes) | Error code. One of ErrorCodes. |
+| [data.details] | <code>string</code> | Error details. |
+| [data.message] | <code>string</code> | Error message. |
+
+<a name="IOnCancelEventData" id="IOnCancelEventData" href="#IOnCancelEventData">&nbsp;</a>
+
+## IOnCancelEventData : <code>object</code>
+Interface for IOnCancelEventData
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| event | <code>EVENTS</code> | Event Name is 'ON_CANCEL' |
+
+<a name="PayPalSavePaymentSourceWidget" id="PayPalSavePaymentSourceWidget" href="#PayPalSavePaymentSourceWidget">&nbsp;</a>
+
+## PayPalSavePaymentSourceWidget
+PayPal Save Payment Source Widget constructor
+
+**Kind**: global class  
+
+* [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget)
+    * [new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)](#new_PayPalSavePaymentSourceWidget_new)
+    * [.load()](#PayPalSavePaymentSourceWidget+load)
+    * [.setEnv(env, [alias])](#PayPalSavePaymentSourceWidget+setEnv)
+    * [.onSuccess([callback])](#PayPalSavePaymentSourceWidget+onSuccess)
+    * [.onError([callback])](#PayPalSavePaymentSourceWidget+onError)
+    * [.onCancel([callback])](#PayPalSavePaymentSourceWidget+onCancel)
+
+<a name="new_PayPalSavePaymentSourceWidget_new" id="new_PayPalSavePaymentSourceWidget_new" href="#new_PayPalSavePaymentSourceWidget_new">&nbsp;</a>
+
+### new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| selector | <code>string</code> | Selector of html element. Container for PayPal Save Payment Source Widget. |
+| publicKey | <code>string</code> | PayDock users public key. |
+| gatewayId | <code>string</code> | PayDock's PayPal gatewayId. |
+| config | [<code>PayPalSavePaymentSourceWidgetConfig</code>](#PayPalSavePaymentSourceWidgetConfig) | Extra configuration for the widget, like styles. |
+
+**Example**  
+```js
+var payPalSavePaymentSourceWidget = new PayPalSavePaymentSourceWidget('#paypalButton', 'public_key', 'gateway_id');
+```
+<a name="PayPalSavePaymentSourceWidget+load" id="PayPalSavePaymentSourceWidget+load" href="#PayPalSavePaymentSourceWidget+load">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.load()
+The final method after configuring the PayPalSavePaymentSource Widget to
+start the load process.
+
+**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+<a name="PayPalSavePaymentSourceWidget+setEnv" id="PayPalSavePaymentSourceWidget+setEnv" href="#PayPalSavePaymentSourceWidget+setEnv">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.setEnv(env, [alias])
+Current method can change environment. By default environment = sandbox.
+Also we can change domain alias for this environment. By default domain_alias = paydock.com
+
+**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| env | <code>string</code> | sandbox, production |
+| [alias] | <code>string</code> | Own domain alias |
+
+**Example**  
+```js
+payPalSavePaymentSourceWidget.setEnv('production');
+```
+<a name="PayPalSavePaymentSourceWidget+onSuccess" id="PayPalSavePaymentSourceWidget+onSuccess" href="#PayPalSavePaymentSourceWidget+onSuccess">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.onSuccess([callback])
+If the setup token was successfully approved and a OTT was generated, 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>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnSuccessCallback</code>](#OnSuccessCallback) | Function to be called when the result is successful. |
+
+**Example**  
+```js
+payPalSavePaymentSourceWidget.onSuccess((eventData) => console.log('One time token and email obtained successfully'));
+```
+<a name="PayPalSavePaymentSourceWidget+onError" id="PayPalSavePaymentSourceWidget+onError" href="#PayPalSavePaymentSourceWidget+onError">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.onError([callback])
+If in the process for obtaining the setup token 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>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
+
+**Example**  
+```js
+payPalSavePaymentSourceWidget.onError((eventData) => console.log('Some error occurred'));
+```
+<a name="PayPalSavePaymentSourceWidget+onCancel" id="PayPalSavePaymentSourceWidget+onCancel" href="#PayPalSavePaymentSourceWidget+onCancel">&nbsp;</a>
+
+### payPalSavePaymentSourceWidget.onCancel([callback])
+If in the process for obtaining the setup token was cancelled, 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>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnCancelCallback</code>](#OnCancelCallback) | Function to be called when the operation is cancelled. |
+
+**Example**  
+```js
+payPalSavePaymentSourceWidget.onCancel(() => console.log('Operation cancelled'));
+```
+<a name="OnSuccessCallback" id="OnSuccessCallback" href="#OnSuccessCallback">&nbsp;</a>
+
+## OnSuccessCallback : <code>function</code>
+Callback for onSuccess method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>IOnSuccessEventData</code>](#IOnSuccessEventData) | 
+
+<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) | 
+
+<a name="OnCancelCallback" id="OnCancelCallback" href="#OnCancelCallback">&nbsp;</a>
+
+## OnCancelCallback : <code>function</code>
+Callback for onCancel method.
+
+**Kind**: global typedef  
+
+| Param | Type |
+| --- | --- |
+| data | [<code>IOnCancelEventData</code>](#IOnCancelEventData) | 
+
+
+## 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(
+        sourceWebsiteIdentifier,
+        {
+            mouse_movement: true
+        }
+    );
+
+    payPalDataCollector.setEnv('test');
+
+    payPalDataCollector.onError(function(error) {
+        console.log("On Error Callback", error);
+    });
+
+    const collectedDeviceData = await payPalDataCollector.collectDeviceData();
+
+    //Here when the promise is resolved, it should be able to see the correlation_id.
+    const correlationId = collectedDeviceData.correlation_id
+</script>
+</html>
+```
+
+## 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.
+
+**Kind**: instance method of [<code>PayPalDataCollector</code>](#PayPalDataCollector)  
+**Returns**: [<code>Promise.&lt;CollectedDeviceData&gt;</code>](#CollectedDeviceData) - Promise when resolved, returnsa 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> | 
 
 
 ## License
-Copyright (c) 2023 paydock
+Copyright (c) 2024 paydock