@motopays/pay-form 1.0.17-rc.2 → 1.0.17-rc.3

package/README.md

@@ -22,6 +22,11 @@ import "@motopays/pay-form/lib/styles/styles.css";
 
 const payment$ = document.querySelector("#payment");
 
+//This listener has to be assigned before payment and settings fields set
+payment$.addEventListener("analyticsTracked", (event) => {
+  console.log("analytics data was detected: ", e); // Custom event
+});
+
 payment$.payment = {
   userAuthToken?: string;
   userId: string;
@@ -161,7 +166,7 @@ declare module "@motopays/pay-form/pay";
 
 
 ILink interface:
-```
+```javascript
 interface ILink {
     text: string;
     href: string;
@@ -169,7 +174,7 @@ interface ILink {
 ```
 
 ITermCheckbox interface:
-```
+```javascript
 interface ITermCheckbox {
     text: string;
     link?: ILink;
@@ -177,7 +182,7 @@ interface ITermCheckbox {
 ```
 
 IUserPreferenceCheckbox interface:
-```
+```javascript
 interface IUserPreferenceCheckbox {
     name: string;
     text: string;
@@ -187,7 +192,7 @@ interface IUserPreferenceCheckbox {
 ```
 
 Example of merchantInfo:
-```
+```javascript
 merchantInfo: {
   "visible": true,
   "text": "The vendor prides itself on designing and implementing state-of-the-art payment infrastructures that cater to a wide range of commercial activities. Specializing in the creation of robust payment processing platforms, the merchant provides tailored solutions that support the dynamic needs of the global market",
@@ -205,7 +210,7 @@ merchantInfo: {
 ```
 
 Example of chargeTerms:
-```
+```javascript
 chargeTerms: {
   "visible": true,
   "text": "By checking this box, I am affirming my full and complete understanding of, as well as my agreement to, all the terms and conditions that were previously presented to me, acknowledging that they form a binding contractual agreement.",
@@ -229,7 +234,7 @@ chargeTerms: {
 ```
 
 Example of userPreferences:
-```
+```javascript
 "userPreferences": {
   "visible": true,
   "text": "By checking this box, I am affirming my full and complete understanding of, as well as my agreement to, all the terms and conditions that were previously presented to me, acknowledging that they form a binding contractual agreement.",
@@ -261,6 +266,7 @@ Example of userPreferences:
 | ----- | -------------- | -------------------------------------------- |
 | close | void           | triggered by clicking on the closing icon    |
 | paid  | Payment Result | triggered after receiving a payment response |
+| analyticsTracked  | IAnalyticsData | triggered by analytics events |
 
 ### Payment Result Structure
 
@@ -319,6 +325,76 @@ IRedirectData {
 }
 ```
 
+### Analytics
+For receiving analytics listen analyticsTracked events.
+
+'init-start' - the form has started initializtion. Payload: void.
+'loading-finish' - the form has finished initialization and loading. Payload: void.
+'card-number-field-click' - the card number field has been clicked. Payload: void.
+'expiration-date-field-click' - the expiration date field has been clicked. Payload: void.
+'cvv-field-click' - the cvv field has been clicked. Payload: void.
+'card-holder-field-click' - the card holder field has been clicked. Payload: void.
+'charge-term-checkbox-<number>-check' - the charge term checkbox has been checked. Payload: IChargeTermsAnalytics.
+'charge-term-checkbox-<number>-uncheck' - the charge term checkbox has been unchecked. Payload: IChargeTermsAnalytics.
+'user-preference-checkbox-<number>-check' - the user preference checbox has been checked. Payload: IUserPreferencesAnalytics.
+'user-preference-checkbox-<number>-uncheck' - the user preference checbox has been unchecked. Payload: IUserPreferencesAnalytics.
+'pay-button-click' - the 'Pay' button has been clicked (payment by card). Payload: void.
+'<apm>-button-click' - the apm payment button has been clicked. Payload: void.
+'add-card-button-click' - the "Add New Card" button has been clicked. Payload: void.
+'card-options-button-click' - the card options button has been clicked (existing card menu visualised as 3 vertical dots). Payload: ICardAnalytics.
+'remove-card-button-click' - the card removing button has been clicked. Payload: ICardAnalytics.
+'select-card-button-click' - the card selecting button has been clicked. Payload: ICardAnalytics.
+
+Examples of dynamic event types (number inserting):
+&emsp;1. Example of the first checkbox: 'charge-term-checkbox-0-check'
+&emsp;2. Example of the second checkbox: 'charge-term-checkbox-1-check'
+
+Examples of dynamic event types (apm inserting):
+&emsp;1. 'coinbase-button-click'
+&emsp;2. 'moto-button-click'
+
+```javascript
+//structure
+interface IAnalyticsData {
+    type: TAnalyticsData,
+    payload?: any
+}
+
+//event types
+type TAnalyticsData = 
+  | 'init-start'
+  | 'loading-finish'
+  | 'card-number-field-click'
+  | 'expiration-date-field-click'
+  | 'cvv-field-click'
+  | 'card-holder-field-click'
+  | `charge-term-checkbox${`-${number}`}-check`
+  | `charge-term-checkbox${`-${number}`}-uncheck`
+  | `user-preference-checkbox${`-${number}`}-check`
+  | `user-preference-checkbox${`-${number}`}-uncheck`
+  | 'pay-button-click'
+  | `${string}-button-click`
+  | 'add-card-button-click'
+  | 'card-options-button-click'
+  | 'remove-card-button-click'
+  | 'select-card-button-click'
+
+
+//payload types
+interface ICardAnalytics {
+    last4Digits: string;
+}
+
+interface IChargeTermsAnalytics {
+    text: string;
+}
+
+interface IUserPreferencesAnalytics {
+    name: string;
+    text: string;
+}
+```
+
 ### Webpack 5 Issues
 
 During the integration process, you might face multiple issues with webpack 5. This issue is caused due to the fact that some packages have certain dependencies, which are not present within the browser environment by webpack 5. Hence, you require certain [node polyfills](https://webpack.js.org/configuration/resolve/#resolvefallback) to be added to your project, while overriding the configurations to enable their usage. When that is done, your project should run without any issues.