@tonder.io/rn-sdk 0.1.4 → 0.1.5-beta.DEV1404.160516b

package/lib/typescript/module/src/types/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/types/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,WAAW,CAAC,EAAE,iBAAiB,CAAC;CACjC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/types/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,YAAY,CAAC;QAC3B,UAAU,CAAC,EAAE,YAAY,CAAC;KAC3B,CAAC;CACH;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,eAAe;IAC9B,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,YAAY,CAAC;CAC3B;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,WAAW,CAAC,EAAE,iBAAiB,CAAC;CACjC"}

package/lib/typescript/module/src/ui/components/CardForm/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ICardFormStyles, IFormLabels, IFormPlaceholder } from '../../../types';
+import type { ICardFormEvents, ICardFormStyles, IFormLabels, IFormPlaceholder } from '../../../types';
 interface NewCardFormProps {
     showSaveOption?: boolean;
     saveCard: boolean;
@@ -7,6 +7,7 @@ interface NewCardFormProps {
     labels?: IFormLabels;
     placeholders?: IFormPlaceholder;
     style?: ICardFormStyles;
+    events?: ICardFormEvents;
 }
 export declare const NewCardForm: React.FC<NewCardFormProps>;
 export {};

package/lib/typescript/module/src/ui/components/CardForm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/CardForm/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAOxB,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/CardForm/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,WAAW,EACX,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAOxB,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8DlD,CAAC"}

package/lib/typescript/module/src/ui/components/Input/CardCVVInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardCVVInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardCVVInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAiBjD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwE7C,CAAC"}
+{"version":3,"file":"CardCVVInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardCVVInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAiBjD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA+E7C,CAAC"}

package/lib/typescript/module/src/ui/components/Input/CardExpirationDateInput.d.ts

@@ -1,10 +1,4 @@
 import React from 'react';
-import type { IElementStyle } from '../../../types';
-export interface InputExpiryDateProps {
-    label?: string;
-    yearPlaceholder?: string;
-    monthPlaceholder?: string;
-    style?: IElementStyle;
-}
+import type { InputExpiryDateProps } from '../../../types';
 export declare const CardExpirationDateInput: React.FC<InputExpiryDateProps>;
 //# sourceMappingURL=CardExpirationDateInput.d.ts.map

package/lib/typescript/module/src/ui/components/Input/CardExpirationDateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardExpirationDateInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardExpirationDateInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAepD,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AACD,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwDlE,CAAC"}
+{"version":3,"file":"CardExpirationDateInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardExpirationDateInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+DlE,CAAC"}

package/lib/typescript/module/src/ui/components/Input/CardExpirationMonthInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardExpirationMonthInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardExpirationMonthInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAoBjD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwEzD,CAAC"}
+{"version":3,"file":"CardExpirationMonthInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardExpirationMonthInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAoBjD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA+EzD,CAAC"}

package/lib/typescript/module/src/ui/components/Input/CardExpirationYearInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardExpirationYearInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardExpirationYearInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAkBjD,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwExD,CAAC"}
+{"version":3,"file":"CardExpirationYearInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardExpirationYearInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAkBjD,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA+ExD,CAAC"}

package/lib/typescript/module/src/ui/components/Input/CardHolderInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHolderInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardHolderInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAmBjD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuEhD,CAAC"}
+{"version":3,"file":"CardHolderInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardHolderInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAmBjD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8EhD,CAAC"}

package/lib/typescript/module/src/ui/components/Input/CardNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardNumberInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardNumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAkBjD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuEhD,CAAC"}
+{"version":3,"file":"CardNumberInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/Input/CardNumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAkBjD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8EhD,CAAC"}

package/lib/typescript/module/src/ui/features/TonderEnrollment/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/features/TonderEnrollment/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,sBAAsB;CAAG;AAC1C,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiGtD,CAAC;AAqCF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/features/TonderEnrollment/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,sBAAsB;CAAG;AAC1C,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkGtD,CAAC;AAqCF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/module/src/ui/features/TonderPayment/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/features/TonderPayment/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC,MAAM,WAAW,mBAAmB;CAAG;AACvC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6LhD,CAAC;AAwCF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/features/TonderPayment/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC,MAAM,WAAW,mBAAmB;CAAG;AACvC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8LhD,CAAC;AAwCF,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonder.io/rn-sdk",
-  "version": "0.1.4",
+  "version": "0.1.5-beta.DEV1404.160516b",
   "description": "Tonder react native sdk",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/core/BaseEnrollment/index.ts

@@ -35,6 +35,7 @@ class BaseEnrollment extends BaseSDK {
         ...data,
         isCreated: false,
         isCreating: true,
+        events: data.events || {},
         customization: {
           ...this.#defaultCustomization,
           ...(data.customization || {}),

package/src/core/PaymentInlineContainer/index.ts

@@ -84,6 +84,7 @@ class PaymentInlineContainer implements IPaymentInlineContainer {
         paymentMethods: [],
         cards: [],
       },
+      events: data.events || {},
       isCreating: true,
       isCreated: false,
     });

package/src/types/base.ts

@@ -1,4 +1,5 @@
 import type {
+  ICardFormEvents,
   IEnrollment,
   IEnrollmentOptions,
   IEnrollmentState,
@@ -74,3 +75,5 @@ export type SDKStateInstance<T extends SDKType> = T extends SDKType.INLINE
     : T extends SDKType.ENROLLMENT
       ? IEnrollmentState
       : never;
+
+export interface IEvents extends ICardFormEvents {}

package/src/types/enrollment.ts

@@ -1,4 +1,4 @@
-import type { IBaseCreateOptions, IBaseResponse, SDKOptions } from './base';
+import type { IBaseCreateOptions, IBaseResponse, IEvents, SDKOptions } from './base';
 import type { IBaseEnrollmentState } from './baseEnrollment';
 import { SDKType } from './base';
 import type { ISaveCardResponse } from './card';
@@ -10,6 +10,7 @@ export interface IEnrollmentOptions extends IBaseCreateOptions {
   customer?: ICustomer;
   customization?: IEnrollmentCustomizationOptions;
   callbacks?: IEnrollmentCallbacks;
+  events?: IEvents;
 }
 
 export interface IEnrollmentCallbacks {
@@ -30,6 +31,7 @@ export interface IEnrollmentCustomizationOptions {
 export interface IEnrollmentState extends IBaseEnrollmentState {
   customization?: IEnrollmentCustomizationOptions;
   callbacks?: IEnrollmentCallbacks;
+  events?: IEvents;
   message: string;
 }
 export interface IEnrollment {

package/src/types/inlineCheckout.ts

@@ -11,6 +11,7 @@ import type {
   IBaseProcessPaymentRequest,
   IBaseCallback,
   IBaseResponse,
+  IEvents,
 } from '.';
 import { SDKType } from './base';
 import TonderError from '../shared/utils/errors';
@@ -19,6 +20,7 @@ export interface IInlineCheckoutOptions extends IBaseCreateOptions {
   paymentData: IBaseProcessPaymentRequest;
   customization?: IInlineCustomizationOptions;
   callbacks?: IInlineCallbacks;
+  events?: IEvents;
   returnURL?: string;
 }
 
@@ -30,6 +32,7 @@ export interface IInlineCheckoutState
   };
   customization?: IInlineCustomizationOptions;
   callbacks?: IInlineCallbacks;
+  events?: IEvents;
   message: string;
   customerCards: ICustomerCardsResponse;
   payment_methods: IPaymentMethod[];

package/src/types/input.ts

@@ -4,7 +4,39 @@ import type {
 } from 'skf-rnad';
 import type { StylesBaseVariant } from './common';
 
-export interface InputProps {
+export interface IEventSecureInput {
+  elementType: string;
+  isEmpty: boolean;
+  isFocused: boolean;
+  isValid: boolean;
+  value: string;
+}
+export interface InputExpiryDateProps {
+  label?: string;
+  yearPlaceholder?: string;
+  monthPlaceholder?: string;
+  style?: IElementStyle;
+  events?: {
+    monthEvents?: IInputEvents;
+    yearEvents?: IInputEvents;
+  };
+}
+
+export interface IInputEvents {
+  onChange?: (event: IEventSecureInput) => void;
+  onFocus?: (event: IEventSecureInput) => void;
+  onBlur?: (event: IEventSecureInput) => void;
+}
+
+export interface ICardFormEvents {
+  cardHolderEvents?: IInputEvents;
+  cardNumberEvents?: IInputEvents;
+  cvvEvents?: IInputEvents;
+  monthEvents?: IInputEvents;
+  yearEvents?: IInputEvents;
+}
+
+export interface InputProps extends IInputEvents {
   label?: string;
   placeholder?: string;
   style?: IElementStyle;

package/src/ui/components/CardForm/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import type {
+  ICardFormEvents,
   ICardFormStyles,
   IFormLabels,
   IFormPlaceholder,
@@ -18,6 +19,7 @@ interface NewCardFormProps {
   labels?: IFormLabels;
   placeholders?: IFormPlaceholder;
   style?: ICardFormStyles;
+  events?: ICardFormEvents;
 }
 
 export const NewCardForm: React.FC<NewCardFormProps> = ({
@@ -27,6 +29,7 @@ export const NewCardForm: React.FC<NewCardFormProps> = ({
   style,
   labels,
   placeholders,
+  events,
 }) => {
   return (
     <View style={{ ...styles.container, ...(style?.base || {}) }}>
@@ -34,11 +37,17 @@ export const NewCardForm: React.FC<NewCardFormProps> = ({
         style={style}
         label={labels?.name}
         placeholder={placeholders?.name}
+        onBlur={events?.cardHolderEvents?.onBlur}
+        onChange={events?.cardHolderEvents?.onChange}
+        onFocus={events?.cardHolderEvents?.onFocus}
       />
       <CardNumberInput
         style={style}
         label={labels?.cardNumber}
         placeholder={placeholders?.cardNumber}
+        onBlur={events?.cardNumberEvents?.onBlur}
+        onChange={events?.cardNumberEvents?.onChange}
+        onFocus={events?.cardNumberEvents?.onFocus}
       />
       <View style={styles.expirationRow}>
         <CardExpirationDateInput
@@ -46,11 +55,18 @@ export const NewCardForm: React.FC<NewCardFormProps> = ({
           label={labels?.expiryDate}
           yearPlaceholder={placeholders?.expiryYear}
           monthPlaceholder={placeholders?.expiryMonth}
+          events={{
+            monthEvents: events?.monthEvents,
+            yearEvents: events?.yearEvents,
+          }}
         />
         <CardCVVInput
           style={style}
           label={labels?.cvv}
           placeholder={placeholders?.cvv}
+          onBlur={events?.cvvEvents?.onBlur}
+          onChange={events?.cvvEvents?.onChange}
+          onFocus={events?.cvvEvents?.onFocus}
         />
       </View>
 

package/src/ui/components/Input/CardCVVInput.tsx

@@ -22,6 +22,9 @@ export const CardCVVInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.cvvPlaceholder,
   label = DEFAULT_SKYFLOW_lABELS.cvvLabel,
   style,
+  onFocus,
+  onBlur,
+  onChange,
 }) => {
   const [errorText, setErrorText] = useState('');
   const { state } = useTonderContext();
@@ -71,12 +74,16 @@ export const CardCVVInput: React.FC<InputProps> = ({
                   }
                 : {}),
             }}
-            onChange={() => {
+            onChange={(event) => {
               setErrorText('');
+              if (onChange) onChange(event);
             }}
-            // onFocus={props.onFocus}
-            onBlur={(e) => {
-              setErrorText(getErrorField(e, label));
+            onFocus={(event) => {
+              if (onFocus) onFocus(event);
+            }}
+            onBlur={(event) => {
+              setErrorText(getErrorField(event, label));
+              if (onBlur) onBlur(event);
             }}
             // onReady={props.onReady}
           />

package/src/ui/components/Input/CardExpirationDateInput.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import type { IElementStyle } from '../../../types';
 import {
   DEFAULT_SKYFLOW_lABELS,
   DEFAULT_SKYFLOW_PLACEHOLDERS,
@@ -14,18 +13,14 @@ import {
 import { DEFAULT_INPUT_CONTAINER_STYLES } from '../../styles/payment';
 import { CardExpirationMonthInput } from './CardExpirationMonthInput';
 import { CardExpirationYearInput } from './CardExpirationYearInput';
+import type { InputExpiryDateProps } from '../../../types';
 
-export interface InputExpiryDateProps {
-  label?: string;
-  yearPlaceholder?: string;
-  monthPlaceholder?: string;
-  style?: IElementStyle;
-}
 export const CardExpirationDateInput: React.FC<InputExpiryDateProps> = ({
   yearPlaceholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryYearPlaceholder,
   monthPlaceholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryMonthPlaceholder,
   label = DEFAULT_SKYFLOW_lABELS.expiryDateLabel,
   style,
+  events,
 }) => {
   return (
     <View style={styles.container}>
@@ -55,6 +50,9 @@ export const CardExpirationDateInput: React.FC<InputExpiryDateProps> = ({
               },
             } as StyleProp<TextStyle>),
           }}
+          onBlur={events?.monthEvents?.onBlur}
+          onChange={events?.monthEvents?.onChange}
+          onFocus={events?.monthEvents?.onFocus}
         />
         <CardExpirationYearInput
           label={''}
@@ -73,6 +71,9 @@ export const CardExpirationDateInput: React.FC<InputExpiryDateProps> = ({
               },
             } as StyleProp<TextStyle>),
           }}
+          onBlur={events?.yearEvents?.onBlur}
+          onChange={events?.yearEvents?.onChange}
+          onFocus={events?.yearEvents?.onFocus}
         />
       </View>
     </View>

package/src/ui/components/Input/CardExpirationMonthInput.tsx

@@ -24,6 +24,9 @@ export const CardExpirationMonthInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryMonthPlaceholder,
   label = DEFAULT_SKYFLOW_lABELS.expiryMonthLabel,
   style,
+  onFocus,
+  onBlur,
+  onChange,
 }) => {
   const { state } = useTonderContext();
   const [errorText, setErrorText] = useState('');
@@ -74,12 +77,16 @@ export const CardExpirationMonthInput: React.FC<InputProps> = ({
                   }
                 : {}),
             }}
-            onChange={() => {
+            onChange={(event) => {
               setErrorText('');
+              if (onChange) onChange(event);
             }}
-            // onFocus={props.onFocus}
-            onBlur={(e) => {
-              setErrorText(getErrorField(e, label));
+            onFocus={(event) => {
+              if (onFocus) onFocus(event);
+            }}
+            onBlur={(event) => {
+              setErrorText(getErrorField(event, label));
+              if (onBlur) onBlur(event);
             }}
             // onReady={props.onReady}
           />

package/src/ui/components/Input/CardExpirationYearInput.tsx

@@ -22,6 +22,9 @@ export const CardExpirationYearInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.expiryYearPlaceholder,
   label = DEFAULT_SKYFLOW_lABELS.expiryYearLabel,
   style,
+  onFocus,
+  onBlur,
+  onChange,
 }) => {
   const { state } = useTonderContext();
   const [errorText, setErrorText] = useState('');
@@ -72,12 +75,16 @@ export const CardExpirationYearInput: React.FC<InputProps> = ({
                   }
                 : {}),
             }}
-            onChange={() => {
+            onChange={(event) => {
               setErrorText('');
+              if (onChange) onChange(event);
             }}
-            // onFocus={props.onFocus}
-            onBlur={(e) => {
-              setErrorText(getErrorField(e, label));
+            onFocus={(event) => {
+              if (onFocus) onFocus(event);
+            }}
+            onBlur={(event) => {
+              setErrorText(getErrorField(event, label));
+              if (onBlur) onBlur(event);
             }}
             // onReady={props.onReady}
           />

package/src/ui/components/Input/CardHolderInput.tsx

@@ -23,6 +23,9 @@ export const CardHolderInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.namePlaceholder,
   label = DEFAULT_SKYFLOW_lABELS.nameLabel,
   style,
+  onFocus,
+  onBlur,
+  onChange,
 }) => {
   const { state } = useTonderContext();
 
@@ -72,12 +75,16 @@ export const CardHolderInput: React.FC<InputProps> = ({
                   }
                 : {}),
             }}
-            onChange={() => {
+            onChange={(event) => {
               setErrorText('');
+              if (onChange) onChange(event);
             }}
-            // onFocus={props.onFocus}
-            onBlur={(e) => {
-              setErrorText(getErrorField(e, label));
+            onFocus={(event) => {
+              if (onFocus) onFocus(event);
+            }}
+            onBlur={(event) => {
+              setErrorText(getErrorField(event, label));
+              if (onBlur) onBlur(event);
             }}
             // onReady={props.onReady}
           />

package/src/ui/components/Input/CardNumberInput.tsx

@@ -22,6 +22,9 @@ export const CardNumberInput: React.FC<InputProps> = ({
   placeholder = DEFAULT_SKYFLOW_PLACEHOLDERS.cardPlaceholder,
   label = DEFAULT_SKYFLOW_lABELS.cardLabel,
   style,
+  onFocus,
+  onBlur,
+  onChange,
 }) => {
   const { state } = useTonderContext();
   const [errorText, setErrorText] = useState('');
@@ -71,12 +74,16 @@ export const CardNumberInput: React.FC<InputProps> = ({
                   }
                 : {}),
             }}
-            onChange={() => {
+            onChange={(event) => {
               setErrorText('');
+              if (onChange) onChange(event);
             }}
-            // onFocus={props.onFocus}
-            onBlur={(e) => {
-              setErrorText(getErrorField(e, label));
+            onFocus={(event) => {
+              if (onFocus) onFocus(event);
+            }}
+            onBlur={(event) => {
+              setErrorText(getErrorField(event, label));
+              if (onBlur) onBlur(event);
             }}
             // onReady={props.onReady}
           />

package/src/ui/features/TonderEnrollment/index.tsx

@@ -47,6 +47,7 @@ const TonderEnrollment: React.FC<ITonderEnrollmentProps> = () => {
             style={state?.customization?.styles?.cardForm}
             labels={state?.customization?.labels}
             placeholders={state?.customization?.placeholders}
+            events={state?.events}
           />
         )}
         {state?.customization?.showMessages &&

package/src/ui/features/TonderPayment/index.tsx

@@ -133,6 +133,7 @@ const TonderPayment: React.FC<ITonderPaymentProps> = () => {
               style={state?.customization?.styles?.cardForm}
               labels={state?.customization?.labels}
               placeholders={state?.customization?.placeholders}
+              events={state?.events}
             />
           )}
         {state?.customization?.paymentMethods?.show && (