## Classes

<dl>
<dt><a href="#ClickToPay">ClickToPay</a> ⇐ <code>SRC</code></dt>
<dd><p>Class ClickToPay include methods for interacting with the ClickToPay checkout and Manual Card option</p>
</dd>
</dl>

## Interfaces

<dl>
<dt><a href="#IMastercardSRCMeta">IMastercardSRCMeta</a> : <code>object</code></dt>
<dd><p>Interface of data used for the Mastercard Checkout. For further information refer to <a href="https://developer.mastercard.com/unified-checkout-solutions/documentation/sdk-reference/init">the documentation</a>.</p>
</dd>
<dt><a href="#EventData">EventData</a> : <code>object</code></dt>
<dd><p>Interface for data returned in callbacks</p>
</dd>
<dt><a href="#EventDataCheckoutCompletedData">EventDataCheckoutCompletedData</a> : <code>object</code></dt>
<dd><p>Event data returned for checkoutCompleted callback, holding the One Time Token and the flow type completed.
When the flow type is src, masked checkoutData available is also returned</p>
</dd>
<dt><a href="#IStyles">IStyles</a> : <code>object</code></dt>
<dd><p>Interface for style configs inyected to the Click to Pay checkout</p>
</dd>
</dl>

<a name="IMastercardSRCMeta" id="IMastercardSRCMeta" href="#IMastercardSRCMeta">&nbsp;</a>

