@paydock/client-sdk 1.11.3-beta → 1.11.5-beta

package/README.md

@@ -4868,183 +4868,615 @@ The final method to beginning, the load process of widget to html
 
 **Kind**: instance method of [<code>VaultDisplayWidget</code>](#VaultDisplayWidget)  
 
-## Classes
-
-<dl>
-<dt><a href="#WalletButtons">WalletButtons</a></dt>
-<dd><p>Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)</p>
-</dd>
-</dl>
-
-## Constants
+## Wallet Buttons
+You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#wallet-buttons-simple-example)
 
-<dl>
-<dt><a href="#EVENT">EVENT</a> : <code>object</code></dt>
-<dd><p>List of available event&#39;s name in the wallet button lifecycle</p>
-</dd>
-</dl>
+Wallet Buttons allow you to easily integrate different E-Wallets into your checkout.
+Currently supports ApplePay, Google Pay and Apple Pay via Stripe, Flypay checkout and Paypal Smart Buttons Checkout.
 
-## Interfaces
+If available in your client environment, you will display a simple button that upon clicking it the user will follow the standard flow for the appropriate Wallet. If not available an event will be raised and no button will be displayed.
 
-<dl>
-<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>
-<dt><a href="#IApplePayShippingOption">IApplePayShippingOption</a> : <code>object</code></dt>
-<dd><p>Interface of Shipping Options for ApplePay</p>
-</dd>
-<dt><a href="#IGooglePayShippingOption">IGooglePayShippingOption</a> : <code>object</code></dt>
-<dd><p>Interface of Shipping Options for GooglePay</p>
-</dd>
-<dt><a href="#IPayPalShippingOption">IPayPalShippingOption</a> : <code>object</code></dt>
-<dd><p>Interface of Shipping Options for PayPal</p>
-</dd>
-</dl>
+## Wallet Buttons simple example
 
-<a name="IWalletMeta" id="IWalletMeta"></a>
+### Container
 
-## IWalletMeta : <code>object</code>
-Interface of data used by the wallet checkout and payment proccess.
+```html
+<div id="widget"></div>
+```
 
-**Kind**: global interface  
+You must create a container for the Wallet Buttons. Inside this tag, the button will be initialized.
 
