@paydock/client-sdk 1.104.6-beta → 1.105.1

package/README.md

@@ -16,78 +16,76 @@ Also you will need added gateway ([see API Reference by gateway](https://docs.pa
 
 ## Get started
 
-The Client SDK ships in JavaScript ES6 (EcmaScript 2015) in three different
-formats (CJS, ESM and UMD) along with respective TypeScript declarations. Below,
-we exemplify how to import each format.
-
 ### 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.
+To install with package manager, enter the following command:
 
-```bash
-npm install @paydock/client-sdk
-```
+`npm install @paydock/client-sdk`
 
-After installation is complete, if you are developing in NodeJS environments or
-using tools that expect your JavaScript code to be in CJS format (e.g., Jest,
-Karma, RequireJS, Webpack), you can import the Client SDK using CommonJS modules.
-For these environments the UMD format (`@paydock/client-sdk/bundles/widget.umd.js`)
-can also be used as a fallback. Alternatively, in case you are developing in
-projects that have access to modern bundlers such as Vite or others (e.g., SPA
-libs or SSR Metaframeworks), you can import the Client SDK features using ESM
-through named imports or namespaced imports.
 
+You can use ES2015 or TypeScript modules
 
-```cjs
-// module import - CommonJS/Node projects ✅
-const paydock = require('@paydock/client-sdk')
-const api = new paydock.Api('publicKey');
-```
+`@paydock/client-sdk/widget`
 
-```mjs
-// named import - ESM projects or TypeScript projects ✅
-import { HtmlWidget } from '@paydock/client-sdk'
-const widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
-```
 
-```mjs
-// namespaced import - ESM projects or TypeScript projects ✅
-import * as Paydock from '@paydock/client-sdk'
-const widget = new Paydock.HtmlWidget('#selector', 'publicKey', 'gatewayId');
+Also can use UMD module (global visibility, see above)
+
+`@paydock/client-sdk/bundles/widget.umd.js`
+
+`@paydock/client-sdk/bundles/widget.umd.min.js`
+
+
+
+```javascript--es2015
+// ES2015 / TypeScript
+
+import { HtmlWidget } from '@paydock/client-sdk/widget';
+
+let widget = new 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'"
+
+```html
+<script src="@paydock/client-sdk/bundles/widget.umd.min.js"></script>
+<script>
+    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
+</script>
 ```
 
 
+
 ### Download from CDN
 
-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`.
+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 production we recommend using the compressed version (`.min.js`) since
-it will result in faster loading times for your end users.
+*Full version for development and debug*
+`https://widget.paydock.com/sdk/latest/widget.umd.js`
 
-- *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`*
 
-You may download the production version of the Client SDK scripts [here][min],
-and, the development version [here][max].
+
+Also can download library the [production version][min] or the [development version][max]
 
 [min]: https://widget.paydock.com/sdk/latest/widget.umd.min.js
 [max]: https://widget.paydock.com/sdk/latest/widget.umd.js
 
-For more advanced use-cases, the library has [UMD](https://github.com/umdjs/umd)
-format that can be used in RequireJS, Webpack, etc.
+
+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.
+
+
+
+
+
+
 
 
 ```html
@@ -97,7 +95,6 @@ format that can be used in RequireJS, Webpack, etc.
 </script>
 ```
 
-
 ## Widget
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#widget-simple-example)
 
@@ -122,11 +119,11 @@ var widget = new paydock.HtmlWidget('#widget', 'publicKey');
 widget.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { HtmlWidget } from '@paydock/client-sdk';
-
+import { HtmlWidget } from '@paydock/client-sdk/widget';
+    
 var widget = new HtmlWidget('#widget', 'publicKey');
 widget.load();
 ```
@@ -134,7 +131,7 @@ widget.load();
 Then write only need 2 lines of code in js to initialize widget
 
 
-### Full example
+### Full example 
 
 ```html
 <!DOCTYPE html>
@@ -197,9 +194,9 @@ widget.setFormFields(['phone', 'email']); // add additional fields for form of w
 widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported card types
 ```
 
-This example shows how you can use a lot of other methods to settings your form
+This example shows how you can use a lot of other methods to settings your form 
 
-### Full example
+### Full example 
 
 ```html
 <!DOCTYPE html>
@@ -220,12 +217,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>
@@ -651,7 +648,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)
@@ -1216,13 +1213,15 @@ widget.setFormPlaceholders({
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### ~~htmlWidget.setIcons()~~
-***Deprecated***
-
+### htmlWidget.setIcons()
 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)
@@ -1376,7 +1375,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)
@@ -1842,13 +1841,15 @@ widget.setFormElements([
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### ~~htmlMultiWidget.setIcons()~~
-***Deprecated***
-
+### htmlMultiWidget.setIcons()
 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)
@@ -2161,7 +2162,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)
@@ -2387,12 +2388,14 @@ widget.setFormElements([
 ```
 <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons">&nbsp;</a>
 
-### ~~multiWidget.setIcons()~~
-***Deprecated***
-
+### multiWidget.setIcons()
 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)
@@ -2762,10 +2765,10 @@ var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken
 list.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { HtmlPaymentSourceWidget } from '@paydock/client-sdk';
+import { HtmlPaymentSourceWidget } from '@paydock/client-sdk/payment-source-widget';
 
 var list = new HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
 list.load();
@@ -3478,7 +3481,7 @@ You must create a button to turn it into checkout-button
 var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
 
@@ -4621,11 +4624,11 @@ This wrapper helps you to work with paydock api emdpoints
 var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { Api } from '@paydock/client-sdk';
-
+import { Api } from '@paydock/client-sdk/api';
+    
 var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
 ```
 
@@ -4638,11 +4641,11 @@ var response = await new paydock.Api('publicKey').setEnv('env').charge().preAuth
     });
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { Api } from '@paydock/client-sdk';
-
+import { Api } from '@paydock/client-sdk/api';
+    
 var response = await new Api('publicKey').setEnv('env').charge().preAuth({
       amount: 100,
       currency: 'AUD',
@@ -4652,7 +4655,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>
@@ -4699,10 +4702,10 @@ var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
 canvas3ds.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { Canvas3ds } from '@paydock/client-sdk';
+import { Canvas3ds } from '@paydock/client-sdk/canvas3ds';
 
 var list = new Canvas3ds('#widget', 'token');
 list.load();
@@ -4923,7 +4926,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
@@ -4943,18 +4946,18 @@ var widget = new paydock.VaultDisplayWidget('#widget', 'token');
 widget.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 
-import { VaultDisplayWidget } from '@paydock/client-sdk';
-
+import { VaultDisplayWidget } from '@paydock/client-sdk/vault-display-widget';
+    
 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>
@@ -4965,9 +4968,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');
@@ -5005,9 +5008,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>
@@ -5018,27 +5021,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',
@@ -5182,7 +5185,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -5207,7 +5210,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -5231,7 +5234,7 @@ let button = new paydock.WalletButtons(
 button.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
 import { WalletButtons } from '@paydock/client-sdk';
 
@@ -6378,57 +6381,54 @@ List of available event's name in the wallet button lifecycle
 | ON_CLICK | <code>string</code> | <code>&quot;onClick&quot;</code> | 
 
 
-# Secure Remote Commerce
-
-## Overview
+## Secure Remote Commerce
+You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#SRC).
 
-Integrate with Mastercard SRC using Paydock's Mastercard SRC widget.
-For a full description of the methods and parameters, reference the [README file](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.
 
 ## SRC simple example
 
-The following section provides an example use case and integration for the widget.
-
-### Create a Container
-
-To integrate the SRC checkout iFrame, create a container in your HTML code. This container serves as the placeholder for the iFrame.
+### Container
 
 ```html
+<div id="checkoutButton"></div>
 <div id="checkoutIframe"></div>
 ```
 
-### Initialize the Widget
+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.
 
-Use the following code to initialize your widget:
 
+### Initialization
 ```javascript
-var src = new paydock.MastercardSRCClickToPay(
+var src = new paydock.SRC(
+    "#checkoutButton",
     "#checkoutIframe",
-    "service_id",
+    "scheme_service_id",
     "paydock_public_key_or_access_token",
     {}, // meta
 );
 src.load();
 ```
 
-```javascript
+```javascript--es2015
 // ES2015 | TypeScript
-import { MastercardSRCClickToPay } from '@paydock/client-sdk';
-var src = new MastercardSRCClickToPay(
+
+import { SRC } from '@paydock/client-sdk';
+
+var src = new SRC(
+    "#checkoutButton",
     "#checkoutIframe",
-    "service_id",
+    "scheme_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.
+*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.
 
 ### Full example
 
-A full example of the container and the initialized widget is as follows:
-
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -6438,12 +6438,14 @@ A full example of the container and the initialized widget is as follows:
     <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.MastercardSRCClickToPay(
+        var src = new paydock.SRC(
+            "#checkoutButton",
             "#checkoutIframe",
-            "service_id",
+            "scheme_service_id",
             "paydock_public_key_or_access_token",
             {},
         );
@@ -6453,30 +6455,50 @@ A full example of the container and the initialized widget is as follows:
 </html>
 ```
 
-## Customize your SRC Checkout
 
-The following is an advanced example that includes customization. You can use these methods to enhance your checkout experience.
+## SRC advanced example
 
 ### Settings
 
 ```javascript
-src.setEnv('sandbox'); // set environment
+
+src.setEnv('sandbox'); // set enviroment
+
+src.hideButton(); // hide button
+
+src.showButton(); // show button
+
 src.hideCheckout(); // hide checkout iframe
+
 src.showCheckout(); // show checkout iframe
+
+src.on('checkoutButtonLoaded', () => {
+    console.log("Button loaded");
+});
+
+src.on('checkoutButtonClicked', () => {
+    console.log("Button clicked");
+});
+
 src.on('iframeLoaded', () => {
     console.log("Initial iframe loaded");
 });
+
 src.on('checkoutReady', () => {
     console.log("Checkout ready to be used");
 });
+
 src.on('checkoutCompleted', (token) => {
     console.log(token);
 });
+
 src.on('checkoutError', (error) => {
     console.log(error);
 });
 ```
 
+Here you can see how you can use this methods to customize your checkout experience
+
 ### Full example
 
 ```html
@@ -6488,73 +6510,64 @@ src.on('checkoutError', (error) => {
     <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.MastercardSRCClickToPay(
+        var src = new paydock.SRC(
+            "#checkoutButton",
             "#checkoutIframe",
-            "service_id",
+            "scheme_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
+## Customization options for address fields
+### Shipping address:
 
-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.
+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.
 
 ```
-var src = new paydock.MastercardSRCClickToPay(
+var src = new paydock.SRC(
+    "#checkoutButton",
     "#checkoutIframe",
-    "service_id",
+    "scheme_service_id",
     "paydock_public_key_or_access_token",
     {
         "dpa_transaction_options": {
-            "dpa_billing_preference": "FULL"
+            "dpa_shipping_preference": "ALL"
         }
     },
 );
 ```
 
-The SRC 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 SRC checkout, you can provide it alongside other information at the charge creation step:
+With this the Visa popup requires the shipping address from consumer, and these information will be stored in the Paydock charge.
 
-1. Disable the billing address in Paydock's SRC widget.
-2. Get your One Time Token from the SRC widget alongside other details that may have been collected outside the SRC checkout as the shipping address.
-3. Send the billing address when creating the charge.
+Another option is at time of creating the charge. Say that you have a different way of collecting the shipping address (outside Paydock checkout), you can then disable the shipping address on our SRC widget and send it when creating the charge creation after getting the One Time Token out of the SRC widget:
 
 ```
 POST v1/charges
+
 {
     "amount": "10.00",
     "currency": "AUD",
-    "token": "one_time_token",
+    "token": "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"
+            "gateway_id": "gateway_id"
         }
     },
     "shipping": {
@@ -6569,262 +6582,201 @@ POST v1/charges
 }
 ```
 
-## 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
+- Billing address:
 
-The following example demonstrates how to block the card:
+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:
 
 ```
-var src = new paydock.MastercardSRCClickToPay(
+var src = new paydock.SRC(
+    "#checkoutButton",
     "#checkoutIframe",
-    "service_id",
-    "paydock_public_key",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
     {
-        unaccepted_card_type: 'DEBIT'
+        "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"
+            }
+        }
     },
 );
 ```
 
-## Personalize the Style
+## Personalization Styling
 
-Customize the look and feel of your UI. The following example demonstrates changes in the styling of the buttons.
+To improve the experience in the use of the widget, it is allowed to send props that customize the UI.
 
 ### Example code
 
 ```
-var src = new paydock.MastercardSRCClickToPay(
+var src = new paydock.SRC(
+    "#checkoutButton",
     "#checkoutIframe",
-    "service_id",
+    "scheme_service_id",
     "paydock_public_key",
-    {},
 );
-src.setStyles({
-    enable_src_popup: true,
-    primary_button_color: 'red',
-    secondary_button_color: 'red',
-    primary_button_text_color: 'red',
-    secondary_button_text_color: 'red',
-    font_family: 'Arial',
-});
+
+button.setStyles({"primary_color":"#a83232","button_text_color":"#171e9c","font_family":"sans-serif"})
+
 ```
+## Event and Values
+
+| 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
 
 ## Classes
 
 <dl>
-<dt><a href="#MastercardSRCClickToPay">MastercardSRCClickToPay</a> ⇐ <code>SRC</code></dt>
-<dd><p>Class MastercardSRCClickToPay include methods for interacting with the MastercardSRC checkout and Manual Card option</p>
+<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>
 </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 SRC checkout</p>
+<dt><a href="#IVisaSRCMeta">IVisaSRCMeta</a> : <code>object</code></dt>
+<dd><p>Interface of data used for the Visa Checkout.</p>
 </dd>
 </dl>
 
-<a name="IMastercardSRCMeta" id="IMastercardSRCMeta" href="#IMastercardSRCMeta">&nbsp;</a>
+<a name="IVisaSRCMeta" id="IVisaSRCMeta" href="#IVisaSRCMeta">&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).
+## IVisaSRCMeta : <code>object</code>
+Interface of data used for the Visa Checkout.
 
 **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. |
+| [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. |
+| [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_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 SRC 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] | <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.&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. |
+| [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). // TODO: Confirm if it can be removed! |
+| [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'. |
+| [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"). |
 
-<a name="EventData" id="EventData" href="#EventData">&nbsp;</a>
+<a name="SRC" id="SRC" href="#SRC">&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 SRC 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 SRC checkout show in a popup window instead of embedded in iframe. |
-
-<a name="MastercardSRCClickToPay" id="MastercardSRCClickToPay" href="#MastercardSRCClickToPay">&nbsp;</a>
-
-## MastercardSRCClickToPay ⇐ <code>SRC</code>
-Class MastercardSRCClickToPay include methods for interacting with the MastercardSRC checkout and Manual Card option
+## SRC
+Class SRC include methods for interacting with different secure remote commerce options such as Visa SRC
 
 **Kind**: global class  
-**Extends**: <code>SRC</code>  
 
-* [MastercardSRCClickToPay](#MastercardSRCClickToPay) ⇐ <code>SRC</code>
-    * [new MastercardSRCClickToPay(iframe_selector, service_id, public_key_or_access_token, meta)](#new_MastercardSRCClickToPay_new)
-    * [.load()](#MastercardSRCClickToPay+load)
+* [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)
 
-<a name="new_MastercardSRCClickToPay_new" id="new_MastercardSRCClickToPay_new" href="#new_MastercardSRCClickToPay_new">&nbsp;</a>
+<a name="new_SRC_new" id="new_SRC_new" href="#new_SRC_new">&nbsp;</a>
 
-### new MastercardSRCClickToPay(iframe_selector, service_id, public_key_or_access_token, meta)
+### new SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, 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>IMastercardSRCMeta</code>](#IMastercardSRCMeta) | Data that configures the SRC checkout |
+| meta | [<code>IVisaSRCMeta</code>](#IVisaSRCMeta) | Data that configures the SRC checkout |
 
 **Example**  
 ```js
-var mastercardSRC = new MastercardSRCClickToPay('#checkoutIframe', 'service_id', 'public_key', {});
+var SRC = new SRC('#checkoutButton', '#checkoutIframe', 'service_id', 'public_key', {});
 ```
-<a name="MastercardSRCClickToPay+load" id="MastercardSRCClickToPay+load" href="#MastercardSRCClickToPay+load">&nbsp;</a>
-
-### mastercardSRCClickToPay.load()
-The final method after configuring the SRC to start the load process of SRC checkout
-
-**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
 <a name="SRC+setStyles" id="SRC+setStyles" href="#SRC+setStyles">&nbsp;</a>
 
-### mastercardSRCClickToPay.setStyles(fields)
+### srC.setStyles(fields)
 Object contain styles for widget - call before `.load()`.
 
-**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
-**Overrides**: [<code>setStyles</code>](#SRC+setStyles)  
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| fields | [<code>IStyles</code>](#IStyles) | name of styles which can be shown in widget [STYLE](STYLE) |
+| fields | <code>IStyles</code> | 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',
-});
+      button_text_color: '#32a852',
+      primary_color: '#32a852',
+      font_family: 'sans-serif',
+      card_schemes: ['visa']
+  });
 ```
+<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>
 
-### mastercardSRCClickToPay.setEnv(env, [alias])
+### srC.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>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
-**Overrides**: [<code>setEnv</code>](#SRC+setEnv)  
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -6837,27 +6789,25 @@ SRC.setEnv('production');
 ```
 <a name="SRC+getEnv" id="SRC+getEnv" href="#SRC+getEnv">&nbsp;</a>
 
-### mastercardSRCClickToPay.getEnv()
+### srC.getEnv()
 Method to read the current environment
 
-**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
-**Overrides**: [<code>getEnv</code>](#SRC+getEnv)  
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
 **Example**  
 ```js
 SRC.getEnv();
 ```
 <a name="SRC+on" id="SRC+on" href="#SRC+on">&nbsp;</a>
 
-### mastercardSRCClickToPay.on(eventName, [cb]) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
+### srC.on(eventName, [cb]) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
 Listen to events of SRC
 
-**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
-**Overrides**: [<code>on</code>](#SRC+on)  
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
 
 | 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) |
+| [cb] | <code>listener</code> |  |
 
 **Example**  
 ```js
@@ -6869,13 +6819,37 @@ SRC.on('checkoutCompleted').then(function (token) {
      console.log(token);
 });
 ```
+<a name="SRC+hideButton" id="SRC+hideButton" href="#SRC+hideButton">&nbsp;</a>
+
+### srC.hideButton([saveSize])
+Using this method you can hide button
+
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
+
+| 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.hideButton();
+```
+<a name="SRC+showButton" id="SRC+showButton" href="#SRC+showButton">&nbsp;</a>
+
+### srC.showButton()
+Using this method you can show the SRC button after using hideButton method
+
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Example**  
+```js
+SRC.showButton();
+```
 <a name="SRC+hideCheckout" id="SRC+hideCheckout" href="#SRC+hideCheckout">&nbsp;</a>
 
-### mastercardSRCClickToPay.hideCheckout([saveSize])
+### srC.hideCheckout([saveSize])
 Using this method you can hide checkout after load and button click
 
-**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
-**Overrides**: [<code>hideCheckout</code>](#SRC+hideCheckout)  
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -6887,33 +6861,30 @@ SRC.hideCheckout();
 ```
 <a name="SRC+showCheckout" id="SRC+showCheckout" href="#SRC+showCheckout">&nbsp;</a>
 
-### mastercardSRCClickToPay.showCheckout()
+### srC.showCheckout()
 Using this method you can show checkout after using hideCheckout method
 
-**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
-**Overrides**: [<code>showCheckout</code>](#SRC+showCheckout)  
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
 **Example**  
 ```js
 SRC.showCheckout()
 ```
 <a name="SRC+reload" id="SRC+reload" href="#SRC+reload">&nbsp;</a>
 
-### mastercardSRCClickToPay.reload()
+### srC.reload()
 Using this method you can reload the whole checkout
 
-**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
-**Overrides**: [<code>reload</code>](#SRC+reload)  
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
 **Example**  
 ```js
 SRC.reload()
 ```
 <a name="SRC+useAutoResize" id="SRC+useAutoResize" href="#SRC+useAutoResize">&nbsp;</a>
 
-### mastercardSRCClickToPay.useAutoResize()
+### srC.useAutoResize()
 Use this method for resize checkout iFrame according to content height, if applicable
 
-**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
-**Overrides**: [<code>useAutoResize</code>](#SRC+useAutoResize)  
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
 **Example**  
 ```js
 SRC.useAutoResize();
@@ -6925,28 +6896,15 @@ List of available event's name in the SRC 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 SRC Checkout flow is started, regardless of embedded or windowed mode. |
-| CHECKOUT_POPUP_CLOSE | <code>string</code> | <code>&quot;checkoutPopupClose&quot;</code> | Event sent when SRC 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. |
-
-<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> |  |
+| Param | Type | Default |
+| --- | --- | --- |
+| 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> | 
 
 
 ## License
-Copyright (c) 2024 paydock
+Copyright (c) 2023 paydock