## IMastercardSRCMeta : <code>object</code>
Interface of data used for the Mastercard Checkout. For further information refer to [the documentation](https://developer.mastercard.com/unified-checkout-solutions/documentation/sdk-reference/init).

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [disable_summary_screen] | <code>boolean</code> | Boolean flag that controls if a final summary screen is presented in the checkout flow. |
| [dpa_data] | <code>object</code> | Object where the DPA creation data is stored. |
| [dpa_data.dpa_presentation_name] | <code>string</code> | Name in which the DPA is presented. |
| [dpa_data.dpa_uri] | <code>string</code> | Used for indicating the DPA URI. |
| [dpa_data.dpa_address] | <code>string</code> | Address associated with the DPA. |
| [dpa_data.dpa_email_address] | <code>string</code> | Email address for DPA communication. |
| [dpa_data.dpa_phone_number] | <code>object</code> | Phone number structure for DPA communication. |
| [dpa_data.dpa_phone_number.country_code] | <code>string</code> | The country code of the phone number. |
| [dpa_data.dpa_phone_number.phone_number] | <code>string</code> | The phone number part of the phone number. |
| [dpa_data.dpa_logo_uri] | <code>string</code> | URI for the DPA logo. |
| [dpa_data.dpa_supported_email_address] | <code>string</code> | Supported email address for DPA support. |
| [dpa_data.dpa_supported_phone_number] | <code>object</code> | Supported phone number for DPA support. |
| [dpa_data.dpa_supported_phone_number.country_code] | <code>string</code> | The country code of the phone number. |
| [dpa_data.dpa_supported_phone_number.phone_number] | <code>string</code> | The phone number part of the phone number. |
| [dpa_data.dpa_support_uri] | <code>string</code> | URI for DPA support. |
| [dpa_data.application_type] | <code>string</code> | Application type, either 'WEB_BROWSER' or 'MOBILE_APP'. |
| [co_brand_names] | <code>Array.&lt;string&gt;</code> | List of co-brand names associated with the Click to Pay experience. |
| [checkout_experience] | <code>string</code> | Checkout experience type, either 'WITHIN_CHECKOUT' or 'PAYMENT_SETTINGS'. |
| [services] | <code>string</code> | Services offered, such as 'INLINE_CHECKOUT' or 'INLINE_INSTALLMENTS'. |
| [dpa_transaction_options] | <code>object</code> | Object that stores options for creating a transaction with DPA. |
| [dpa_transaction_options.dpa_locale] | <code>string</code> | DPA’s preferred locale, example en_US. |
| [dpa_transaction_options.dpa_accepted_billing_countries] | <code>Array.&lt;string&gt;</code> | List of accepted billing countries for DPA in ISO 3166-1 alpha-2 format. |
| [dpa_transaction_options.dpa_billing_preference] | <code>string</code> | Billing preferences for DPA, options are 'FULL', 'POSTAL_COUNTRY', 'NONE'. |
| [dpa_transaction_options.payment_options] | <code>Array.&lt;object&gt;</code> | Payment options included in the transaction. |
| [dpa_transaction_options.payment_options.dynamic_data_type] | <code>string</code> | Dynamic data types. |
| [dpa_transaction_options.order_type] | <code>string</code> | Type of the order, options are 'SPLIT_SHIPMENT', 'PREFERRED_CARD'. |
| [dpa_transaction_options.three_ds_preference] | <code>string</code> | Preference for 3DS usage in the transaction. |
| [dpa_transaction_options.confirm_payment] | <code>boolean</code> | Indicates if payment confirmation is required. |
| [dpa_transaction_options.consumer_name_requested] | <code>boolean</code> | Indicates if consumer name is requested. |
| [dpa_transaction_options.consumer_email_address_requested] | <code>boolean</code> | Indicates if consumer email address is requested. |
| [dpa_transaction_options.consumer_phone_number_requested] | <code>boolean</code> | Indicates if consumer phone number is requested. |
| [dpa_transaction_options.transaction_amount] | <code>object</code> | Details of the transaction amount. |
| [dpa_transaction_options.transaction_amount.transaction_amount] | <code>number</code> | Amount of the transaction. |
| [dpa_transaction_options.transaction_amount.transaction_currency_code] | <code>string</code> | Currency code of the transaction in 3 letter ISO code format. |
| [dpa_transaction_options.merchant_order_id] | <code>string</code> | Merchant's order ID. |
| [dpa_transaction_options.merchant_category_code] | <code>string</code> | Merchant's category code. |
| [dpa_transaction_options.merchant_country_code] | <code>string</code> | Merchant's country code in ISO 3166-1 alpha-2 format. |
| [customer] | <code>object</code> | Object where the customer data is stored to prefill in the checkout. |
| [customer.email] | <code>string</code> | Customer email. |
| [customer.first_name] | <code>string</code> | Customer first name. |
| [customer.last_name] | <code>string</code> | Customer last name. |
| [customer.phone] | <code>object</code> | Object where the customer phone is stored. |
| [customer.phone.country_code] | <code>string</code> | Customer phone country code (example "1" for US). |
| [customer.phone.phone] | <code>string</code> | Customer phone number. |
| [unaccepted_card_type] | <code>string</code> | Used to block a specific card type. Options are 'CREDIT', 'DEBIT'. |

<a name="EventData" id="EventData" href="#EventData">&nbsp;</a>

## EventData : <code>object</code>
Interface for data returned in callbacks

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| type | [<code>EVENT\_DATA\_TYPE</code>](#EVENT_DATA_TYPE) | Event type of type [EVENT_DATA_TYPE](#EVENT_DATA_TYPE) |
| data | <code>string</code> \| [<code>EventDataCheckoutCompletedData</code>](#EventDataCheckoutCompletedData) | optional data returning a string for checkoutError event or [EventDataCheckoutCompletedData](#EventDataCheckoutCompletedData) for checkoutCompleted |

<a name="EventDataCheckoutCompletedData" id="EventDataCheckoutCompletedData" href="#EventDataCheckoutCompletedData">&nbsp;</a>

## EventDataCheckoutCompletedData : <code>object</code>
Event data returned for checkoutCompleted callback, holding the One Time Token and the flow type completed.
When the flow type is src, masked checkoutData available is also returned

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| type | <code>string</code> | type of the checkout, can be `src` or `manual`. |
| token | <code>string</code> | one time token value. |
| token_type | <code>string</code> | one time token type value, can be `card` or `card_scheme_token`. |
| [checkoutData] | <code>object</code> | Optional checkout data related to the checkout information. Only available on src flow. |
| [checkoutData.card_number_bin] | <code>string</code> | The BIN of the card used for the transaction. |
| [checkoutData.card_number_last4] | <code>string</code> | The last four digits of the card number. |
| [checkoutData.card_scheme] | <code>string</code> | The card scheme. Values: visa, mastercard, amex, diners, discover. |
| [checkoutData.card_type] | <code>string</code> | The type of card. Values: credit, debit, prepaid, combo, flex. |
| [checkoutData.address_line1] | <code>string</code> | Address line 1 for billing address. |
| [checkoutData.address_line2] | <code>string</code> | Address line 2 for billing address. |
| [checkoutData.address_line3] | <code>string</code> | Address line 3 for billing address. |
| [checkoutData.address_city] | <code>string</code> | City for billing address. |
| [checkoutData.address_postcode] | <code>string</code> | Postal code for billing address. |
| [checkoutData.address_state] | <code>string</code> | State or province for billing address. |
| [checkoutData.address_country] | <code>string</code> | Country for billing address. |
| [checkoutData.shipping] | <code>object</code> | Optional shipping information. |
| [checkoutData.shipping.address_line1] | <code>string</code> | Address line 1 for shipping address. |
| [checkoutData.shipping.address_line2] | <code>string</code> | Address line 2 for shipping address. |
| [checkoutData.shipping.address_line3] | <code>string</code> | Address line 3 for shipping address. |
| [checkoutData.shipping.address_city] | <code>string</code> | City for shipping address. |
| [checkoutData.shipping.address_postcode] | <code>string</code> | Postal code for shipping address. |
| [checkoutData.shipping.address_state] | <code>string</code> | State or province for shipping address. |
| [checkoutData.shipping.address_country] | <code>string</code> | Country for shipping address. |

<a name="IStyles" id="IStyles" href="#IStyles">&nbsp;</a>

## IStyles : <code>object</code>
Interface for style configs inyected to the Click to Pay checkout

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [primary_button_color] | <code>string</code> | Color Code for primary button. |
| [primary_button_text_color] | <code>string</code> | Color Code for primary button text. |
| [secondary_button_color] | <code>string</code> | Color Code for secondary button. |
| [secondary_button_text_color] | <code>string</code> | Color Code for secondary button text. |
| [font_family] | <code>string</code> | Font family to be used. |
| [enable_src_popup] | <code>boolean</code> | Boolean flag to make the Click to Pay checkout show in a popup window instead of embedded in iframe. |

<a name="ClickToPay" id="ClickToPay" href="#ClickToPay">&nbsp;</a>

## ClickToPay ⇐ <code>SRC</code>
Class ClickToPay include methods for interacting with the ClickToPay checkout and Manual Card option

**Kind**: global class  
**Extends**: <code>SRC</code>  

* [ClickToPay](#ClickToPay) ⇐ <code>SRC</code>
    * [new ClickToPay(iframe_selector, service_id, public_key_or_access_token, meta)](#new_ClickToPay_new)
    * [.load()](#ClickToPay+load)
    * [.setStyles(fields)](#SRC+setStyles)
    * [.setEnv(env, [alias])](#SRC+setEnv)
    * [.getEnv()](#SRC+getEnv)
    * [.on(eventName, [cb])](#SRC+on) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
    * [.hideCheckout([saveSize])](#SRC+hideCheckout)
    * [.showCheckout()](#SRC+showCheckout)
    * [.reload()](#SRC+reload)
    * [.useAutoResize()](#SRC+useAutoResize)

<a name="new_ClickToPay_new" id="new_ClickToPay_new" href="#new_ClickToPay_new">&nbsp;</a>

### new ClickToPay(iframe_selector, service_id, public_key_or_access_token, meta)

| Param | Type | Description |
| --- | --- | --- |
| iframe_selector | <code>string</code> | Selector of html element. Container for Click To Pay checkout iFrame. |
| service_id | <code>string</code> | Card Scheme Service ID |
| public_key_or_access_token | <code>string</code> | Paydock public key or Access Token |
| meta | <code>IClickToPayMeta</code> | Data that configures the Click To Pay checkout |

**Example**  
```js
var mastercardSRC = new ClickToPay('#checkoutIframe', 'service_id', 'public_key', {});
```
<a name="ClickToPay+load" id="ClickToPay+load" href="#ClickToPay+load">&nbsp;</a>

### clickToPay.load()
The final method after configuring the SRC to start the load process of Click To Pay checkout

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
<a name="SRC+setStyles" id="SRC+setStyles" href="#SRC+setStyles">&nbsp;</a>

### clickToPay.setStyles(fields)
Object contain styles for widget - call before `.load()`.

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
**Overrides**: [<code>setStyles</code>](#SRC+setStyles)  

| Param | Type | Description |
| --- | --- | --- |
| fields | [<code>IStyles</code>](#IStyles) | name of styles which can be shown in widget [STYLE](STYLE) |

**Example**  
```js
widget.setStyles({
    enable_src_popup: true
    primary_button_color: 'red',
    secondary_button_color: 'blue',
    primary_button_text_color: 'white',
    secondary_button_text_color: 'white',
    font_family: 'Arial',
});
```
<a name="SRC+setEnv" id="SRC+setEnv" href="#SRC+setEnv">&nbsp;</a>

### clickToPay.setEnv(env, [alias])
Current method can change environment. By default environment = sandbox.
Also we can change domain alias for this environment. By default domain_alias = paydock.com

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
**Overrides**: [<code>setEnv</code>](#SRC+setEnv)  

| Param | Type | Description |
| --- | --- | --- |
| env | <code>string</code> | sandbox, production |
| [alias] | <code>string</code> | Own domain alias |

**Example**  
```js
SRC.setEnv('production');
```
<a name="SRC+getEnv" id="SRC+getEnv" href="#SRC+getEnv">&nbsp;</a>

### clickToPay.getEnv()
Method to read the current environment

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
**Overrides**: [<code>getEnv</code>](#SRC+getEnv)  
**Example**  
```js
SRC.getEnv();
```
<a name="SRC+on" id="SRC+on" href="#SRC+on">&nbsp;</a>

### clickToPay.on(eventName, [cb]) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
Listen to events of SRC

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
**Overrides**: [<code>on</code>](#SRC+on)  

| Param | Type | Description |
| --- | --- | --- |
| eventName | <code>string</code> | Available event names [EVENT](#EVENT) |
| [cb] | <code>listener</code> | The callback to handle the event. When available, it will send back data of type [EventData](#EventData) |

**Example**  
```js
SRC.on('checkoutCompleted', function (token) {
     console.log(token);
});
// or
SRC.on('checkoutCompleted').then(function (token) {
     console.log(token);
});
```
<a name="SRC+hideCheckout" id="SRC+hideCheckout" href="#SRC+hideCheckout">&nbsp;</a>

### clickToPay.hideCheckout([saveSize])
Using this method you can hide checkout after load and button click

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
**Overrides**: [<code>hideCheckout</code>](#SRC+hideCheckout)  

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [saveSize] | <code>boolean</code> | <code>false</code> | using this param you can save iframe's size (if applicable) |

**Example**  
```js
SRC.hideCheckout();
```
<a name="SRC+showCheckout" id="SRC+showCheckout" href="#SRC+showCheckout">&nbsp;</a>

### clickToPay.showCheckout()
Using this method you can show checkout after using hideCheckout method

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
**Overrides**: [<code>showCheckout</code>](#SRC+showCheckout)  
**Example**  
```js
SRC.showCheckout()
```
<a name="SRC+reload" id="SRC+reload" href="#SRC+reload">&nbsp;</a>

### clickToPay.reload()
Using this method you can reload the whole checkout

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
**Overrides**: [<code>reload</code>](#SRC+reload)  
**Example**  
```js
SRC.reload()
```
<a name="SRC+useAutoResize" id="SRC+useAutoResize" href="#SRC+useAutoResize">&nbsp;</a>

### clickToPay.useAutoResize()
Use this method for resize checkout iFrame according to content height, if applicable

**Kind**: instance method of [<code>ClickToPay</code>](#ClickToPay)  
**Overrides**: [<code>useAutoResize</code>](#SRC+useAutoResize)  
**Example**  
```js
SRC.useAutoResize();
```
<a name="EVENT" id="EVENT" href="#EVENT">&nbsp;</a>

## EVENT : <code>enum</code>
List of available event's name in the Click To Pay checkout lifecycle

**Kind**: global enum  

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| IFRAME_LOADED | <code>string</code> | <code>&quot;iframeLoaded&quot;</code> | Initial event sent when IFrame is initially loaded. |
| CHECKOUT_READY | <code>string</code> | <code>&quot;checkoutReady&quot;</code> | Event sent when checkout is loaded and ready to be used by customer. Leverage alongside [showCheckout](#SRC+showCheckout) and [hideCheckout](#SRC+hideCheckout). |
| CHECKOUT_POPUP_OPEN | <code>string</code> | <code>&quot;checkoutPopupOpen&quot;</code> | Event sent when Click To Pay checkout flow is started, regardless of embedded or windowed mode. |
| CHECKOUT_POPUP_CLOSE | <code>string</code> | <code>&quot;checkoutPopupClose&quot;</code> | Event sent when Click To Pay checkout flow is closed, regardless of embedded or windowed mode. |
| CHECKOUT_COMPLETED | <code>string</code> | <code>&quot;checkoutCompleted&quot;</code> | Event sent on successful checkout by customer. Check [data](#EventDataCheckoutCompletedData) for more information. |
| CHECKOUT_ERROR | <code>string</code> | <code>&quot;checkoutError&quot;</code> | Event sent on error checkout by customer. Check [data](#EventData) for more information. |

<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> |  |