-| Param | Type | Description |
-| --- | --- | --- |
-| [amount_label] | <code>string</code> | Label shown next to the total amount to be paid. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal]. |
-| [country] | <code>string</code> | Country of the user. 2 letter ISO code format. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal]. |
-| [pay_later] | <code>string</code> | Used to enable Pay Later feature in PayPal Smart Checkout WalletButton integration when available. Optional for [PayPal]. N/A for other wallets. |
-| [show_billing_address] | <code>boolean</code> | Used to hide/show the billing address on ApplePay and GooglePay popups. Default value is false. Optional for [ApplePay, GooglePay]. N/A for other wallets. |
-| [request_payer_name] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
-| [request_payer_email] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
-| [request_payer_phone] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
-| [request_shipping] | <code>boolean</code> | Used to request or not shipping address in the Wallet checkout, being able to handle amount changes via the `update` event. Optional for [FlyPay, PayPal, ApplePay, GooglePay]. N/A for [Stripe]. |
-| [shipping_options] | [<code>Array.&lt;IApplePayShippingOption&gt;</code>](#IApplePayShippingOption) \| [<code>Array.&lt;IPayPalShippingOption&gt;</code>](#IPayPalShippingOption) | Used to provide available shipping options.(To use shipping_options the request_shipping flag should be true). Optional for [ApplePay]. N/A for the other wallets. |
-| [merchant_name] | <code>string</code> | Merchant Name used for GooglePay integration via MPGS. Required for [GooglePay]. N/A for other wallets. |
-| [raw_data_initialization] | <code>object</code> | Used to provide values to initialize wallet with raw data. Optional for [ApplePay]. N/A for the other wallets. |
-| [style] | <code>object</code> | Used to style PayPal buttons, check possible values at https://developer.paypal.com/docs/business/checkout/reference/style-guide. Also used at ApplePay to select button type. Optional for [PayPal, ApplePay]. N/A for [Stripe, FlyPay]. |
-| [style.button_type] | <code>object</code> | Used to select ApplePay button type (e.g: 'buy','donate', etc), check possible values at https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css. Optional for [ApplePay]. N/A for other wallets. |
-| [wallets] | <code>array</code> | By default if this is not sent or empty, we will try to show either Apple Pay or Google Pay buttons. This can be limited sending the following array in this field: ['apple','google]. Optional for [Stripe, ApplePay, GooglePay]. N/A for other wallets. |
+Before initializing the button, you must perform a POST request to `charges/wallet` from a secure environment like your server. This call will return a token that is required to load the button and securely complete the payment. You can find the documentation to this call in the PayDock API documentation.
 
-<a name="IApplePayShippingOption" id="IApplePayShippingOption"></a>
+### Initialization
+The following is the minimum required initialization parameters for Apple Pay and Google Pay via Stripe:
+```javascript
+let button = new paydock.WalletButtons(
+    "#widget",
+    token,
+    {
+        amount_label: "Total",
+        country: "DE",
+    }
+);
+button.load();
+```
 
-## IApplePayShippingOption : <code>object</code>
-Interface of Shipping Options for ApplePay
+```javascript--es2015
+// ES2015 | TypeScript
+import { WalletButtons } from '@paydock/client-sdk';
 
-**Kind**: global interface  
+var button = new WalletButtons(
+    '#widget',
+    token,
+    {
+        amount_label: 'Total',
+        country: 'DE',
+    }
+);
+button.load();
+```
 
-| Param | Type | Description |
-| --- | --- | --- |
-| [id] | <code>string</code> | Identifier of the Shipping Option. Required. |
-| [label] | <code>string</code> | Identifier of the Shipping Option. Required. |
-| [amount] | <code>string</code> | Amount of the Shipping Option. Required. |
-| [detail] | <code>string</code> | Details of the Shipping Option. Required. |
-| [type] | <code>string</code> | Type of the Shipping Option. Values can be 'ELECTRONIC', 'GROUND', 'NOT_SHIPPED', 'OVERNIGHT', 'PICKUP', 'PRIORITY', 'SAME_DAY'. Optional. |
+Flypay and Paypal wallets do not require any meta sent to the wallet, so the following is enough for initialization:
+```javascript
+let button = new paydock.WalletButtons(
+    "#widget",
+    token,
+    {}
+);
+button.load();
+```
 
-<a name="IGooglePayShippingOption" id="IGooglePayShippingOption"></a>
+```javascript--es2015
+// ES2015 | TypeScript
+import { WalletButtons } from '@paydock/client-sdk';
 
-## IGooglePayShippingOption : <code>object</code>
-Interface of Shipping Options for GooglePay
+var button = new WalletButtons(
+    '#widget',
+    token,
+    {}
+);
+button.load();
+```
+### Setting environment
 
-**Kind**: global interface  
+Current method can change environment. By default environment = sandbox.
+Bear in mind that you must set an environment before calling `button.load()`.
 
-| Param | Type | Description |
-| --- | --- | --- |
-| [id] | <code>string</code> | Identifier of the Shipping Option. Required. |
-| [label] | <code>string</code> | Identifier of the Shipping Option. Required. |
-| [detail] | <code>string</code> | Details of the Shipping Option. Optional. |
-| [type] | <code>string</code> | Type of the Shipping Option. Values can be 'ELECTRONIC', 'GROUND', 'NOT_SHIPPED', 'OVERNIGHT', 'PICKUP', 'PRIORITY', 'SAME_DAY'. Optional. |
+```javascript
+button.setEnv('sandbox');
+```
 
-<a name="IPayPalShippingOption" id="IPayPalShippingOption"></a>
+### Full example
 
-## IPayPalShippingOption : <code>object</code>
-Interface of Shipping Options for PayPal
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock Wallet Button!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+<script>
+        let button = new paydock.WalletButtons(
+            "#widget",
+            token,
+            {
+                amount_label: "Total",
+                country: "DE",
+            }
+        );
+        button.load();
+</script>
+</html>
+```
 
-**Kind**: global interface  
+## Wallet Buttons advanced example
 
-| Param | Type | Description |
-| --- | --- | --- |
-| [id] | <code>string</code> | Identifier of the Shipping Option. Required. |
-| [label] | <code>string</code> | Identifier of the Shipping Option. Required. |
-| [amount] | <code>string</code> | Amount of the Shipping Option. Required. |
-| [currency] | <code>string</code> | Currency of the Shipping Option. Required. |
-| [type] | <code>string</code> | Type of the Shipping Option. Values can be 'SHIPPING' or 'PICKUP'. Required. |
+### Checking for button availability
 
-<a name="WalletButtons" id="WalletButtons"></a>
+If the customer's browser is not supported, or the customer does not have any card added to their Google Pay or Apple Pay wallets, the button will not load. In this case the callback onUnavailable() will be called. You can define the behavior of this function before loading the button.
 
-## WalletButtons
-Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)
+```javascript
+button.onUnavailable(() => console.log("No wallet buttons available"));
+```
 
-**Kind**: global class  
+### Forcibly closing the checkout
 
-* [WalletButtons](#WalletButtons)
-    * [new exports.WalletButtons(selector, chargeToken, object)](#new_WalletButtons_new)
-    * [.load()](#WalletButtons+load)
-    * [.update()](#WalletButtons+update)
-    * [.setEnv(env, [alias])](#WalletButtons+setEnv)
-    * [.close()](#WalletButtons+close)
-    * [.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)
+In some situations you may want to forcibly close the checkout so that your user is back in your checkout screen, fow which you can use this method. Currently supported by Flypay wallet only.
 
-<a name="new_WalletButtons_new" id="new_WalletButtons_new"></a>
+```javascript
+button.close();
+```
 
-### new exports.WalletButtons(selector, chargeToken, object)
+### Performing actions when shipping info is updated
 
-| Param | Type | Description |
-| --- | --- | --- |
-| selector | <code>string</code> | Selector of html element. Container for the WalletButtons. |
-| chargeToken | <code>string</code> | token for the wallet transaction, created with a secure call to `POST charges/wallet`. |
-| object | [<code>IWalletMeta</code>](#IWalletMeta) | data that configures the E-Wallet, which can be shown on checkout page and configures required customer information. |
+In Flypay, Paypal and ApplePay via MPGS integrations after each shipping info update the `onUpdate(data)` will be called with the selected shipping address information (plus selected shipping method for Paypal). 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).
 
-**Example**  
-```js
-var button = new WalletButtons('#wallet-buttons', 'charge-token', { amount_label: 'Total', country: 'us' });
-```
-<a name="WalletButtons+load" id="WalletButtons+load"></a>
+For Paypal integration specifically, if shipping is enabled for the wallet button and different shipping methods were provided in the create wallet charge call, Merchants must ensure that the posted `shipping.amount` to `POST charges/:id` matches the selected shipping option amount (value sent in when initializing the wallet charge). In other words, when providing shipping methods the shipping amount is bound to being one of the provided shipping method amount necessarily. Bear in mind that the total charge amount must include the `shipping.amount`, since it represents the full amount to be charged to the customer.
 
-### walletButtons.load()
-Initializes the availability checks and inserts the button if possible.
-Otherwise function onUnavailable(handler: VoidFunction) will be called.
+After analyzing the new shipping information, and making the post with the updated charge and shipping amounts if necessary, the `button.update({ success: true/false })` wallet button method needs to be called to resume the interactions with the customer. Not calling this will result in unexpected behavior.
 
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-**Example**  
-```js
-var button = new WalletButtons(
-     '#buttons',
-     token,
-     {
-         amount_label: 'Total',
-         country: 'DE',
-     }
- );
- button.load();
+```javascript
+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 });
+});
 ```
-<a name="WalletButtons+update" id="WalletButtons+update"></a>
 
-### walletButtons.update()
-Triggers the update process of the wallet, if available.
-Currently supported by Flypay, Paypal and ApplePay/GooglePay via MPGS Wallets.
+For ApplePay via MPGS integration specifically, you must return the new `amount` and new `shipping_options` If new options are needed based on the updated shipping data. Before the user authorizes the transaction with Touch ID, Face ID, or passcode, you receive redacted address information (address_country, address_city, address_state, address_postcode), this data can be used to recalculate the amount and new shipping options. (https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypayment/1916097-shippingcontact)
 
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-**Example**  
-```js
-var button = new WalletButtons(
-     '#buttons',
-     token,
-     {
-         amount_label: 'Total',
-         country: 'DE',
-     }
- );
- button.on('update', (data) => {
-     updateChargeAmountInBackend(data);
-     button.update({ success: true });
- });
-```
-**Example**  
+```javascript
+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,
+        body: {
+            amount: 15,
+            shipping_options: [
+                {
+                    id: "NEW-FreeShip",
+                    label: "NEW - Free Shipping",
+                    detail: "Arrives in 3 to 5 days",
+                    amount: "0.00"
+                },
+                {
+                    id: "NEW - FastShip",
+                    label: "NEW - Fast Shipping",
+                    detail: "Arrives in less than 1 day",
+                    amount: "10.00"
+                }
+            ]
+        }
+    });
+});
+```
+
+### Performing actions after the payment is completed
+
+After the payment is completed, the onPaymentSuccessful(data) will be called if the payment was successful. If the payment was not successful, the function onPaymentError(data) will be called. If fraud check is active for the gateway, a fraud body was sent in the wallet charge initialize call and the fraud service left the charge in review, then the onPaymentInReview(data) will be called.
+All three callbacks return relevant data according to each one of the scenarios.
+
+```javascript
+button.onPaymentSuccessful((data) => console.log("The payment was successful"));
+```
+
+```javascript
+button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
+```
+
+```javascript
+button.onPaymentError((data) => console.log("The payment was not successful"));
+```
+### Events
+The above events can be used in a more generic way via de `on` function, and making use
+of the corresponding event names.
+
+```javascript
+button.on(EVENT.UNAVAILABLE, () => console.log("No wallet buttons available"));
+button.on(EVENT.UPDATE, (data) => console.log("Updating amount via a backend to backend call to POST charges/:id");
+button.on(EVENT.PAYMENT_SUCCESSFUL, (data) => console.log("The payment was successful"));
+button.on(EVENT.PAYMENT_ERROR, (data) => console.log("The payment was not successful"));
+```
+
+This example shows how to use these functions for **Apple and Google Pay via Stripe**:
+_(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `wallets`)_
+### Full example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock Wallet Button!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+<script>
+    let button = new paydock.WalletButtons(
+        "#widget",
+        charge_token,
+        {
+            amount_label: "Total",
+            country: "DE",
+            wallets: ["google", "apple"],
+        }
+    );
+    button.setEnv('sandbox');
+    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.onPaymentInReview((data) => console.log("The payment is on fraud review"));
+    button.load();
+</script>
+</html>
+```
+
+This example shows how to use these functions for **Paypal Smart Checkout Buttons**:
+_(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_later`, `style`)_
+### Full example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock Wallet Button!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+<script>
+    let button = new paydock.WalletButtons(
+		"#widget",
+		charge_token,
+		{
+			request_shipping: true,
+			pay_later: true,
+			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 });
+	});
+    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"));
+    button.load();
+</script>
+</html>
+```
+
+This example shows how to use these functions for **Flypay Checkout**.
+_(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_later`, `style`)_
+### Full example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock Wallet Button!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+<script>
+    let button = new paydock.WalletButtons(
+		"#widget",
+		charge_token,
+		{
+			request_shipping: true
+		}
+	);
+    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 });
+	});
+    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"));
+    button.load();
+</script>
+</html>
+```
+
+This example shows how to use these functions for **ApplePay via MPGS**:
+_(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `raw_data_initialization`, `request_shipping`, `style.button_type`)_
+### Full example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock Wallet Button!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+<script>
+    let button = new paydock.WalletButtons(
+        "#widget",
+        charge_token,
+        {
+            amount_label: "Total",
+            country: 'DE',
+            request_shipping: true,
+            style: {
+                button_type: 'buy',
+            },
+            shipping_options: [
+                {
+                    id: "FreeShip",
+                    label: "Free Shipping",
+                    detail: "Arrives in 5 to 7 days",
+                    amount: "0.00"
+                },
+                {
+                    id: "FastShip",
+                    label: "Fast Shipping",
+                    detail: "Arrives in 1 day",
+                    amount: "10.00"
+                }
+            ]
+        }
+    );
+    button.setEnv('sandbox');
+    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.load();
+</script>
+</html>
+```
+
+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:
+
+### Raw data initialization example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock Wallet Button!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+<script>
+    let button = new paydock.WalletButtons(
+        "#widget",
+        charge_token,
+        {
+            raw_data_initialization: {
+                countryCode: "AU",
+                currencyCode: "AUD",
+                merchantCapabilities: ["supports3DS","supportsCredit","supportsDebit"],
+                supportedNetworks: ["visa","masterCard","amex","discover"],
+                requiredBillingContactFields: ["name","postalAddress"],
+                requiredShippingContactFields:["postalAddress","name","phone","email" ],
+                total: {
+                    label: "Total",
+                    amount: "10",
+                    type: "final",
+                }
+            },
+            amount_label: "Total",
+            country: 'DE',
+            request_shipping: true,
+            style: {
+                button_type: 'buy',
+            },
+            shipping_options: [
+                {
+                    id: "FreeShip",
+                    label: "Free Shipping",
+                    detail: "Arrives in 5 to 7 days",
+                    amount: "0.00"
+                },
+                {
+                    id: "FastShip",
+                    label: "Fast Shipping",
+                    detail: "Arrives in 1 day",
+                    amount: "10.00"
+                }
+            ]
+        }
+    );
+    button.setEnv('sandbox');
+    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.load();
+</script>
+</html>
+```
+## Classes
+
+<dl>
+<dt><a href="#WalletButtons">WalletButtons</a></dt>
+<dd><p>Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)</p>
+</dd>
+</dl>
+
+## Constants
+
+<dl>
+<dt><a href="#EVENT">EVENT</a> : <code>object</code></dt>
+<dd><p>List of available event&#39;s name in the wallet button lifecycle</p>
+</dd>
+</dl>
+
+## Interfaces
+
+<dl>
+<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>
+<dt><a href="#IApplePayShippingOption">IApplePayShippingOption</a> : <code>object</code></dt>
+<dd><p>Interface of Shipping Options for ApplePay</p>
+</dd>
+<dt><a href="#IGooglePayShippingOption">IGooglePayShippingOption</a> : <code>object</code></dt>
+<dd><p>Interface of Shipping Options for GooglePay</p>
+</dd>
+<dt><a href="#IPayPalShippingOption">IPayPalShippingOption</a> : <code>object</code></dt>
+<dd><p>Interface of Shipping Options for PayPal</p>
+</dd>
+</dl>
+
+<a name="IWalletMeta" id="IWalletMeta"></a>
+
+## IWalletMeta : <code>object</code>
+Interface of data used by the wallet checkout and payment proccess.
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [amount_label] | <code>string</code> | Label shown next to the total amount to be paid. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal]. |
+| [country] | <code>string</code> | Country of the user. 2 letter ISO code format. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal]. |
+| [pay_later] | <code>string</code> | Used to enable Pay Later feature in PayPal Smart Checkout WalletButton integration when available. Optional for [PayPal]. N/A for other wallets. |
+| [show_billing_address] | <code>boolean</code> | Used to hide/show the billing address on ApplePay and GooglePay popups. Default value is false. Optional for [ApplePay, GooglePay]. N/A for other wallets. |
+| [request_payer_name] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
+| [request_payer_email] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
+| [request_payer_phone] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
+| [request_shipping] | <code>boolean</code> | Used to request or not shipping address in the Wallet checkout, being able to handle amount changes via the `update` event. Optional for [FlyPay, PayPal, ApplePay, GooglePay]. N/A for [Stripe]. |
+| [shipping_options] | [<code>Array.&lt;IApplePayShippingOption&gt;</code>](#IApplePayShippingOption) \| [<code>Array.&lt;IPayPalShippingOption&gt;</code>](#IPayPalShippingOption) | Used to provide available shipping options.(To use shipping_options the request_shipping flag should be true). Optional for [ApplePay]. N/A for the other wallets. |
+| [merchant_name] | <code>string</code> | Merchant Name used for GooglePay integration via MPGS. Required for [GooglePay]. N/A for other wallets. |
+| [raw_data_initialization] | <code>object</code> | Used to provide values to initialize wallet with raw data. Optional for [ApplePay]. N/A for the other wallets. |
+| [style] | <code>object</code> | Used to style PayPal buttons, check possible values at https://developer.paypal.com/docs/business/checkout/reference/style-guide. Also used at ApplePay to select button type. Optional for [PayPal, ApplePay]. N/A for [Stripe, FlyPay]. |
+| [style.button_type] | <code>object</code> | Used to select ApplePay button type (e.g: 'buy','donate', etc), check possible values at https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css. Optional for [ApplePay]. N/A for other wallets. |
+| [wallets] | <code>array</code> | By default if this is not sent or empty, we will try to show either Apple Pay or Google Pay buttons. This can be limited sending the following array in this field: ['apple','google]. Optional for [Stripe, ApplePay, GooglePay]. N/A for other wallets. |
+
+<a name="IApplePayShippingOption" id="IApplePayShippingOption"></a>
+
+## IApplePayShippingOption : <code>object</code>
+Interface of Shipping Options for ApplePay
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [id] | <code>string</code> | Identifier of the Shipping Option. Required. |
+| [label] | <code>string</code> | Identifier of the Shipping Option. Required. |
+| [amount] | <code>string</code> | Amount of the Shipping Option. Required. |
+| [detail] | <code>string</code> | Details of the Shipping Option. Required. |
+| [type] | <code>string</code> | Type of the Shipping Option. Values can be 'ELECTRONIC', 'GROUND', 'NOT_SHIPPED', 'OVERNIGHT', 'PICKUP', 'PRIORITY', 'SAME_DAY'. Optional. |
+
+<a name="IGooglePayShippingOption" id="IGooglePayShippingOption"></a>
+
+## IGooglePayShippingOption : <code>object</code>
+Interface of Shipping Options for GooglePay
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [id] | <code>string</code> | Identifier of the Shipping Option. Required. |
+| [label] | <code>string</code> | Identifier of the Shipping Option. Required. |
+| [detail] | <code>string</code> | Details of the Shipping Option. Optional. |
+| [type] | <code>string</code> | Type of the Shipping Option. Values can be 'ELECTRONIC', 'GROUND', 'NOT_SHIPPED', 'OVERNIGHT', 'PICKUP', 'PRIORITY', 'SAME_DAY'. Optional. |
+
+<a name="IPayPalShippingOption" id="IPayPalShippingOption"></a>
+
+## IPayPalShippingOption : <code>object</code>
+Interface of Shipping Options for PayPal
+
+**Kind**: global interface  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [id] | <code>string</code> | Identifier of the Shipping Option. Required. |
+| [label] | <code>string</code> | Identifier of the Shipping Option. Required. |
+| [amount] | <code>string</code> | Amount of the Shipping Option. Required. |
+| [currency] | <code>string</code> | Currency of the Shipping Option. Required. |
+| [type] | <code>string</code> | Type of the Shipping Option. Values can be 'SHIPPING' or 'PICKUP'. Required. |
+
+<a name="WalletButtons" id="WalletButtons"></a>
+
+## WalletButtons
+Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)
+
+**Kind**: global class  
+
+* [WalletButtons](#WalletButtons)
+    * [new exports.WalletButtons(selector, chargeToken, object)](#new_WalletButtons_new)
+    * [.load()](#WalletButtons+load)
+    * [.update()](#WalletButtons+update)
+    * [.setEnv(env, [alias])](#WalletButtons+setEnv)
+    * [.close()](#WalletButtons+close)
+    * [.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)
+
+<a name="new_WalletButtons_new" id="new_WalletButtons_new"></a>
+
+### new exports.WalletButtons(selector, chargeToken, object)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| selector | <code>string</code> | Selector of html element. Container for the WalletButtons. |
+| chargeToken | <code>string</code> | token for the wallet transaction, created with a secure call to `POST charges/wallet`. |
+| object | [<code>IWalletMeta</code>](#IWalletMeta) | data that configures the E-Wallet, which can be shown on checkout page and configures required customer information. |
+
+**Example**  
+```js
+var button = new WalletButtons('#wallet-buttons', 'charge-token', { amount_label: 'Total', country: 'us' });
+```
+<a name="WalletButtons+load" id="WalletButtons+load"></a>
+
+### walletButtons.load()
+Initializes the availability checks and inserts the button if possible.
+Otherwise function onUnavailable(handler: VoidFunction) will be called.
+
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
+**Example**  
+```js
+var button = new WalletButtons(
+     '#buttons',
+     token,
+     {
+         amount_label: 'Total',
+         country: 'DE',
+     }
+ );
+ button.load();
+```
+<a name="WalletButtons+update" id="WalletButtons+update"></a>
+
+### walletButtons.update()
+Triggers the update process of the wallet, if available.
+Currently supported by Flypay, Paypal and ApplePay/GooglePay via MPGS Wallets.
+
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
+**Example**  
+```js
+var button = new WalletButtons(
+     '#buttons',
+     token,
+     {
+         amount_label: 'Total',
+         country: 'DE',
+     }
+ );
+ button.on('update', (data) => {
+     updateChargeAmountInBackend(data);
+     button.update({ success: true });
+ });
+```
+**Example**  
 ```js
 // ApplePay via MPGS example:
 var button = new WalletButtons(
@@ -5179,409 +5611,137 @@ button.onUpdate((data) => {
      button.update({ success: true });
 });
 ```
-**Example**  
-```js
-button.onUpdate().then((data) => throw new Error());
-```
-<a name="WalletButtons+onPaymentSuccessful" id="WalletButtons+onPaymentSuccessful"></a>
-
-### walletButtons.onPaymentSuccessful([handler])
-If the payment was successful, the function passed as parameter will be called.
-Important: Do not perform thread blocking operations in callback such as window.alert() calls.
-
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| [handler] | <code>listener</code> | Function to be called when the payment was successful. |
-
-**Example**  
-```js
-button.onPaymentSuccessful((data) => {
-     console.log('Payment successful!');
-});
-```
-**Example**  
-```js
-button.onPaymentSuccessful().then((data) => console.log('Payment successful!'));
-```
-<a name="WalletButtons+onPaymentInReview" id="WalletButtons+onPaymentInReview"></a>
-
-### walletButtons.onPaymentInReview([handler])
-If the payment was left in fraud review, the function passed as parameter will be called.
-Important: Do not perform thread blocking operations in callback such as window.alert() calls.
-
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| [handler] | <code>listener</code> | Function to be called when the payment was left in fraud review status. |
-
-**Example**  
-```js
-button.onPaymentInReview((data) => {
-     console.log('Payment in fraud review');
-});
-```
-**Example**  
-```js
-button.onPaymentInReview().then((data) => console.log('Payment in fraud review'));
-```
-<a name="WalletButtons+onPaymentError" id="WalletButtons+onPaymentError"></a>
-
-### walletButtons.onPaymentError([handler])
-If the payment was not successful, the function passed as parameter will be called.
-Important: Do not perform thread blocking operations in callback such as window.alert() calls.
-
-**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| [handler] | <code>listener</code> | Function to be called when the payment was not successful. |
-
-**Example**  
-```js
-button.onPaymentError((err) => {
-     console.log('Payment not successful');
-});
-```
-**Example**  
-```js
-button.onPaymentError().then((err) => console.log('Payment not successful'));
-```
-<a name="EVENT" id="EVENT"></a>
-
-## EVENT : <code>object</code>
-List of available event's name in the wallet button lifecycle
-
-**Kind**: global constant  
-
-| Param | Type | Default |
-| --- | --- | --- |
-| UNAVAILABLE | <code>string</code> | <code>&quot;unavailable&quot;</code> | 
-| 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> | 
-
-
-## Wallet Buttons
-You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#wallet-buttons-simple-example)
-
-Wallet Buttons allow you to easily integrate different E-Wallets into your checkout.
-Currently supports ApplePay, Google Pay and Apple Pay via Stripe, Flypay checkout and Paypal Smart Buttons Checkout.
-
-If available in your client environment, you will display a simple button that upon clicking it the user will follow the standard flow for the appropriate Wallet. If not available an event will be raised and no button will be displayed.
-
-## Wallet Buttons simple example
-
-### Container
-
-```html
-<div id="widget"></div>
-```
-
-You must create a container for the Wallet Buttons. Inside this tag, the button will be initialized.
-
-Before initializing the button, you must perform a POST request to `charges/wallet` from a secure environment like your server. This call will return a token that is required to load the button and securely complete the payment. You can find the documentation to this call in the PayDock API documentation.
-
-### Initialization
-The following is the minimum required initialization parameters for Apple Pay and Google Pay via Stripe:
-```javascript
-let button = new paydock.WalletButtons(
-    "#widget",
-    token,
-    {
-        amount_label: "Total",
-        country: "DE",
-    }
-);
-button.load();
-```
-
-```javascript--es2015
-// ES2015 | TypeScript
-import { WalletButtons } from '@paydock/client-sdk';
-
-var button = new WalletButtons(
-    '#widget',
-    token,
-    {
-        amount_label: 'Total',
-        country: 'DE',
-    }
-);
-button.load();
-```
-
-Flypay and Paypal wallets do not require any meta sent to the wallet, so the following is enough for initialization:
-```javascript
-let button = new paydock.WalletButtons(
-    "#widget",
-    token,
-    {}
-);
-button.load();
-```
-
-```javascript--es2015
-// ES2015 | TypeScript
-import { WalletButtons } from '@paydock/client-sdk';
-
-var button = new WalletButtons(
-    '#widget',
-    token,
-    {}
-);
-button.load();
-```
-### Setting environment
-
-Current method can change environment. By default environment = sandbox.
-Bear in mind that you must set an environment before calling `button.load()`.
-
-```javascript
-button.setEnv('sandbox');
-```
-
-### Full example
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-    <h2>Payment using PayDock Wallet Button!</h2>
-    <div id="widget"></div>
-</body>
-<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
-<script>
-        let button = new paydock.WalletButtons(
-            "#widget",
-            token,
-            {
-                amount_label: "Total",
-                country: "DE",
-            }
-        );
-        button.load();
-</script>
-</html>
-```
-
-## Wallet Buttons advanced example
-
-### Checking for button availability
-
-If the customer's browser is not supported, or the customer does not have any card added to their Google Pay or Apple Pay wallets, the button will not load. In this case the callback onUnavailable() will be called. You can define the behavior of this function before loading the button.
-
-```javascript
-button.onUnavailable(() => console.log("No wallet buttons available"));
+**Example**  
+```js
+button.onUpdate().then((data) => throw new Error());
 ```
+<a name="WalletButtons+onPaymentSuccessful" id="WalletButtons+onPaymentSuccessful"></a>
 
-### Forcibly closing the checkout
+### walletButtons.onPaymentSuccessful([handler])
+If the payment was successful, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
 
-In some situations you may want to forcibly close the checkout so that your user is back in your checkout screen, fow which you can use this method. Currently supported by Flypay wallet only.
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
 
-```javascript
-button.close();
-```
+| Param | Type | Description |
+| --- | --- | --- |
+| [handler] | <code>listener</code> | Function to be called when the payment was successful. |
 
-### Performing actions when shipping info is updated
+**Example**  
+```js
+button.onPaymentSuccessful((data) => {
+     console.log('Payment successful!');
+});
+```
+**Example**  
+```js
+button.onPaymentSuccessful().then((data) => console.log('Payment successful!'));
+```
+<a name="WalletButtons+onPaymentInReview" id="WalletButtons+onPaymentInReview"></a>
 
-In Flypay, Paypal and ApplePay via MPGS integrations after each shipping info update the `onUpdate(data)` will be called with the selected shipping address information (plus selected shipping method for Paypal). 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).
+### walletButtons.onPaymentInReview([handler])
+If the payment was left in fraud review, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
 
-For Paypal integration specifically, if shipping is enabled for the wallet button and different shipping methods were provided in the create wallet charge call, Merchants must ensure that the posted `shipping.amount` to `POST charges/:id` matches the selected shipping option amount (value sent in when initializing the wallet charge). In other words, when providing shipping methods the shipping amount is bound to being one of the provided shipping method amount necessarily. Bear in mind that the total charge amount must include the `shipping.amount`, since it represents the full amount to be charged to the customer.
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
 
-After analyzing the new shipping information, and making the post with the updated charge and shipping amounts if necessary, the `button.update({ success: true/false })` wallet button method needs to be called to resume the interactions with the customer. Not calling this will result in unexpected behavior.
+| Param | Type | Description |
+| --- | --- | --- |
+| [handler] | <code>listener</code> | Function to be called when the payment was left in fraud review status. |
 
-```javascript
-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 });
+**Example**  
+```js
+button.onPaymentInReview((data) => {
+     console.log('Payment in fraud review');
 });
 ```
