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

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