npm - @paydock/client-sdk - Versions diffs - 0.1.0 → 0.1.2-beta - Mend

@paydock/client-sdk 0.1.0 → 0.1.2-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (537) hide show

package/docs/click-to-pay-examples.md ADDED Viewed

@@ -0,0 +1,231 @@
+# Click To Pay
+## Overview
+Integrate with Click To Pay using Paydock's Click To Pay widget.
+For a full description of the methods and parameters, reference the [README file](https://www.npmjs.com/package/@paydock/client-sdk#ClickToPay).
+## Click To Pay simple example
+The following section provides an example use case and integration for the widget.
+### Create a Container
+To integrate the Click To Pay checkout iFrame, create a container in your HTML code. This container serves as the placeholder for the iFrame.
+```html
+<div id="checkoutIframe"></div>
+```
+### Initialize the Widget
+Use the following code to initialize your widget:
+```javascript
+var src = new paydock.ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key_or_access_token",
+    {}, // meta
+);
+src.load();
+```
+```javascript
+// ES2015 | TypeScript
+import { ClickToPay } from '@paydock/client-sdk';
+var src = new ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key_or_access_token",
+    {}, // meta
+);
+src.load();
+```
+*NOTE:* Paydock recommends that you use a Paydock Access Token instead of a public key for security reasons in production environments. When creating your access token, you must enable the `Secure Remote Commerce` and add a whitelist for the domain of your checkout screen.
+### Full example
+A full example of the container and the initialized widget is as follows:
+```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="checkoutIframe"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+    <script>
+        var src = new paydock.ClickToPay(
+            "#checkoutIframe",
+            "service_id",
+            "paydock_public_key_or_access_token",
+            {},
+        );
+        src.load();
+    </script>
+</body>
+</html>
+```
+## Customize your Click To Pay Checkout
+The following is an advanced example that includes customization. You can use these methods to enhance your checkout experience.
+### Settings
+```javascript
+src.setEnv('sandbox'); // set environment
+src.hideCheckout(); // hide checkout iframe
+src.showCheckout(); // show checkout iframe
+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);
+});
+```
+### 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="checkoutIframe"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+    <script>
+        var src = new paydock.ClickToPay(
+            "#checkoutIframe",
+            "service_id",
+            "paydock_public_key_or_access_token",
+            {},
+        );
+        src.on('iframeLoaded', () => {
+            console.log("Initial iframe loaded");
+        });
+        src.on('checkoutReady', () => {
+            console.log("Checkout ready to be used");
+        });
+        src.on('checkoutCompleted', (token) => {
+            console.log(token);
+        });
+        src.on('checkoutError', (error) => {
+            console.log(error);
+        });
+        src.load();
+    </script>
+</body>
+</html>
+```
+## Customize your billing address fields
+To customize your billing address experience, Paydock uses a flag that manages whether a customer's billing address is mandatory.
+The options for this customization are NONE (default option), and POSTAL_COUNTRY or FULL.
+```
+var src = new paydock.ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key_or_access_token",
+    {
+        "dpa_transaction_options": {
+            "dpa_billing_preference": "FULL"
+        }
+    },
+);
+```
+The Click To Pay checkout in the example requires the billing address from the customer, which is then returned as a part of the checkout data. The data is then stored and leveraged in the Paydock charge.
+You can also provide the billing address at the time of creating the charge. For example, if you have a different method for collecting the billing address, such as outside of the Click To Pay checkout, you can provide it alongside other information at the charge creation step:
+1. Disable the billing address in Paydock's Click To Pay widget.
+2. Get your One Time Token from the Click To Pay widget alongside other details that may have been collected outside the Click To Pay checkout as the shipping address.
+3. Send the billing address when creating the charge.
+```
+POST v1/charges
+{
+    "amount": "10.00",
+    "currency": "AUD",
+    "token": "one_time_token",
+    "customer": {
+        "payment_source": {
+            "gateway_id": "gateway_id",
+            "address_line1": "address_line1",
+            "address_line2": "address_line2",
+            "address_city": "address_city",
+            "address_postcode": "address_postcode",
+            "address_state": "address_state",
+            "address_country": "address_country"
+        }
+    },
+    "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"
+    }
+}
+```
+## How to customize accepted cards
+You can send a flag `unaccepted_card_type` to block the usage of a specific card type. The available options are 'DEBIT' and 'CREDIT'.
+### Example code
+The following example demonstrates how to block the card:
+```
+var src = new paydock.ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key",
+    {
+        unaccepted_card_type: 'DEBIT'
+    },
+);
+```
+## Personalize the Style
+Customize the look and feel of your UI. The following example demonstrates changes in the styling of the buttons.
+### Example code
+```
+var src = new paydock.ClickToPay(
+    "#checkoutIframe",
+    "service_id",
+    "paydock_public_key",
+    {},
+);
+src.setStyles({
+    enable_src_popup: true,
+    primary_button_color: 'red',
+    secondary_button_color: 'red',
+    primary_button_text_color: 'red',
+    secondary_button_text_color: 'red',
+    font_family: 'Arial',
+});
+```

package/docs/click-to-pay.md ADDED Viewed

@@ -0,0 +1,337 @@
+## 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> |  |