+**Example**  
+```js
+button.onPaymentInReview().then((data) => console.log('Payment in fraud review'));
+```
+<a name="WalletButtons+onPaymentError" id="WalletButtons+onPaymentError"></a>
 
-For ApplePay via MPGS integration specifically, you must return the new `amount` and new `shipping_options` If new options are needed based on the updated shipping data. Before the user authorizes the transaction with Touch ID, Face ID, or passcode, you receive redacted address information (address_country, address_city, address_state, address_postcode), this data can be used to recalculate the amount and new shipping options. (https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypayment/1916097-shippingcontact)
+### walletButtons.onPaymentError([handler])
+If the payment was not successful, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
 
-```javascript
-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,
-        body: {
-            amount: 15,
-            shipping_options: [
-                {
-                    id: "NEW-FreeShip",
-                    label: "NEW - Free Shipping",
-                    detail: "Arrives in 3 to 5 days",
-                    amount: "0.00"
-                },
-                {
-                    id: "NEW - FastShip",
-                    label: "NEW - Fast Shipping",
-                    detail: "Arrives in less than 1 day",
-                    amount: "10.00"
-                }
-            ]
-        }
-    });
+**Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| [handler] | <code>listener</code> | Function to be called when the payment was not successful. |
+
+**Example**  
+```js
+button.onPaymentError((err) => {
+     console.log('Payment not successful');
 });
 ```
+**Example**  
+```js
+button.onPaymentError().then((err) => console.log('Payment not successful'));
+```
+<a name="EVENT" id="EVENT"></a>
 
-### Performing actions after the payment is completed
+## EVENT : <code>object</code>
+List of available event's name in the wallet button lifecycle
 
-After the payment is completed, the onPaymentSuccessful(data) will be called if the payment was successful. If the payment was not successful, the function onPaymentError(data) will be called. If fraud check is active for the gateway, a fraud body was sent in the wallet charge initialize call and the fraud service left the charge in review, then the onPaymentInReview(data) will be called.
-All three callbacks return relevant data according to each one of the scenarios.
+**Kind**: global constant  
 
-```javascript
-button.onPaymentSuccessful((data) => console.log("The payment was successful"));
-```
+| Param | Type | Default |
+| --- | --- | --- |
+| UNAVAILABLE | <code>string</code> | <code>&quot;unavailable&quot;</code> | 
+| 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> | 
 
-```javascript
-button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
-```
 
-```javascript
-button.onPaymentError((data) => console.log("The payment was not successful"));
-```
-### Events
-The above events can be used in a more generic way via de `on` function, and making use
-of the corresponding event names.
+## Secure Remote Commerce
+You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#SRC).
 
-```javascript
-button.on(EVENT.UNAVAILABLE, () => console.log("No wallet buttons available"));
-button.on(EVENT.UPDATE, (data) => console.log("Updating amount via a backend to backend call to POST charges/:id");
-button.on(EVENT.PAYMENT_SUCCESSFUL, (data) => console.log("The payment was successful"));
-button.on(EVENT.PAYMENT_ERROR, (data) => console.log("The payment was not successful"));
-```
+This widget provides you with the ability to easily integrate with SRC providers. Currently Visa SRC is supported.
 
-This example shows how to use these functions for **Apple and Google Pay via Stripe**:
-_(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `wallets`)_
-### Full example
+## SRC simple example
+
+### Container
 
 ```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-    <h2>Payment using PayDock Wallet Button!</h2>
-    <div id="widget"></div>
-</body>
-<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
-<script>
-    let button = new paydock.WalletButtons(
-        "#widget",
-        charge_token,
-        {
-            amount_label: "Total",
-            country: "DE",
-            wallets: ["google", "apple"],
-        }
-    );
-    button.setEnv('sandbox');
-    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.onPaymentInReview((data) => console.log("The payment is on fraud review"));
-    button.load();
-</script>
-</html>
+<div id="checkoutButton"></div>
+<div id="checkoutIframe"></div>
 ```
 
-This example shows how to use these functions for **Paypal Smart Checkout Buttons**:
-_(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_later`, `style`)_
-### Full example
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-    <h2>Payment using PayDock Wallet Button!</h2>
-    <div id="widget"></div>
-</body>
-<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
-<script>
-    let button = new paydock.WalletButtons(
-		"#widget",
-		charge_token,
-		{
-			request_shipping: true,
-			pay_later: true,
-			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 });
-	});
-    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"));
-    button.load();
-</script>
-</html>
+You must create a container for the initial checkout button, and a different one for the checkout iFrame. Inside the first tag the button will be initialized, and inside the second one the iFrame will be loaded once the button is clicked.
+
+
+### Initialization
+```javascript
+var src = new paydock.SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
+    {}, // meta
+);
+src.load();
 ```
 
