expo-openpay 0.1.21 → 0.1.23

package/src/components/OPCardForm.tsx

@@ -41,7 +41,31 @@ type CardFormProps = {
   merchantId: string;
   options?: {
     buttonTitle?: string;
-    errorMessages?: {
+    expIsMMYY?: boolean;
+    groupedView?: boolean;
+    onSubmit?: (token: string) => any;
+    styling?: {
+      buttonStyle?: StyleProp<ViewStyle>;
+      buttonTextStyle?: StyleProp<TextStyle>;
+      colorScheme?: "light" | "dark";
+      darkTheme?: FormThemeColors;
+      formFieldStyle?: StyleProp<ViewStyle>;
+      defaultStyling?: boolean;
+      formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
+      formScrollViewStyle?: StyleProp<ViewStyle>;
+      labelStyle?: StyleProp<TextStyle>;
+      lightTheme?: FormThemeColors;
+      textInputStyle?: StyleProp<TextStyle>;
+    };
+    placeholders?: {
+      cardholderInput: string;
+      cardNumberInput: string;
+      cvv2Input: string;
+      expInput: string;
+      expMonthInput: string;
+      expYearInput: string;
+    };
+    validationMessages?: {
       cardholderInput?: {
         required: string;
       };
@@ -61,36 +85,16 @@ type CardFormProps = {
         required: string;
       };
       expMonthInput?: {
+        format: string;
+        invalid: string;
         required: string;
       };
       expYearInput?: {
+        expired: string;
+        format: string;
         required: string;
       };
     };
-    expIsMMYY?: boolean;
-    groupedView?: boolean;
-    onSubmit?: (token: string) => any;
-    styling?: {
-      buttonStyle?: StyleProp<ViewStyle>;
-      buttonTextStyle?: StyleProp<TextStyle>;
-      colorScheme?: "light" | "dark";
-      darkTheme?: FormThemeColors;
-      formFieldStyle?: StyleProp<ViewStyle>;
-      defaultStyling?: boolean;
-      formKeyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
-      formScrollViewStyle?: StyleProp<ViewStyle>;
-      labelStyle?: StyleProp<TextStyle>;
-      lightTheme?: FormThemeColors;
-      textInputStyle?: StyleProp<TextStyle>;
-    };
-    placeholders?: {
-      cardholderInput: string;
-      cardNumberInput: string;
-      cvv2Input: string;
-      expInput: string;
-      expMonthInput: string;
-      expYearInput: string;
-    };
     withAnimatedTexts?: boolean;
     withIcons?: boolean;
     withLabels?: boolean;
@@ -107,7 +111,6 @@ export default function OPCardForm({
 }: CardFormProps) {
   const {
     buttonTitle,
-    errorMessages,
     expIsMMYY = true,
     groupedView = true,
     onSubmit,
@@ -120,6 +123,7 @@ export default function OPCardForm({
       expMonthInput: "",
       expYearInput: "",
     },
+    validationMessages,
     withAnimatedTexts,
     withIcons,
     withLabels,
@@ -167,6 +171,7 @@ export default function OPCardForm({
           expYear: "",
         }}
         onSubmit={onSubmit}
+        validationMessages={validationMessages}
       >
         <KeyboardAvoidingView
           behavior="padding"
@@ -187,7 +192,6 @@ export default function OPCardForm({
             }
           >
             <OPHolderNameInput
-              errorMessages={errorMessages?.cardholderInput}
               options={{
                 formFieldStyle,
                 defaultStyling,
@@ -196,13 +200,13 @@ export default function OPCardForm({
                 textInputStyle,
               }}
               placeholder={placeholders.cardholderInput}
+              validationMessages={validationMessages?.cardholderInput}
               withAnimatedText={withAnimatedTexts}
               withIcon={withIcons}
               withLabel={withLabels}
               withPlaceholder={withPlaceholders}
             />
             <OPCardNumberInput
-              errorMessages={errorMessages?.cardNumberInput}
               options={{
                 formFieldStyle,
                 defaultStyling,
@@ -211,6 +215,7 @@ export default function OPCardForm({
                 textInputStyle,
               }}
               placeholder={placeholders.cardNumberInput}
+              validationMessages={validationMessages?.cardNumberInput}
               withAnimatedText={withAnimatedTexts}
               withIcon={withIcons}
               withLabel={withLabels}
@@ -220,7 +225,6 @@ export default function OPCardForm({
               <View style={{ flexDirection: "row", gap: 12 }}>
                 {expIsMMYY ? (
                   <OPExpInput
-                    errorMessages={errorMessages?.expInput}
                     options={{
                       formFieldStyle: { flex: 1 },
                       defaultStyling,
@@ -229,6 +233,7 @@ export default function OPCardForm({
                       textInputStyle,
                     }}
                     placeholder={placeholders.expInput}
+                    validationMessages={validationMessages?.expInput}
                     withAnimatedText={withAnimatedTexts}
                     withIcon={withIcons}
                     withLabel={withLabels}
@@ -237,7 +242,6 @@ export default function OPCardForm({
                 ) : (
                   <>
                     <OPExpMonthInput
-                      errorMessages={errorMessages?.expMonthInput}
                       options={{
                         formFieldStyle: { flex: 1 },
                         defaultStyling,
@@ -246,13 +250,13 @@ export default function OPCardForm({
                         textInputStyle,
                       }}
                       placeholder={placeholders.expMonthInput}
+                      validationMessages={validationMessages?.expMonthInput}
                       withAnimatedText={withAnimatedTexts}
                       withIcon={withIcons}
                       withLabel={withLabels}
                       withPlaceholder={withPlaceholders}
                     />
                     <OPExpYearInput
-                      errorMessages={errorMessages?.expYearInput}
                       options={{
                         formFieldStyle: { flex: 1 },
                         defaultStyling,
@@ -261,6 +265,7 @@ export default function OPCardForm({
                         textInputStyle,
                       }}
                       placeholder={placeholders.expYearInput}
+                      validationMessages={validationMessages?.expYearInput}
                       withAnimatedText={withAnimatedTexts}
                       withIcon={withIcons}
                       withLabel={withLabels}
@@ -269,7 +274,6 @@ export default function OPCardForm({
                   </>
                 )}
                 <OPCvv2Input
-                  errorMessages={errorMessages?.cvv2Input}
                   options={{
                     formFieldStyle: { flex: 1 },
                     defaultStyling,
@@ -278,6 +282,7 @@ export default function OPCardForm({
                     textInputStyle,
                   }}
                   placeholder={placeholders.cvv2Input}
+                  validationMessages={validationMessages?.cvv2Input}
                   withAnimatedText={withAnimatedTexts}
                   withIcon={withIcons}
                   withLabel={withLabels}
@@ -288,7 +293,6 @@ export default function OPCardForm({
               <>
                 {expIsMMYY ? (
                   <OPExpInput
-                    errorMessages={errorMessages?.expInput}
                     options={{
                       formFieldStyle,
                       defaultStyling,
@@ -297,6 +301,7 @@ export default function OPCardForm({
                       textInputStyle,
                     }}
                     placeholder={placeholders.expInput}
+                    validationMessages={validationMessages?.expInput}
                     withAnimatedText={withAnimatedTexts}
                     withIcon={withIcons}
                     withLabel={withLabels}
@@ -305,7 +310,6 @@ export default function OPCardForm({
                 ) : (
                   <>
                     <OPExpMonthInput
-                      errorMessages={errorMessages?.expMonthInput}
                       options={{
                         formFieldStyle,
                         defaultStyling,
@@ -314,13 +318,13 @@ export default function OPCardForm({
                         textInputStyle,
                       }}
                       placeholder={placeholders.expMonthInput}
+                      validationMessages={validationMessages?.expMonthInput}
                       withAnimatedText={withAnimatedTexts}
                       withIcon={withIcons}
                       withLabel={withLabels}
                       withPlaceholder={withPlaceholders}
                     />
                     <OPExpYearInput
-                      errorMessages={errorMessages?.expYearInput}
                       options={{
                         formFieldStyle,
                         defaultStyling,
@@ -329,6 +333,7 @@ export default function OPCardForm({
                         textInputStyle,
                       }}
                       placeholder={placeholders.expYearInput}
+                      validationMessages={validationMessages?.expYearInput}
                       withAnimatedText={withAnimatedTexts}
                       withIcon={withIcons}
                       withLabel={withLabels}
@@ -338,7 +343,6 @@ export default function OPCardForm({
                 )}
 
                 <OPCvv2Input
-                  errorMessages={errorMessages?.cvv2Input}
                   options={{
                     formFieldStyle,
                     defaultStyling,
@@ -347,6 +351,7 @@ export default function OPCardForm({
                     textInputStyle,
                   }}
                   placeholder={placeholders.cvv2Input}
+                  validationMessages={validationMessages?.cvv2Input}
                   withAnimatedText={withAnimatedTexts}
                   withIcon={withIcons}
                   withLabel={withLabels}

package/src/components/OPCardNumberInput.tsx

@@ -17,11 +17,6 @@ type IconType =
   | { type: "png"; name: "amex" | "discover" | "mc" | "visa" };
 
 type CardInputOptions = {
-  errorMessages?: {
-    cardNumberLength?: string;
-    invalid?: string;
-    required?: string;
-  };
   options?: {
     formFieldStyle?: StyleProp<ViewStyle>;
     defaultStyling?: boolean;
@@ -30,6 +25,11 @@ type CardInputOptions = {
     textInputStyle?: StyleProp<TextStyle>;
   };
   placeholder?: string;
+  validationMessages?: {
+    cardNumberLength?: string;
+    invalid?: string;
+    required?: string;
+  };
   withAnimatedText?: boolean;
   withIcon?: boolean;
   withLabel?: boolean;
@@ -65,14 +65,14 @@ function detectCardBrand(cardNumber: string): string | null {
 // Luhn algorithm validator
 function validateCardNumber(
   value: string,
-  errorMessages?: Record<string, string | undefined>,
+  validationMessages?: Record<string, string | undefined>,
 ) {
-  if (!value) return errorMessages?.required || "Card Number is required";
+  if (!value) return validationMessages?.required || "Card Number is required";
 
   const sanitized = value.replace(/\s+/g, "");
   if (sanitized.length < 13 || sanitized.length > 19) {
     return (
-      errorMessages?.cardNumberLength || "Card Number must be 13-19 digits"
+      validationMessages?.cardNumberLength || "Card Number must be 13-19 digits"
     );
   }
 
@@ -87,15 +87,16 @@ function validateCardNumber(
     sum += digit;
     shouldDouble = !shouldDouble;
   }
-  if (sum % 10 !== 0) return errorMessages?.invalid || "Invalid card number";
+  if (sum % 10 !== 0)
+    return validationMessages?.invalid || "Invalid card number";
 
   return undefined; // valid card
 }
 
 export default function OPCardNumberInput({
-  errorMessages = { cardNumberLength: "", invalid: "", required: "" },
   options = {},
   placeholder = "",
+  validationMessages = { cardNumberLength: "", invalid: "", required: "" },
   withAnimatedText = true,
   withIcon = true,
   withLabel = false,
@@ -118,7 +119,6 @@ export default function OPCardNumberInput({
       autoComplete="cc-number"
       autoCorrect={false}
       defaultStyling={defaultStyling}
-      errorMessages={errorMessages}
       icon={getCardBrandIcon(cardType)}
       keyboardType="number-pad"
       labelStyle={labelStyle}
@@ -130,6 +130,7 @@ export default function OPCardNumberInput({
       placeholder={placeholder || "Card Number"}
       styling={{ formFieldStyle, inputStyle, textInputStyle }}
       validate={validateCardNumber}
+      validationMessages={validationMessages}
       withAnimatedText={withAnimatedText}
       withIcon={withIcon}
       withLabel={withLabel}

package/src/components/OPCvv2Input.tsx

@@ -3,10 +3,6 @@ import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import { FormField } from "./forms";
 
 type CardInputOptions = {
-  errorMessages?: {
-    invalid?: string;
-    required?: string;
-  };
   options?: {
     formFieldStyle?: StyleProp<ViewStyle>;
     defaultStyling?: boolean;
@@ -15,6 +11,10 @@ type CardInputOptions = {
     textInputStyle?: StyleProp<TextStyle>;
   };
   placeholder?: string;
+  validationMessages?: {
+    invalid?: string;
+    required?: string;
+  };
   withAnimatedText?: boolean;
   withIcon?: boolean;
   withLabel?: boolean;
@@ -23,17 +23,18 @@ type CardInputOptions = {
 
 function validateCvv(
   value: string,
-  errorMessages?: Record<string, string | undefined>,
+  validationMessages?: Record<string, string | undefined>,
 ) {
-  if (!value) return errorMessages?.required || "CVV is required";
-  if (!/^\d{3,4}$/.test(value)) return errorMessages?.invalid || "Invalid CVV";
+  if (!value) return validationMessages?.required || "CVV is required";
+  if (!/^\d{3,4}$/.test(value))
+    return validationMessages?.invalid || "Invalid CVV";
   return undefined;
 }
 
 export default function OPExpYearInput({
-  errorMessages = { invalid: "", required: "" },
   options = {},
   placeholder = "",
+  validationMessages = { invalid: "", required: "" },
   withAnimatedText = true,
   withIcon = true,
   withLabel = false,
@@ -54,7 +55,6 @@ export default function OPExpYearInput({
       autoComplete="cc-csc"
       autoCorrect={false}
       defaultStyling={defaultStyling}
-      errorMessages={errorMessages}
       icon={{ type: "material", name: "lock" }}
       keyboardType="number-pad"
       labelStyle={labelStyle}
@@ -63,6 +63,7 @@ export default function OPExpYearInput({
       placeholder={placeholder || "CVC"}
       styling={{ formFieldStyle, inputStyle, textInputStyle }}
       validate={validateCvv}
+      validationMessages={validationMessages}
       withAnimatedText={withAnimatedText}
       withIcon={withIcon}
       withLabel={withLabel}

package/src/components/OPExpInput.tsx

@@ -3,12 +3,6 @@ import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import { FormField } from "./forms";
 
 type CardInputOptions = {
-  errorMessages?: {
-    expired?: string;
-    format?: string;
-    invalidMonth?: string;
-    required?: string;
-  };
   options?: {
     formFieldStyle?: StyleProp<ViewStyle>;
     defaultStyling?: boolean;
@@ -17,6 +11,12 @@ type CardInputOptions = {
     textInputStyle?: StyleProp<TextStyle>;
   };
   placeholder?: string;
+  validationMessages?: {
+    expired?: string;
+    format?: string;
+    invalidMonth?: string;
+    required?: string;
+  };
   withAnimatedText?: boolean;
   withIcon?: boolean;
   withLabel?: boolean;
@@ -25,29 +25,35 @@ type CardInputOptions = {
 
 function validateExpiry(
   value: string,
-  errorMessages?: Record<string, string | undefined>,
+  validationMessages?: Record<string, string | undefined>,
 ) {
-  if (!value) return errorMessages?.required || "Expiry is required";
+  if (!value) return validationMessages?.required || "Expiry is required";
 
   const match = /^(\d{2})\/(\d{2})$/.exec(value);
-  if (!match) return errorMessages?.format || "Use MM/YY format";
+  if (!match) return validationMessages?.format || "Use MM/YY format";
 
   const month = parseInt(match[1], 10);
   const year = 2000 + parseInt(match[2], 10);
 
-  if (month < 1 || month > 12) return errorMessages?.invalid || "Invalid month";
+  if (month < 1 || month > 12)
+    return validationMessages?.invalidMonth || "Invalid month";
 
   const now = new Date();
   const expiry = new Date(year, month);
-  if (expiry <= now) return errorMessages?.expired || "Card expired";
+  if (expiry <= now) return validationMessages?.expired || "Card expired";
 
   return undefined;
 }
 
 export default function OPExpYearInput({
-  errorMessages = { expired: "", format: "", invalidMonth: "", required: "" },
   options = {},
   placeholder = "",
+  validationMessages = {
+    expired: "",
+    format: "",
+    invalidMonth: "",
+    required: "",
+  },
   withAnimatedText = true,
   withIcon = true,
   withLabel = false,
@@ -68,7 +74,6 @@ export default function OPExpYearInput({
       autoComplete="cc-exp"
       autoCorrect={false}
       defaultStyling={defaultStyling}
-      errorMessages={errorMessages}
       icon={{ type: "material", name: "calendar-blank" }}
       keyboardType="number-pad"
       labelStyle={labelStyle}
@@ -77,6 +82,7 @@ export default function OPExpYearInput({
       placeholder={placeholder || "MM/YY"}
       styling={{ formFieldStyle, inputStyle, textInputStyle }}
       validate={validateExpiry}
+      validationMessages={validationMessages}
       withAnimatedText={withAnimatedText}
       withIcon={withIcon}
       withLabel={withLabel}

package/src/components/OPExpMonthInput.tsx

@@ -3,7 +3,6 @@ import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import { FormField } from "./forms";
 
 type CardInputOptions = {
-  errorMessages?: { format?: string; invalid?: string; required?: string };
   options?: {
     formFieldStyle?: StyleProp<ViewStyle>;
     defaultStyling?: boolean;
@@ -12,6 +11,7 @@ type CardInputOptions = {
     textInputStyle?: StyleProp<TextStyle>;
   };
   placeholder?: string;
+  validationMessages?: { format?: string; invalid?: string; required?: string };
   withAnimatedText?: boolean;
   withIcon?: boolean;
   withLabel?: boolean;
@@ -20,24 +20,25 @@ type CardInputOptions = {
 
 function validateExpiryMonth(
   value: string,
-  errorMessages?: Record<string, string | undefined>,
+  validationMessages?: Record<string, string | undefined>,
 ) {
-  if (!value) return errorMessages?.required || "Month is required";
+  if (!value) return validationMessages?.required || "Month is required";
 
   const match = /^(\d{2})$/.exec(value);
-  if (!match) return errorMessages?.format || "Use MM format";
+  if (!match) return validationMessages?.format || "Use MM format";
 
   const month = parseInt(value, 10);
 
-  if (month < 1 || month > 12) return errorMessages?.invalid || "Invalid month";
+  if (month < 1 || month > 12)
+    return validationMessages?.invalid || "Invalid month";
 
   return undefined;
 }
 
 export default function OPExpMonthInput({
-  errorMessages = { format: "", invalid: "", required: "" },
   options = {},
   placeholder = "",
+  validationMessages = { format: "", invalid: "", required: "" },
   withAnimatedText = true,
   withIcon = true,
   withLabel = false,
@@ -58,7 +59,6 @@ export default function OPExpMonthInput({
       autoComplete="cc-exp-month"
       autoCorrect={false}
       defaultStyling={defaultStyling}
-      errorMessages={errorMessages}
       icon={{ type: "material", name: "calendar-blank" }}
       keyboardType="number-pad"
       labelStyle={labelStyle}
@@ -67,6 +67,7 @@ export default function OPExpMonthInput({
       placeholder={placeholder || "MM"}
       styling={{ formFieldStyle, inputStyle, textInputStyle }}
       validate={validateExpiryMonth}
+      validationMessages={validationMessages}
       withAnimatedText={withAnimatedText}
       withIcon={withIcon}
       withLabel={withLabel}

package/src/components/OPExpYearInput.tsx

@@ -3,7 +3,6 @@ import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import { FormField } from "./forms";
 
 type CardInputOptions = {
-  errorMessages?: { format?: string; expired?: string; required?: string };
   options?: {
     formFieldStyle?: StyleProp<ViewStyle>;
     defaultStyling?: boolean;
@@ -12,6 +11,7 @@ type CardInputOptions = {
     textInputStyle?: StyleProp<TextStyle>;
   };
   placeholder?: string;
+  validationMessages?: { expired?: string; format?: string; required?: string };
   withAnimatedText?: boolean;
   withIcon?: boolean;
   withLabel?: boolean;
@@ -20,25 +20,25 @@ type CardInputOptions = {
 
 function validateExpiryYear(
   value: string,
-  errorMessages?: Record<string, string | undefined>,
+  validationMessages?: Record<string, string | undefined>,
 ) {
-  if (!value) return errorMessages?.required || "Year is required";
+  if (!value) return validationMessages?.required || "Year is required";
 
   const match = /^(\d{2})$/.exec(value);
-  if (!match) return errorMessages?.format || "Use YY format";
+  if (!match) return validationMessages?.format || "Use YY format";
 
   const year = 2000 + parseInt(value, 10);
   const currentYear = new Date().getFullYear();
 
-  if (year <= currentYear) return errorMessages?.expired || "Card expired";
+  if (year <= currentYear) return validationMessages?.expired || "Card expired";
 
   return undefined;
 }
 
 export default function OPExpYearInput({
-  errorMessages = { format: "", expired: "", required: "" },
   options = {},
   placeholder = "",
+  validationMessages = { expired: "", format: "", required: "" },
   withAnimatedText = true,
   withIcon = true,
   withLabel = false,
@@ -59,7 +59,6 @@ export default function OPExpYearInput({
       autoComplete="cc-exp-year"
       autoCorrect={false}
       defaultStyling={defaultStyling}
-      errorMessages={errorMessages}
       icon={{ type: "material", name: "calendar-blank" }}
       keyboardType="number-pad"
       labelStyle={labelStyle}
@@ -68,6 +67,7 @@ export default function OPExpYearInput({
       placeholder={placeholder || "YY"}
       styling={{ formFieldStyle, inputStyle, textInputStyle }}
       validate={validateExpiryYear}
+      validationMessages={validationMessages}
       withAnimatedText={withAnimatedText}
       withIcon={withIcon}
       withLabel={withLabel}

package/src/components/OPHolderNameInput.tsx

@@ -3,9 +3,6 @@ import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import { FormField } from "./forms";
 
 type CardInputOptions = {
-  errorMessages?: {
-    required: string;
-  };
   options?: {
     formFieldStyle?: StyleProp<ViewStyle>;
     defaultStyling?: boolean;
@@ -14,6 +11,9 @@ type CardInputOptions = {
     textInputStyle?: StyleProp<TextStyle>;
   };
   placeholder?: string;
+  validationMessages?: {
+    required: string;
+  };
   withAnimatedText?: boolean;
   withIcon?: boolean;
   withLabel?: boolean;
@@ -22,17 +22,18 @@ type CardInputOptions = {
 
 function validateCardholderName(
   value: string,
-  errorMessages?: Record<string, string | undefined>,
+  validationMessages?: Record<string, string | undefined>,
 ) {
-  if (!value) return errorMessages?.required || "Cardholder name is required";
+  if (!value)
+    return validationMessages?.required || "Cardholder name is required";
 
   return undefined; // valid cardholder name
 }
 
 export default function OPHolderNameInput({
-  errorMessages = { required: "" },
   options = {},
   placeholder = "",
+  validationMessages = { required: "" },
   withAnimatedText = true,
   withIcon = true,
   withLabel = false,
@@ -53,13 +54,13 @@ export default function OPHolderNameInput({
       autoComplete="cc-name"
       autoCorrect={false}
       defaultStyling={defaultStyling}
-      errorMessages={errorMessages}
       icon={{ type: "material", name: "account" }}
       labelStyle={labelStyle}
       name="cardholderName"
       placeholder={placeholder || "Cardholder Name"}
       styling={{ formFieldStyle, inputStyle, textInputStyle }}
       validate={validateCardholderName}
+      validationMessages={validationMessages}
       withAnimatedText={withAnimatedText}
       withIcon={withIcon}
       withLabel={withLabel}