@paydock/client-sdk

## Classes <dl> <dt><a href="#ClickToPay">ClickToPay</a> ⇐ <code>SRC</code></dt> <dd>Class ClickToPay include methods for interacting with the ClickToPay checkout and Manual Card option </dd> </dl> ## Interfaces <dl> <dt><a href="#IMastercardSRCMeta">IMastercardSRCMeta</a> : <code>object</code></dt> <dd>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>. </dd> <dt><a href="#EventData">EventData</a> : <code>object</code></dt> <dd>Interface for data returned in callbacks </dd> <dt><a href="#EventDataCheckoutCompletedData">EventDataCheckoutCompletedData</a> : <code>object</code></dt> <dd>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 </dd> <dt><a href="#IStyles">IStyles</a> : <code>object</code></dt> <dd>Interface for style configs inyected to the Click to Pay checkout </dd> </dl> <a name="IMastercardSRCMeta" id="IMastercardSRCMeta" href="#IMastercardSRCMeta"> </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.<string></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.<string></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.<object></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"> </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"> </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"> </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"> </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.<any></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"> </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"> </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"> </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"> </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"> </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"> </a> ### clickToPay.on(eventName, [cb]) ⇒ <code>Promise.<any></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"> </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"> </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"> </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"> </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"> </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>"iframeLoaded"</code> | Initial event sent when IFrame is initially loaded. | | CHECKOUT_READY | <code>string</code> | <code>"checkoutReady"</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>"checkoutPopupOpen"</code> | Event sent when Click To Pay checkout flow is started, regardless of embedded or windowed mode. | | CHECKOUT_POPUP_CLOSE | <code>string</code> | <code>"checkoutPopupClose"</code> | Event sent when Click To Pay checkout flow is closed, regardless of embedded or windowed mode. | | CHECKOUT_COMPLETED | <code>string</code> | <code>"checkoutCompleted"</code> | Event sent on successful checkout by customer. Check [data](#EventDataCheckoutCompletedData) for more information. | | CHECKOUT_ERROR | <code>string</code> | <code>"checkoutError"</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"> </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>"CriticalError"</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>"UserError"</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>"Success"</code> | |