@paydock/client-sdk 1.103.11-beta → 1.103.24-beta

package/README.md

@@ -5248,14 +5248,6 @@ In some situations you may want to forcibly close the checkout so that your user
 button.close();
 ```
 
-### Performing actions when the wallet button is clicked
-
-In some situations you may want to perform some validations or actions when the user clicks on the wallet button, for which you can use this method. Currently supported by Paypal, ApplePay and GooglePay wallets.
-
-```javascript
-button.onClick(() => console.log("Perform actions on button click"));
-```
-
 ### Performing actions when shipping info is updated
 
 In Flypay, Paypal, ApplePay via MPGS and GooglePay via MPGS integrations after each shipping info update the `onUpdate(data)` will be called with the selected shipping address information, plus selected shipping method when applicable for Paypal, ApplePay and GooglePay. Merchants should handle this callback, recalculate shipping costs in their server by analyzing the new data, and submit a backend to backend request to `POST charges/:id` with the new total amount and shipping amount (you can find the documentation of this call in the PayDock API documentation).
@@ -5383,51 +5375,30 @@ _(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_l
 <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
 <script>
     let button = new paydock.WalletButtons(
-        "#widget",
-        charge_token,
-        {
-            request_shipping: true,
-            pay_later: true,
-            standalone: false,
-            style: {
-                layout: 'horizontal',
-                color: 'blue',
-                shape: 'rect',
-                label: 'paypal',
-            },
-        }
-    );
+          "#widget",
+          charge_token,
+          {
+               request_shipping: true,
+               pay_later: true,
+               standalone: false,
+               style: {
+                    layout: 'horizontal',
+                    color: 'blue',
+                    shape: 'rect',
+                    label: 'paypal',
+               },
+          }
+     );
     button.setEnv('sandbox');
     button.onUnavailable(() => console.log("No wallet buttons available"));
     button.onUpdate((data) => {
-        console.log("Updating amount via a backend to backend call to POST charges/:id");
-        // call `POST charges/:id` to modify charge
-        button.update({ success: true });
-    });
+          console.log("Updating amount via a backend to backend call to POST charges/:id");
+          // call `POST charges/:id` to modify charge
+          button.update({ success: true });
+     });
     button.onPaymentSuccessful((data) => console.log("The payment was successful"));
     button.onPaymentError((data) => console.log("The payment was not successful"));
     button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
-
-    // Example 1: Asynchronous onClick handler
-    const asyncLogic = async () => {
-        // Perform asynchronous logic. Expectation is that a Promise is returned and attached to response via `attachResult`,
-        // and resolve or reject of it will dictate how wallet behaves.
-    }
-
-    button.onClick(({ data: { attachResult } }) => {
-        // Promise is attached to the result. On Paypal, when promise is resolved, the user Journey will continue.
-        // If no promise is attached then the Paypal journey will not depend on the promise being resolved or rejected
-        attachResult(asyncLogic());
-    });
-
-    // Example 2: Synchronous onClick handler
-    // button.onClick(({ data: { attachResult } }) => {
-    //     // Perform synchronous logic
-    //     console.log("Synchronous onClick: Button clicked");
-    //     // Optionally return a boolean flag to halt the operation
-    //     attachResult(false);
-    // });
-
     button.load();
 </script>
 </html>
@@ -5561,7 +5532,6 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `ra
     button.onUnavailable(() => 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.onClick(() => console.log("On WalletButton Click"));
     button.onUpdate((data) => {
         console.log("Updating amount via a backend to backend call to POST charges/:id");
         // call `POST charges/:id` to modify charge
@@ -5594,6 +5564,7 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `ra
 Also, for **ApplePay via MPGS** you can initialize the `ApplePayPaymentRequest` with your own values instead of using the default ones. Below you can see an example on how to initialize the `ApplePayPaymentRequest` with the `raw_data_initialization` meta field.
 
 Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpecification` with your own values instead of using the default ones. Below you can see an example on how to initialize the `PaymentMethodSpecification` with the `raw_data_initialization` meta field.
+
 ### ApplePay and GooglePay via MPGS Raw data initialization example
 
 ```html
@@ -5725,24 +5696,6 @@ Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpeci
 ## Interfaces
 
 <dl>
-<dt><a href="#IEventData">IEventData</a></dt>
-<dd><p>Interface of data from events.</p>
-</dd>
-<dt><a href="#IWalletPaymentSuccessful">IWalletPaymentSuccessful</a></dt>
-<dd><p>Interface of data from a successful payment result.</p>
-</dd>
-<dt><a href="#IWalletUpdate">IWalletUpdate</a></dt>
-<dd><p>Interface of data from an update event.</p>
-</dd>
-<dt><a href="#IWalletOnClick">IWalletOnClick</a></dt>
-<dd><p>Interface of data from a wallet onClick event.</p>
-</dd>
-<dt><a href="#IWalletUnavailable">IWalletUnavailable</a></dt>
-<dd><p>Interface of data from an unavailable event.</p>
-</dd>
-<dt><a href="#IWalletUpdateData">IWalletUpdateData</a></dt>
-<dd><p>Interface of data for wallet button <code>update</code> call.</p>
-</dd>
 <dt><a href="#IWalletMeta">IWalletMeta</a> : <code>object</code></dt>
 <dd><p>Interface of data used by the wallet checkout and payment proccess.</p>
 </dd>
@@ -5757,100 +5710,6 @@ Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpeci
 </dd>
 </dl>
 
-<a name="IEventData" id="IEventData" href="#IEventData">&nbsp;</a>
-
-## IEventData
-Interface of data from events.
-
-**Kind**: global interface  
-
-| Param | Type |
-| --- | --- |
-| event | <code>string</code> | 
-| data | <code>void</code> \| [<code>IWalletPaymentSuccessful</code>](#IWalletPaymentSuccessful) \| [<code>IWalletUpdate</code>](#IWalletUpdate) \| [<code>IWalletUnavailable</code>](#IWalletUnavailable) \| [<code>IWalletOnClick</code>](#IWalletOnClick) \| <code>any</code> | 
-
-<a name="IWalletPaymentSuccessful" id="IWalletPaymentSuccessful" href="#IWalletPaymentSuccessful">&nbsp;</a>
-
-## IWalletPaymentSuccessful
-Interface of data from a successful payment result.
-
-**Kind**: global interface  
-
-| Param | Type |
-| --- | --- |
-| id | <code>string</code> | 
-| amount | <code>number</code> | 
-| currency | <code>string</code> | 
-| status | <code>string</code> | 
-| [payer_name] | <code>string</code> | 
-| [payer_email] | <code>string</code> | 
-| [payer_phone] | <code>string</code> | 
-
-<a name="IWalletUpdate" id="IWalletUpdate" href="#IWalletUpdate">&nbsp;</a>
-
-## IWalletUpdate
-Interface of data from an update event.
-
-**Kind**: global interface  
-
-| Param | Type |
-| --- | --- |
-| [wallet_response_code] | <code>string</code> | 
-| [wallet_session_id] | <code>string</code> | 
-| [payment_source] | <code>object</code> | 
-| [payment_source.wallet_payment_method_id] | <code>string</code> | 
-| [payment_source.card_number_last4] | <code>string</code> | 
-| [payment_source.card_scheme] | <code>string</code> | 
-| [wallet_loyalty_account] | <code>object</code> | 
-| [wallet_loyalty_account.id] | <code>string</code> | 
-| [wallet_loyalty_account.barcode] | <code>string</code> | 
-| [shipping] | <code>object</code> | 
-| [shipping.address_line1] | <code>string</code> | 
-| [shipping.address_line2] | <code>string</code> | 
-| [shipping.address_postcode] | <code>string</code> | 
-| [shipping.address_city] | <code>string</code> | 
-| [shipping.address_state] | <code>string</code> | 
-| [shipping.address_country] | <code>string</code> | 
-| [shipping.address_company] | <code>string</code> | 
-| [shipping.post_office_box_number] | <code>string</code> | 
-| [shipping.wallet_address_id] | <code>string</code> | 
-| [shipping.wallet_address_name] | <code>string</code> | 
-| [shipping.wallet_address_created_timestamp] | <code>string</code> | 
-| [shipping.wallet_address_updated_timestamp] | <code>string</code> | 
-
-<a name="IWalletOnClick" id="IWalletOnClick" href="#IWalletOnClick">&nbsp;</a>
-
-## IWalletOnClick
-Interface of data from a wallet onClick event.
-
-**Kind**: global interface  
-
-| Param | Description |
-| --- | --- |
-| attachResult | Method to be called that attaches a result to the wallet onClick operation. When handler is synchronous, this method is optionally called with a boolean flag indicating validation result. When handler executes asynchronous operations, this method must be called with the Promise to have the wallet process wait for its completion or rejection. |
-
-<a name="IWalletUnavailable" id="IWalletUnavailable" href="#IWalletUnavailable">&nbsp;</a>
-
-## IWalletUnavailable
-Interface of data from an unavailable event.
-
-**Kind**: global interface  
-
-| 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'. |
-
-<a name="IWalletUpdateData" id="IWalletUpdateData" href="#IWalletUpdateData">&nbsp;</a>
-
-## IWalletUpdateData
-Interface of data for wallet button `update` call.
-
-**Kind**: global interface  
-
-| Param | Type |
-| --- | --- |
-| success | <code>boolean</code> | 
-
 <a name="IWalletMeta" id="IWalletMeta" href="#IWalletMeta">&nbsp;</a>
 
 ## IWalletMeta : <code>object</code>
@@ -5935,19 +5794,14 @@ Class WalletButtons to work with different E-Wallets within html (currently supp
     * [.load()](#WalletButtons+load)
     * [.update()](#WalletButtons+update)
     * [.setEnv(env, [alias])](#WalletButtons+setEnv)
-    * [.enable()](#WalletButtons+enable)
-    * [.disable()](#WalletButtons+disable)
     * [.close()](#WalletButtons+close)
-    * [.on(eventName, [cb])](#WalletButtons+on) ⇒ [<code>Promise.&lt;IEventData&gt;</code>](#IEventData) \| <code>void</code>
+    * [.on(eventName, [cb])](#WalletButtons+on) ⇒ <code>Promise.&lt;IEventData&gt;</code> \| <code>void</code>
     * [.onUnavailable([handler])](#WalletButtons+onUnavailable)
     * [.onUpdate([handler])](#WalletButtons+onUpdate)
     * [.onPaymentSuccessful([handler])](#WalletButtons+onPaymentSuccessful)
     * [.onPaymentInReview([handler])](#WalletButtons+onPaymentInReview)
     * [.onPaymentError([handler])](#WalletButtons+onPaymentError)
     * [.onAuthTokensChanged([handler])](#WalletButtons+onAuthTokensChanged)
-    * [.onClick(handler)](#WalletButtons+onClick)
-    * [.onCheckoutOpen(handler)](#WalletButtons+onCheckoutOpen)
-    * [.onCheckoutClose(handler)](#WalletButtons+onCheckoutClose)
 
 <a name="new_WalletButtons_new" id="new_WalletButtons_new" href="#new_WalletButtons_new">&nbsp;</a>
 
@@ -6058,26 +5912,6 @@ Bear in mind that you must set an environment before calling `button.load()`.
 ```js
 button.setEnv('production', 'paydock.com');
 ```
-<a name="WalletButtons+enable" id="WalletButtons+enable" href="#WalletButtons+enable">&nbsp;</a>
-
-### walletButtons.enable()
-Current method can enable the payment button. This method is only supported for Flypay V2.
-
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-**Example**  
-```js
-button.enable();
-```
-<a name="WalletButtons+disable" id="WalletButtons+disable" href="#WalletButtons+disable">&nbsp;</a>
-
-### walletButtons.disable()
-Current method can disable the payment button. This method is only supported for Flypay V2.
-
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-**Example**  
-```js
-button.disable('production', 'paydock.com');
-```
 <a name="WalletButtons+close" id="WalletButtons+close" href="#WalletButtons+close">&nbsp;</a>
 
 ### walletButtons.close()
@@ -6090,7 +5924,7 @@ button.close();
 ```
 <a name="WalletButtons+on" id="WalletButtons+on" href="#WalletButtons+on">&nbsp;</a>
 
-### walletButtons.on(eventName, [cb]) ⇒ [<code>Promise.&lt;IEventData&gt;</code>](#IEventData) \| <code>void</code>
+### walletButtons.on(eventName, [cb]) ⇒ <code>Promise.&lt;IEventData&gt;</code> \| <code>void</code>
 Listen to events of button. `unavailable` returns no data, `paymentSuccessful` returns IWalletPaymentSuccessful
 for Stripe or full response for Flypay, and `paymentError` an error.
 
@@ -6253,63 +6087,6 @@ button.onAuthTokensChanged().then((eventData) => {
     console.log('Authentication tokens changed:', eventData);
 });
 ```
-<a name="WalletButtons+onClick" id="WalletButtons+onClick" href="#WalletButtons+onClick">&nbsp;</a>
-
-### walletButtons.onClick(handler)
-Registers a callback function to be invoked when the wallet button gets clicked.
-There are two operational modes supported, Synchronous and Asynchronous.
-When asynchronous operations need to occur on the callback handler, attaching the Promise via `attachResult` is required to have the wallet wait for a result.
-When synchronous operations occur on the callback handler, attaching a boolean result via `attachResult` is optional to control the execution flow.
-Note this is supported for Paypal, GooglePay and ApplePay wallet buttons at the moment.
-
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| handler | <code>listener</code> | Function to be called when the wallet button is clicked. |
-
-**Example**  
-```js
-button.onClick((data) => {
-     performValidationLogic();
-});
-```
-<a name="WalletButtons+onCheckoutOpen" id="WalletButtons+onCheckoutOpen" href="#WalletButtons+onCheckoutOpen">&nbsp;</a>
-
-### walletButtons.onCheckoutOpen(handler)
-Registers a callback function to be invoked when the wallet checkout opens.
-Note this is supported for FlypayV2 wallet button at the moment.
-
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| handler | <code>listener</code> | Function to be called when the wallet checkout opens. |
-
-**Example**  
-```js
-button.onCheckoutOpen((data) => {
-     console.log('Checkout opens');
-});
-```
-<a name="WalletButtons+onCheckoutClose" id="WalletButtons+onCheckoutClose" href="#WalletButtons+onCheckoutClose">&nbsp;</a>
-
-### walletButtons.onCheckoutClose(handler)
-Registers a callback function to be invoked when the wallet checkout closes.
-Note this is supported for FlypayV2 wallet button at the moment.
-
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| handler | <code>listener</code> | Function to be called when the wallet checkout closes. |
-
-**Example**  
-```js
-button.onCheckoutClose(() => {
-     console.log('Wallet checkout closes');
-});
-```
 <a name="EVENT" id="EVENT" href="#EVENT">&nbsp;</a>
 
 ## EVENT : <code>object</code>
@@ -6323,32 +6100,27 @@ List of available event's name in the wallet button lifecycle
 | UPDATE | <code>string</code> | <code>&quot;update&quot;</code> | 
 | PAYMENT_SUCCESSFUL | <code>string</code> | <code>&quot;paymentSuccessful&quot;</code> | 
 | PAYMENT_ERROR | <code>string</code> | <code>&quot;paymentError&quot;</code> | 
-| 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.
+This widget provides you with the ability to easily integrate with Mastercard SRC.
 
 ## SRC simple example
 
 ### Container
+To integrate the SRC checkout iFrame you first need to create a container within your HTML code. This container will serve as the placeholder for the iFrame.
 
 ```html
-<div id="checkoutButton"></div>
 <div id="checkoutIframe"></div>
 ```
 
-You must create a container for the initial checkout button, and a different one for the checkout iFrame. Inside the first tag the button will be initialized, and inside the second one the iFrame will be loaded once the button is clicked.
-
-
 ### Initialization
 ```javascript
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key_or_access_token",
     {}, // meta
 );
@@ -6358,19 +6130,18 @@ src.load();
 ```javascript--es2015
 // ES2015 | TypeScript
 
-import { SRC } from '@paydock/client-sdk';
+import { MastercardSRCClickToPay } from '@paydock/client-sdk';
 
-var src = new SRC(
-    "#checkoutButton",
+var src = new MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key_or_access_token",
     {}, // meta
 );
 src.load();
 ```
 
-*NOTE:* it's highly recommended to use a Paydock Access Token instead of the public key for security reasons. When creating it, you will need to enable the `Secure Remote Commerce` and add a whiteliste for the domain of your checkout screen.
+*NOTE:* it's highly recommended to use a Paydock Access Token instead of the public key for security reasons in production environments. When creating it, you will need to enable the `Secure Remote Commerce` and add a whitelist for the domain of your checkout screen.
 
 ### Full example
 
@@ -6383,14 +6154,12 @@ src.load();
     <style>iframe {border: 0;width: 40%;height: 300px;}</style>
 </head>
 <body>
-    <div id="checkoutButton"></div>
     <div id="checkoutIframe"></div>
     <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
-        var src = new paydock.SRC(
-            "#checkoutButton",
+        var src = new paydock.MastercardSRCClickToPay(
             "#checkoutIframe",
-            "scheme_service_id",
+            "service_id",
             "paydock_public_key_or_access_token",
             {},
         );
@@ -6406,25 +6175,12 @@ src.load();
 ### Settings
 
 ```javascript
-
-src.setEnv('sandbox'); // set enviroment
-
-src.hideButton(); // hide button
-
-src.showButton(); // show button
+src.setEnv('sandbox'); // set environment
 
 src.hideCheckout(); // hide checkout iframe
 
 src.showCheckout(); // show checkout iframe
 
-src.on('checkoutButtonLoaded', () => {
-    console.log("Button loaded");
-});
-
-src.on('checkoutButtonClicked', () => {
-    console.log("Button clicked");
-});
-
 src.on('iframeLoaded', () => {
     console.log("Initial iframe loaded");
 });
@@ -6455,18 +6211,20 @@ Here you can see how you can use this methods to customize your checkout experie
     <style>iframe {border: 0;width: 40%;height: 450px;}</style>
 </head>
 <body>
-    <div id="checkoutButton"></div>
     <div id="checkoutIframe"></div>
     <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
-        var src = new paydock.SRC(
-            "#checkoutButton",
+        var src = new paydock.MastercardSRCClickToPay(
             "#checkoutIframe",
-            "scheme_service_id",
+            "service_id",
             "paydock_public_key_or_access_token",
             {},
         );
 
+        src.on('iframeLoaded', () => {
+            console.log("Initial iframe loaded");
+        });
+
         src.on('checkoutReady', () => {
             console.log("Checkout ready to be used");
         });
@@ -6474,34 +6232,37 @@ Here you can see how you can use this methods to customize your checkout experie
         src.on('checkoutCompleted', (token) => {
             console.log(token);
         });
+
+        src.on('checkoutError', (error) => {
+            console.log(error);
+        });
+
         src.load();
     </script>
 </body>
 </html>
 ```
 
-## Customization options for address fields
-### Shipping address:
+## Customization options for billing address fields
 
-To customize shipping address experience we use a flag that manages how VisaSRC requires or not shipping address to the customer. Options are NONE (default option), POSTAL_COUNTRY or ALL.
+To customize billing address experience we use a flag that manages how MastercardSRC requires or not billing address to the customer. Options are NONE (default option), POSTAL_COUNTRY or FULL.
 
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key_or_access_token",
     {
         "dpa_transaction_options": {
-            "dpa_shipping_preference": "ALL"
+            "dpa_billing_preference": "FULL"
         }
     },
 );
 ```
 
-With this the Visa popup requires the shipping address from consumer, and these information will be stored in the Paydock charge.
+With this the SRC checkout will require the billing address from consumer and be returned as part of the checkout data. These information will be stored and leveraged in the Paydock charge as well.
 
-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:
+Another option is to provide it at the time of creating the charge. Say that you have a different way of collecting the billing address (outside SRC checkout), you can then disable the shipping address on our SRC widget and send it when creating the charge after getting the One Time Token out of the SRC widget, alongside other details that may have been collected outside the SRC checkout as the shipping address.
 
 ```
 POST v1/charges
@@ -6509,10 +6270,16 @@ POST v1/charges
 {
     "amount": "10.00",
     "currency": "AUD",
-    "token": "token",
+    "token": "one_time_token",
     "customer": {
         "payment_source": {
-            "gateway_id": "gateway_id"
+            "gateway_id": "gateway_id",
+            "address_line1": "address_line1",
+            "address_line2": "address_line2",
+            "address_city": "address_city",
+            "address_postcode": "address_postcode",
+            "address_state": "address_state",
+            "address_country": "address_country"
         }
     },
     "shipping": {
@@ -6527,201 +6294,262 @@ POST v1/charges
 }
 ```
 
-- Billing address:
+## Customization options for accepted cards
+
+To improve the experience in the use of the widget, it is allowed to send a flag `unaccepted_card_type` to block the usage of an specific card type. The available options are 'DEBIT' and 'CREDIT'.
 
-Billing address fields are always present on the checkout and required when adding a new credit card (or for new consumer checkout). You can send billing fields on the meta data to pre-fill these fields inside the customer object:
+### Example code
 
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key_or_access_token",
+    "service_id",
+    "paydock_public_key",
     {
-        "customer": {
-            "email": "test@email.com",
-            "first_name": "Name",
-            "last_name": "Surname",
-            "phone": {
-                "country_code": "1",
-                "phone": "2124567890"
-            },
-            "payment_source": {
-                "address_line1": "Line 1",
-                "address_line2": "Line 2",
-                "address_city": "Miami",
-                "address_postcode": "33126",
-                "address_state": "FL",
-                "address_country": "US"
-            }
-        }
+        unaccepted_card_type: 'DEBIT'
     },
 );
+
 ```
 
-## Personalization Styling
+## Styling Personalization
 
-To improve the experience in the use of the widget, it is allowed to send props that customize the UI.
+To improve the experience in the use of the widget, it is allowed to send props that customize the UI look and feel.
 
 ### Example code
 
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key",
+    {},
 );
 
-button.setStyles({"primary_color":"#a83232","button_text_color":"#171e9c","font_family":"sans-serif"})
-
+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',
+});
 ```
-## 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="#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="#MastercardSRCClickToPay">MastercardSRCClickToPay</a> ⇐ <code>SRC</code></dt>
+<dd><p>Class MastercardSRCClickToPay include methods for interacting with the MastercardSRC checkout and Manual Card option</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="#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>
 </dd>
 </dl>
 
-<a name="IVisaSRCMeta" id="IVisaSRCMeta" href="#IVisaSRCMeta">&nbsp;</a>
+<a name="IMastercardSRCMeta" id="IMastercardSRCMeta" href="#IMastercardSRCMeta">&nbsp;</a>
 
-## IVisaSRCMeta : <code>object</code>
-Interface of data used for the Visa Checkout.
+## 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 |
 | --- | --- | --- |
-| [srci_transaction_id] | <code>string</code> | Used to identify the SRC Id. |
+| [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 in. |
+| [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_transaction_options] | <code>object</code> | Object that stores options for creating a trasaction with DPA. |
+| [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.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. |
+| [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.country_code] | <code>string</code> | Customer phone country code (example "1" for US). // TODO: Confirm if it can be removed! |
 | [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"). |
+| [unaccepted_card_type] | <code>string</code> | Used to block a specific card type. Options are 'CREDIT', 'DEBIT'. |
+
+<a name="EventData" id="EventData" href="#EventData">&nbsp;</a>
+
+## EventData : <code>object</code>
+Interface for data returned in callbacks
 
-<a name="SRC" id="SRC" href="#SRC">&nbsp;</a>
+**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  
 
-## SRC
-Class SRC include methods for interacting with different secure remote commerce options such as Visa SRC
+| 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
 
 **Kind**: global class  
+**Extends**: <code>SRC</code>  
 
-* [SRC](#SRC)
-    * [new SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, meta)](#new_SRC_new)
+* [MastercardSRCClickToPay](#MastercardSRCClickToPay) ⇐ <code>SRC</code>
+    * [new MastercardSRCClickToPay(iframe_selector, service_id, public_key_or_access_token, meta)](#new_MastercardSRCClickToPay_new)
+    * [.load()](#MastercardSRCClickToPay+load)
     * [.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_SRC_new" id="new_SRC_new" href="#new_SRC_new">&nbsp;</a>
+<a name="new_MastercardSRCClickToPay_new" id="new_MastercardSRCClickToPay_new" href="#new_MastercardSRCClickToPay_new">&nbsp;</a>
 
-### new SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, meta)
+### new MastercardSRCClickToPay(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>IVisaSRCMeta</code>](#IVisaSRCMeta) | Data that configures the SRC checkout |
+| meta | [<code>IMastercardSRCMeta</code>](#IMastercardSRCMeta) | Data that configures the SRC checkout |
 
 **Example**  
 ```js