-This example shows how to use these functions for **Flypay Checkout**.
-_(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_later`, `style`)_
-### Full example
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-    <h2>Payment using PayDock Wallet Button!</h2>
-    <div id="widget"></div>
-</body>
-<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
-<script>
-    let button = new paydock.WalletButtons(
-		"#widget",
-		charge_token,
-		{
-			request_shipping: true
-		}
-	);
-    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 });
-	});
-    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"));
-    button.load();
-</script>
-</html>
+```javascript--es2015
+// ES2015 | TypeScript
+
+import { SRC } from '@paydock/client-sdk';
+
+var src = new SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
+    {}, // meta
+);
+src.load();
 ```
 
-This example shows how to use these functions for **ApplePay via MPGS**:
-_(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `raw_data_initialization`, `request_shipping`, `style.button_type`)_
+*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
 
 ```html
@@ -5590,51 +5750,71 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `ra
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
+    <style>iframe {border: 0;width: 40%;height: 300px;}</style>
 </head>
 <body>
-    <h2>Payment using PayDock Wallet Button!</h2>
-    <div id="widget"></div>
+    <div id="checkoutButton"></div>
+    <div id="checkoutIframe"></div>
+    <script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+    <script>
+        var src = new paydock.SRC(
+            "#checkoutButton",
+            "#checkoutIframe",
+            "scheme_service_id",
+            "paydock_public_key_or_access_token",
+            {},
+        );
+        src.load();
+    </script>
 </body>
-<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
-<script>
-    let button = new paydock.WalletButtons(
-        "#widget",
-        charge_token,
-        {
-            amount_label: "Total",
-            country: 'DE',
-            request_shipping: true,
-            style: {
-                button_type: 'buy',
-            },
-            shipping_options: [
-                {
-                    id: "FreeShip",
-                    label: "Free Shipping",
-                    detail: "Arrives in 5 to 7 days",
-                    amount: "0.00"
-                },
-                {
-                    id: "FastShip",
-                    label: "Fast Shipping",
-                    detail: "Arrives in 1 day",
-                    amount: "10.00"
-                }
-            ]
-        }
-    );
-    button.setEnv('sandbox');
-    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.load();
-</script>
 </html>
 ```
 