-var SRC = new SRC('#checkoutButton', '#checkoutIframe', 'service_id', 'public_key', {});
+var mastercardSRC = new MastercardSRCClickToPay('#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>
 
-### srC.setStyles(fields)
+### mastercardSRCClickToPay.setStyles(fields)
 Object contain styles for widget - call before `.load()`.
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
+**Overrides**: [<code>setStyles</code>](#SRC+setStyles)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| fields | <code>IStyles</code> | name of styles which can be shown in widget [STYLE](STYLE) |
+| fields | [<code>IStyles</code>](#IStyles) | name of styles which can be shown in widget [STYLE](STYLE) |
 
 **Example**  
 ```js
 widget.setStyles({
-      button_text_color: '#32a852',
-      primary_color: '#32a852',
-      font_family: 'sans-serif',
-      card_schemes: ['visa']
-  });
+    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+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>
 
-### srC.setEnv(env, [alias])
+### mastercardSRCClickToPay.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>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
+**Overrides**: [<code>setEnv</code>](#SRC+setEnv)  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -6734,25 +6562,27 @@ SRC.setEnv('production');
 ```
 <a name="SRC+getEnv" id="SRC+getEnv" href="#SRC+getEnv">&nbsp;</a>
 
-### srC.getEnv()
+### mastercardSRCClickToPay.getEnv()
 Method to read the current environment
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
+**Overrides**: [<code>getEnv</code>](#SRC+getEnv)  
 **Example**  
 ```js
 SRC.getEnv();
 ```
 <a name="SRC+on" id="SRC+on" href="#SRC+on">&nbsp;</a>
 
-### srC.on(eventName, [cb]) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
+### mastercardSRCClickToPay.on(eventName, [cb]) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
 Listen to events of SRC
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
+**Overrides**: [<code>on</code>](#SRC+on)  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | eventName | <code>string</code> | Available event names [EVENT](#EVENT) |
-| [cb] | <code>listener</code> |  |
+| [cb] | <code>listener</code> | The callback to handle the event. When available, it will send back data of type [EventData](#EventData) |
 
 **Example**  
 ```js
@@ -6764,37 +6594,13 @@ 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>
 
-### srC.hideCheckout([saveSize])
+### mastercardSRCClickToPay.hideCheckout([saveSize])
 Using this method you can hide checkout after load and button click
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
+**Overrides**: [<code>hideCheckout</code>](#SRC+hideCheckout)  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -6806,30 +6612,33 @@ SRC.hideCheckout();
 ```
 <a name="SRC+showCheckout" id="SRC+showCheckout" href="#SRC+showCheckout">&nbsp;</a>
 
-### srC.showCheckout()
+### mastercardSRCClickToPay.showCheckout()
 Using this method you can show checkout after using hideCheckout method
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
+**Overrides**: [<code>showCheckout</code>](#SRC+showCheckout)  
 **Example**  
 ```js
 SRC.showCheckout()
 ```
 <a name="SRC+reload" id="SRC+reload" href="#SRC+reload">&nbsp;</a>
 
-### srC.reload()
+### mastercardSRCClickToPay.reload()
 Using this method you can reload the whole checkout
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
+**Overrides**: [<code>reload</code>](#SRC+reload)  
 **Example**  
 ```js
 SRC.reload()
 ```
 <a name="SRC+useAutoResize" id="SRC+useAutoResize" href="#SRC+useAutoResize">&nbsp;</a>
 
-### srC.useAutoResize()
+### mastercardSRCClickToPay.useAutoResize()
 Use this method for resize checkout iFrame according to content height, if applicable
 
-**Kind**: instance method of [<code>SRC</code>](#SRC)  
+**Kind**: instance method of [<code>MastercardSRCClickToPay</code>](#MastercardSRCClickToPay)  
+**Overrides**: [<code>useAutoResize</code>](#SRC+useAutoResize)  
 **Example**  
 ```js
 SRC.useAutoResize();
@@ -6841,15 +6650,28 @@ List of available event's name in the SRC checkout lifecycle
 
 **Kind**: global enum  
 
-| 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> | 
+| 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> |  |
 
 
 ## License
-Copyright (c) 2023 paydock
+Copyright (c) 2024 paydock