-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:
 
-### Raw data initialization example
+## SRC advanced example
+
+### Settings
+
+```javascript
+
+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
 <!DOCTYPE html>
@@ -5642,60 +5822,139 @@ Also, for **ApplePay via MPGS** you can initialize the `ApplePayPaymentRequest`
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
+    <style>iframe {border: 0;width: 40%;height: 450px;}</style>
 </head>
 <body>
-    <h2>Payment using PayDock Wallet Button!</h2>
-    <div id="widget"></div>
+    <div id="checkoutButton"></div>
+    <div id="checkoutIframe"></div>
+    <script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+    <script>
+        var src = new paydock.SRC(
+            "#checkoutButton",
+            "#checkoutIframe",
+            "scheme_service_id",
+            "paydock_public_key_or_access_token",
+            {},
+        );
+
+        src.on('checkoutReady', () => {
+            console.log("Checkout ready to be used");
+        });
+
+        src.on('checkoutCompleted', (token) => {
+            console.log(token);
+        });
+        src.load();
+    </script>
 </body>
-<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
-<script>
-    let button = new paydock.WalletButtons(
-        "#widget",
-        charge_token,
-        {
-            raw_data_initialization: {
-                countryCode: "AU",
-                currencyCode: "AUD",
-                merchantCapabilities: ["supports3DS","supportsCredit","supportsDebit"],
-                supportedNetworks: ["visa","masterCard","amex","discover"],
-                requiredBillingContactFields: ["name","postalAddress"],
-                requiredShippingContactFields:["postalAddress","name","phone","email" ],
-                total: {
-                    label: "Total",
-                    amount: "10",
-                    type: "final",
-                }
-            },
-            amount_label: "Total",
-            country: 'DE',
-            request_shipping: true,
-            style: {
-                button_type: 'buy',
+</html>
+```
+
+## Customization options for address fields
+### Shipping address:
+
+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.SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
+    {
+        "dpa_transaction_options": {
+            "dpa_shipping_preference": "ALL"
+        }
+    },
+);
+```
+
+With this the Visa popup requires the shipping address from consumer, and these information will be stored in the Paydock charge.
+
+Another option is at time of creating the charge. Say that you have a different way of collecting the shipping address (outside Paydock checkout), you can then disable the shipping address on our SRC widget and send it when creating the charge creation after getting the One Time Token out of the SRC widget:
+
+```
+POST v1/charges
+
+{
+    "amount": "10.00",
+    "currency": "AUD",
+    "token": "token",
+    "customer": {
+        "payment_source": {
+            "gateway_id": "gateway_id"
+        }
+    },
+    "shipping": {
+        "address_line1": "address_line1",
+        "address_line2": "address_line2",
+        "address_line3": "address_line3",
+        "address_city": "address_city",
+        "address_postcode": "address_postcode",
+        "address_state": "address_state",
+        "address_country": "address_country"
+    }
+}
+```
+
+- Billing address:
+
+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.SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
+    {
+        "customer": {
+            "email": "test@email.com",
+            "first_name": "Name",
+            "last_name": "Surname",
+            "phone": {
+                "country_code": "1",
+                "phone": "2124567890"
             },
-            shipping_options: [
-                {
-                    id: "FreeShip",
-                    label: "Free Shipping",
-                    detail: "Arrives in 5 to 7 days",
-                    amount: "0.00"
-                },
-                {
-                    id: "FastShip",
-                    label: "Fast Shipping",
-                    detail: "Arrives in 1 day",
-                    amount: "10.00"
-                }
-            ]
+            "payment_source": {
+                "address_line1": "Line 1",
+                "address_line2": "Line 2",
+                "address_city": "Miami",
+                "address_postcode": "33126",
+                "address_state": "FL",
+                "address_country": "US"
+            }
         }
-    );
-    button.setEnv('sandbox');
-    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.load();
-</script>
-</html>
+    },
+);
+```
+
+## Personalization Styling
+
+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.SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key",
+);
+
+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>
@@ -5771,7 +6030,8 @@ Class SRC include methods for interacting with different secure remote commerce
 **Kind**: global class  
 
 * [SRC](#SRC)
-    * [new exports.SRC(button_selector, iframe_selector, service_id, public_key, meta)](#new_SRC_new)
+    * [new exports.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)
@@ -5785,20 +6045,40 @@ Class SRC include methods for interacting with different secure remote commerce
 
 <a name="new_SRC_new" id="new_SRC_new"></a>
 
-### new exports.SRC(button_selector, iframe_selector, service_id, public_key, meta)
+### new exports.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 | <code>string</code> | Paydock public key |
+| 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 |
 
 **Example**  
 ```js
 var SRC = new SRC('#checkoutButton', '#checkoutIframe', 'service_id', 'public_key', {});
 ```
+<a name="SRC+setStyles" id="SRC+setStyles"></a>
+
+### srC.setStyles(fields)
+Object contain styles for widget - call before `.load()`.
+
+**Kind**: instance method of [<code>SRC</code>](#SRC)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| fields | <code>IStyles</code> | 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']
+  });
+```
 <a name="SRC+load" id="SRC+load"></a>
 
 ### srC.load()
@@ -5941,236 +6221,5 @@ List of available event's name in the SRC checkout lifecycle
 | CHECKOUT_ERROR | <code>string</code> | <code>&quot;checkoutError&quot;</code> | 
 
 
-## Secure Remote Commerce
-You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#secure-remote-commerce)
-
-This widget provides you with the ability to easily integrate with SRC providers. Currently Visa SRC is supported.
-
-## SRC simple example
-
-### Container
-
-```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",
-    "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key",
-    {}, // meta
-);
-src.load();
-```
-
-```javascript--es2015
-// ES2015 | TypeScript
-
-import { SRC } from '@paydock/client-sdk';
-
-var src = new SRC(
-    "#checkoutButton",
-    "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key",
-    {}, // meta
-);
-src.load();
-```
-
-### Full example
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <style>iframe {border: 0;width: 40%;height: 300px;}</style>
-</head>
-<body>
-    <div id="checkoutButton"></div>
-    <div id="checkoutIframe"></div>
-    <script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
-    <script>
-        var src = new paydock.SRC(
-            "#checkoutButton",
-            "#checkoutIframe",
-            "scheme_service_id",
-            "paydock_public_key",
-            {},
-        );
-        src.load();
-    </script>
-</body>
-</html>
-```
-
-
-## SRC advanced example
-
-### Settings
-
-```javascript
-
-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
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <style>iframe {border: 0;width: 40%;height: 450px;}</style>
-</head>
-<body>
-    <div id="checkoutButton"></div>
-    <div id="checkoutIframe"></div>
-    <script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
-    <script>
-        var src = new paydock.SRC(
-            "#checkoutButton",
-            "#checkoutIframe",
-            "scheme_service_id",
-            "paydock_public_key",
-            {},
-        );
-
-        src.on('checkoutReady', () => {
-            console.log("Checkout ready to be used");
-        });
-
-        src.on('checkoutCompleted', (token) => {
-            console.log(token);
-        });
-        src.load();
-    </script>
-</body>
-</html>
-```
-
-## Customization options for address fields
-### Shipping address:
-
-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.SRC(
-    "#checkoutButton",
-    "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key",
-    {
-        "dpa_transaction_options": {
-            "dpa_shipping_preference": "ALL"
-        }
-    },
-);
-```
-
-With this the Visa popup requires the shipping address from consumer, and these information will be stored in the Paydock charge.
-
-Another option is at time of creating the charge. Say that you have a different way of collecting the shipping address (outside Paydock checkout), you can then disable the shipping address on our SRC widget and send it when creating the charge creation after getting the One Time Token out of the SRC widget:
-
-```
-POST v1/charges
-
-{
-    "amount": "10.00",
-    "currency": "AUD",
-    "token": "token",
-    "customer": {
-        "payment_source": {
-            "gateway_id": "gateway_id"
-        }
-    },
-    "shipping": {
-        "address_line1": "address_line1",
-        "address_line2": "address_line2",
-        "address_line3": "address_line3",
-        "address_city": "address_city",
-        "address_postcode": "address_postcode",
-        "address_state": "address_state",
-        "address_country": "address_country"
-    }
-}
-```
-
-- Billing address:
-
-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.SRC(
-    "#checkoutButton",
-    "#checkoutIframe",
-    "scheme_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"
-            }
-        }
-    },
-);
-```
-
 ## License
 Copyright (c) 2017 paydock